/* get an element from the document */
function getElm(elmId) {
  var elm = false;
  
  // W3C
  if (document.getElementById) {
    elm = document.getElementById(elmId);
  }
  
  // Older IE 
  else if (document.all) {
    elm = document.all[elmId];
  }
  
  return elm;
}

/* return the element that triggered the given event */
function getEventElement(e) {
  var element;
  
  // do we need the global event object?
  if (!e) {
    var e = window.event;
  }
  
  // W3C
  if (e.target) {
    element = e.target;
  }
  
  // IE
  else if (e.srcElement) {
    element = e.srcElement;
  }
  
  // Silly Safari
  if (element.nodeType == 3) {
    element = element.parentNode;
  }
  
  return element;
}

/* set an event listener on an object */
function listen(obj, eventName, callBackFunc, bubble) {
  // W3C
  if (obj && obj.addEventListener) {
    var bub = (typeof bubble == 'boolean') ? bubble : false;
    obj.addEventListener(eventName, callBackFunc, bub);
  }
  
  // try IE
  else if (obj && obj.attachEvent) {
    obj.attachEvent('on' + eventName, callBackFunc);
  }
}

/* obtain an image object from a mouseout event and change the image src */
function turnImgOff (e) {
  var img = getEventElement(e);
  img.src = img.offSrc;
}

/* obtain an image object from a mouseover event and change the image src */
function turnImgOn (e) {
  var img = getEventElement(e);
  img.src = img.onSrc;
}

/* setup menu images for rollover */
function setupMenu(e) {
  var hair = getElm('hair');
  hair.onSrc = 'images/layout/hair1.gif';
  hair.offSrc = 'images/layout/hair0.gif';
  listen(hair, 'mouseover', turnImgOn);
  listen(hair, 'mouseout', turnImgOff);
  
  var color = getElm('color');
  color.onSrc = 'images/layout/color1.gif';
  color.offSrc = 'images/layout/color0.gif';
  listen(color, 'mouseover', turnImgOn);
  listen(color, 'mouseout', turnImgOff);
  
  var hairRenewal = getElm('hairRenewalTreatment');
  hairRenewal.onSrc = 'images/layout/hairRenewalTreatment1.gif';
  hairRenewal.offSrc = 'images/layout/hairRenewalTreatment0.gif';
  listen(hairRenewal, 'mouseover', turnImgOn);
  listen(hairRenewal, 'mouseout', turnImgOff);
  
  var styling = getElm('styling');
  styling.onSrc = 'images/layout/styling1.gif';
  styling.offSrc = 'images/layout/styling0.gif';
  listen(styling, 'mouseover', turnImgOn);
  listen(styling, 'mouseout', turnImgOff);
  
  var hairRemoval = getElm('hairRemoval');
  hairRemoval.onSrc = 'images/layout/hairRemoval1.gif';
  hairRemoval.offSrc = 'images/layout/hairRemoval0.gif';
  listen(hairRemoval, 'mouseover', turnImgOn);
  listen(hairRemoval, 'mouseout', turnImgOff);
  
  var makeup = getElm('makeup');
  makeup.onSrc = 'images/layout/makeup1.gif';
  makeup.offSrc = 'images/layout/makeup0.gif';
  listen(makeup, 'mouseover', turnImgOn);
  listen(makeup, 'mouseout', turnImgOff);
}

/* setup menu once the page loads */
listen(window, 'load', setupMenu);