// JavaScript Document

function InitializeTimer(color, whichcontent)

{
   // Set the length of the timer, in seconds

	if (color == "yellow") {
    StartTheTimerYellow(whichcontent);
	}
	if (color == "blue") {
    StartTheTimerBlue(whichcontent);
	}
	if (color == "green") {
    StartTheTimerGreen(whichcontent);
	}
	if (color == "grey") {
    StartTheTimerGrey(whichcontent);
	}
}


function StartTheTimerYellow(whichcontent)
{

        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
yellowZ = document.getElementById("layer_yellow").style.zIndex = 5;
 new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: function () { getContent(whichcontent)  }}); 
  document.getElementById("homebutton").style.display = "block";


 if ((document.getElementById("layer_blue").style.zIndex) < (document.getElementById("layer_green").style.zIndex)) 
  {
 document.getElementById("layer_green").style.zIndex = 2;
 new Effect.Move (layer_green,{ x: 290, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 
 document.getElementById("layer_blue").style.zIndex = 3;
new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 }
else { 
 document.getElementById("layer_green").style.zIndex = 2;
 new Effect.Move (layer_green,{ x: 290, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 
 document.getElementById("layer_blue").style.zIndex = 3;
new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
}
document.getElementById("layer_grey").style.zIndex = 1;
new Effect.Move (layer_grey,{ x: 40, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal});

document.getElementById("chart").style.left = 471;
 document.getElementById("lady").style.left = 472;
 document.getElementById("header_eyewear").style.left = 485; 
 document.getElementById("header_eyecare").style.display = "none"; 
 document.getElementById("header_eyewear").style.display = "block"; 
 document.getElementById("header_about").style.display = "block"; 
 document.getElementById("title_eyecare").style.display = "block"; 
 document.getElementById("title_eyewear").style.display = "none"; 
 document.getElementById("title_about").style.display = "none";  
 document.getElementById("chart").style.display = "none";
 document.getElementById("rack").style.display = "block";
 document.getElementById("lady").style.display = "block";
 document.getElementById("yellow_text").style.display = "block";

   document.getElementById("grey_text").style.display = "none";
  document.getElementById("blue_text").style.display = "none";
  document.getElementById("green_text").style.display = "none";
//  go_anchor('paragraph_1');
  
}
function StartTheTimerBlue(whichcontent)
{

        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
  document.getElementById("homebutton").style.display = "block";
document.getElementById("layer_blue").style.zIndex = 5;
 new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: function () { getContent(whichcontent)  }}); 
  if ((document.getElementById("layer_yellow").style.zIndex) < (document.getElementById("layer_green").style.zIndex)) 
{
  document.getElementById("layer_yellow").style.zIndex = 2;
new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 

 document.getElementById("layer_green").style.zIndex = 3;
 new Effect.Move (layer_green,{ x: 290, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal});  
}
else {
  document.getElementById("layer_yellow").style.zIndex = 3;
new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 

 document.getElementById("layer_green").style.zIndex = 2;
 new Effect.Move (layer_green,{ x: 290, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal});  
}
document.getElementById("layer_grey").style.zIndex = 1;
new Effect.Move (layer_grey,{ x: 40, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal});

 document.getElementById("chart").style.left = 0;
 document.getElementById("header_eyecare").style.left = 1;
 document.getElementById("header_eyewear").style.left = 485;
 document.getElementById("header_about").style.left = 485;
  document.getElementById("header_eyecare").style.display = "block"; 
  document.getElementById("header_about").style.display = "block"; 
  document.getElementById("header_eyewear").style.display = "none"; 
   document.getElementById("title_eyecare").style.display = "none"; 
 document.getElementById("title_eyewear").style.display = "block"; 
 document.getElementById("title_about").style.display = "none";  
  document.getElementById("lady").style.display = "none";
 document.getElementById("rack").style.display = "block";
 document.getElementById("chart").style.display = "block";
  document.getElementById("yellow_text").style.display = "none";
  document.getElementById("grey_text").style.display = "none";
  document.getElementById("blue_text").style.display = "block";
  document.getElementById("green_text").style.display = "none";

   

	
}
function StartTheTimerGreen(whichcontent)
{
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
  document.getElementById("homebutton").style.display = "block";
 document.getElementById("layer_green").style.zIndex = 5;
 new Effect.Move (layer_green,{ x: 290, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: function () { getContent(whichcontent)  }}); 
   if ((document.getElementById("layer_yellow").style.zIndex) < (document.getElementById("layer_blue").style.zIndex)) 
{
 document.getElementById("layer_blue").style.zIndex = 3;
 new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 
 document.getElementById("layer_yellow").style.zIndex = 2;
 new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 }
 else {
  document.getElementById("layer_blue").style.zIndex = 3;
 new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 
 document.getElementById("layer_yellow").style.zIndex = 2;
 new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 }
 
 document.getElementById("layer_grey").style.zIndex = 1;
 new Effect.Move (layer_grey,{ x: 40, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 

 document.getElementById("chart").style.left = 0;
  document.getElementById("header_eyecare").style.display = "block"; 
 document.getElementById("header_eyecare").style.left = 1;
 document.getElementById("header_eyewear").style.left = 15;
  document.getElementById("header_eyecare").style.display = "block"; 
  document.getElementById("header_eyewear").style.display = "block"; 
  document.getElementById("header_about").style.display = "none"; 
  document.getElementById("title_eyecare").style.display = "none"; 
 document.getElementById("title_eyewear").style.display = "none"; 
 document.getElementById("title_about").style.display = "block";   
 document.getElementById("lady").style.left = 0;
  document.getElementById("rack").style.display = "none";
 document.getElementById("chart").style.display = "block";
 document.getElementById("lady").style.display = "block"; 
  document.getElementById("yellow_text").style.display = "none";
    document.getElementById("grey_text").style.display = "none";
	  document.getElementById("blue_text").style.display = "none";
  document.getElementById("green_text").style.display = "block";
 


	
}
function StartTheTimerGrey(whichcontent)
{
  
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
  document.getElementById("homebutton").style.display = "none";
document.getElementById("layer_grey").style.zIndex = 6;
 new Effect.Move (layer_grey,{ x: 40, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
  if ((document.getElementById("layer_yellow").style.zIndex) < (document.getElementById("layer_blue").style.zIndex)) 
{
 document.getElementById("layer_blue").style.zIndex = 2;
 new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 
 document.getElementById("layer_yellow").style.zIndex = 3;
 new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 }
 else {
  document.getElementById("layer_blue").style.zIndex = 2;
 new Effect.Move (layer_blue,{ x: 185, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 
 document.getElementById("layer_yellow").style.zIndex = 3;
 new Effect.Move (layer_yellow,{ x: 80, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal}); 
 }
  document.getElementById("layer_green").style.zIndex = 1;

 document.getElementById("chart").style.left = 471;
 document.getElementById("lady").style.left = 472;
 document.getElementById("rack").style.left = 472;
 document.getElementById("header_about").style.left = 485;
 document.getElementById("header_eyewear").style.left = 485;
 document.getElementById("header_eyecare").style.left = 472;
 document.getElementById("header_about").style.display = "block";
 document.getElementById("header_eyewear").style.display = "block";
 document.getElementById("header_eyecare").style.display = "block";
 document.getElementById("rack").style.left = 472; 
  document.getElementById("header_eyecare").style.display = "block"; 
  document.getElementById("rack").style.display = "block";
 document.getElementById("lady").style.display = "block";
 document.getElementById("chart").style.display = "block";
  document.getElementById("yellow_text").style.display = "none";
  document.getElementById("grey_text").style.display = "block";
  document.getElementById("blue_text").style.display = "none";
  document.getElementById("green_text").style.display = "none";	
   

}