(function(){
	var smallSlideClass= new Class({
		initialize: function(){
			this.leftButton=$('cmsns_collection_move_left');
			this.rightButton=$('cmsns_collection_move_right');

			this.elements=[];
			this.position=0;
			
			this.smallSlider=$('cmsns_small_inner_div');
			this.bigSlider=$('cmsns_big_inner_div');
			
			this.bigSlideTween=new Fx.Tween(this.bigSlider,{
				'property':'left',
				'unit':'px',
				'duration':250
			});
		},

		run: function(e){
				this.leftButton.addEvent('click',this.leftButtonListener.bind(this))
				this.rightButton.addEvent('click',this.rightButtonListener.bind(this))
	
				$$('.collection_small_element_box').each(function(e){
					this.elements.push(new elementClass(e,this.elements.length,this));
					e.dispose();
				}.bind(this));
				
				if (this.elements.length) {
					this.elements[0].select();
				}
		},
		buttonListener: function(opt){
			opt.event.stop();
		},
		leftButtonListener: function(e){
			this.elements[this.position].move('right');
			this.buttonListener({
				button:'left',
				event:e
			});
		},
		rightButtonListener: function(e){
			this.elements[this.position].move('left');
			this.buttonListener({
				button:'right',
				event:e
			});
		}
	});

	var elementClass= new Class({
		initialize: function(element,position,slideObj){
			this.element=element;
			this.id=element.getAttribute('rel');
			this.imageUrl='/html/themes/default/images/products/';
			
			this.position=position,
			this.slideObj=slideObj;
			this.descriptionToShow=['cmsns_product_description_','cmsns_product_colors_'];
			
			this.sliderSmall=slideObj.smallSlider;
			this.sliderBig=slideObj.bigSlider;
			
			this.widthSmall=135;
			this.widthBig=285;
		},
		select: function(){
			this.slideObj.elements[this.slideObj.position].descriptionHide();
			this.createSmall();
			this.slideObj.position=this.position;
			this.createBig();
			this.descriptionShow();
		},
		move: function(side){
			this.slideObj.bigSlideTween.addEvent('complete',function(){
				var s=(side=='left')?1:-1;
				var pos= this.position+s;
				if(pos<0) pos=this.slideObj.elements.length-1;
				else if(pos>=this.slideObj.elements.length)	pos=0;
				
				this.slideObj.elements[pos].select();
				this.slideObj.bigSlideTween.removeEvents('complete');
			}.bind(this));
			
			if(this.smallSlideTween) this.smallSlideTween.addEvent('complete',function(){
				if(this.smallSlideTween) this.smallSlideTween.removeEvents('complete');
			}.bind(this));
			
			var bigPos=this.sliderBig.getStyle('left').toInt();
			if(side=='left'){
				this.slideObj.bigSlideTween.start(bigPos,bigPos-this.widthBig);
				this.smallSlideTween.start(this.widthSmall,0);
			} else {
				this.slideObj.bigSlideTween.start(bigPos,bigPos+this.widthBig);
				this.smallSlideTween.start(this.widthSmall,2*this.widthSmall);
			}

		},
		createSmall: function(){
			var smallElements='<div id="pusherDiv" style="float:left; height:100px; width:'+this.widthSmall+'px;"></div>';
			for(var i=-3;i<=3;i++){
				
				var pos=this.position+i;
				var len=this.slideObj.elements.length;
				if(len>2){
					if(pos<0) pos=len+pos;
					else if(pos>=len) pos=pos-len;
				} else if(len>1){
					if(pos<0) {
						pos=len+pos;
						if(pos==-1) pos=1;
					} else if(pos>=len) {
						pos=pos-len;
						if(pos==2) pos=0;
					}
				} else {
					pos=0;
				}
				if(i==0){	// two elements under big element
					smallElements+=''+
					'<div class="collection_small_element_box">'+
					'	<img src="/html/img/products/thumbs/4_'+this.slideObj.elements[pos].id+'.jpg" />'+
					'</div>';
				}
				smallElements+=''+
				'<div class="collection_small_element_box">'+
				'	<img src="/html/img/products/thumbs/4_'+this.slideObj.elements[pos].id+'.jpg" />'+
				'</div>';
			}

			this.sliderSmall.innerHTML=smallElements;
			this.sliderSmall.setStyle('left',''+(-2*this.widthSmall)+'px');
			
			//if(this.smallSlideTween) this.smallSlideTween.stop();
			this.smallSlideTween=new Fx.Tween($('pusherDiv'),{
				'property':'width',
				'unit':'px',
				'duration':250
			});
		},
		createBig: function(){
			var elementsBig='';
			for(var i=-1;i<=1;i++){
				var pos=this.position+i;
				if(pos<0) pos=this.slideObj.elements.length+i;
				else if(pos>=this.slideObj.elements.length)	pos=pos-this.slideObj.elements.length;
				
				elementsBig+=''+
				'<div class="collection_big_element_box">'+
				'	<img src="/html/img/products/thumbs/3_'+this.slideObj.elements[pos].id+'.jpg" />'+
				'</div>';
			}
			
			this.sliderBig.innerHTML=elementsBig;
			this.sliderBig.setStyle('left',''+(-this.widthBig)+'px');
		},
		descriptionHide: function(){
			this.descriptionToShow.each(function(desc){
				$(desc+this.id).setStyle('display','none');
			}.bind(this));
		},
		descriptionShow: function(){
			this.descriptionToShow.each(function(desc){
				if($(desc+this.id).tagName.toLowerCase()=='div') $(desc+this.id).setStyle('display','block');
				else if($(desc+this.id).tagName.toLowerCase()=='span') $(desc+this.id).setStyle('display','inline');
			}.bind(this));
		}
	});


	var smallDrag;
	window.addEvent('domready',function (){
		smallSlide= new smallSlideClass();
		smallSlide.run()
	});
})();