/*
zxGallery.js
@author: Azim Zakhidov
@description: Horizontal Gallery
*/
window.addEvent('domready', function(){
    var Gallery =  new zxGallery();
});

var zxGallery = new Class({
    options: {
        gallery: 'hook-reward-brands',      // Gallery Div Id
        thumbs : '#hook-reward-brands li',  // Thumbnails
        wrapper: 'reward-wrap',             // Gallery Wrapper
        el2delete: null,                    // elements 2 delete
        ajaxPath: null,                     // url for AjaxCall
        largeImg: '',                       // Image Container
        duration: 500,                      // Timer for image update
        timerDuration: 100,                 // for first run
        thumbFocusOpacity: 1,
        thumbBaseOpacity: 1,                // 0.65
        arrows: false,
        left_arrow:{
            src:'/skins/ecco/customer/images/arrow-left.gif',
            id: 'reward-left-arrow'
        },
        right_arrow: {
            src:'/skins/ecco/customer/images/arrow-right.gif',
            id: 'reward-left-arrow'
        },
        arrow_width: 40,
        arrow_inside: true,
        scrollPerPx: 10
    },

    initialize:function(options){
        this.setOptions(options);
        if ( !$(this.options.gallery) ) return '';

        if (this.addWrapperDiv()||window.ie6){
            this.bindSlider();
            this.addArrows();
        }
    },

    setOptions:function(options){
        this.options = Object.extend({ }, options || this.options || {} );
    },

    addArrows: function(){
        if (!this.options.arrows) return '';
        var aLeftDiv = new Element('div').setProperties ({'id':this.options.left_arrow.id +'Div','class':'ArrowDivs'});
        var aRightDiv = new Element('div').setProperties({'id':this.options.right_arrow.id+'Div','class':'ArrowDivs'});

        var aLeft  = new Element('img').setProperties( this.options.left_arrow  ).injectInside( aLeftDiv  );
        var aRight = new Element('img').setProperties( this.options.right_arrow ).injectInside( aRightDiv );

        if (this.options.arrow_inside){
            aLeftDiv.injectTop( $(this.options.gallery) );
            aRightDiv.injectInside( $(this.options.gallery) );
        }else{
            aLeftDiv.injectBefore( $(this.options.gallery) );
            aRightDiv.injectAfter( $(this.options.gallery) );
        }

        var width = $(this.options.gallery).getSize().size.x - this.options.arrow_width * 2;
        $(this.options.wrapper+'Div').setStyles({'width':width+'px','clear':'none','overflow':'hidden','float':'left'});

        var scroll = new Fx.Scroll( this.options.wrapper+'Div', {
            duration: 10,
            transition: Fx.Transitions.linear,
            onStart: function(){
                scroll.options.duration=Math.abs(scroll.to[0]-scroll.from[0])*this.options.scrollPerPx;
            }.bind(this)
        });
        aLeftDiv.addEvent('mouseover', function(){ scroll.toLeft(); });
        aLeftDiv.addEvent('mouseout',  function(){ scroll.stop(); });

        aRightDiv.addEvent('mouseover', function(){ scroll.toRight(); });
        aRightDiv.addEvent('mouseout',  function(){ scroll.stop(); });

    },

    addWrapperDiv: function(){
        var wrapper2 = new Element('div').setProperty('id',this.options.wrapper+'Div').injectInside(this.options.gallery);
        var wrapper = new Element('div').setProperty('id',this.options.wrapper).injectInside(wrapper2);

        // remove the trash
        if (this.options.el2delete) $$(this.options.el2delete).each(function(el){ el.remove() });

        var thmbs = $$(this.options.thumbs);
        //copy thumbs
        var wrapWidth=0;
        thmbs.each(function(el){
            el.injectInside(wrapper);
            wrapWidth += el.getSize().size.x + el.getStyle('margin-left').toInt() + el.getStyle('margin-right').toInt();
        });
        //resize wraper
        if (window.ie6) wrapWidth += thmbs.length;

        wrapper.setStyle('width',wrapWidth+'px');
        wrapper2.setStyle('overflow','hidden');

        $(this.options.gallery).setStyles({'overflow':'hidden'});
        return $(this.options.gallery).getSize().size.x<wrapWidth;
    },

    bindSlider: function(){
        var movDiv = this.options.wrapper+'Div'; //this.options.gallery
        var scroller = new Scroller(movDiv, {area: 100, velocity: .075});
        $(movDiv).addEvent('mouseenter', scroller.start.bind(scroller));
        $(movDiv).addEvent('mouseleave', scroller.stop.bind(scroller));
        $(movDiv).setStyle('cursor', 'e-resize');

        return null;
        var timer = 0
        $$( this.options.thumbs ).each(function(img){
            $(img).setStyle('cursor','pointer');
            if (this.options.thumbFocusOpacity && this.options.thumbFocusOpacity!=this.options.thumbBaseOpacity) {
                timer += this.options.timerDuration;
                introFx = new Fx.Style(img, 'opacity', {duration: this.options.timerDuration, transition: Fx.Transitions.linear});
                introFx.start.delay(timer, introFx, this.options.thumbBaseOpacity);
                $(img).addEvent('mouseover',function(){ $(img).setOpacity(this.options.thumbFocusOpacity); }.bind(this));
                $(img).addEvent('mouseout',function(){ $(img).setOpacity(this.options.thumbBaseOpacity); }.bind(this));
            }
            if (this.options.ajaxPath){
                img.addEvent('click',function(){
                    new Ajax( this.options.ajaxPath, {
                        method: 'post',
                        postBody: 'id='+img.getChildren()[0].id,
                        onComplete: function(rsp){
                            new Fx.Style( this.options.largeImg, 'opacity', {
                                duration: this.options.duration,
                                transition: Fx.Transitions.linear,
                                onComplete: function(){
                                    $(this.options.largeImg).innerHTML = rsp;
                                    new Fx.Style(this.options.largeImg, 'opacity', {
                                        duration: this.options.duration,
                                        transition: Fx.Transitions.linear
                                    }).start(0,1);
                                    Lightbox.init();
                                }.bind(this)
                            }).start(1,0);
                        }.bind(this)
                    }).request();
                }.bind(this));
            }
        }.bind(this));
    }
});