var Shingles = Class.create(
{
	isSlidingImage: false,
	handleLength: 0,
	currentIndex: 0,
	handles: new Array(),
	delay: 6000,
	interval : undefined,
		
	initialize: function(ContainerID, HandleClassName, ContentClassName, OptionsObj)
	{
		if(!$(ContainerID)) { return false;	}
		this.container = ContainerID;
		this.Options = new Object();
		this.Options = OptionsObj;
		this.handleClassName = HandleClassName;
		this.onActive = 0;


		if(OptionsObj.direction == 'horizontal')
		{
			this.direction = 1;
			$$('#'+ContainerID+' .'+ContentClassName).each(function(shingle)
			{
				$(shingle).setStyle({ 'width' : (OptionsObj.contentWidth)+'px' });
			});			
		}
		else
		{
			if(OptionsObj.flip == true)	{ this.direction = 3; }
			else
			{ this.direction = 0; }
			
			$$('#'+ContainerID+' .'+ContentClassName).each(function(shingle)
			{
				$(shingle).setStyle({ 'height' : (OptionsObj.contentHeight+20)+'px' });	// <-- Denne er kommentert ut for testing.
			});
		}
		
		if(OptionsObj.imageArray.length > 0)
		{
			this.currentImage = 0;
			this.imageArray = OptionsObj.imageArray;
		}

		this.prepareShingles(HandleClassName);
		this.onFinish();
	},
	
	prepareShingles: function(HandleClassName)
	{
		var handles = $$('#'+this.container+' .'+HandleClassName);

		for ( i=0; i < handles.length; i++ )
		{
			var self = this;
			if(this.direction == 0 || this.direction == 3)
			{
				//$(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).immediateDescendants();
		this.shingels = shingels;

		var ShingelX = 0;
		var shingelsCount = shingels.length;
		
		if(this.direction == 0)
		{
			var Zindexes = $R(1, shingelsCount).toArray().reverse();
			var ShingelX = 0;
		}
		else if(this.direction == 1)
		{
			var Zindexes = $R(1, shingelsCount).toArray();
			var ShingelX = this.Options.contentWidth;			
		}
		else if(this.direction == 3)
		{
			var Zindexes = $R(1, shingelsCount).toArray();
			ShingelX = 0;
		}
		else
		{
			var Zindexes = $R(1, shingelsCount).toArray();
			var ShingelX = eval(this.Options.contentWidth+this.Options.handleWidth);
		}
	
		var ShingelY = 0;

		if(this.direction == 3)
		{
			if(this.Options.inactiveHeight == 0)
				ShingelY = this.Options.contentHeight;
			else
				ShingelY = this.Options.inactiveHeight;
		}

		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-20)+'px' });
			if(this.direction == 0)
			{
				shingelOrigPos.push(ShingelY+'px');
				ShingelY = ShingelY + self.Options.handleHeight;				
			}
			else if(this.direction == 3)
			{
				shingelOrigPos.push(ShingelY+'px');
				$(shingels[0].id).setStyle({ 'zIndex' : 1, 'position' : 'absolute', 'left' : ShingelX+'px', 'top' : '0px' });
				ShingelY = ShingelY + self.Options.handleHeight;

			}
			else if(this.direction == 1)
			{
				shingelOrigPos.push(ShingelX+'px');
				ShingelX = ShingelX + self.Options.handleWidth;
				$(shingels[0].id).setStyle({ 'zIndex' : 1, 'position' : 'absolute', 'left' : '0px', 'top' : ShingelY+'px' });
			}

		}
		if(!$(shingelsArray.first()).hasClassName('active'))
		{
			if($(shingelsArray.first()).hasClassName('first') && $(shingelsArray.last()).hasClassName('last'))
			{
				$(shingelsArray.first()).addClassName('active');
				$($$('.'+HandleClassName)[0]).addClassName('active');
				$(shingelsArray.last()).addClassName('last');
			}
			else
			{
				$(shingelsArray.first()).addClassName('active');
				$($$('.'+HandleClassName)[0]).addClassName('active');
				$(shingelsArray.first()).addClassName('first');
				$(shingelsArray.last()).addClassName('last');
			}
		}
		
		if(this.direction == 0)
		{
			$(this.container).setStyle({ 'height' : (this.Options.contentHeight)+ShingelY+'px' });
		}		
		else if(this.direction == 1)
		{
			
			$(this.container).setStyle({ 'width' : (ShingelX)+'px' });
		}
		else if(this.direction == 3)
		{
			var ContainerHeight = (shingelsCount*this.Options.handleHeight)+this.Options.contentHeight;
		}

		if(this.Options.trigger)
		{
			var slideTrigger = this.Options.trigger;
		}
		else
		{
			var slideTrigger = 'mouseover';
		}
	
		var self = this;
		shingelsArray.each(function(handle)
		{
			self.handleLength += 1;
			self.handles.push(handle);
			Event.observe($(handle).getElementsByClassName(HandleClassName)[0], slideTrigger, function()
			{
				if(self.isSlidingImage == false)
				{
					var currentId = $(this.parentNode).id;
					var index = self.shingels.indexOf(this.parentNode);
					self.changeImage(self.shingels.indexOf(this.parentNode), function()
					{
						self.currentIndex = index;
						self.isSlidingImage = true;
						self.checkShingle(currentId, shingelsArray);
						self.delay = 14000;
						if(typeof self.interval == 'number')
							clearInterval(self.interval);
						self.goAuto(shingelsArray);						
					});	
				}								
			});

		});
			$($(shingelsArray[0]).parentNode).observe('mouseout', function()
			{
				self.delay = 6000;
				if(typeof self.interval == 'number')
					clearInterval(self.interval);
				self.goAuto(shingelsArray);	
			});
		var runCat = false;
		this.goAuto(shingelsArray);
	},
	
	goAuto: function(shingelsArray)
	{
		var self = this;
		this.interval = setInterval(function()
		{
			if(self.currentIndex < (self.handleLength-1))
				var index = (self.currentIndex+1);
			else
				var index = 0;
				
			if(self.isSlidingImage == false)
			{
				var currentId = $(self.handles[index]).id;
				self.changeImage(index, function()
				{
					self.currentIndex = index;
					self.isSlidingImage = true;
					self.checkShingle(currentId, shingelsArray);
					self.delay = 6000;
				});	
			}
		},self.delay);
	},
	
	changeImage: function(index, beforeStart, afterfinish)
	{
		var previousImage = this.currentImage;
		
		if(previousImage == index)
			return false;
		else
			this.currentImage = index;
			
		var self = this;
		$(self.imageArray[index]).setStyle({'zIndex':'1'});
		$(self.imageArray[previousImage]).setStyle({'zIndex':'0'});
		new Effect.Appear($(self.imageArray[index]), 
		{
			beforeStart: beforeStart,
			afterFinish: function()
			{
				$(self.imageArray[previousImage]).setStyle({'display':'none', 'opacity':'0.0'});
				self.isSlidingImage = false;
			},
			queue: {position: 'end', scope:'imageChanger'},
			duration: 0.3
		});
		
	},
	
	checkShingle: function(shingleID, shingelsArray)
	{
		if(!this.Options.transition)
		{
			var MainTransition = Effect.Transitions.sinoidal;
		}
		else
		{
			var MainTransition = this.Options.transition;
		}
		
		if(this.Options.mode == 'loose')
		{
			var SlideMode = 'first';
		}
		else
		{
			var SlideMode = 'end';
		}
	
		
		if(this.onActive == 0)
		{
			var slideLength = this.Options.contentHeight;
			var slidesCount = $(this.container).getElementsByTagName('li');
			var openslide = $$('#'+this.container+' .active')[0].id; //$(this.container).getElementsByClassName('active')[0].id;
			var openslideZ = $(openslide).getStyle('zIndex');
		
			var newslideZ = $(shingleID).getStyle('zIndex');
			var diffShingels = 1;
			var SlideOpt = new Object();
			if(this.direction == 1)
			{
				var XslideLength = this.Options.contentWidth;
				var YslideLength = 0;
			}
			else if(this.direction == 0 || this.direction == 3)
			{
				var XslideLength = 0;
				var YslideLength = (this.Options.contentHeight);
			}
			
			if(this.Options.duration)
			{
				var slideDur = this.Options.duration;
				
			}
			else
			{
				var slideDur = 0.3;
			}

			
			if ( openslideZ > newslideZ )
			{
				
			/*	if( (openslideZ - newslideZ) == 1)
				{
					this.beforeEffect(openslide);
					if(this.direction == 0) { SlideOpt = { Xdim:-XslideLength,Ydim:-YslideLength,slide:openslide,transition:MainTransition,dur:slideDur,mode:'end' }; }
					else if(this.direction == 1) { SlideOpt = { Xdim:XslideLength,Ydim:-YslideLength,slide:openslide,transition:MainTransition,dur:slideDur,mode:'end' }; }
					else if(this.direction == 3) { SlideOpt = { Xdim:XslideLength,Ydim:YslideLength,slide:openslide,transition:MainTransition,dur:slideDur,mode:'end' }; }
					this.effectStart(SlideOpt);
					this.effectEnd(shingleID);
				}
				else
				{
					this.beforeEffect(openslide);
					if(this.direction == 0)
					{
						for ( i = shingelsArray.indexOf(openslide); i < shingelsArray.indexOf(shingleID); i++)
						{
							SlideOpt = { Xdim:XslideLength,Ydim:-YslideLength,slide:shingelsArray[i],transition:MainTransition,dur:slideDur,mode:SlideMode };
							this.effectStart(SlideOpt);				
						}
					}
					else if(this.direction == 1)
					{
						for ( i = (shingelsArray.indexOf(openslide)); i > (shingelsArray.indexOf(shingleID)); i--) 
						{
							SlideOpt = { Xdim:XslideLength,Ydim:-YslideLength,slide:shingelsArray[i],transition:MainTransition,dur:slideDur,mode:SlideMode };
							this.effectStart(SlideOpt);					
						}						
					}
					else */if(this.direction == 3)
					{
						this.beforeEffect(openslide);
						for ( i = (shingelsArray.indexOf(openslide)); i > (shingelsArray.indexOf(shingleID)); i--) 
						{
							SlideOpt = { Xdim:XslideLength,Ydim:(YslideLength-20),slide:shingelsArray[i],transition:MainTransition,dur:slideDur,mode:SlideMode };
							this.effectStart(SlideOpt);					
						}						
					}
					this.effectEnd(shingleID);
			//	}
				
			}
			else if ( openslideZ < newslideZ )
			{
			/*	if ( ( newslideZ - openslideZ) == 1)
				{
					this.beforeEffect(openslide);
					this.effectEnd(shingleID);
					if(this.direction == 0)
					{
						SlideOpt = { Xdim:XslideLength,Ydim:YslideLength,slide:shingleID,transition:MainTransition,dur:slideDur,mode:'end' };
						this.effectStart(SlideOpt);
					}
					else if(this.direction == 1)
					{
						SlideOpt = { Xdim:-XslideLength,Ydim:YslideLength,slide:shingleID,transition:MainTransition,dur:slideDur,mode:'end' };
						this.effectStart(SlideOpt);
					}
					else if(this.direction == 3)
					{
						SlideOpt = { Xdim:-XslideLength,Ydim:-YslideLength,slide:shingleID,transition:MainTransition,dur:slideDur,mode:'end' };
						this.effectStart(SlideOpt);
					}
				}
				else
				{
					if(this.direction == 0)
					{
						for ( i = (shingelsArray.indexOf(openslide)-1); i > (shingelsArray.indexOf(shingleID)-1); i--)
						{
							SlideOpt = { Xdim:XslideLength,Ydim:YslideLength,slide:shingelsArray[i],transition:MainTransition,dur:slideDur,mode:SlideMode };
							this.effectStart(SlideOpt);
						}
					}
					else if(this.direction == 1)
					{
						for ( i = (shingelsArray.indexOf(openslide)+1); i < (shingelsArray.indexOf(shingleID)+1); i++)
						{
							SlideOpt = { Xdim:-XslideLength,Ydim:YslideLength,slide:shingelsArray[i],transition:MainTransition,dur:slideDur,mode:SlideMode };
							this.effectStart(SlideOpt);
						}
					}
					else */if(this.direction == 3)
					{
						for ( i = (shingelsArray.indexOf(openslide)+1); i < (shingelsArray.indexOf(shingleID)+1); i++)
						{
							SlideOpt = { Xdim:-XslideLength,Ydim:-(YslideLength-20),slide:shingelsArray[i],transition:MainTransition,dur:slideDur,mode:SlideMode };
							this.effectStart(SlideOpt);
						}
					}
					this.beforeEffect(openslide);
					this.effectEnd(shingleID);
			//	}
			}
		}else {return false;}
	},
	
	beforeEffect: function(elemIn)
	{
		if($(elemIn))
			$(elemIn).removeClassName('active');
	
		if( $(elemIn).getElementsByClassName(this.handleClassName)[0] )
			$($(elemIn).getElementsByClassName(this.handleClassName)[0]).removeClassName('active');
	},
	
	effectStart: function(SlideOpt)
	{
		var self = this;
		new Effect.Move(SlideOpt.slide, 
		{ 
			queue: { position: 'first', scope: 'shingles' },//SlideOpt.mode,
			x: SlideOpt.Xdim, 
			y: SlideOpt.Ydim, 
			duration: SlideOpt.dur, 
			transition: SlideOpt.transition,
			beforeStart: function()
			{
			//	self.cancelEffects();
			},//self.onActivated,
			afterFinish: function()
			{
				//self.isSlidingImage = false;
			}
		});
	},
	
	getEffectCount: function()
	{
		var Eff = Effect.Queues.get('shingles');
		return Eff.effects.length;
	},
	
	effectEnd: function(elem)
	{
		
		if($(elem))
			$(elem).addClassName('active');
	
		if( $($(elem).getElementsByClassName(this.handleClassName)[0]) )
			$($(elem).getElementsByClassName(this.handleClassName)[0]).addClassName('active');
	},
	
	onActivated: function()
	{
		this.onActive = 1;
	},
	
	onFinish: function()
	{
		this.onActive = 0;
	}
});
Event.observe(window, 'load', function()
{
	var AlutecShingles = new Shingles('entry-menu', 'show-content', 'content',
	{
		handleHeight : 62,
		paddingVertical: 0,
		contentHeight : 70,
		inactiveHeight: 70,
		duration : 0.3,
		direction : 'vertical',
		flip : true,
		mode : 'loose',
		imageArray: $$('div#entry-pics a')
		//transition : Effect.Transitions.linear
	});
});