var Slideshow = {
	start: function(){
		Slideshow.startShow();	
	},
	
	startShow: function(){
		$(document.body).getElements('a.slideshow').each(function(elem){
			elem.addEvent('click',function(el){
				new Event(el.stop());
				Slideshow.windowOverlay();
				Slideshow.request();
			})
		})
	},
	
	windowOverlay: function(){
		var windowScroll = window.getScrollSize();	
		Slideshow.overDiv = new Element('div', {
			'id':'overlay',
			'class':'window_overlay',
			'styles':{
				'opacity':0
			}
		}).injectInside(document.body).addEvent('click',function(){
				Slideshow.bgTween.cancel();				
				if($('messageBox'))
					Slideshow.imageContainer.dispose();
				Slideshow.slides = false;				
				Slideshow.overDiv.setStyle('display','none');				
		});	
		Slideshow.bgTween = new Fx.Morph( Slideshow.overDiv , {duration: 'long'});
	},
	
	request: function(){		
		var jsonRequest = new Request.JSON({
			url: "folder_reader.php", 
			onComplete: function(response){
				Slideshow.images = new Hash(response);				
				Slideshow.assets = new Array;
				Slideshow.images.each(function(el,i){
					var img = new Asset.image(el, {
						id: 'myImage', 
						title: 'myImage'	
					});
					Slideshow.assets[i]= img;	
				});				
				Slideshow.startSlideshow();
			}
		}).get({'data':Math.random()});		
	},	
	
	startSlideshow: function(){
		Slideshow.overDiv.setStyles({'display':'block'});
		Slideshow.bgTween.start({
			'opacity':[0,0.8]
		}).chain(function(){ 
			Slideshow.addImages(); 
		});
	},
	
	addImages: function(){
		Slideshow.imageContainer = new Element('div',{
			'id':'messageBox',
			'class':'messageBoxContainer',
			'styles':{
				'opacity':1,
				'left' : ( (window.getWidth() - 10) / 2 ) ,
				'top' : ( (window.getHeight() - 10 ) / 2 )
			}
		}).injectInside(document.body);
		Slideshow.image_asset(Slideshow.assets[0]);		
	},
	
	resizeMessage: function(size){		
		var messageMorph = new Fx.Morph( Slideshow.imageContainer , { 'duration': 200 });		
		var windowSize = window.getSize();		
		var m_size = Slideshow.imageContainer.getSize();		
		var top = ( windowSize.y - size['y'] ) / 2;		
		var left = ( windowSize.x - size['x'] ) / 2;		
		
		messageMorph.start({ 
			'width': [m_size['x']-20,size['x']] , 
			'height': [m_size['y']-20,size['y']+20] ,
			'top':[ ((windowSize.y - m_size['y']+40) / 2 ) , top],
			'left': [ ((windowSize.x - m_size['x']+20) / 2 ) , left] 
		}).chain(function(){
			if(!Slideshow.slides)
				Slideshow.addNav();
			Slideshow.imageMorph = new Fx.Morph( Slideshow.myImage , { 'duration': 400 });	
			Slideshow.imageMorph.start({
				'opacity':[0,1]					   
			});
		})
	},
	
	addNav: function(){
		Slideshow.slides = new Element('div',{
			'class':'navBar'
		}).injectInside(Slideshow.imageContainer);					
		
		Slideshow.assets.each(function(el,i){
			new Element('a',{
				'text':(i.toInt()+1),
				'href':'#'
			}).injectInside(Slideshow.slides).addEvent('click',function(ev){
				new Event(ev).stop();
				Slideshow.image_asset(Slideshow.assets[i]);
			});
		})					
	},
	
	image_asset: function(image_asset){
		if($('myImage'))
			$('myImage').dispose();
		Slideshow.myImage = image_asset;
		Slideshow.myImage.injectInside(Slideshow.imageContainer);		
		var size = image_asset.getSize();
		image_asset.set({
			styles:{
				'opacity':0.00001
			}
		})
		Slideshow.resizeMessage(size);	
	}
}

window.addEvent('domready', Slideshow.start);