$(document).ready(function(){

	var pageMode = false;

	$("#note").corner("5px");

	$("#icon-about").hover(
	 function()
	 {
	  this.src = this.src.replace("_off","_on");
	  $("#spotlight").css({ backgroundImage : "url('images/back-blue.jpg')" });
	 },
	 function()
	 {
	  this.src = this.src.replace("_on","_off");
	  if (!pageMode) $("#spotlight").css({ backgroundImage : "none" });
	 }
	);
	
	$("#icon-about").click(
	function()
	{
		pageMode = true;
		$("#spotlight").css({ backgroundImage : "url('images/back-blue.jpg')" });
		$("#stage").hide();
		$("#note").animate({height: "810px"}, 1000);
		$("#detail-about").show();
	}
	);

	$("#icon-events").hover(
	 function()
	 {
	  this.src = this.src.replace("_off","_on");
	  $("#spotlight").css({ backgroundImage : "url('images/back-green.jpg')" });
	 },
	 function()
	 {
	  this.src = this.src.replace("_on","_off");
	  if (!pageMode) $("#spotlight").css({ backgroundImage : "none" });
	 }
	);
	
	$("#icon-connect").hover(
	 function()
	 {
	  this.src = this.src.replace("_off","_on");
	  $("#spotlight").css({ backgroundImage : "url('images/back-orange.jpg')" });
	 },
	 function()
	 {
	  this.src = this.src.replace("_on","_off");
	  if (!pageMode) $("#spotlight").css({ backgroundImage : "none" });
	 }
	);
	
	$("#icon-connect").click(
	function()
	{
		pageMode = true;
		$("#spotlight").css({ backgroundImage : "url('images/back-orange.jpg')" });
		$("#stage").hide();
		$("#note").animate({height: "300px"}, 1000);
		$("#detail-connect").show();
	}
	);
	
	$("#icon-events").click(
	function()
	{
		$(this).animate({'margin-left': "10px", 'margin-right': "-10px"}, 50);
		$(this).animate({'margin-left': "-10px", 'margin-right': "10px"}, 50);
		$(this).animate({'margin-left': "10px", 'margin-right': "-10px"}, 50);
		$(this).animate({'margin-left': "-10px", 'margin-right': "10px"}, 50);
		$(this).animate({'margin-left': "0px", 'margin-right': "0px"}, 25);
	}
	);
	
	$(".back").click(
	function()
	{
		pageMode = false;
		$("#spotlight").css({ backgroundImage : "url('images/back.jpg')" });
		$("#note").animate({height: "70px"}, 1000);
		$("#detail-connect").hide('slow');
		$("#detail-about").hide('slow');
		$("#stage").show();
	}
	);

});