// JavaScript Document
function init() {
	if (TransMenu.isSupported()) {
		TransMenu.initialize();

		// hook all the highlight swapping of the main toolbar to menu activation/deactivation
		// instead of simple rollover to get the effect where the button stays hightlit until
		// the menu is closed.
		menu1.onactivate = function() { document.getElementById("MENU1").className = "on"; };
		menu1.ondeactivate = function() { document.getElementById("MENU1").className = "off"; };

		menu2.onactivate = function() { document.getElementById("MENU2").className = "on"; };
		menu2.ondeactivate = function() { document.getElementById("MENU2").className = "off"; };

		menu3.onactivate = function() { document.getElementById("MENU3").className = "on"; };
		menu3.ondeactivate = function() { document.getElementById("MENU3").className = "off"; };

		menu4.onactivate = function() { document.getElementById("MENU4").className = "on"; };
		menu4.ondeactivate = function() { document.getElementById("MENU4").className = "off"; };

		// add other menus as needed 
	}
}
// set up drop downs anywhere in the body of the page. I think the bottom of the page is better..
// but you can experiment with effect on loadtime.
if (TransMenu.isSupported()) {

	//==================================================================================================
	// create a set of dropdowns
	//==================================================================================================
	// the first param should always be down, as it is here
	//
	// The second and third param are the top and left offset positions of the menus from their actuators
	// respectively. To make a menu appear a little to the left and bottom of an actuator, you could use
	// something like -5, 5
	//
	// The last parameter can be .topLeft, .bottomLeft, .topRight, or .bottomRight to inidicate the corner
	// of the actuator from which to measure the offset positions above. Here we are saying we want the
	// menu to appear directly below the bottom left corner of the actuator
	//==================================================================================================
	var ms = new TransMenuSet(TransMenu.direction.down, 0, 0, TransMenu.reference.bottomLeft);

	//==================================================================================================
	// create a dropdown menu
	//==================================================================================================
	// the first parameter should be the HTML element which will act actuator for the menu
	//==================================================================================================

	//SEARCH ENGINE MARKETING
	var menu1 = ms.addMenu(document.getElementById("MENU1"));
	menu1.addItem("PPC Advertising", "search-sem-ppc-advertising.php");
	menu1.addItem("Search Engine Optimization", "search-search-engine-optimization.php");

	//CUSTOM WEB DEVELOPMENT
	var menu2 = ms.addMenu(document.getElementById("MENU2"));
	menu2.addItem("Strategic Planning", "webdev-strategy.php");
	menu2.addItem("Technology", "webdev-technology.php");
	menu2.addItem("Design", "webdev-design.php");
	menu2.addItem("Content Management", "content-management.php");
			
	//ABOUT ARGUS
	var menu3 = ms.addMenu(document.getElementById("MENU3"));
	menu3.addItem("Our Agency", "about-agency.php");
	menu3.addItem("Our Team", "about-team.php");
	menu3.addItem("Our Alliances", "about-alliances.php");
	menu3.addItem("Our Methodology", "about-methodology.php");
	menu3.addItem("Contact Us", "contact.php");

	//ARGUS CLIENTS
	//var menu4 = ms.addMenu(document.getElementById("MENU4"));
	//menu4.addItem("Client Testimonial", "portfolio-client-cedars-sinai.php");

	TransMenu.renderAll();
}