var SlideShow = new Class({
	Implements: [Options, Events],
	options: {
		debug: false,
		container: false,
		ProgressBar: false,
		RotationSpeed: 5000,
		type: 'fade',
		FxSpeed: 1000,
		FxTransition: Fx.Transitions.Quad.easeInOut
	},
	
	slides: [],
	current: null,
	
	initialize: function(options){
		this.setOptions(options);
		
		
		this.getData();
		
		var random_start = $random(0, this.slides.length-1);
		
		var test = new Asset.image( this.slides[random_start].filename , {
			onload: (function(){
				
				this.options.container.setStyles({
					'display': 'block',
					'opacity': 0
				});
				this.options.container.fade('in');
				this.rotateSlide(this.slides[random_start]);
				
			}).bind(this)
		});
		
		
		this.NextElement = new Element('a',{
			'class': 'next',
			'html': 'Next',
			'events': {
				'click': (function(){
					
					$clear(this.timer)
					this.rotateSlide( this.getNext() );
					
				}).bind(this)
			}
		});
		
		this.PrevElement = new Element('a',{
			'class': 'prev',
			'html': 'Previus',
			'events': {
				'click': (function(){
					
					$clear(this.timer)
					this.rotateSlide( this.getPrev() );
					
				}).bind(this)
			}
		});
		
		this.NextElement.inject( this.options.container );
		this.PrevElement.inject( this.options.container );
	},
	getNext: function(){
		if( (this.current.ID+1) > (this.slides.length-1) )
			var next = this.slides[0];
		else
			var next = this.slides[this.current.ID+1];
		
		return next;
	},
	getPrev: function(){
		if( (this.current.ID-1) < 0 )
			var next = this.slides[this.slides.length-1];
		else
			var next = this.slides[this.current.ID-1];
		
		return next;
	},
	rotateSlide: function(slide){
		if( this.options.debug ) console.log( '-- Starting --' );
		
		if( slide == null )
		{
			slide = this.slides[0];
			this.showSlide( slide, true);
		}
		else
		{
			this.showSlide( slide );
		}
		
		if( this.options.ProgressBar == true )
			var myLoadingBar = this.Loading( slide.element );
		
		var next = this.getNext();
		
		this.timeleft = this.options.RotationSpeed;
		var imageloading = false;
		
		var nextImageLoad = new Asset.image( next.filename , {
			onload: (function(){
				imageloading = true;
				if( this.options.debug ) console.log( next.filename +' loaded !' );
			}).bind(this)
		});
		
		this.timer = (function(){
			if( this.timeleft > 0 )
				this.timeleft = this.timeleft - 50;
			
			if( this.options.ProgressBar == true )
			{
				var loading = 100 - ( (timeleft / this.options.RotationSpeed)*100 ).round();
				myLoadingBar.setStyle('width', loading+'%' );
			}
			
			if( this.timeleft <= 0 && this.options.debug ) console.log( 'Timer Done, waiting for loading' );
			if( imageloading == true && this.options.debug ) console.log( 'Loading done, waiting for timer('+ timeleft +')' );
			
			
			if( this.timeleft <= 0 && imageloading == true )
			{
				if( this.options.debug ) console.log( 'Timer and Loading done' );
				
				$clear(this.timer);
				
				this.rotateSlide(next);
				(function(){ this.removeSlide( slide ) }).bind(this).delay(this.options.FxSpeed);
			}
			
		}).bind(this).periodical(50);
		
	},
	showSlide: function(slide,instant){
		if( this.options.debug ) console.log( 'Showing slide #'+ slide.ID );
		
		this.createSlide(slide);
		
		this.current = slide;
		
		if( instant == true )
		{
			slide.element.setStyle('opacity', 1);
		}
		else
		{
			if( this.options.type == 'fade' )
			{
				slide.fx.start({
					'opacity': [0,1]
				});
			}
			else if( this.options.type == 'slide' )
			{
				slide.element.setStyles({
					'opacity': 1,
					'left': 800
				});
				slide.fx.start({
					'left': 0
				});
			}
		}
		
		
		
	},
	hideSlide: function(slide){
		if( this.options.debug ) console.log( 'Hiding slide #'+ slide.ID );
		
		(function(){ this.removeSlide( slide ) }).bind(this).delay(this.options.FxSpeed);
		
	},
	removeSlide: function(slide){
		if( this.options.debug ) console.log( 'Disposing slide #'+ slide.ID );
		
		if( slide.element )
			slide.element.dispose();
	},
	createSlide: function(slide){
		if( !slide.element )
		{
			slide.element = new Element('div', { 'class': 'item' });
			
			slide.extras.each(function(extra){
				if( extra.link != '' && extra.link != null  )
				{
					
					new Element('a', {
						'class': extra.classs,
						'html': extra.text,
						'href': extra.link
					}).inject(slide.element);
					
				}
				else
				{
					
					if( extra.text != '' )
						new Element('div', {
							'class': extra.classs,
							'html': extra.text
						}).inject(slide.element);
				}
			});
			
		}
		
		
		if( !slide.fx )
			slide.fx = new Fx.Morph(slide.element, {
				duration: this.options.FxSpeed,
				link: 'cancel',
				transition: this.options.FxTransition
			});
		
		slide.element.setStyles({
			'opacity': 0,
			'background-image': 'url('+ slide.filename +')'
		});
		
		slide.element.inject( this.options.container );
	},
	Loading: function(slide){
		var loadings = slide.getChildren('.loading');
		
		if( loadings[0] )
			loadings[0].destroy();
		
		var wrap = new Element('div', { 'class': 'loading' }).inject( slide );
		//var number = new Element('div', { 'class': 'loading-number' }).inject(wrap);
		var bar = new Element('div', { 'class': 'loading-bar' }).inject(wrap);
		
		bar.setStyle('width', 0);
		
		return bar;
		
		/*
		this.LoadingBar.number.set('html', value);
		this.LoadingBar.bar.setStyle('width', value+'%');
		
		if( value == 100 )
			this.LoadingBar.bar.fade('out')
		else
			this.LoadingBar.bar.fade('in')
		*/
	},
	getData: function(){
		var items = this.options.container.getChildren('.item');
		
		items.each(function(item,index){
			var image = '';
			var extra = [];
			var divs = item.getChildren('div');
			
			divs.each(function(div){
				
				if( div.hasClass('image') )
				{
					image = div.get('html');
				}
				else if( div.get('rel') != '' )
				{
					extra.include({
						'classs': div.get('class'),
						'text': div.get('html'),
						'link': div.get('rel')
					});
				}
				else
				{
					extra.include({
						'classs': div.get('class'),
						'text': div.get('html')
					});
				}
				
			});
			
			var object =
						{
							'ID': index,
							'filename': image,
							'extras': extra
						};
			
			this.slides.include(object);
			item.destroy();
		},this);
	}
});