d = document;
function Navigation() {
  this.active = 0;
  this.o = {};
  this.items = [];
  this.ready = false;
  return this;
}
Navigation.prototype.init = function(id) {
  this.o = d.getElementById(id).getElementsByTagName('ul')[0];
  for (var i=0;i<this.o.childNodes.length;i++) {
    var item = this.o.childNodes[i];
    if (item.nodeType!=1) continue;
    if (item.className=='active') this.active = item;
    this.items.push(item);
  }
  this.ready = true;
}
Navigation.prototype.over = function(i) {
  if(!this.ready) return;
  var clone, item = this.items[i], cid = 'JS_clone'+i;
  item.className='over';
  if (clone = d.getElementById(cid)) {
    clone.style.visibility = 'visible';
  } else {
    clone = d.createElement('div');
    clone.id = cid;
    clone.className = 'clone';
    clone.style.left = i*52 + 'px';
    clone.innerHTML = item.innerHTML;
    item.parentNode.parentNode.appendChild(clone);
  }
  this.active.className='inactive';
}
Navigation.prototype.out = function(i) {
  if(!this.ready) return;
  var item = this.items[i], cid = 'JS_clone'+i;
  d.getElementById(cid).style.visibility = 'hidden';
  item.className='';
  this.active.className = 'active';
}
var navigation = new Navigation;