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


var zxGallery = new Class({
    options: {
        gallery: 'Band',                 // Gallery Div Id
        thumbs : 'div#Band .ThumbImage', // Thumbnails
        wrapper: 'BandWrap',             // Gallery Wrapper
        el2delete: 'div#Band label',     // elements 2 delete
        ajaxPath:'/ajax/product_image.php', // url for AjaxCall
        largeImg: 'DisplayProductImage',    // Image Container
        largeImgPic: 'Image',    // Image Container
		headerDest: 'PageHeader',
		headerSource: 'Title',
		loader:'Loader',
		src:'/make_image.jpg?',
		style: 1,
        duration: 500,                      // Timer for image update
        timerDuration: 500,                 // for first run
        thumbFocusOpacity: 1,
        thumbBaseOpacity: 0.65,

        scrollPerPx: 5
    },

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

        this.addWrapperDiv();
        this.bindAction();
    },

    setOptions:function(options){
        this.options = Object.extend({ }, options || this.options || {} );
    },
    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 );
        thmbs.each(function(el){ el.injectInside(wrapper); });
        $( this.options.gallery ).setStyles({'overflow':'hidden'});
    },

    bindAction: function(){
       
        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 Fx.Style(this.options.headerDest, 'opacity', {
					duration: this.options.duration,
					transition: Fx.Transitions.linear
				}).start(1,0);
				new Fx.Style(this.options.largeImgPic, 'opacity', {
					duration: this.options.duration,
					transition: Fx.Transitions.linear
				}).start(1,0);
				new Fx.Style(this.options.largeImg, 'opacity', {
					duration: this.options.duration,
					transition: Fx.Transitions.linear,
					onStart:function(){ $$('.MainContent').addClass('loading'); },
					onComplete: function(){
						//if($(this.options.loader)){
						//	$(this.options.loader).remove();
						//}
						//var loader=new Element('div').setProperty('id',this.options.loader).injectBefore(this.options.largeImg);
						new Ajax( this.options.ajaxPath, {
							method: 'post',
							postBody: 'id='+img.getChildren()[0].id,
							onComplete: function(rsp){
								$(this.options.largeImg).setHTML(rsp);
								new Fx.Style(this.options.largeImgPic, 'opacity', {
									duration: this.options.duration,
									transition: Fx.Transitions.linear,
									onComplete: function(){
										new Fx.Style(this.options.largeImg, 'opacity', {
											duration: this.options.duration,
											transition: Fx.Transitions.linear,
											onCompelte: function(){ $$('.MainContent').removeClass('loading'); }
										}).start(0,1);
									}.bind(this)
								}).start(0,1);
								
								if ( $(this.options.headerSource).innerHTML ){									
									var Source=$(this.options.headerSource);									
									var el=$(this.options.headerDest);
									var src = this.options.src+'s='+this.options.style+'&t='+encodeURIComponent(Source.innerHTML);
									 el.setHTML('');
									 var img = new Element('img').setProperties({'src':src,'alt':Source.innerHTML,'title':Source.innerHTML});
									Source.setHTML('');
									new Fx.Style(this.options.headerDest, 'opacity', {
										duration: this.options.duration,
										transition: Fx.Transitions.linear
									}).start(0,1);
									img.injectInside(el);
								}							
								
							}.bind(this)
						}).request();
					}.bind(this)
                }).start(1,0); 
            }.bind(this));

        }.bind(this));
    }
});