var startButton, currentArea, defaultSlideTime = 1000, areas;

function initNavigation() {
  leftCoord = xClientWidth() - 420, topCoord = 10, leftActiveCoord = 50, topActiveCoord = 50;
  areas = new Array();
  
  areas[0] = new Object(); areas[0]["name"] = "impressum";
  areas[0]["inactive_x"] = leftCoord + 254; areas[0]["inactive_y"] = topCoord + 212;
  areas[0]["active_x"] = leftActiveCoord; areas[0]["active_y"] = topActiveCoord;
  
  areas[1] = new Object(); areas[1]["name"] = "kontakt";
  areas[1]["inactive_x"] = leftCoord + 2; areas[1]["inactive_y"] = topCoord + 54;
  areas[1]["active_x"] = leftActiveCoord; areas[1]["active_y"] = topActiveCoord;
  
  areas[2] = new Object(); areas[2]["name"] = "profil";
  areas[2]["inactive_x"] = leftCoord + 292; areas[2]["inactive_y"] = topCoord + 25;
  areas[2]["active_x"] = leftActiveCoord; areas[2]["active_y"] = topActiveCoord;
  
  areas[3] = new Object(); areas[3]["name"] = "referenzen";
  areas[3]["inactive_x"] = leftCoord + 108; areas[3]["inactive_y"] = topCoord + 3;
  areas[3]["active_x"] = leftActiveCoord; areas[3]["active_y"] = topActiveCoord;
  
  areas[4] = new Object(); areas[4]["name"] = "projekte";
  areas[4]["inactive_x"] = leftCoord + 272; areas[4]["inactive_y"] = topCoord + 133;
  areas[4]["active_x"] = leftActiveCoord; areas[4]["active_y"] = topActiveCoord;
  
  areas[5] = new Object(); areas[5]["name"] = "glossar";
  areas[5]["inactive_x"] = leftCoord + 178; areas[5]["inactive_y"] = topCoord + 79;
  areas[5]["active_x"] = leftActiveCoord; areas[5]["active_y"] = topActiveCoord;
}

function xChangeImageOnClick(idOut, urlClick, fnUp, delay) // Object Prototype
{
  // Downgrade Detection
  if (typeof Image != 'undefined' && document.getElementById) {
    var img = document.getElementById(idOut);
    if (img) {
      // Constructor
      var i = new Image();
      i.src = urlClick;
      // Event Listener Methods (Closures)
      img.onclick = function()
      {
        this.src = urlClick;
        img.onclick = null;
      }
      img.onmouseup = function()
      {
      	img.onmouseup = null;
        if (fnUp) {
          if(delay == 0) fnUp();
          else window.setTimeout(fnUp, delay);        	
        }
      }
      return this;
    }
  }
  return null;
}


window.onload = function() {
  initNavigation();
  xImgRollSetup("images/northeast_pile_nav/", "_light", ".gif", "profil", "kontakt", "impressum", "referenzen", "glossar", "projekte")
  //startButton = new xChangeImageOnClick('logomorph', 'images/logo-small-darkmorph.gif', startFullPage, 2000);
    window.setTimeout(startFullPage, 2000)
}

window.onresize = function() {
  initNavigation();
  slideNavElems();
}

/**
  * Funktion um das Startlayout der Seite herzustellen
  */
function startFullPage() {
  var bgImage = xGetElementById('logomorph');
  if(bgImage) {
    bgImage.style.cursor = 'default';
    bgImage.onclick = null;
    bgImage.onmouseup = null;
  }
  
  for (var i = 0; i < areas.length; i++) {
    xMoveTo(areas[i]["name"], xClientWidth() / 2 - 51, xClientHeight() / 2 - 30);
    xMoveTo(areas[i]["name"] + '_content', -xClientWidth(), 120);
  }
  currentArea = "impressum";  
  
  for (var i = 0; i < areas.length; i++) {
    xShow(areas[i]["name"]);
    xShow(areas[i]["name"] + '_content');
  }
  slideNavElems();
  xSlideTo(currentArea + '_content', 25, 120, defaultSlideTime);
}

function slideNavElems() {
  for (var i = 0; i < areas.length; i++) {	
    if(areas[i]["name"] == currentArea) {
      xSlideTo(areas[i]["name"], areas[i]["active_x"], areas[i]["active_y"], defaultSlideTime);
    } else {
      xSlideTo(areas[i]["name"], areas[i]["inactive_x"], areas[i]["inactive_y"], defaultSlideTime);
    }
      
  }
}

function changeCurrentArea(newArea) {
  xSlideTo(currentArea + '_content', -xClientWidth(), 120, defaultSlideTime);
  currentArea = newArea;
  xSlideTo(currentArea + '_content', 25, 120, defaultSlideTime);
  slideNavElems();
}