var MenuHandler = {
  list: null,
  
  pointer: null,
  
  basePointerWanted: 0,
  
  pointerWantedX: 0,
  
  init: function() {
    MenuHandler.addEvent(window, 'load', MenuHandler.activate, false);
  },
  activate: function() {
    var hdr = document.getElementById("header");
    if (!hdr) { return; }
    hdr.style.position = "relative";
    
    MenuHandler.list = hdr.getElementsByTagName("ul")[0];
    var cumlW = 0;
    var items = MenuHandler.list.getElementsByTagName("li");
    
    var newItems = [];

    for (var i=0; i<items.length; i++) {
      (function(el) {
        el.style.borderLeftWidth  = "0px";
        el.style.borderRightWidth = "0px";
        el.style.paddingLeft = "0px";
        el.style.paddingRight = "0px";
        var newEl = el.cloneNode(true);
        newItems[newItems.length] = newEl;
        //alert(i + " : " + el.offsetWidth);
        cumlW += el.offsetWidth;
      })(items[i]);
    }

    var spacing = Math.floor((MenuHandler.list.offsetWidth - 30 - cumlW) / (items.length-1));
    
    //alert("Total Width: " + cumlW + "\nSpacing: " + spacing);
    
    for (var i=0; i<newItems.length; i++) {
      (function(el) {
        if (i > 0)                 { el.style.borderLeftWidth  = Math.floor(spacing / 2) + "px"; }
        if (i < newItems.length-1) { el.style.borderRightWidth = Math.floor(spacing / 2) + "px"; }
        //el.style.borderColor = (i % 2 == 0) ? 'red' : 'yellow';
      })(newItems[i]);
    }
    
    newItems[0].style.borderLeftWidth = "15px";
    newItems[newItems.length-1].style.borderRightWidth = "15px";
    
    MenuHandler.basePointerWantedX = -100;
    
    while(MenuHandler.list.childNodes.length > 0) { MenuHandler.list.removeChild(MenuHandler.list.childNodes[0]); }
    for (var i=0; i<newItems.length; i++) {
      MenuHandler.list.appendChild(newItems[i]);
      if ((document.body.id) && ((' ' + newItems[i].className + ' ').indexOf(' ' + document.body.id + ' ') > -1)) {
        MenuHandler.basePointerWantedX = newItems[i].offsetLeft + newItems[i].offsetWidth / 2 - 6;
      }
      (function(el) {
        MenuHandler.addEvent(el, 'mouseover', function() { MenuHandler.pointerWantedX = el.offsetLeft + el.offsetWidth/2 - 6; }, false);
        MenuHandler.addEvent(el, 'mouseout' , function() { MenuHandler.pointerWantedX = MenuHandler.basePointerWantedX; }, false);
      })(newItems[i]);
    }
    
    MenuHandler.pointer = document.createElement("img");
    MenuHandler.pointer.src = "img/pointer.gif";
    with (MenuHandler.pointer.style) {
      position = "absolute";
      left = MenuHandler.basePointerWantedX + "px";
      bottom = "3px";
      width = "11px";
      height = "7px";
    }
    
    MenuHandler.pointerWantedX = MenuHandler.basePointerWantedX;
    
    hdr.appendChild(MenuHandler.pointer);
    
    window.setInterval( MenuHandler.tick, 50);
  },
  tick: function() {
    var dx = MenuHandler.pointerWantedX - MenuHandler.pointer.offsetLeft;
    if (dx == 0) { return; }
    dx /= 4.0;
    if (Math.abs(dx) < 1.0) {
      MenuHandler.pointer.style.left = Math.floor(MenuHandler.pointerWantedX) + "px";
    }
    else {
      MenuHandler.pointer.style.left = Math.floor(MenuHandler.pointer.offsetLeft + dx) + "px";
    }
  },
	addEvent: function(elm, evType, fn, useCapture){
		if (elm.addEventListener)
		{
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (elm.attachEvent) {
			var r = elm.attachEvent('on' + evType, fn);
			return r;
		} else {
			elm['on' + evType] = fn;
		}
	}
};
MenuHandler.init();