Event.observe(window,"load", PageLoaded);
Event.observe(window,"resize", PageResized);

function PageLoaded() { 
  PageResized();
  ShowElements();
  BuildScreenPrintArea();
  SetSelectedMenuItem();
}

function PageResized()
{
  var pw = parseInt(document.body.clientWidth);
  var header = $("header");
  var middle= $("middle");
  var cutout= $("cutout");
  var footer= $("footer");
  
  var gmaps_placeholder = $("googlemaps_placeholder");
  var gmaps = $("googlemaps");

  if ((header) && (middle) && (cutout) && (footer)) {
    // header
    var hl = (pw/2) - (Element.getWidth(header) / 2);
    if (hl < 0) { hl = 0 }
    header.style.left = hl + "px";  
  
    // middle
    var ml = (pw/2) - (Element.getWidth(middle) / 2);
    if (ml < 0) { ml = 0 }
    middle.style.left = ml + "px";

    // cutout
    var cl = (pw/2) - (Element.getWidth(middle) / 2);
    if (cl < 0) { cl = 0 }
    cutout.style.left = cl + "px";

    // footer
    var fl = (pw/2) - (Element.getWidth(footer) / 2);
    if (fl < 0) { fl = 0 }
    footer.style.left = fl + "px"; 
    var ft =  Element.getHeight(header)  + Element.getHeight(middle) + 60; 
    footer.style.top = ft + "px";      
  }
}

function ShowElements()
{
  var header = $("header");
  if (header) {Element.show(header);}

  var cutout= $("cutout");
  if (cutout) {Element.show(cutout);}

  var middle= $("middle");
  if (middle) {Element.show(middle);}

  var footer= $("footer");
  if (footer) {Element.show(footer);}
  
  var gmaps_placceholder = $("googlemaps_placeholder") ;
  var gmaps_container = $("googlemaps_container");
  if ((gmaps_placceholder) && (gmaps_container)) {
    gmaps_placceholder.innerHTML =  gmaps_container.innerHTML;
  }
}

function OverNavBarItem(obj)
{
   obj.className = "navbar_item_hover";
}

function OutNavBarItem(obj)
{
  obj.className = "navbar_item";  
}

function ClickNavBarItem(obj)
{
  alert(obj.id + " clicked");
}

function BuildScreenPrintArea() 
{
  var cspa = $("content_screenprintarea");
  var spnb = $("screenprint_navbar");
  if ((cspa) && (spnb)) {
    var navbarhtml = "";
    var imgcol = cspa.getElementsByTagName("IMG");
    for (var i=0;i<imgcol.length;i++) {
      imgobj = imgcol[i];
      if (i < 1) {
        imgobj.style.display = "";  
        navbarhtml += "<span id='span_" + (i+1) + "' class='navbarnumber_active' onmouseover='OverSpNav(this)' onmouseout='OutSpNav(this)' onclick='ClickSpNav(this)'>" + (i+1) + "</span>";	      
      } else {
        imgobj.style.display = "none";
        navbarhtml += "<span id='span_" + (i+1) + "' class='navbarnumber' onmouseover='OverSpNav(this)' onmouseout='OutSpNav(this)' onclick='ClickSpNav(this)'>" + (i+1) + "</span>";
      }
      imgobj.id = "img_" + (i + 1);
      imgobj.setAttribute("width","440");       
      
      if (i < imgcol.length - 1) {
        navbarhtml += "&nbsp;|&nbsp;";
      }
    }
    if (imgcol.length > 1) {
      spnb.innerHTML = navbarhtml;
    }
  }
}

function OverSpNav(obj)
{
  if ( obj.getAttribute("status") != "selected") {
    obj.className = "navbarnumber_over"
  }
}

function OutSpNav(obj)
{
  if ( obj.getAttribute("status") != "selected") {
    obj.className = "navbarnumber"
  }
}

function ClickSpNav(obj)
{ShowScreenPrint(parseInt(obj.innerHTML));}

function ShowScreenPrint(id)
{
  ResetScreenPrints();
  var active_img = $("img_" + id);
  if (active_img) {
    active_img.style.display = "";
  }
  
  var active_span = $("span_" + id);
  if (active_span) {
    active_span.setAttribute("status", "selected");
    active_span.className = "navbarnumber_active";
  }
}

function ResetScreenPrints()
{
  var cspa = $("content_screenprintarea");
  if (cspa) {
    var imgcol = cspa.getElementsByTagName("IMG");
    for (var i=0;i<imgcol.length;i++) {
      imgcol[i].style.display = "none";  
    }     
  }
  
  var spnb = $("screenprint_navbar");
  if (spnb) {
    var spancol = spnb.getElementsByTagName("SPAN");
    for (var j=0;j<spancol.length;j++) {
    	spancol[j].setAttribute("status","notselected");
      spancol[j].className = "navbarnumber";  
    }     
  }
}

function SetSelectedMenuItem()
{
  var header_start = $("header_start");
  var header_projecten = $("header_projecten");
  var header_producten = $("header_producten");
  var header_licenties= $("header_licenties");
  var header_overons = $("header_overons");
  var header_contact = $("header_contact");
  
  if ((header_start) && (header_projecten) && (header_producten) && (header_licenties) && (header_overons) && (header_contact)) {
    var activepage = document.location.href; 
	  if ((activepage.indexOf("/projecten") != -1) || (activepage.indexOf("/project") != -1)) {
	    header_projecten.className = "navbar_item_selected";   
	  } else if ((activepage.indexOf("/producten") != -1) || (activepage.indexOf("/product") != -1)) {
	    header_producten.className = "navbar_item_selected";  
	  } else if ((activepage.indexOf("/licenties") != -1) || (activepage.indexOf("/licentie") != -1)) {
	    header_licenties.className = "navbar_item_selected";  
                  } else if (activepage.indexOf("/overons") != -1) {
	    header_overons.className = "navbar_item_selected";  
	  } else if (activepage.indexOf("/contact") != -1) {
	    header_contact.className = "navbar_item_selected";  
	  } else {
	    header_start.className = "navbar_item_selected";  
	  }
	}
}