var Thumbsslide = new Class({
	Implements: [Options, Events],

	options: {
		width:		5,
		thumbsize:	{width:70, height: 60}
	},
	
	element:		null,
	
	initialize: function(options){

		this.setOptions(options);
		this.element = $(this.options.element);
		this.id = this.options.id;
		this.parent = this.options.parent;
		this.thumbs = this.options.data;
		
		this.build();
		this.addDragFX();
		this.addNav();
	},
	
	build:	function(){
		
		this.element.position({
			'relativeTo':	this.parent,
			'position':		'bottomRight',
			'edge':			'bottomLeft',
			'offset':		{x:this.options.thumbsize.width,y:0}
		});
		this.element.setStyle('width', this.options.width * this.options.thumbsize.width);
		
		$each(this.thumbs, function(image, id){
			this.thumbs[id] = new Thumb(image.data, {
				'parent':			this.element,
				'left':				id * this.options.thumbsize.width,
				'path':				this.options.path,
				'onMouseenter':		function(){
										this.fireEvent('mouseOver', id);
									}.bind(this)
			});
		}, this);
		
		this.element.addEvent('mouseleave', function(){
			this.fireEvent('mouseLeave');
		}.bind(this));
			
	},
	
	addDragFX:	function(){
		this.scrollFx = new Fx.Scroll(this.element, {
			'duration'		:	'normal'
		});
	},
	
	addNav:	function(){
		this.navright = new Element('div', {'class':'button thumbnav right', 'text':'>'}).injectAfter(this.element);
		this.navleft = new Element('div', {'class':'button thumbnav left', 'text':'<'}).injectAfter(this.element);
		this.disabledNavs();
		
		this.navright.position({
			'relativeTo':	this.element,
			'position':		'Right',
			'edge':			'Left',
			'offset':		{x:10,y:0}
		});
		
		this.navleft.position({
			'relativeTo':	this.element,
			'position':		'Left',
			'edge':			'Right',
			'offset':		{x:-10,y:0}
		});		
		
		this.navright.addEvent('click', function(){
			if (this.thumbs[this.id+this.options.width]){
			
				this.id++;
				this.scroll();
			}
		}.bind(this));
		
		this.navleft.addEvent('click', function(){
			if (this.thumbs[this.id-1]){
				this.id--;
				this.scroll();
			}
		}.bind(this));	
		
	},
	
	disabledNavs:	function(){
		if (!this.thumbs[this.id+this.options.width]){
			this.navright.fade(0.5);
			this.navright.addClass('disabled');
		} else if (this.navright.get('opacity') == 0.5){
			this.navright.fade('in');
			this.navright.removeClass('disabled');
		}
		
		if (!this.thumbs[this.id-1]){
			this.navleft.fade(0.5);
			this.navleft.addClass('disabled');
		} else if (this.navleft.get('opacity') == 0.5){
			this.navleft.fade('in');
			this.navleft.removeClass('disabled');
		}		
	},
	
	scroll:	function(){
		this.scrollFx.toElement(this.thumbs[this.id].element);	
		this.disabledNavs();
	}
});

var Slideshow = new Class({
				 
	Implements: [Options, Events],

	options: {
		'thumbs'	: 	false,
		'rate'		:	3000,
		'largepath'	:	'',
		'thumbpath'	:	''
	},
	
	element:	null,
		
	id:	0,
	
	initialize: function(element, images, options){
		this.setOptions(options);
		var thumbs = images;
		this.element = $(element);
		this.images = images;
		
		this.build();
		this.slideTimer();
	},
	
	build:	function(){
		
		$each(this.images, function(image, id){
			this.images[id] = new LargeImage(image, {
				'parent' :	this.element,	
				'path' :	this.options.largepath				
			});
		}, this);
		
		this.images[this.id].show();
		
		if (this.options.thumbs !== false){
			new Thumbsslide({
				'element'		:	this.options.thumbs,
				'data'			:	this.images,
				'parent'		:	this.element,
				'id'			:	this.id,
				'path' 			:	this.options.thumbpath,	
				'onMouseOver'	:	function(id){
										this.pauzed = true;
										this.id = id;
										this.toggleLarge();
									}.bind(this),
				'onMouseLeave'	:	function(){
										this.pauzed = false;
									}.bind(this)
			});
		}		
	},
	
	
	
	toggleLarge:	function(){
		$each(this.images, function(image){	
			image.fadeOut();
		});
		
		this.images[this.id].fadeIn();
	},
	
	slideTimer:	function(){
		(function(){
			if (!this.pauzed){
				this.pauzed =  !this.element.getParent() ? true : this.pauzed;
				this.id = this.images[this.id+1] ? this.id +1 : 0;
				this.toggleLarge();
			}
		}.periodical(this.options.rate, this));
	}
});

var Thumb = new Class({
				 
	Implements: [Options, Events],

	options: {
	},
	
	element:	null,
	
	initialize: function(data, options){
		this.setOptions(options);
		this.data = data;
		
		this.build();
		this.addEvents();
	},
	
	build:	function(){
		this.element = new Element('li').adopt(
			new Element('img', {
				'src': '/img/' + this.options.path + this.data
			})
		).inject(this.options.parent);
		
		this.element.setStyle('left', this.options.left);
	},
	
	addEvents:	function(){
		this.element.addEvent('mouseenter', function(){
			this.fireEvent('mouseenter');
		}.bind(this));
	}
});

var LargeImage = new Class({
				 
	Implements: [Options, Events],

	options: {
	},
	
	element:	null,
	
	initialize: function(data, options){
		this.setOptions(options);
		this.data = data;
		this.build();
	},
	
	build:	function(){
		this.element = new Element('img', {
			'src':			'/img/' + this.options.path + this.data
		}).inject(this.options.parent);
		
		this.element.setStyle('position', 'absolute');
		
		this.fx = new Fx.Tween(this.element);
		this.hide();
	},
	
	fadeIn:	function(){
		this.element.fade('in');
	},
	
	fadeOut:	function(){
		this.element.fade('out');	
	},
	
	show:	function(){
		this.fx.set('opacity', 1);	
	},
	
	hide:	function(){
		this.fx.set('opacity', 0);	
	}
});