var menuDiv;
var delegate;


function InitializeMenu(div, moveDelegate){
  menuDiv = div;
  menuDiv.innerHTML = "";
  menuDiv.appendChild(GetImageDiv("Home", "index.php", "Home", 100));
  menuDiv.appendChild(GetImageDiv("Contact", "contact_us.php", "Contact", 180));
  menuDiv.appendChild(GetImageDiv("About", "about_us.php", "About", 260));
  menuDiv.appendChild(GetImageDiv("Training", "training.php", "Training", 340));
  menuDiv.appendChild(GetImageDiv("Modules", "modules.php", "Modules", 420));
  menuDiv.appendChild(GetImageDiv("Discussions", "discussion_main.php", "Discussion", 500));
  menuDiv.appendChild(GetImageDiv("Project", "current_status.php", "Status", 580));
  menuDiv.appendChild(GetImageDiv("Calendar", "calendar.php", "Calendar", 660));
  delegate = moveDelegate;
}

function GetImageDiv(imgName, href, linkText, left){
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.top = "30px";
  div.style.height = "80px";
  div.style.width = "80px";
  div.style.left = left + "px";
  div.style.textAlign = "center";
  div.GetImageIndex = CalculateImageIndex;
  
  var a = document.createElement("a");
  a.href = href;
  a.title = "Go to " + linkText + " page";
  a.position = "relative";
  a.className = "menuLink";
  
  var images = new Array();
  for (i = 0; i < 5; i++){
    var img = document.createElement("img");
    var height = 20 + (5*i);
    img.style.height = height + "px";
    img.src = "images/Header/Menu/" + imgName + i + ".png";
    img.style.position = "relative";
    img.alt = linkText;
    img.style.top = (30 - (i*5)) + "px";
    images[i] = img;
  }
  a.images = images;
  a.appendChild(images[0]);
  a.UseImage = UseImageAtIndex;
  div.appendChild(a);
  div.imageAnchor = a;
  
  
  var textDiv = document.createElement("div");
  textDiv.style.position = "absolute";
  textDiv.style.height = "20px";
  textDiv.style.top = "50px";
  textDiv.style.left = "0px";
  textDiv.style.width = "80px";
  div.appendChild(textDiv);
  
  a = document.createElement("a");
  a.href = href;
  a.title = "Go to " + linkText + " page";
  a.position = "relative";
  a.className = "menuLink";
  a.innerHTML = linkText;
  a.innerText = linkText;
  textDiv.appendChild(a);
  
  return div;
}

function CalculateImageIndex(x){
    var offset = (GetClientWidth() - 800)/2;
    var myLeft = parseInt(this.style.left);
    if (offset > 0){
      myLeft = myLeft + offset;
    }
    var myRight = myLeft + 80;
    if (x < myLeft - 80 || x > myRight + 80){
      return 0;
    }
    else {
      var middle = (myLeft + myRight) / 2;
      var relX = middle - x;
      var answer = Math.round( Math.cos(relX / 240 * Math.PI) * 4);
      return answer;
    }
  }

function UseImageAtIndex(index){
  this.innerHTML = "";
  this.appendChild(this.images[index]);
  return;
  this.appendChild(this.textDiv);
  if (!this.textDiv.innerText){
    this.textDiv.innerText = this.linkText;
  }
}


function MoveButtons(e){
  var y = GetY(e);
  if (y < 60){
    RestoreButtons(e);
  }
  else {
	for (i = 0; i < menuDiv.childNodes.length; i++){
	  var div = menuDiv.childNodes[i];
	  if (div.nodeName == "DIV"){
	    var index = div.GetImageIndex(GetX(e));
	    div.imageAnchor.UseImage(index);
	  }
	}
	}
	if (delegate){ delegate(); }
}

function RestoreButtons(e){
  var y = GetY(e);
  if (y >= 120 || y < 60){
		for (i = 0; i < menuDiv.childNodes.length; i++){
		  var div = menuDiv.childNodes[i];
		  if (div.nodeName == "DIV"){
		    div.imageAnchor.UseImage(0);
		  }
		}
	}
}

function GetX(e){
  var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information
	return posx;
}
function GetY(e){
  var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information
	return posy;
}

function GetClientWidth() {
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) { //Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} 
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} 
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	return myWidth;
}