/*
	*  Defines a menu item.
	*  Params:
	*  name - images name
	*  link - where the menu item links to
	*  alt - The alt tag used.
	*/
	function menuItem(aName,aLink,anAlt) {
     this.name = aName;
     this.link = aLink;
     this.alt  = anAlt;
	 this.imageOn = new Image();
	 this.imageOff = new Image();
    }
	
	/*
	*  Returns a sub-menu based on the menu items passed in.
	*  Params:
	*  imagePath - The path to the images,e.g. "/common/images/subNav/"
	*  menuItems  - An array of menu items.
	*  selectedName - The name of the item that is selected
	*                (Should be a menuItem.name)
	*/
	function makeMenu(imagePath, menuItems, selectedName)  {
	  setupImages(imagePath, menuItems);
	  //Top section of the menu
	  var colspan = menuItems.length + menuItems.length-1;
	  var topPart = "<table border='0' cellpadding='0' cellspacing='0' width='100%'>\n"
	      + "<tr>\n<td rowspan='3' valign='top'><img src='"
	      + imagePath + "bottomLeft.gif' width='9' height='32' alt='' border='0'></td>"
		  + "<td colspan='"
		  + colspan + "' valign='top' background='"
		  + imagePath + "topStretch.gif'><img src='"
		  + imagePath + "topStretch.gif' width='5' height='8' alt='' border='0'></td>"
		  + "\n<td rowspan='3' valign='top'><img src='"
		  + imagePath + "bottomRight.gif' width='10' height='32' alt='' border='0'></td>\n</tr>";
		
	  var middlePart = "\n<tr>\n";
	   
	  for (var i = 0; i < menuItems.length; i++)	{
	     middlePart = middlePart + "			<td valign='top'><a href=\"";
		 
		 if (menuItems[i].name == selectedName) {
		   //selected		 
   	       middlePart = middlePart + menuItems[i].link + "\"><img src='"
		   + imagePath + menuItems[i].name +"_on.gif "		   
		 } else {
		   //Not selected
   	       middlePart = middlePart + menuItems[i].link + "\" onMouseOver=\"subMenuImgOn('"
		   + menuItems[i].name + "',"
		   +i + ")\" onMouseOut=\"subMenuImgOff('"
		   + menuItems[i].name + "',"
		   +i +")\"><img src='"
		   + imagePath + menuItems[i].name +"_off.gif "
		 }
		 
   	     middlePart = middlePart + "' height='17' alt=\""
		 + menuItems[i].alt + "\" border='0' name='"
		 + menuItems[i].name + "'></a></td>\n";
		 
		 if (i != menuItems.length-1) {
		   //Add divider
	       middlePart = middlePart + "			<td valign='top'><img src='"
		   + imagePath+"divider.gif' width='11' height='17' alt='' border='0'></td>";
		 }
	  }			

      middlePart = middlePart + "\n</tr>";
		
      //Bottom section of the menu		
	  var buttomPart = "\n<tr>\n"
	      + "<td colspan='"
		  + colspan + "' valign='top' background='"
		  + imagePath + "bottomMiddle.gif'><img src='"
		  + imagePath + "bottomMiddle.gif' width='70' height='22' alt='' border='0'></td>\n</tr>\n</table>";
	 
	  return topPart + (middlePart + buttomPart);
	}
					
	/*
	*  Sets the images ready for mouse overs:
	*  imagePath - The path to the images,e.g. "/common/images/subNav/"
	*  menuItems  - An array of menu items.
	*/
	
	
	
	//duplicate this code for now in subNav.js, but remove from subNav.js when we put Bikes site live
	function setupImages(imagePath, menuItems)  {
        if (document.images) {	
	      for (var i = 0; i < menuItems.length; i++)	{
            menuItems[i].imageOn.src  = eval('"' + imagePath + menuItems[i].name + "_on.gif" + '"'); 
            menuItems[i].imageOff.src = eval('"' + imagePath + menuItems[i].name + "_off.gif" + '"'); 			  
		  } //end for
        } //end if
	}
	
	// Function to 'activate' pics.
	function menuImgOn(imgName, index, menuItems) {
        if (document.images) {
            document[imgName].src = menuItems[index].imageOn.src;
        }
	}

	// Function to 'deactivate' pics.
	function menuImgOff(imgName, index, menuItems) {
       if (document.images) {
            document[imgName].src = menuItems[index].imageOff.src;
       }
	}