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


var zxGallery = new Class({
    options: {
        gallery: 'gallery',                 // Gallery Div Id
        thumbs : 'div#gallery .ThumbImage', // Thumbnails
        wrapper: 'galleryWrap',             // Gallery Wrapper
        el2delete: 'div#gallery label',     // elements 2 delete
        ajaxPath:'/ajax/product_image.php', // url for AjaxCall
        largeImg: 'DisplayProductImage',    // Image Container
        duration: 500,                      // Timer for image update
        timerDuration: 1000,                 // for first run
        thumbFocusOpacity: 1,
        thumbBaseOpacity: 0.65,
        arrows: true,
        left_arrow:{
            src:'/skin/igor-portnoi/images/index/arrow_back.gif',
            id: 'galleryLeftArrow'
        },
        right_arrow: {
            src:'/skin/igor-portnoi/images/index/arrow_forw.gif',
            id: 'galleryRightArrow'
        },
        arrow_width: 45,
        scrollPerPx: 1
    },

    initialize:function(options){
        this.setOptions(options);
        if ( !$(this.options.gallery) ) return '';
        this.addWrapperDiv();
        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 );

        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.gallery).setStyles({'width':width+'px','clear':'none'});

        var scroll = new Fx.Scroll( this.options.gallery, {
            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 wrapper = new Element('div').setProperty('id',this.options.wrapper).injectInside(this.options.gallery);

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

        var thmbs = $$( this.options.thumbs );
        //copy thumbs
		var i=0;
		 var width = 0;
        thmbs.each(function(el){ 
							el.injectInside(wrapper); 
							i++;
							width=width+el.getSize().size.x+el.getStyle('margin-left').toInt() + el.getStyle('margin-right').toInt();
			});
		
        if (window.ie6) width += 1;
        wrapper.setStyle('width', 200*i + 'px');
        wrapper.setStyle('height', 190 + 'px');

        $( this.options.gallery ).setStyles({'overflow-x':'hidden'});
    },

    bindSlider: function(){
        var scroller = new Scroller(this.options.gallery, {area: 75, velocity: .9});
        $(this.options.gallery).addEvent('mouseover', scroller.start.bind(scroller));
        $(this.options.gallery).addEvent('mouseout',  scroller.stop.bind(scroller));
        $(this.options.gallery).setStyle('cursor', 'e-resize');

        var timer = 0
        $$( this.options.thumbs ).each(function(img){
            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);
                $(img).style.cursor = 'pointer';
            }.bind(this));

            $(img).addEvent('mouseout',function(){
                $(img).setOpacity(this.options.thumbBaseOpacity);
            }.bind(this));

            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));
    }
});