// elements
var Header = {};
var Clouds = {};
var Background = {};
var Main = {};
var Scene = {};

// values
var cloudposition = {x:0,y:0};
var winsize = {};
var winscrollsize = {};
var docsize = {};

// Change all the properties on resize
function setsizes(){
		
	winscrollsize = document.id(document).getScrollSize();
	winsize = window.getSize();
	docsize = Main.getSize();
	
	Background.setStyles({
		"width":winsize.x,
		"height":docsize.y+465,
		"margin-bottom":-(docsize.y+465)
	});
	
	Background.getElement('#grass').setStyles({
		"width":winsize.x,
		"height":docsize.y+465
	});
	
	Main.setStyles({ 
		"width":winsize.x
	});
	
	Scene.setStyles({
		"width":winsize.x
	});
	
//	var size = window.getSize();
//	var center = size.x*.5;
//	Scene.getElements('img,div').each(function(el){
//		el.setStyle('left',center-(el.getSize().x*.5));
//	});
	var size = window.getSize();
	var center = size.x*.5;
	Scene.getElements('#crawdaddy').each(function(el){
		//el.setStyle('left',center-(el.getSize().x*.5));
		el.setStyle('left',400);
	});
}
  
// DO!
window.addEvent("domready",function(){
	
	// globalize major elements
	Background = document.id("Background");
	Clouds = Background.getElement("#clouds"); 
	Main = document.id("MainContainer");
	Scene = document.id("Scene");
	
	// animate clouds
	(function(){
		cloudposition.x++;
		cloudposition.y+=0;
		Clouds.setStyle("background-position",cloudposition.x+"px "+cloudposition.y+"px");
	}).periodical(33);
	
	
	// sizing and position
	window.addEvent("resize",setsizes);
	setsizes();
	
	// Floating animations
	Scene.getElements('.float').each(function(el){
		el.set('morph',{duration:700, transition: Fx.Transitions.Sine.easeInOut});
	});
	
	
	(function(){
		var sceney = Scene.getSize().y;
		var logo_sign = Scene.getElement('#logo-sign'); 
		var boat = Scene.getElement('#boat');
		Scene.getElements('.float').each(function(el){

			logo_sign.morph({
				'top': Number.random(-5,10)
			});
			boat.morph({
				'top': Number.random(0,10)
			});
			
			
//			var angle = Number.random(0,1);
//			//css3 transitions      
//			el.setStyles({
//				'transform':'rotate('+angle+'deg)'
//			});
		});
	}).periodical(700);//*/
	
	//Crawdaddy popup
  
	var cd = Scene.getElement("#crawdaddy");
	cd.set("morph",{
	duration:500,
	transition:"back:out",
	onComplete:function(){
	  //console.log(cd.getStyle("top"));
	  cd.toggleClass("blur");
	  if(cd.getStyle("top") == "500px"){
	cd.set("morph",{transition:"back:out"});
	var delay = function(){
	  //console.log("show");
	  cd.morph({top:200});
	  cd.toggleClass("blur");
	  
	  /*/create a new link above the main layer
	  var proxy = cd.getElement('a').clone();
	  proxy.inject(document.body);
	  proxy.setStyles({
	    
	  }); 
	  //*/
	    }.delay(5000);
	    
	  }else{
	    var delay = function(){
	      cd.set("morph",{transition:"back:in"});
	  //console.log("hide");
	  cd.morph({top:500});
	  cd.toggleClass("blur");
		        }.delay(3000);
		      }
		    }
		  });
	  
		  (function(){Scene.getElement("#crawdaddy").morph({top:200})}).delay(1000);
	
	  // CSS FAIL FIXES
	  // help navigation center by setting the UL's width to it's minimum
	
	
});