// Working Code
// JavaScript Document
// pacemenu.js
// Written by: John E Pace II
// Copyright: John E Pace II
// Version 1.2
// This program creates a pull down menu system. It currently
// only supports on level of menuing. It supports complex
// background images and mouseovers. All graphics used by
// this menuing system are png type. 
// The file graphics/dot_transparent.gif is required for 
// proper operation of the blocker layer.
//
// Changelog
// v1.0 Release of the menuing system
//
// v1.1 Fixed the bloccker layer problem in IE
//
// v1.2 Fixed the PNG rendering error in IE
//   Mouseover menu highlights still don't render with proper transparency
//


var objselected = "";
var objlighted = "";
var menustyle = "";


var thetable1 = new Array();
var thetable2 = new Array();
var thetable3 = new Array();
var thetable4 = new Array();
var counta = 1;
var countb = 2;

//Detect IE5.5 through 6.x
version=0
is_IE = 0;
if (navigator.appVersion.indexOf("MSIE")!=-1){
  temp=navigator.appVersion.split("MSIE")
  version=parseFloat(temp[1])
}

if (version>=5.5 && version<7) //NON IE browser will return 0
{
  var is_IE = 1;
}

function menustart(menu_name, thewidth)
{
  counta = 1;
  countb = 2;
  thetable1 = '  <table width="' + thewidth + '" border="0" cellspacing="0" cellpadding="0">    <tr>      <td width="27" valign="top">';
  thetable2 = '<table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>          <td height="11" align="center" background="graphics/dot_black.gif"><img src="graphics/dot_transparent.gif" width="1" height="1" hspace="0" vspace="0" border="0" /></td>        </tr>';

  thetable3 = '      <td valign="top" background="graphics/submainback.png"><table width="100%" border="0" cellspacing="0" cellpadding="0" id="' + menu_name + 'a" name="' + menu_name + 'a"><tr>';
  thetable3 = thetable3 + '          <td height="11" class="menustyle"><img src="graphics/dot_transparent.gif" width="1" height="1" hspace="0" vspace="0" border="0" /></td>';
  thetable3 = thetable3 + '         </tr>';

  thetable4 = '      <td width="37" valign="top"><table width="37" border="0" cellspacing="0" cellpadding="0" id="' + menu_name + 'b" name="' + menu_name + 'b">        <tr>';
  if (is_IE)
  {
    thetable4 = thetable4 + '          <td width="37" height="11" style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu3.png\', sizingMethod=\'crop\');"><img src="graphics/dot_transparent.gif" width="37" height="11" hspace="0" vspace="0" border="0" />';
// ************ ERROR HERE **********
  thetable4 = thetable4 + '</td>        </tr>        <tr>          <td><table width="37" border="0" cellspacing="0" cellpadding="0" id="' + menu_name +'b" name="' + menu_name + 'b" style="background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu6.png\', sizingMethod=\'crop\');">';

  }else{
    thetable4 = thetable4 + '          <td width="37" height="11"  background="graphics/submenu3.png"><img src="graphics/dot_transparent.gif" width="37" height="11" hspace="0" vspace="0" border="0" />';
    thetable4 = thetable4 + '</td>        </tr>        <tr><td  background="graphics/submenu6.png"><table width="37" border="0" cellspacing="0" cellpadding="0" id="' + menu_name + 'b" name="' + menu_name + 'b">';
  }


} 

function menuitem(menu_name, item_type, menu_text, thelink, target, menu_icon)
{
  // Item_types can be either selection or divider
  thetable2 = thetable2 + '        <tr>          <td height="25" align="center" background="graphics/dot_black.gif" onclick="gothere(\'' + target + '\', \'' + thelink + '\');" onmouseover="pacmenuhighlight(\'' + menu_name + 'a\',\'' + counta + '\',\'' + menu_name + 'b\',\'' + countb + '\');" style="cursor: pointer; cursor: hand;">';
  if (menu_icon)
  {
    thetable2 = thetable2 + '<img src="graphics/' + menu_icon + '" hspace="0" vspace="0" border="0">';
  }
  thetable2 = thetable2 + '</td>        </tr>';
  
  thetable3 = thetable3 + '        <tr>          <td height="25" id="' + menu_text + '" name="' + menu_text + '" class="menustyle"  onclick="gothere(\'' + target + '\', \'' + thelink + '\');" onmouseover="pacmenuhighlight(\'' + menu_name + 'a\',\'' + counta + '\',\'' + menu_name + 'b\',\'' + countb + '\');" style="cursor: pointer; cursor: hand;">&nbsp;&nbsp;' + menu_text + '</td>        </tr>';

  if (is_IE)
  {
    thetable4 = thetable4 + '            <tr>              <td style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu6.png\', sizingMethod=\'crop\');" width="37" height="25" class="menustyle" id="' + menu_text + 'b" name="' + menu_text + 'b"  onclick="gothere(\'' + target + '\',\'' + thelink + '\');"    onmouseover="pacmenuhighlight(\'' + menu_name + 'a\',\'' + counta + '\',\'' + menu_name + 'b\',\'' + countb + '\');" style="cursor: pointer; cursor:hand;">&nbsp;</td>            </tr>';
  }else{
    thetable4 = thetable4 + '            <tr>              <td width="37" height="25" class="menustyle" id="' + menu_text + 'b" name="' + menu_text + 'b"  onclick="gothere(\'' + target + '\', \'' + thelink + '\');"    onmouseover="pacmenuhighlight(\'' + menu_name + 'a\',\'' + counta + '\',\'' + menu_name + 'b\',\'' + countb + '\');" style="cursor: pointer; cursor: hand;">&nbsp;</td>            </tr>';
  }

  counta++;
  countb++;
}

function menubuild(menu_name)
{
  if (is_IE)
  {
    thetable2 = thetable2 + '        <tr>          <td height="9" align="center" style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu7.png\', sizingMethod=\'crop\');"><img src="graphics/dot_transparent.gif" width="27" height="9" hspace="0" vspace="0" border="0" /></td> </tr></table></td>';
  }else{
    thetable2 = thetable2 + '        <tr>          <td height="9" align="center"><img src="graphics/submenu7.png" width="27" height="9" hspace="0" vspace="0" border="0" /></td>        </tr></table></td>';
  }
  thetable3 = thetable3 + '</table></td>';
  if (is_IE)
  {


     thetable4 = thetable4 + '          </table></td>        </tr>        <tr>          <td width="37" height="9"style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu9.png\', sizingMethod=\'crop\');"><img src="graphics/dot_transparent.gif" width="37" height="9" hspace="0"  vspace="0" border="0"></td>        </tr>      </table></td>    </tr>    <tr>      <td width="27" height="9" valign="top"style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu10.png\', sizingMethod=\'crop\');"><img src="graphics/dot_transparent.gif" width="27" height="12" hspace="0" vspace="0" border="0"></td>      <td height="9" valign="top"style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu11.png\', sizingMethod=\'crop\');"><img src="graphics/dot_transparent.gif" width="1" height="1" /></td>      <td width="37" height="9" valign="top" style="background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'graphics/submenu12.png\', sizingMethod=\'crop\');"><img src="graphics/dot_transparent.gif" width="37" height="12" hspace="0" vspace="0" border="0"></td>    </tr>  </table>';
  }else{
    thetable4 = thetable4 + '          </table></td>        </tr>        <tr>          <td width="37" height="9"><img src="graphics/submenu9.png" width="37" height="9" hspace="0" vspace="0"border="0"></td>        </tr>      </table></td>    </tr>    <tr>      <td width="27" height="9" valign="top"><img src="graphics/submenu10.png" width="27" height="12" hspace="0" vspace="0"border="0"></td>      <td height="9" valign="top" background="graphics/submenu11.png"><img src="graphics/dot_transparent.gif" width="1" height="1" /></td>      <td width="37" height="9"valign="top"><img src="graphics/submenu12.png" width="37" height="12" hspace="0" vspace="0" border="0"></td>    </tr>  </table>';
  }

  var wholemenu = thetable1 + thetable2 + thetable3 + thetable4;
  var pactable = menu_name + "menu";
  var obj = document.getElementById(pactable);
//  document.form1.textarea.value = wholemenu;
  obj.innerHTML = wholemenu;
}

var menua = "";
var menub = "";
var tablea = "";
var tableb = "";

function pacmenuhighlight(table1, menu1, table2, menu2)
{
// onmouseover="this.className='menubacker'; document.getElementById['1submenu1b'].className='menubacker2'" onmouseout="this.className='menustyle'"
  if (tablea != "")
  {
    var table = document.getElementById(tablea);
    var rows = table.getElementsByTagName("td");
    rows[menua].className = 'menustyle';
    var table = document.getElementById(tableb);
    var rows = table.getElementsByTagName("td");
    rows[menub].className = 'menustyle';
  }	
  var table = document.getElementById(table1);
  var rows = table.getElementsByTagName("td");
  rows[menu1].className = 'menubacker';
  var table = document.getElementById(table2);
  var rows = table.getElementsByTagName("td");
  rows[menu2].className = 'menubacker2';
  menua = menu1;
  menub = menu2;
  tablea = table1;
  tableb = table2;  
}

function gothere(target, thelink)
{
    if (tablea != "")
    {
      var table = document.getElementById(tablea);
      var rows = table.getElementsByTagName("td");
      rows[menua].className = 'menustyle';
      var table = document.getElementById(tableb);
      var rows = table.getElementsByTagName("td");
      rows[menub].className = 'menustyle';
  	  menua = "";
	  menub = "";
  	  tablea = "";
	  tableb = "";
    }
    if (objselected)
    {
      document.getElementById(objselected).style.visibility='hidden';
	  document.getElementById('blocker').style.visibility='hidden';
	  objselected = "";
	}
//  frames[target].location = thelink;	
    this.location = thelink;
}

// This funtion sets the menu styles they are:
//    image - use rollover images for the nav items
//    image1 - use rollover images with front rollover images
//    image2 - use front rollover images with text following
//    text - use only text rollover images
//    windows
//    mac
function menustyle(obj,firstnorm, firstover, secondnorm, secondover)
{
  var menustyle = obj;	
}

// Function to create the main menu layer
function makemenu(objpassed, newname) {
  obj = document.getElementById(objpassed)
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  newtop = curtop + 25;
  // The blocker places an interference layer over the web page below the navigation bar. This
  // is used to disable the navigation rollover when the page is clicked. 
  if (!document.getElementById('blocker'))
  {
	  var winheight = document.body.offsetHeight;
	  var winwidth = document.body.offsetWidth;
//	  winheight = winheight - newtop;
	  winwidth -= 20;
//      document.form1.first.value=winwidth;
//      document.form1.second.value=winheight;
	  addHTML('<div id="blocker" name="blocker" style="position:absolute; width:' + winwidth + 'px; height:' + winheight + 'px; top:' + newtop + 'px; left:0px; z-index:4999; overflow: hidden; visibility: hidden;" onClick="toggle();"><img src="graphics/dot_transparent.gif" width="1600" height="1200"></div>');  
  }
  // element.removeChild(referenceToChildNode)
//     var tester = '<div id="' + objpassed + 'menu" name="' + objpassed + 'menu" style="position:absolute; width:200px; height:115px; top:' + newtop + 'px; left:' + curleft + 'px; z-index:5000; overflow: hidden; visibility: hidden; background-color: #006699;"><table border="0" name="' + objpassed + 'table" id="' + objpassed + 'table"></table></div>';
//     document.write(tester);
//  addHTML('<div id="' + objpassed + 'menu" name="' + objpassed + 'menu" style="position:absolute; width:200px; height:115px; top:' + newtop + 'px; left:' + curleft + 'px; z-index:5000; overflow: hidden; visibility: hidden; background-color: #006699;"><table border="0" name="' + objpassed + 'table" id="' + objpassed + 'table"></table></div>');
  addHTML('<div id="' + objpassed + 'menu" name="' + objpassed + 'menu" style="position:absolute; width:200px; height:115px; top:' + newtop + 'px; left:' + curleft + 'px; z-index:5000; overflow: visible; visibility: hidden;"></div>');
//   background-color: #006699;
//	document.body.appendChild(newcontent);
//  document.form1.first.value=curleft;
//  document.form1.second.value=curtop;
  return [curleft,curtop];
}

// This function adds the css navigation elements in the page
function addHTML (html) {
  if (document.all)
    document.body.insertAdjacentHTML('beforeEnd', html);
  else if (document.createRange) {
    var range = document.createRange();
    range.setStartAfter(document.body.lastChild);
    var docFrag = range.createContextualFragment(html);
    document.body.appendChild(docFrag);
  }
}  



// Function to toggle the menu layers on and off
function toggle(obj)
{
  if (objselected)
  {
    if (tablea != "")
    {
      var table = document.getElementById(tablea);
      var rows = table.getElementsByTagName("td");
      rows[menua].className = 'menustyle';
      var table = document.getElementById(tableb);
      var rows = table.getElementsByTagName("td");
      rows[menub].className = 'menustyle';
  	  menua = "";
	  menub = "";
  	  tablea = "";
	  tableb = "";
    }
    document.getElementById(objselected).style.visibility='hidden';
	document.getElementById('blocker').style.visibility='hidden';
	objselected = "";
  }else{
    document.getElementById(obj).style.visibility='visible';
	document.getElementById('blocker').style.visibility='visible';
	objselected = obj
  }
}


// Function to allow the selected menu to follow the movement of the mouse
function glide(obj)
{
  if (objselected)
  {
    if (tablea != "")
    {
      var table = document.getElementById(tablea);
      var rows = table.getElementsByTagName("td");
      rows[menua].className = 'menustyle';
      var table = document.getElementById(tableb);
      var rows = table.getElementsByTagName("td");
      rows[menub].className = 'menustyle';
	  menua = "";
	  menub = "";
   	  tablea = "";
	  tableb = "";
    }
    if (obj != objselected)
	{
      document.getElementById(objselected).style.visibility='hidden';
      if (obj != objselected)
  	  {
	    document.getElementById(obj).style.visibility='visible';
	    objselected = obj;
      }else{
	    objselected = "";
      }
	}
  }else{
    objlighted = obj;
//    document.getElementById(obj).style.visibility='visible';
//	objselected = obj
  }
}