// Smile Navigation Javascript
//////////////////////////////

var assetPath = '/images/side_nav/';

//////////////////////////////
// browser detection
NS4 = (document.layers) ? true : false;
IE4 = (document.all) ? true : false;

if (NS4 || IE4) {
  gotlayers = true;
} else {
  event = null;
  gotlayers = false;
}

//////////////////////////////
// pop menu

// menu variables
var popName='sidePop';
var currTimer = 0;
var menuTimeout = 1500;
var cxPos = 194;
var cyPos = 128;
var nsyOffset = -1;


// show pop menu
function popMenu() {
  // stop timer
  clearTimeout(currTimer);
  // move and show it
  if (gotlayers) {
    if (NS4) {
      if (document.layers[popName]) {
        document.layers[popName].left = cxPos;
        document.layers[popName].top = cyPos + nsyOffset;
        document.layers[popName].visibility = "show";
      } else {
      	// no layer
      }
    } else {
      if ( document.all.item(popName) ) {
        document.all.item(popName).style.pixelLeft = cxPos;
        document.all.item(popName).style.pixelTop = cyPos;
        document.all[popName].style.visibility = "visible";
      } else {
      	// no layer
      }
    }
  }
}

// hide pop menu
function hide() {
  if (gotlayers) {
    if (NS4) {
      if (document.layers[popName]) { document.layers[popName].visibility = "hide"; }
    } else {
      if ( document.all.item(popName) ) { document.all[popName].style.visibility = "hidden"; }
    }
    topSideNavSwap('');
  }
}

// delayed hide pop menu
function delayHide() {
    currTimer = setTimeout('hide();',menuTimeout);
}

//////////////////////////////
// Rollover code

// declare rollover variables
var prevAKey = "";
var nextBKey = "";
var lastPos = 0;
var lastName = "";
var lastImg = "";
var keyPrev = "";
var keyNext = "";

// preload
if (document.images) {
  // preload keylines
  var keyline_pink = new Image();
  keyline_pink.src = assetPath + "keyline_pink.gif";
  var keyline_half_pink = new Image();
  keyline_half_pink.src = assetPath + "keyline_half_pink.gif";
  var keyline_white = new Image();
  keyline_white.src = assetPath + "keyline_white.gif";
  // preload rollover images
  var action_white = new Image();
  action_white.src = assetPath + "pink_square_onwhite.gif";
  var action_half_pink = new Image();
  action_half_pink.src = assetPath + "pink_square_onhalf_pink.gif";
  var action_pink = new Image();
  action_pink.src = assetPath + "white_square_onpink.gif";
}

var keylineImage;
var actionImage;

// rollover: over
function imgOver(itemName, itemPosition, itemColor, layerName) { 
  if (document.images) {
    // assign images based on colour
    if ( itemColor == 'white' ) {
      keylineImage = keyline_pink.src;
      actionImage  = action_white.src;
    } else if ( itemColor == 'half_pink' ) {
      keylineImage = keyline_white.src;
      actionImage  = action_half_pink.src;
    } else { // pink
      keylineImage = keyline_white.src;
      actionImage  = action_pink.src;
    }

    keyPrev = 'k'+itemPosition;
    keyNext = 'k'+(parseInt(itemPosition) + 1);
    lastPos = itemPosition;
    lastName = itemName;

	//alert('actionImage:' + actionImage + 'keylineImage:' + keylineImage + 'itemName:' + itemName + 'itemName:' + itemName); // debug
	
    if ( (layerName.length > 0) && NS4 ) { // need to take into account layername
      // action
      lastImg = document.layers[layerName].document.images[itemName].src;
      document.layers[layerName].document.images[itemName].src = actionImage;
      // keyline : above
      prevAKey = document.layers[layerName].document.images[keyPrev].src;
      document.layers[layerName].document.images[keyPrev].src = keylineImage;
      // keyline : below
      prevBKey = document.layers[layerName].document.images[keyNext].src;
      document.layers[layerName].document.images[keyNext].src = keylineImage;
    }  else { // IE4 or no layer
      // action
      lastImg = document.images[itemName].src;
      document.images[itemName].src = actionImage;
      // keyline : above
      prevAKey = document.images[keyPrev].src;
      document.images[keyPrev].src = keylineImage;
      // keyline : below
      prevBKey = document.images[keyNext].src;
      document.images[keyNext].src = keylineImage;
    }
  }
}

// rollover: out
function imgOut( layerName ) {
  if (document.images) {
    keyPrev = 'k'+lastPos;
    keyNext = 'k'+(parseInt(lastPos) + 1);

    if ( NS4 && (layerName.length > 0) ) {
      document.layers[layerName].document.images[lastName].src = lastImg;
      document.layers[layerName].document.images[keyPrev].src = prevAKey;
      document.layers[layerName].document.images[keyNext].src = prevBKey;
    } else {
      document.images[lastName].src = lastImg;
      document.images[keyPrev].src = prevAKey;
      document.images[keyNext].src = prevBKey;
    }
  }
}

var menuImage = ''; // for debugging

function topSideNavSwap( imageSrc ) {
  if ( menuImage.length > 0 ) {
    // do nothing, got value already
  } else {
  	if ( document.images ) {
      menuImage = document.images['topSideNav'].src;
	}
  }
  if ( document.images ) {
    if ( imageSrc.length > 0 ) {
      // over
	  if (gotlayers) {
		  // Check that the DHTML div is there prior to setting image
	      if ( NS4 ) {
	      	if ( document.layers[popName] ) {
	          document.images['topSideNav'].src = assetPath + imageSrc;
	        }
	      } else if ( document.all.item(popName) ) {
	        document.images['topSideNav'].src = assetPath + imageSrc;
	      }
	  }
    } else {
      // out
	  if (gotlayers) {
	      if ( NS4 ) {
	      	if ( document.layers[popName] ) {
	           document.images['topSideNav'].src = menuImage;
	        }
	      } else if ( document.all.item(popName) ) {
	        document.images['topSideNav'].src = menuImage;
	      }
	  }
    }
  }
}