function changeBodyOne() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");
  
  one.style.display = 'inline';
  two.style.display = 'none';
  three.style.display = 'none';
  four.style.display = 'none';
  five.style.display = 'none';
  six.style.display = 'none';
  seven.style.display = 'none';
  eight.style.display = 'none';
  
  triangle.style.left = '30px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '29px';
  }
}

function changeBodyTwo() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");
  
  one.style.display = 'none';
  two.style.display = 'inline';
  three.style.display = 'none';
  four.style.display = 'none';
  five.style.display = 'none';
  six.style.display = 'none';
  seven.style.display = 'none';
  eight.style.display = 'none';
  
  triangle.style.left = '105px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '104px';
  }
}

function changeBodyThree() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");

  one.style.display = 'none';
  two.style.display = 'none';
  three.style.display = 'inline';
  four.style.display = 'none';
  five.style.display = 'none';
  six.style.display = 'none';
  seven.style.display = 'none';
  eight.style.display = 'none';
  
  triangle.style.left = '204px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '193px';
  }
}

function changeBodyFour() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");

  one.style.display = 'none';
  two.style.display = 'none';
  three.style.display = 'none';
  four.style.display = 'inline';
  five.style.display = 'none';
  six.style.display = 'none';
  seven.style.display = 'none';
  eight.style.display = 'none';
  
  triangle.style.left = '301px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '281px';
  }
}

function changeBodyFive() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");

  one.style.display = 'none';
  two.style.display = 'none';
  three.style.display = 'none';
  four.style.display = 'none';
  five.style.display = 'inline';
  six.style.display = 'none';
  seven.style.display = 'none';
  eight.style.display = 'none';
  
  triangle.style.left = '407px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '383px';
  }
}

function changeBodySix() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");

  one.style.display = 'none';
  two.style.display = 'none';
  three.style.display = 'none';
  four.style.display = 'none';
  five.style.display = 'none';
  six.style.display = 'inline';
  seven.style.display = 'none';
  eight.style.display = 'none';
  
  triangle.style.left = '527px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '494px';
  }
}

function changeBodySeven() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");

  one.style.display = 'none';
  two.style.display = 'none';
  three.style.display = 'none';
  four.style.display = 'none';
  five.style.display = 'none';
  six.style.display = 'none';
  seven.style.display = 'inline';
  eight.style.display = 'none';
  
  triangle.style.left = '617px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '584px';
  }
}

function changeBodyEight() {
  var one = document.getElementById("body1");
  var two = document.getElementById("body2");
  var three = document.getElementById("body3");
  var four = document.getElementById("body4");
  var five = document.getElementById("body5");
  var six = document.getElementById("body6");
  var seven = document.getElementById("body7");
  var eight = document.getElementById("body8");

  var triangle = document.getElementById("triangle");

  one.style.display = 'none';
  two.style.display = 'none';
  three.style.display = 'none';
  four.style.display = 'none';
  five.style.display = 'none';
  six.style.display = 'none';
  seven.style.display = 'none';
  eight.style.display = 'inline';
  
  triangle.style.left = '701px';
  var nav=navigator.userAgent;
  if(nav.indexOf("Safari")>0)
  {
    triangle.style.left = '661px';
  }
}

function addListeners(e) {
  var oneBar = document.getElementById("1");
  var twoBar = document.getElementById("2");
  var threeBar = document.getElementById("3");
  var fourBar = document.getElementById("4");
  var fiveBar = document.getElementById("5");
  var sixBar = document.getElementById("6");
  var sevenBar = document.getElementById("7");
  var eightBar = document.getElementById("8");

  addEvent(oneBar, 'click', changeBodyOne, false);
  addEvent(twoBar, 'click', changeBodyTwo, false);
  addEvent(threeBar, 'click', changeBodyThree, false);
  addEvent(fourBar, 'click', changeBodyFour, false);
  addEvent(fiveBar, 'click', changeBodyFive, false);
  addEvent(sixBar, 'click', changeBodySix, false);
  addEvent(sevenBar, 'click', changeBodySeven, false);
  addEvent(eightBar, 'click', changeBodyEight, false);
}  
  
addEvent(window, 'load', addListeners, false);

function addEvent(elm, evType, fn, useCapture) {
// cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko
// by Scott Andrew
  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;
  }
}