/* ================================================================ */
/* ck which image was clicked and do the right thing.               */
/* ================================================================ */
function onImgClick(e) {
  var target;
  if(e.srcElement) { target = e.srcElement; }
  else             { target = e.target;     }

  var mb1 = document.getElementById('mb1')
  var mb2 = document.getElementById('mb2')
  var mb3 = document.getElementById('mb3')
  var mb4 = document.getElementById('mb4')
  var mb5 = document.getElementById('mb5')
  mb1.src = '/kenhat/user_guide/images/Step1.gif';
  mb2.src = '/kenhat/user_guide/images/Step2.gif';
  mb3.src = '/kenhat/user_guide/images/Step3.gif';
  mb4.src = '/kenhat/user_guide/images/Step4.gif';
  mb5.src = '/kenhat/user_guide/images/Step5.gif';
  var page1 = document.getElementById('page1');
  var page2 = document.getElementById('page2');
  var page3 = document.getElementById('page3');
  var page4 = document.getElementById('page4');
  var page5 = document.getElementById('page5');
  page1.style.display = 'none';
  page2.style.display = 'none';
  page3.style.display = 'none';
  page4.style.display = 'none';
  page5.style.display = 'none';

  if(target.id == 'mb1' || target.id == 'next1' || target.id == 'prev1') {
          mb1.src = '/kenhat/user_guide/images/Step1_selected.gif';
          page1.style.display = 'block';
  }
  else if(target.id == 'mb2' || target.id == 'next2' || target.id == 'prev2') {
          mb2.src = '/kenhat/user_guide/images/Step2_selected.gif';
          page2.style.display = 'block';
  }
  else if(target.id == 'mb3' || target.id == 'next3' || target.id == 'prev3') {
          mb3.src = '/kenhat/user_guide/images/Step3_selected.gif';
          page3.style.display = 'block';
  }
  else if(target.id == 'mb4' || target.id == 'next4' || target.id == 'prev4') {
          mb4.src = '/kenhat/user_guide/images/Step4_selected.gif';
          page4.style.display = 'block';
  }
        else if(target.id == 'mb5' || target.id == 'next5' || target.id == 'prev5') {
          mb5.src = '/kenhat/user_guide/images/Step5_selected.gif';
          page5.style.display = 'block';
  }
  window.scrollTo(0,0);
}

/* ================================================================ */
/* add img events                                                   */
/* ================================================================ */
function addListeners() {
  var img_tags = document.getElementsByTagName('img');
  for(var i=0; i< img_tags.length; i++) {
    YAHOO.util.Event.addListener(img_tags[i], 'click', onImgClick);
  }
}
      
/* ================================================================ */
/* on page load startup all the action                              */
/* ================================================================ */
YAHOO.util.Event.addListener(window, 'load', addListeners);