// determine what browser we are using and set it to var browser
var browser = "unknown";
if(navigator.appName == "Microsoft Internet Explorer" && 
  parseInt(navigator.appVersion) >= 4) browser = "ie4";
else if(navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4 &&
  parseInt(navigator.appVersion) < 5) browser = "nav4";
else if(navigator.appName == "Netscape" && 
  parseInt(navigator.appVersion) >= 5) browser = "nav6";
  

// the preLayerContentCode and postLayerContentCode is some HTML 
// formatting to make the mouseOver layers look nice.
// preLayerContentCode_Right is for layers that are close to the right side of the screen
// preLayerContentCode_Center is for layers that are in the middle of the screen
  var preLayerContentCode = "";
  preLayerContentCode += '<table cellpadding="0" cellspacing="0" border="0">';
  preLayerContentCode += '<tr><td height="10" valign="bottom" background="/images/box_pointer_background.gif" nowrap><img src="/images/space.gif" width="5" height="1" border="0"><img src="/images/box_pointer.gif" width="12" height="10" border="0"></td></tr>';
  preLayerContentCode += '<tr><td><table cellpadding="0" cellspacing="0" border="0" bgcolor="#60A0BF">';
  preLayerContentCode += ' <tr><td width="1"><img src="/images/space.gif" width="1" height="1" border="0"></td>';
  preLayerContentCode += '  <td bgcolor="#ffffff" class="smallTextPadded" nowrap>';
  
  var preLayerContentCode_Right = "";
  preLayerContentCode_Right += '<table cellpadding="0" cellspacing="0" border="0">';
  preLayerContentCode_Right += '<tr><td height="10" align="right" valign="bottom" background="/images/box_pointer_background.gif" nowrap><img src="/images/box_pointer.gif" width="12" height="10" border="0"><img src="/images/space.gif" width="5" height="1" border="0"></td></tr>';
  preLayerContentCode_Right += '<tr><td><table cellpadding="0" cellspacing="0" border="0" bgcolor="#60A0BF">';
  preLayerContentCode_Right += ' <tr><td width="1"><img src="/images/space.gif" width="1" height="1" border="0"></td>';
  preLayerContentCode_Right += '  <td bgcolor="#ffffff" class="smallTextPadded" nowrap>';
  
  var preLayerContentCode_Center = "";
  preLayerContentCode_Center += '<table cellpadding="0" cellspacing="0" border="0">';
  preLayerContentCode_Center += '<tr><td height="10" align="center" valign="bottom" background="/images/box_pointer_background.gif" nowrap><img src="/images/box_pointer.gif" width="12" height="10" border="0"><img src="/images/space.gif" width="5" height="1" border="0"></td></tr>';
  preLayerContentCode_Center += '<tr><td><table cellpadding="0" cellspacing="0" border="0" bgcolor="#60A0BF">';
  preLayerContentCode_Center += ' <tr><td width="1"><img src="/images/space.gif" width="1" height="1" border="0"></td>';
  preLayerContentCode_Center += '  <td bgcolor="#ffffff" class="smallTextPadded" nowrap>';
  
  var postLayerContentCode = "";
  postLayerContentCode += '  </td><td width="1"><img src="/images/space.gif" width="1" height="1" border="0"></td>';
  postLayerContentCode += ' </tr><tr><td colspan="3" height="1"><img src="/images/space.gif" width="1" height="1" border="0"></td></tr>';
  postLayerContentCode += '</table></td></tr></table>';
  

function UniversalLayer(name, style, mouseEventXoffset, mouseEventYoffset) {
  this.name = "ul_"+ name;
  this.content = "";
  this.object = null;
  this.style = style;
  this.offsetX = mouseEventXoffset; 
  this.offsetY = mouseEventYoffset;
  
  this.addContent = addLayerContent;
  this.writeHTML = writeLayerHTML;
  this.show = showLayer;
  this.hide = hideLayer;
  this.showAtMouse = showLayerAtMouse;
  this.display = displayLayer;
  this.remove = removeLayer;
  this.switchDisplay = switchLayerDisplay;
}
  
// creates either a DIV or LAYER tag based on the browser  
function writeLayerHTML() {
  if( browser == "ie4" ) {
    document.write('<div id="'+ this.name +'" style="'+ this.style +'">'+ this.content +'</div>')
    this.object = document.all(this.name, 0);
  } else if( browser == "nav4" ) {
    document.write('<layer id="'+ this.name +'" pagex="10" pagey="10" visibility="hidden">'+ this.content +'</layer>');
	this.object = document.layers[this.name]
  } else if( browser == "nav6" ) {
    document.write('<div id="'+ this.name +'" style="'+ this.style +'">'+ this.content +'</div>')
	this.object = document.getElementById(this.name);
  }
}

// add content to the layer.  only works before writeHTML()
function addLayerContent(theContentToAdd) {
  this.content += theContentToAdd;
}

// shows the layer.  can call interactively
function showLayer() {
  //alert('showing layer: ' + this.name);
  if( browser == "ie4" ) this.object.style.visibility = "visible";
  else if( browser == "nav4" ) this.object.visibility = "visible";
  else if( browser == "nav6" ) this.object.style.visibility = "visible";
}

// hides the layer.  can call interactively
function hideLayer() {
  if( browser == "ie4" ) this.object.style.visibility = "hidden";
  else if( browser == "nav4" ) this.object.visibility = "hidden";
  else if( browser == "nav6" ) this.object.style.visibility = "hidden";
}

// shows the layer where the mouse event occured.  
function showLayerAtMouse(theMouseEvent) {
  if( browser == "ie4" ) {
    this.object.style.left = theMouseEvent.clientX + this.offsetX;
    this.object.style.top = theMouseEvent.clientY + this.offsetY;
  } else if( browser == "nav4" ) {
    this.object.pageX = theMouseEvent.pageX + this.offsetX;
    this.object.pageY = theMouseEvent.pageY + this.offsetY;
  } else if( browser == "nav6" ) {
    this.object.style.left = theMouseEvent.clientX + this.offsetX;
    this.object.style.top = theMouseEvent.clientY + this.offsetY;
  }
  this.show();
}

// displays the layer.  can call interactively
// this is different from show in that if you set the display
// equal to 'none' then it will not reserve space on the screen 
// whereas a hidden layer will reserve the space
// does not work in NS4.x
function displayLayer() {
  if( browser == "ie4" ) this.object.style.display = "";
  else if( browser == "nav6" ) this.object.style.display = "";
}

// removes the layer.  can call interactively
// see notes above for displayLayer()
// does not work in NS4.x
function removeLayer() {
  if( browser == "ie4" ) this.object.style.display = "none";
  else if( browser == "nav6" ) this.object.style.display = "none";
}
// if the layer is displayed, remove it.
// if the layer is removed, display it.
function switchLayerDisplay() {
  if( browser == "ie4" ) ((this.object.style.display == '') ? this.remove() : this.display() );
  else if( browser == "nav6" ) ((this.object.style.display == '') ? this.remove() : this.display() );
}