// the number you pass to initLeft doesn't matter since it will get
		// changed onactivate
		var myMenu1 = new ypSlideOutMenu("menu1", "down", -1000, 200, 170, 90)
		var myMenu2 = new ypSlideOutMenu("menu2", "down", -1000, 200, 150, 110)
		var myMenu3 = new ypSlideOutMenu("menu3", "down", -1000, 200, 150, 40)
	
     
    // for each menu, we set up hte onactivate event to call repositionMenu with the amount offset from center, in pixels
		myMenu1.onactivate = function() { repositionMenu(myMenu1, -315); }
		myMenu2.onactivate = function() { repositionMenu(myMenu2, 110); }
		myMenu3.onactivate = function() { repositionMenu(myMenu3, 200); }
		
    // this function repositions a menu to the speicified offset from center
		function repositionMenu(menu, offset)
		{
      // the new left position should be the center of the window + the offset
			var newLeft = getWindowWidth() / 2 + offset;

      // setting the left position in netscape is a little different than IE
			menu.container.style ? menu.container.style.left = newLeft + "px" : menu.container.left = newLeft;
		}
		 
    // this function calculates the window's width - different for IE and netscape
		function getWindowWidth()
		{
			return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
		}	


    ypSlideOutMenu.writeCSS();


	function openBox(){

if(openBox.arguments.length > 0){ width = openBox.arguments[0];
	if(openBox.arguments.length > 1){ colour = openBox.arguments[1];
		if(openBox.arguments.length > 2) image = openBox.arguments[2];
	}
}

document.write('<table cellpadding="0" cellspacing="0" border="0" width="' + width + '">');
	if(image.length > 0 ) {
		document.write('<tr>');
			document.write('<td colspan="3"><img border="0" src="' + image + '"></td>');
		document.write('</tr>');
	}
	else {
		document.write('<tr>');
			document.write('<td background="images/box' + colour + 'TopLeft.gif" width="10" height="10" />');
			document.write('<td background="images/box' + colour + 'Top.gif"></td>');
			document.write('<td background="images/box' + colour + 'TopRight.gif" width="10" />');
		document.write('</tr>');
	}
	document.write('<tr>');
		document.write('<td background="images/box' + colour + 'Left.gif" width="10" />');
		document.write('<td class="boxRounded" background="images/box' + colour + 'Background.gif">'); // class defined in /main.css
}


function closeBox(){

if(closeBox.arguments.length > 0) { width = closeBox.arguments[0];
	if(closeBox.arguments.length > 1) colour = closeBox.arguments[1];
}

		document.write('</td>');
		document.write('<td background="images/box/box' + colour + 'Right.gif" width="10"><img src="images/box/box' + colour + 'Right.gif" /></td>'); // to make sure that it is displayed when the content is too big and cell has to resize itself
	document.write('</tr>');
	document.write('<tr>');
		document.write('<td background="images/box/box' + colour + 'BottomLeft.gif" width="10" height="9" />');
		if(width.indexOf('%') > 0 )
			document.write('<td background="images/box/box' + colour + 'Bottom.gif" />');
		else 
			document.write('<td background="images/box/box' + colour + 'Bottom.gif" width="' + String(parseInt(width)-20) + '" />');
		document.write('<td background="images/box/box' + colour + 'BottomRight.gif" width="10" />');
	document.write('</tr>');
document.write('</table>');
}