var showLayer;
var marketLayer;
var contactLayer;
var onHome;
var onServices;
var butHome;
var butServices;
var butContact;
var getThem;
var butOver = "home";
var butGuard = "home";
var spacer;
var functionReturn;

function clickResponse1() 
{
        butServices.style.color = "#f16523";
        butContact.style.color = "#f16523";
        butHome.style.color = "#939498";     
        document.getElementById('contactLayer').style.display = "none";
        document.getElementById('getThem').style.display = "none";
        document.getElementById('showLayer').style.display = "none";
        document.getElementById('marketLayer').style.display = "";
        document.getElementById('onHome').style.display = "";
        document.getElementById('onServices').style.display = "none";        
        document.getElementById('butHome').style.display = "";
        butGuard = "home";
}

function clickResponse3() 
{
        butHome.style.color = "#f16523";
        butContact.style.color = "#f16523";
        butServices.style.color = "#939498";
        document.getElementById('showLayer').style.visibility = "visible";
        document.getElementById('onServices').style.visibility = "visible";
        document.getElementById('contactLayer').style.display = "none";
        document.getElementById('getThem').style.display = "none";
        document.getElementById('showLayer').style.display = "";
        document.getElementById('marketLayer').style.display = "none";
        document.getElementById('onHome').style.display = "none";
        document.getElementById('onServices').style.display = ""; 
        document.getElementById('butServices').style.display = "";
        butGuard = "services";
} 

function clickResponse5() 
{
        butHome.style.color = "#f16523";
        butServices.style.color = "#f16523";
        butContact.style.color = "#939498"
        document.getElementById('getThem').style.visibility = "visible";
        butGuard = "contact";
        document.getElementById('butContact').style.display = "";
        document.getElementById('showLayer').style.display = "none";
        document.getElementById('marketLayer').style.display = "none";
        document.getElementById('onHome').style.display = "none";
        document.getElementById('onServices').style.display = "none";
        document.getElementById('contactLayer').style.left = (spacer + 155) + "px";
        document.getElementById('contactLayer').style.display = "";
        document.getElementById('getThem').style.left = (spacer + 252) + "px";
        document.getElementById('getThem').style.display = "";
 }

 function mOver1()  
 {
     if (butGuard !== "home") 
     {
         butOver = "home"
         this.style.cursor = "pointer";
         document.getElementById('butHome').style.color = "Blue";
     }
}

function mOver3() 
{
    if (butGuard !== "services") 
    {
        butOver = "services"
        this.style.cursor = "pointer";
        document.getElementById('butServices').style.color = "Blue";
    }
}

function mOver5() 
 {
     if (butGuard !== "contact") 
     {
         butOver = "contact"
         this.style.cursor = "pointer";
         butContact.style.color = "Blue";  
     }
}

function mOut() 
 {
     if (butOver === "home") 
     {
         if (butGuard !== "home") 
         {
             butHome.style.color = "#f16523";
             butOver = ""
         }
         else if (butGuard === "home") 
         {
             butHome.style.color = "#939498";
             butOver = ""
         }
         }
         else if (butOver === "about") {
             if (butGuard !== "about") {
             butAbout.style.color = "#f16523";
             butOver = ""
         }
         else if (butGuard === "about") 
         {
             butAbout.style.color = "#939498";
             butOver = ""
         }
     }

         else if (butOver === "services") {
             if (butGuard !== "services") {
             butServices.style.color = "#f16523";
             butOver = ""
         }
         else if (butGuard === "services") {
             butServices.style.color = "#939498";
             butOver = ""
         }
     }

    else if (butOver === "market") {
         if (butGuard !== "market") {
             butMarket.style.color = "#f16523";
             butOver = ""
         }
         else if (butGuard === "market") {
             butMarket.style.color = "#939498";
             butOver = ""
         }
     }
     
     else if (butOver === "contact") {
         if (butGuard !== "contact") {
             butContact.style.color = "#f16523";
             butOver = ""
         }
         else if (butGuard === "contact") {
             butContact.style.color = "#939498";
             butOver = ""
         }
     }
 }

 function sizeIt() {
     functionReturn = 0; spacer = 0;
     if ((document.documentElement) && (document.documentElement.clientWidth))
     { functionReturn = document.documentElement.clientWidth; }
     else if ((document.body) && (document.body.clientWidth))
     { functionReturn = document.body.clientWidth; }
     else if ((document.body) && (document.body.offsetWidth))
     { functionReturn = document.body.offsetWidth; }
     else if (window.innerWidth)
     { functionReturn = window.innerWidth - 18; }
     functionReturn = parseInt(functionReturn);
     if ((isNaN(functionReturn) == true) || (functionReturn < 0)) 
     { functionReturn = 0; }
     spacer = parseInt(functionReturn / 2) - 500;
     if (spacer < 0)
     { spacer = "0"; }

     document.getElementById('butHome').style.left = (spacer + 860) + "px";
     document.getElementById('butServices').style.left = (spacer + 860) + "px";
     document.getElementById('butContact').style.left = (spacer + 860) + "px";
     document.getElementById('showLayer').style.left = (spacer + 90) + "px";
     document.getElementById('marketLayer').style.left = (spacer + 90) + "px";
     document.getElementById('onHome').style.left = (spacer + 440) + "px";
     document.getElementById('onServices').style.left = (spacer + 440) + "px";
     showLayer = document.getElementById("showLayer");
     marketLayer = document.getElementById("marketLayer");
 }

 function init() {
     functionReturn = 0; spacer = 0;
     if ((document.documentElement) && (document.documentElement.clientWidth))
     { functionReturn = document.documentElement.clientWidth; }
     else if ((document.body) && (document.body.clientWidth))
     { functionReturn = document.body.clientWidth; }
     else if ((document.body) && (document.body.offsetWidth))
     { functionReturn = document.body.offsetWidth; }
     else if (window.innerWidth)
     { functionReturn = window.innerWidth - 18; }
     functionReturn = parseInt(functionReturn);
     if ((isNaN(functionReturn) == true) || (functionReturn < 0))
     { functionReturn = 0; }
     spacer = parseInt(functionReturn / 2) - 500;
     if (spacer < 0) 
     {spacer = "0";}

     document.getElementById('butHome').style.left = (spacer + 860) + "px";
     document.getElementById('butServices').style.left = (spacer + 860) + "px";
     document.getElementById('butContact').style.left = (spacer + 860) + "px";
     document.getElementById('showLayer').style.left = (spacer + 90) + "px";
     document.getElementById('marketLayer').style.left = (spacer + 90) + "px";
     document.getElementById('onHome').style.left = (spacer + 440) + "px";
     document.getElementById('onServices').style.left = (spacer + 440) + "px";
     showLayer = document.getElementById("showLayer");
     marketLayer = document.getElementById("marketLayer");
     onHome = document.getElementById("onHome");
     onServices = document.getElementById("onServices");    
     
     butHome = document.getElementById("butHome");
     butServices = document.getElementById("butServices");
     butContact = document.getElementById("butContact");

     document.getElementById('marketLayer').style.visibility = "visible";
     document.getElementById('onHome').style.visibility = "visible";

     document.getElementById('butHome').style.visibility = "visible";
     document.getElementById('butServices').style.visibility = "visible";
     document.getElementById('butContact').style.visibility = "visible";

    butHome.onclick = clickResponse1;
    butServices.onclick = clickResponse3;
    butContact.onclick = clickResponse5;

    butHome.onmouseover = mOver1;
    butHome.onmouseout = mOut;
    butServices.onmouseover = mOver3;
    butServices.onmouseout = mOut;   
    butContact.onmouseover = mOver5;
    butContact.onmouseout = mOut;

     window.onresize = sizeIt;
 }
onload = init;