Shingles = null;
var Shingles = Class.create(
{

	initialize: function(ContainerID, HandleTagName, OptionsObj)
	{
	/*	if(!$(ContainerID))
		{
			return false;
		}*/
		this.container = ContainerID;
		this.Options = new Object();
		this.Options = OptionsObj;
		this.handleTag = HandleTagName;
		if(OptionsObj.direction == 'vertical')
		{
			this.direction = 1;
			$$('div.shingleContent').each(function(shingle)
			{
				shingle.setStyle({ 'width' : (OptionsObj.contentWidth)+'px' });	
			});			
		}
		else
		{
			this.direction = 0;
			$$('div.shingleContent').each(function(shingle)
			{
			
				shingle.setStyle({ 'height' : (OptionsObj.contentHeight)+'px' });	
			});
		}
		

		this.prepareShingles(HandleTagName);
		this.onFinish();
		
		
	},
	
	prepareShingles: function(HandleTagName)
	{
		var handles = $(this.container).getElementsByTagName(HandleTagName);
		for ( i=0; i < handles.length; i++ )
		{
			var self = this;
			if(this.direction == 0)
			{
				handles[i].style.height = self.Options.handleHeight+'px';
			}
			else
			{
				handles[i].style.width = self.Options.handleWidth+'px';
			}
			
		}
		var shingelsArray = new Array();
		var shingelOrigPos = new Array();
		var shingels = $(this.container).getElementsByTagName('li');
		var shingelsCount = shingels.length;
		if(this.direction == 0)
		{
			var Zindexes = $R(1, shingelsCount).toArray().reverse();
			var ShingelX = 0;
		}
		else
		{
			var Zindexes = $R(1, shingelsCount).toArray();
			var ShingelX = this.Options.contentWidth+this.Options.handleWidth;
		}
	
		var ShingelY = 0;
	
		for ( i=0; i < shingelsCount; i++ )
		{
			shingelsArray.push(shingels[i].id);
			$(shingels[i].id).setStyle({ 'zIndex' : Zindexes[i], 'position' : 'absolute', 'left' : ShingelX+'px', 'top' : ShingelY+'px' });
			if(this.direction == 0)
			{
				shingelOrigPos.push(ShingelY+'px');
				ShingelY = ShingelY + self.Options.handleHeight;				
			}
			else
			{
				shingelOrigPos.push(ShingelX+'px');
				ShingelX = ShingelX + self.Options.handleWidth;
				$(shingels[0].id).setStyle({ 'zIndex' : 1, 'position' : 'absolute', 'left' : '0px', 'top' : ShingelY+'px' });
			}

		}
		
		$(shingelsArray.first()).addClassName('first active');
		$(shingelsArray.last()).addClassName('last');
		if(this.direction == 0)
		{
			$(this.container).setStyle({ 'height' : (this.Options.contentHeight)+ShingelY+'px' });
		}
		else
		{
			
			$(this.container).setStyle({ 'width' : (ShingelX)+'px' });
		}
		
		
		if(this.Options.trigger)
		{
			var slideTrigger = this.Options.trigger;
		}
		else
		{
			var slideTrigger = 'mouseover';
		}
	
		var self = this;
		shingelsArray.each(function(handle)
		{
			
			Event.observe(handle, slideTrigger, function()
			{
				self.checkShingle(this.id, shingelsArray);
			})	
		});
		
	},
	
	checkShingle: function(shingleID, shingelsArray)
	{
		if(this.onActive == 1) { return false; }
		if(this.onActive == 0)
		{
			var slideLength = this.Options.contentHeight;
			var slidesCount = $(this.container).getElementsByTagName('li');
			var openslide = $(this.container).getElementsByClassName('active')[0].id;
			var openslideZ = $(openslide).getStyle('zIndex');
			var newslideZ = $(shingleID).getStyle('zIndex');
			var diffShingels = 1;
			
			if(this.direction == 1)
			{
				var XslideLength = this.Options.contentWidth+this.Options.handleWidth;
				var YslideLength = 0;
			}
			else
			{
				var XslideLength = 0;
				var YslideLength = ((this.Options.contentHeight)-(this.Options.handleHeight/2))-2;
				
			}
			
			if(this.Options.duration)
			{
				var slideDur = this.Options.duration;
				
			}
			else
			{
				var slideDur = 0.3;
			}
			
			if ( openslideZ > newslideZ )
			{
				
				if( (openslideZ - newslideZ) == 1)
				{
					$(openslide).removeClassName('active');
							
					if(this.direction == 0)
					{
						
						new Effect.Move(openslide, 
						{ 
							queue: 'end',
							x: -XslideLength, 
							y: -YslideLength, 
							duration: slideDur, 
							transition: Effect.Transitions.sinoidal,
							beforeStart: this.onActivated,
							afterFinish: this.onFinish
						});
					}
					else
					{
						new Effect.Move(openslide, 
						{ 
							queue: 'end',
							x: XslideLength, 
							y: -YslideLength, 
							duration: slideDur, 
							transition: Effect.Transitions.sinoidal,
							beforeStart: this.onActivated,
							afterFinish: this.onFinish
						});
					}
					
					
					$(shingleID).addClassName('active');
				}
				else 
				{
					
					$(openslide).removeClassName('active');
					if(this.direction == 0)
					{
						for ( i = shingelsArray.indexOf(openslide); i < shingelsArray.indexOf(shingleID); i++)
						{
							new Effect.Move(shingelsArray[i], 
							{ 
								queue: 'first',
								x: XslideLength, 
								y: -YslideLength, 
								duration: slideDur, 
								transition: Effect.Transitions.sinoidal,
								beforeStart: this.onActivated,
								afterFinish: this.onFinish
							});					
						
						}
					}
					else
					{
						for ( i = shingelsArray.indexOf(shingleID)+1; i < shingelsArray.indexOf(openslide)+1; i++) //<---- VERTICAL ENDRING
						{
							
							new Effect.Move(shingelsArray[i], 
							{ 
								queue: 'end',
								x: XslideLength, 
								y: -YslideLength, 
								duration: slideDur, 
								transition: Effect.Transitions.sinoidal,
								beforeStart: this.onActivated,
								afterFinish: this.onFinish
							});					
						
						}						
					}
					$(shingleID).addClassName('active');
	
				}
				
			}
			else if ( openslideZ < newslideZ )
			{
				if ( ( newslideZ - openslideZ) == 1)
				{
					$(openslide).removeClassName('active');
					$(shingleID).addClassName('active');
					if(this.direction == 0)
					{
						
						new Effect.Move(shingleID, 
						{ 
							queue: 'end',
							x: XslideLength, 
							y: YslideLength, 
							duration: slideDur, 
							transition: Effect.Transitions.sinoidal,
							beforeStart: this.onActivated,
							afterFinish: this.onFinish
						});
					}
					else
					{
						//alert('hello');
						new Effect.Move(shingleID, 
						{ 
							queue: 'end',
							x: -XslideLength, 
							y: YslideLength, 
							duration: slideDur, 
							transition: Effect.Transitions.sinoidal,
							beforeStart: this.onActivated,
							afterFinish: this.onFinish
						});
					}
					
				}
				else
				{
					if(this.direction == 0)
					{
						for ( i = (shingelsArray.indexOf(openslide)-1); i > (shingelsArray.indexOf(shingleID)-1); i--)
						{
							new Effect.Move(shingelsArray[i], 
							{ 
								queue: 'first',
								x: XslideLength, 
								y: YslideLength, 
								duration: slideDur, 
								transition: Effect.Transitions.sinoidal,
								beforeStart: this.onActivated,
								afterFinish: this.onFinish
							});
						
						}
					}
					else
					{
						for ( i = (shingelsArray.indexOf(shingleID)); i > (shingelsArray.indexOf(openslide)); i--)
						{
							new Effect.Move(shingelsArray[i], 
							{ 
								queue: 'end',
								x: -XslideLength, 
								y: YslideLength, 
								duration: slideDur, 
								transition: Effect.Transitions.sinoidal,
								beforeStart: this.onActivated,
								afterFinish: this.onFinish
							});
						
						}
					}
					$(openslide).removeClassName('active');
					$(shingleID).addClassName('active');
				}
			}
		}else {return false;}
	},
	
	onActivated: function()
	{
		this.onActive = 1;
		//alert(this.onActive);
	},
	
	onFinish: function()
	{
		this.onActive = 0;
		//alert(this.onActive);
	}
		
});