// JavaScript Document

$(document).ready(function(){
		 
		   $('#navigation li a').append('<span class="hover"></span>')
		   
		   $('#navigation li a').hover(function() {
	        
		// Stuff that happens when you hover on + the stop()
		$('.hover', this).stop().animate({
			'opacity': 1
			}, 700,'easeOutSine')
	
	},function() {
	
		// Stuff that happens when you unhover + the stop()
		$('.hover', this).stop().animate({
			'opacity': 0
			}, 700, 'easeOutQuad')
	
	})
});



$(window).load(function(){
						
		$("#first-mod").ready(function() {
			
			$("#lineup li.first").append('<img class="shadow" src="images/module_shadow.png" width="258" height="25" alt="" />') ;
			$("img.shadow").fadeIn(500);
			
			$("#lineup li.first").append('<img class="mod_light" src="images/module_light.png" width="123" height="65" alt="" />') ;
			$("img.mod_light").fadeIn(500);
		});
		
		$("#second-mod").ready(function() {
			
			$("#lineup li.second").append('<img class="shadow" src="images/module_shadow.png" width="258" height="25" alt="" />') ;
			$("img.shadow").fadeIn(500);
			
			$("#lineup li.second").append('<img class="mod_light" src="images/module_light.png" width="123" height="65" alt="" />') ;
			$("img.mod_light").fadeIn(500);
		});	
		
		$("#third-mod").ready(function() {
			
			$("#lineup li.third").append('<img class="shadow" src="images/module_shadow.png" width="258" height="25" alt="" />') ;
			$("img.shadow").fadeIn(500);
			
			$("#lineup li.third").append('<img class="mod_light" src="images/module_light.png" width="123" height="65" alt="" />') ;
			$("img.mod_light").fadeIn(500);
		});	
		
		$("#fourth-mod").ready(function() {
			
			$("#lineup li.fourth").append('<img class="shadow" src="images/module_shadow.png" width="258" height="25" alt="" />') ;
			$("img.shadow").fadeIn(500);
			
			$("#lineup li.fourth").append('<img class="mod_light" src="images/module_light.png" width="123" height="65" alt="" />') ;
			$("img.mod_light").fadeIn(500);
		});	
		
		$("#fifth-mod").ready(function() {
			
			$("#lineup li.fifth").append('<img class="shadow" src="images/module_shadow.png" width="258" height="25" alt="" />') ;
			$("img.shadow").fadeIn(500);
			
			$("#lineup li.fifth").append('<img class="mod_light" src="images/module_light.png" width="123" height="65" alt="" />') ;
			$("img.mod_light").fadeIn(500);
		});	
						
						
		$("#lineup li").hover(function() {
			var e = this;
		    $(e).find("div#first-mod, div#second-mod, div#third-mod, div#fourth-mod, div#fifth-mod, img.mod_light").stop().animate({ marginTop: "-34px" }, 200, function() {
		    	$(e).find("div#first-mod, div#second-mod, div#third-mod, div#fourth-mod, div#fifth-mod, img.mod_light").animate({ marginTop: "-26px" }, 200);
				
		    });
		    $(e).find("img.shadow").stop().animate({ width: "227px", height: "20px", marginLeft: "-115px", opacity: 0.40 }, 200);
		},function(){
			var e = this;
		    $(e).find("div#first-mod, div#second-mod, div#third-mod, div#fourth-mod, div#fifth-mod, img.mod_light").stop().animate({ marginTop: "4px" }, 200, function() {
		    	$(e).find("div#first-mod, div#second-mod, div#third-mod, div#fourth-mod, div#fifth-mod, img.mod_light").animate({ marginTop: "0px" }, 200);
		    });
		    $(e).find("img.shadow").stop().animate({ width: "257px", height: "25px", marginLeft: "-125", opacity: 1 }, 200);
		});
						
	// End jQuery
	
	$("#flyer").append('<div id="flyer_shadow"></div>') ;
	$("div#flyer_shadow").fadeIn(500);
});