$(document).ready(function() {

	//$("div#spangles a img").hide();
	$("div#spangles div:first").css("margin-right","0");
	$("div#spangles div").append("<div class='spinner'><img class='spin' src='images/spinner.gif'/></div>");
	
	//Variables
	var cache = [];
	var imgScale=1;
	var spawnScale=0.7;
	var paperY = 200;
	var yOffset = 30;
	var maxRot = 3;
	var maxSpawnAngle = 60/360*2*Math.PI; //60 degrees in rad
	var animTime=450;
	var b = 0; //previously 10
	var shadowDist = 8;
	var shadowAng = 50*Math.PI/180;
	var largeW = new Array();
	var largeH = new Array();
	var myTimer = {};
	var isOpen;
	
	//Function returns a random angle
	function genRot(){
		return maxRot*(Math.random()*2-1);
	}
	
	//For each spangle
	$("div#spangles a").each(function(id){
	
	//$this=this;
	//alert($(this).children().position().top);
	
	//supress click
	$(this).bind("click",function(){ 
	return false;
	});
	
	//Preload
	url = $(this).attr("href");
	var cacheImage = document.createElement('img');
	cacheImage.src = url;
	cache.push(cacheImage);
	
	//$(cacheImage).ready(function(e){
	//	alert(e);
	//});
	
	cacheImage.onload=function(e){
	
	//$("a#spang"+id+" img").fadeIn("fast");
	$("a#spang"+id).parent().children("div").fadeOut("fast");
	
	largeW[id] = imgScale*this.width;
	largeH[id] = imgScale*this.height;
	
	$("a#spang"+id).bind("mouseover",function(e){ //mouse over -> animate
		
		$.clearTimer(myTimer); //stop fadeout
		
		if(isOpen!=id){
		isOpen=id;
		
		url=e.currentTarget;

		$("div:has(group)").remove(); //IE - stop piling 'em up
		$("svg").remove(); //Good browsers, likewise
		
		try{$("svg").remove();}catch(err){}; //remove old popups
		
		availSH = $("div#container").height() - paperY; //available screen height
		//if(window.innerWidth){
		//	availSW = window.innerWidth;
		//}else if(document.body.clientWidth){
			availSW = document.body.clientWidth;
		//}else{
		//	availSW = $(document).width();
		//}
		
		thisW = largeW[id];
		thisH = largeH[id];

		//Generate your randoms
		spawnRot = genRot();
		endRot = genRot();
		spawnAngle = maxSpawnAngle*(2*Math.random()-1); //rad
		spawnX = availSW/2 + 940/2 - 676/2 - thisW/2 - b;
		spawnY = yOffset;

		//Set up
		paper = Raphael(0, paperY, availSW, availSH);
		shadow = paper.rect(spawnX+shadowDist*Math.cos(shadowAng), spawnY+shadowDist*Math.sin(shadowAng), thisW+2*b, thisH+2*b, 2);
		shadow.attr({scale:spawnScale, opacity:0.0, fill: "#000", cx:(thisW/2+b), cy:0, rotation:spawnRot});
		//frame = paper.rect(spawnX, spawnY, thisW+2*b, thisH+2*b, 5);
		//frame.attr({scale:spawnScale, fill:"#fff", cx:(thisW/2+b), cy:0, rotation:spawnRot});
		img = paper.image(url, spawnX+b, spawnY+b, thisW, thisH);
		img.attr({scale:spawnScale, opacity:0.0, cx:(thisW/2), cy:0, rotation:spawnRot});
		
		//Animate
		st = paper.set();
		//st.push(shadow, frame, img);
		st.push(shadow, img);
		//st.animate({scale:"1"}, animTime, ">");
		img.animate({opacity:1, scale:1}, animTime, ">");
		shadow.animate({opacity: 0.4, scale:1}, animTime, ">");
		
		}
	}); 
	
	$("a#spang"+id).bind("mouseout",function(e){ //mouse out -> hide
		if(jQuery.support.opacity){
			$("svg:hidden").remove(); //lose old faded out ones
			myTimer = $.timer(500,function(){
				isOpen={};
				$("svg").animate({opacity:0}, animTime, "", function(){$(this).remove();});
			});
		}else{
			myTimer = $.timer(500,function(){
				$("div:has(group)").remove();
				isOpen={};
			});
		}
	});
	
	}
	
	});
	
});