Event.observe(window,"load",function(){
	var slideshow = new Antimatter_Home_Slideshow();
});

var Antimatter_Home_Slideshow = Class.create(Amslib_Widget,{
	widget:	false,
	left:	false,
	center:	false,
	right:	false,
	cache:	false,
	config: false,
	
	initialize: function($super)
	{
		$super($(document.body).down(".antimatter_home_slideshow"));
		
		this.left	=	this.mainWidget.down(".image_display .left_image");
		this.center	=	this.mainWidget.down(".image_display .center_image");
		this.right	=	this.mainWidget.down(".image_display .right_image");
		
		this.setupConfig();
		this.setupCache();
		this.setupAnimation();
		
		this.setupDescription(this.left);
		this.setupDescription(this.center);
		this.setupDescription(this.right);
	},
	
	setupConfig: function()
	{
		var url		=	this.getValue("config");
		var po		=	this;
		
		this.config	=	new Hash();
		
		var request	=	new Ajax.Request(url,{
			onSuccess: function(t){
				var node = new Element("div").update(t.responseText);
				
				//	Now read the configuration and store the data in this.config
				node.select("item").each(function(i){
					var image	=	i.getAttribute("image");
					var name	=	i.down("project").innerHTML;
					var website	=	i.down("url").innerHTML;
					
					po.config.set(image,{
						project: name,
						website: website
					});
				});
			}
		});
	},
	
	setupAnimation: function()
	{
		var animation = new PeriodicalExecuter(function(){ 
			this.animate(); 
		}.bindAsEventListener(this),5);
	},
	
	setupCache: function()
	{
		var list	=	this.mainWidget.down(".image_list").innerHTML.split(";");
		
		//	Create the image cache, load all the unloaded images into it
		//	Then sync it to make sure all the images are loaded before using them
		this.cache	=	new Antimatter_Home_SlideshowCache(this.mainWidget.down(".image_cache"));
		
		for(var a=0;a<list.length;a++){
			this.cache.load(new Element("img",{src:list[a],alt:'slideshow image'}));
		}
		
		this.cache.sync();
	},
	
	setupDescription: function(node)
	{
		var image	=	node.down(".image").src.split("/").last();
		
		var data = this.config.get(image);
		
		if(data){
			if(data.website.indexOf("http://") == 0){
				data.website = "<a href='"+data.website+"' target='_blank'>"+data.website+"</a>";
			}
			
			node.down(".description")
				.update("&bull; "+data.project+" : "+data.website+" &bull;")
				.setStyle({color:"#000000"});
		}else{
			node.down(".description")
				.setStyle({color:"#FFFFFF"});
		}
	},
	
	animate: function()
	{
		new Effect.Move(this.center,{x:-582,position:"absolute"});
		
		new Effect.Move(this.right,{
			x:				-582,
			position:		"absolute",
			afterFinish:	function()
			{
				temp		=	this.left;
				this.left	=	this.center.removeClassName("center_image").addClassName("left_image");
				this.center	=	this.right.removeClassName("right_image").addClassName("center_image");
				this.right	=	temp.removeClassName("left_image").addClassName("right_image");
				
				this.left.removeAttribute("style");
				this.center.removeAttribute("style");
				this.right.removeAttribute("style");
				
				this.cache.push(this.right);
				this.cache.pop(this.right);
				this.setupDescription(this.right);
			}.bind(this)
		});
	}
});

var Antimatter_Home_SlideshowCache = Class.create({
	cacheNode:	false,
	loading:	false,
	loaded:		false,
	
	initialize: function(cacheNode)
	{
		this.cacheNode	=	cacheNode;
		this.loading	=	this.cacheNode.down(".loading");
		this.loaded		=	this.cacheNode.down(".loaded");
	},
	
	load: function(image)
	{
		image.addClassName("image");
		this.loading.appendChild(image);
	},
	
	sync: function()
	{
		var po = this;
		this.loading.select("img").invoke("observe","load",function(){
			po.push(this);
		});
	},
	
	push: function(image)
	{
		if(!image.hasClassName("image")){
			image = image.down(".image");
		}
		
		if(image){
			this.loaded.insert({top:image.remove()});
		}
	},
	
	pop: function(image)
	{
		if(!image.hasClassName("slide_image")){
			image = image.up(".slide_image");
		}
		
		if(image){
			var lastImage = this.loaded.select("img").last();
			image.down(".shadow").insert({
				after: lastImage.remove()
			});
		}
	}
});