window.onload = init;
var mouseOvers = new Array();
var mouseOuts = new Array();

function init() {
  var hover = document.getElementById('hover');
  var hoverables = hover.getElementsByTagName('img');
  var number = 0;
  
  for(var i=0; i<hoverables.length; i++) {
      hoverables[i].onmouseover = clarify;
      hoverables[i].onmouseout = blur;

      if(hoverables[i].className != "nav") {
        hoverables[i].onclick = show;
      }
      hoverables[i].number = number;
      mouseOuts[number] = new Image();
      mouseOuts[number].src = hoverables[i].src;
      mouseOvers[number] = new Image();
      mouseOvers[number].src = hoverables[i].src.substring(0, hoverables[i].src.lastIndexOf("b")) + "c.png";
      number++;
  }
}


function clarify() {
  this.src = mouseOvers[this.number].src;
}

function blur() {
  this.src = mouseOuts[this.number].src;
}


function show() {
  if(this.parentNode.nodeName != "A") {
    var temp = this.src.substring(0, this.src.lastIndexOf("/"));
    var baseref = temp.substring(0, temp.lastIndexOf("/"));
    var relurl = this.src.substring(temp.lastIndexOf("/") + 1, this.src.lastIndexOf("c")) + ".jpg";
    var myWindow = window.open(baseref+'/itempl.html?'+relurl,'pic','height=100,width=100');
    myWindow.focus();
  }
}

function moveLeft() {
  var five = document.getElementById("5");

  if(five.number < mouseOuts.length - 2)  {
    five.src = mouseOuts[++five.number].src;
    var four = document.getElementById("4");
    four.src = mouseOuts[++four.number].src;
    var three = document.getElementById("3");
    three.src = mouseOuts[++three.number].src;
    var two = document.getElementById("2");
    two.src = mouseOuts[++two.number].src;
    var one = document.getElementById("1");
    one.src = mouseOuts[++one.number].src;
    document.getElementById("rightNav").style.visibility = "visible";
  } else {
    var leftNav = document.getElementById("leftNav");
    leftNav.style.visibility = "hidden";
    leftNav.src = "../navbl.png";
    leftNav.style.visibility = "hidden";
  }
}

function moveRight() {
  var one = document.getElementById("1");

  if(one.number > 1 )  {
    one.src = mouseOuts[--one.number].src;
    var two = document.getElementById("2");
    two.src = mouseOuts[--two.number].src;
    var three = document.getElementById("3");
    three.src = mouseOuts[--three.number].src;
    var four = document.getElementById("4");
    four.src = mouseOuts[--four.number].src;
    var five = document.getElementById("5");
    five.src = mouseOuts[--five.number].src;
    document.getElementById("leftNav").style.visibility = "visible";
  } else {
    var rightNav = document.getElementById("rightNav");
    rightNav.src = "../navbr.png";
    rightNav.style.visibility = "hidden";
  }
}