var tellusSildeFader = Class.create(
{
	initialize: function(obj)
	{
		var self = this;
		this.obj = obj;
		
		this.currentImg = 0;
		this.currentFadeImg = 0;
		
		this.allImages = $$('#'+this.obj.sliderUl+' li');
		this.allFaderImages = $$('#'+this.obj.faderUl+' li');
		this.numOfImages = this.allImages.length;
		
		this.allFaderImages.each(function(elm,i){
			
			if(i != 0){
				$(elm).setStyle({
					'display': 'none'
				});
			}else{
				$(elm).setStyle({
					'display': 'block'
				});
			}
			
		});
		
		this.ulWidth = 0;
		
		this.allImages.each(function(elm,i){
			self.ulWidth = ((self.ulWidth) + ($(elm).getWidth()));
			
			
			$(elm).observe('click',function(){
				self.fadeAppear(i);
				self.checkUlWidth();
				
				if(self.isOnTimer){
					self.isOnTimer = false;
					clearInterval(self.t1);
					self.currentImg = self.currentFadeImg;
				}
			});
		});

		$(this.obj.sliderUl).setStyle({
			'width': this.ulWidth+'px'
		});
		
		$(this.obj.nextBtn).observe('click',function(ev){
				Event.stop(ev);
				self.slide('+',1);	
		});
		
		$(this.obj.previusBtn).observe('click',function(ev){
				Event.stop(ev);
				self.slide('-',1);
		});
		
		this.isOnTimer = true;
		
		this.t1 = setInterval(function(t)
		{
			self.slide('+',1);
			
		}.bind(this), 5000);
		
		
		this.isAnimating = false;
		this.isFaderAnimating = false;
	},
	
	fadeAppear: function(i){
		
		var self = this;
		if(self.currentFadeImg != i){
			if(self.isFaderAnimating != true){
				
				self.isFaderAnimating = true;
				$(self.allFaderImages[i]).appear({ duration: 1.0 });
				$(self.allImages[i]).addClassName('active');
				
				$(self.allFaderImages[self.currentFadeImg]).fade({ duration: 1.0, afterFinish: function(){ self.isFaderAnimating = false; }});
				$(self.allImages[self.currentFadeImg]).removeClassName('active');
				
				self.currentFadeImg = i;
			}
		}
		
	},
	
	checkUlWidth: function(){
		var self = this;
		
		var currentLeftPosition = $(self.obj.sliderUl).getStyle('left');
		if(!self.isOnTimer){
			var leftPosition = -(self.currentImg*50)+'px';
		}else{
			var leftPosition = -(self.currentFadeImg*50)+'px';	
		}
		if(currentLeftPosition != leftPosition){
			$(self.obj.sliderUl).setStyle({
				'left': leftPosition
			});
		}
		
		/*if($(self.obj.sliderUl).getWidth() != -(self.currentImg*50)){
			$(self.obj.sliderUl).setStyle({
				'width': -(self.currentImg*50)+'px'
			});
		}*/
		
	},
	
	clearEffects: function(i,scope)
	{
		Effect.Queues.get(scope+i).each(function(eff){
			eff.cancel();
		});
	},
	
	slide: function(move,number){
		
		var self = this;
		var moveTo = 0;
		var imgWidth = 50;
		var currentImgTemp = self.currentImg;
		
		if(!self.isAnimating){
			
			if(move == '+'){
				if(self.currentImg == (self.numOfImages-1)){

					self.currentImg = 0;
					moveTo = ((imgWidth)*-(this.numOfImages-1));
					
					if(!self.isOnTimer){
						moveTo = (moveTo - 10);
					}
					
				}else{

					self.currentImg += 1;
					moveTo = (imgWidth*1);
				}
				
				if(($(this.allImages[currentImgTemp]).getWidth()) > imgWidth){
					if(!self.isOnTimer){
					moveTo = (moveTo + 10);
					}
					
				}
			}
			
			if(move == '-'){
				if(self.currentImg == 0){

					self.currentImg = (self.numOfImages-1);
					moveTo = (((imgWidth)*(self.numOfImages-1)));
					if(!self.isOnTimer){
						moveTo = (moveTo + 10);
					}
				}else{

					self.currentImg -= 1;
					moveTo = (imgWidth*-1);
					
				}
				
				if($(this.allImages[self.currentImg]).getWidth() > imgWidth){
					
					if(!self.isOnTimer){
						moveTo = (moveTo - 10);
					}
					
				}
				
			}
			
			if(move == 'num'){
				if(number != self.currentImg){
					moveTo = ((number - self.currentImg)*imgWidth);
					self.currentImg = number;
				}
			}
			
			var y = 0;
			var x = moveTo;
			var elm = $(self.obj.sliderUl);
			self.isAnimating = true;
			
			new Effect.Move(elm,
			{
					x: -x,
					y: y,
					duration: 0.5,
					mode: 'relative',
					afterFinish: function(){
						self.isAnimating = false;
						if(self.isOnTimer){
							//self.checkUlWidth();
							self.fadeAppear(self.currentImg);
							self.checkUlWidth();
						}
					}
	        });
		}
	}
});

Event.observe(window, 'load', function()
{
	if($('imgSelectImages')){
		var newTellusSildeFader = new tellusSildeFader(
		{
			sliderUl : 'imgSelectImages',
			nextBtn : 'imgSelectBtnRight',
			previusBtn : 'imgSelectBtnLeft',
			faderUl :  'articleFaderImgContainer'
			
		});
	}
});