var SlideShow = new Class({
	
	Implements					: Options,
	
	options						:
	{
		'speed'						: 5000,
		'tweenLargeSpeed'			: 1000,
		'tweenTitleSpeed'			: 500,
		'tweenSmallSpeed'			: 1000, 
		'imageLargeClass'			: '.image',
		'imageSmallClass'			: '.image',
		'imageSmallOpacity'			: 0.4
	},
	
	initialize					: function(large,small,title,scroller,options)
	{
		//set options
		this.setOptions(options);
		//Set fields
		this.large			= $(large);
		this.small			= $(small);
		this.title			= $(title);
		this.scroller		= $(scroller);
		//Get images
		this.largeImages	= this.large.getElements(this.options.imageLargeClass);
		this.smallImages	= this.small.getElements(this.options.imageSmallClass);
		//Count images
		this.count			= this.smallImages.length;
		this.current		= 0;
		this.scrollPosition	= 0;
		//Set scroller length
		this.setScrollerLength();
		//load small images
		this.setSmall();
		//load big images
		this.loadBig();
		//start tween
		var loop = this.loop.periodical(this.options.speed,this);
	},
	
	setScrollerLength			: function()
	{
		var size = this.smallImages[0].getSize();
		this.scroller.setStyle('width',(size.x * this.count));
	},
	
	setSmall					: function(key)
	{
		if (!key) key = 0;
		var opacity = (key == 0) ? 1 : this.options.imageSmallOpacity;
		var tween = new Fx.Tween(this.smallImages[key],{duration: this.options.tweenSmallSpeed});
		tween.start('opacity',0,opacity);
		key++;
		if (key < this.count) this.setSmall.delay(200,this,key);
	},
	
	loadBig						: function()
	{
		var titleTween = new Fx.Tween(this.title,{duration: this.options.tweenTitleSpeed, transition: Fx.Transitions.Sine.easeOut});	
		titleTween.start('bottom','-40px');	
		this.largeImages.setStyle('z-index',0);
		var active = this.largeImages[this.current];
		var tween = new Fx.Tween(active,{duration: this.options.tweenLargeSpeed});
		active.setStyle('z-index',10);
		var title = active.get('title');
		var previous = (this.current == 0) ? this.largeImages[this.count - 1] : this.largeImages[this.current - 1];
		tween.start('opacity',0,1).chain(function(){
			if (title) {
				this.title.set('html',title);
				titleTween.start('bottom',0);
			}
			previous.setStyle('opacity',0);
		}.bind(this));
		this.current++;
		if (this.current == this.count) this.current = 0;
	},
	
	loadSmall					: function()
	{
		this.checkScrollPosition();
		var current 		= this.current;
		var previous 		= (this.current == 0) ? this.count - 1 : this.current - 1;
		var currentTween	= new Fx.Tween(this.smallImages[current],{duration: this.options.tweenSmallSpeed});
		var previousTween	= new Fx.Tween(this.smallImages[previous],{duration: this.options.tweenSmallSpeed});
		currentTween.start('opacity',1);
		previousTween.start('opacity',this.options.imageSmallOpacity);
	},
	
	checkScrollPosition			: function()
	{
		var scrollSize			= this.small.getSize();
		var itemSize			= this.smallImages[0].getSize();
		var scrollTween			= new Fx.Scroll(this.small);
		if (scrollSize.x < (itemSize.x * (this.current + 3)))
		{
			this.scrollPosition = this.scrollPosition + itemSize.x;
			scrollTween.start(this.scrollPosition,0);
		}
		if (this.current == 0)
		{
			scrollTween.start(0,0);
			this.scrollPosition = 0;
		}	
	},
	
	loop						: function()
	{
		this.loadSmall();
		this.loadBig();
	}
		
});

var HeaderLoop = new Class({
	
	Implements					: Options,
	
	options						:
	{
		'speed'						: 5000
	},
	
	initialize					: function(container,next,prev,options)
	{
		this.setOptions(options);
		this.images		= $(container).getElements('img');
		this.next		= $(next);
		this.previous	= $(prev);
		this.count		= this.images.length;
		this.current	= 0;
		this.running	= false;
		this.loadImage();
		this.bindEvents();
		this.loop = this.loadImage.periodical(this.options.speed,this,'next');
	},
	
	stopLoop					: function()
	{
		$clear(this.loop);
	},
	
	loadImage					: function(neg)
	{	
	
		this.running = true;
		this.images.setStyle('z-index',0);
		
		var current = false;
		
		if (neg) {
			var next = (this.current < this.count - 1) ? this.current + 1 : 0;
			var prev = (this.current == 0) ? this.count - 1 : this.current - 1;
			current			= this.images[this.current];
			var active 		= (neg == 'next') ? this.images[next] : this.images[prev];
			var previous 	= (neg == 'next') ? this.images[prev] : this.images[next];
		} else {
			var active 		= this.images[this.current];
			var previous 	= this.images[this.count - 1];
		}
		
		var tween = new Fx.Tween(active);
		active.setStyle('z-index',2);
		tween.start('opacity',0,1).chain(function(){
			if (current) current.setStyle('opacity',0);
			this.running = false;			
		}.bind(this));
		
		if (neg)
		{
			if (neg == 'next') {
				this.current++;
				if (this.current == this.count) this.current = 0;
			} else {
				this.current--;
				if (this.current == -1) this.current = this.count - 1;
			}
		}
		
	},
	
	bindEvents					: function()
	{
		this.next.addEvents({
			'click'					: function()
			{
				if (!this.running) {
					this.loadImage('next');
				}
			}.bind(this),
			'mouseenter'			: function()
			{
				$clear(this.loop);
			}.bind(this),
			'mouseleave'			: function()
			{
				this.loop = this.loadImage.periodical(this.options.speed,this,'next');
			}.bind(this)
		});
		this.previous.addEvents({
			'click'					: function()
			{
				if (!this.running) {
					this.loadImage('prev');
				}
			}.bind(this),
			'mouseenter'			: function()
			{
				$clear(this.loop);
			}.bind(this),
			'mouseleave'			: function()
			{
				this.loop = this.loadImage.periodical(this.options.speed,this,'next');
			}.bind(this)
		});
	}
	
});