/**
* CLASS echo_DropMenu
* @Purpose creates a folding menu system which can be used within a table
* or layer structure independent of where it sits on the screen. This object
* is able to handle sticky select, mouseOver/Off, and submenus
* @Author Scott McDonald
* @Version 1.0
* @dependencies MM_findObj v3 or greater
* @Usage: [SEE BOTTOM FOR A TEMPLET]

	declair an instance of the object inside your HTML at any point within the code.
	the object does not depend on the existance of the menu HTML to be created.
	to declair:
		var dropmenu = new echo_DropMenu

	Adding Items to HTML part of menu
			[Note: the format used (each attribute on it's own line) is the authors
			preferred style of coding and is not required for object to work]

		create your links, containing a common keyword and the following list of identifiers
		[example will use the link name/id "Order"]
			[keyword]Link:
			<a
				href="order.asp"
				name="OrderLink"
				id="OrderLink"
				onClick="dropmenu.trigger(this)"
				onMouseOver="dropmenu.onMouseOver(this)"
				onMouseOut="dropmenu.onMouseOut(this)"
			>
			NOTE: notice that the arguments are all the same. you can copy and paste the
			events to each of your menu options without having to change anything

			[keyword]Img
			<img
				src="order.gif"
				name="OrderImg"
				id="OrderImg"
				alt="Order online!"
				border="0"
			/>
			NOTE: if there is an alt tag, that will be displayed in the Status Bar of the window

			[keyword]Output
			<span
				name="OrderOutput"
				id="OrderOutput"
			></span>
				NOTE: the span must be empty, unless you wish there to be content when the page
				is loaded. this content will be replaced when the menu is opened but will be returned
				when the menu is closed.

			[keyword]Content
				<span
					name="OrderContent"
					id="OrderContent"
					style="
						visibility:hidden;
						position:absolute;
					"
				>
					....HTML....
				</span>
				NOTE: the style needs to be set as seen here. to ensure that the content is not
				visible, or affecting the layout in anyway, until being used.

		RESOURCES REQUIRED
				If the menu item is an image (if you don't use an image, there will be no rollover
				affect) the folder which contains the image [in this case order.gif"] must contain
				the over state image named with _over before the extention:
				e.g.
				order.gif & order_over.gif

				[later implamentations may include a _open image option, if desired.]

		ADDING MENU ITEMS

				AFTER all HTML is defined, you can add each other the menu items to
				the object. if you do it before you've added the HTML, you will get errors.
				to add the menus simply pass the keyword in obj.addMenu(keyword)

				e.g.
					dropmenu.addMenu('Home');
					dropmenu.addMenu('Order');
					dropmenu.addMenu('Catalog');

				Keyword IS CASE SENSITIVE
				addMenu does not have to happen in order that menus appear.

		PUBLIC PROPERTIES
			NONE

		PUBLIC METHODS
			 	NOTE: unless for some reason you are calling the function for another
			 	object, the argument to most methods will be the word "this"


			o.trigger(this)
				called onClick (or programatically) this will cause the selected
				link to become the active menu option. closing all other menues
				this is not needed on menu items which are simply links to take the
				browser to a new page

			o.onMouseOver(this) // triggers mouseover image swap
			o.onMouseOut(this)  // triggers mouseout image swap

			o.holdRollOver(keyword as string)
				called on the onLoad of the page, this will set a specified menu item
				as sticky, which will mean that it stays selected regardless of selections
				or mouse movement in the menu. the passed argument is the menu items KEYWORD
				[ in the example, this would be "Order"] as a string.

			o.report()
				simply tells each menu item to report what information they have
				this is a diagnostic tool, and will not likely be used in production site

*/


/*


<!--
	MENU TEMPLET
	requires echo_DropMenu.js imported
-->
<table cellpadding="0" cellspacing="0" border="0">
	<tr><td><a name="homeLink" id="homeLink" href="/" onClick="dropmenu.trigger(this);this.blur();" onMouseOver="dropmenu.onMouseOver(this)"  onMouseOut="dropmenu.onMouseOut(this)"><img src="/images/rollovers/home.gif" width="167" height="19" name="homeImg" id="homeImg" border="0" alt="Home"></a></td></tr>
	<tr><td><a name="aboutLink" id="aboutLink" href="about.asp" onClick="dropmenu.trigger(this);this.blur();" onMouseOver="dropmenu.onMouseOver(this)"  onMouseOut="dropmenu.onMouseOut(this)"><img src="/images/rollovers/about.gif" width="167" height="19" name="aboutImg" id="aboutImg" border="0" alt="About Our Company"></a></td></tr>
	<tr><td><a name="catelogLink" id="catelogLink" href="javascript:;" onClick="dropmenu.trigger(this);this.blur();" onMouseOver="dropmenu.onMouseOver(this)"  onMouseOut="dropmenu.onMouseOut(this)"><img src="/images/rollovers/catelog.gif" width="167" height="19" name="catelogImg" id="catelogImg" border="0" alt="Product Catalog"></a></td></tr>
	<!--output layer--><tr><td><span name="catelogOutput" id="catelogOutput"></span></td></tr>
	<tr><td><a href="/order.asp" name="orderFormLink" id="orderFormLink" onClick="dropmenu.trigger(this);this.blur();" onMouseOver="dropmenu.onMouseOver(this)"  onMouseOut="dropmenu.onMouseOut(this)"><img src="/images/rollovers/order.gif" width="167" height="19" name="orderFormImg" id="orderFormImg" border="0" alt="Order"></a></td></tr>
	<tr><td><a href="downloads.asp" name="downloadLink" id="downloadLink" onClick="dropmenu.trigger(this);this.blur();" onMouseOver="dropmenu.onMouseOver(this)"  onMouseOut="dropmenu.onMouseOut(this)"><img src="/images/rollovers/dc.gif" width="167" height="19" name="downloadImg" id="downloadImg" border="0" alt="Download Center"></a></td></tr>
</table>

<div id="catelogContent" name="catelogContent" class="pviimenudiv" style="position:absolute; visibility: hidden">
	<table width="157" border="0" cellpadding="0" cellspacing="6">
		<tr><td align="right"><a href="/catalog/widgets.asp" class="subs">Widgets</a></td></tr>
		<tr><td align="right"><a href="/catalog/washers.asp" class="subs">Washers</a></td></tr>
		<tr><td align="right"><a href="/catalog/wrenches.asp" class="subs">Wrenches</a></td></tr>
	</table>
</div>

<script language="JavaScript">
	//
	//Create an instance of the echo_DropMenu Object
	//
	var dropmenu  = new echo_DropMenu();
	//
	// add menu items
	//
	dropmenu.addMenu("home");
	dropmenu.addMenu("about");
	dropmenu.addMenu("catelog");
	dropmenu.addMenu("orderForm");
	dropmenu.addMenu("download");
</script>

<!-- END TEMPLET -->

*/

function echo_DropMenu(){
	if(MM_findObj == undefined){
		alert("You must load MM_findObj before initializing this script");
	}
	/*
	* Class Properties
	*/
		this.items = new Array();

	/*
	* Class Methods
	*/
		this.addMenu = echo_DropMenu_AddMenu
		this.close = echo_DropMenu_Close;
		this.getByLink = echo_DropMenu_GetItemByLinkObj;
		this.getByName = echo_DropMenu_GetItemByName;
		this.holdRollOver = echo_DropMenu_HoldRollOver;
		this.onMouseOut = echo_DropMenu_onMouseOut;
		this.onMouseOver = echo_DropMenu_onMouseOver;
		this.open = echo_DropMenu_Open;
		this.trigger = echo_DropMenu_Trigger;
		this.report = function(_return){
			var $report = "";
			for(var i=0;i<this.items.length;i++){$report += this.items[i].report(true)+"\n\n";}
			if(_return){return($report);} else {trace($report);}
		}
}

/**
* Adds a new menu item and output layer to the list of
* menus for this object. Will give warning if there is a
* duplicate menu/output.
*
* @returns Void
* @param $link as string - reference to the menu item itself
*/ function echo_DropMenu_AddMenu($link, bSticky){
		var me = new echo_DropMenu_Item();
		me._name = $link;
		me._link = MM_findObj($link+"Link");
		me._output = MM_findObj($link+"Output");
		me._content = MM_findObj($link+"Content");
		me._image = MM_findObj($link+"Img");
		me._state = (bSticky)?"sticky":"out";
		//me.report();
		this.items[this.items.length] = me;
	}
//~
/**
* removes content from an output layer, and rolls image back to off state
* @returns void
* @param $id as integer - this.items index of open menu
*/ function echo_DropMenu_Close(me){
		if(me==undefined||me==null){return(false);}
		if(me._state=="sticky"){return(false);}
		if(me._output!=null&&me._content!=null){me._output.innerHTML = (me._loadContent!="")?me._loadContent:"";}
		if(me._image!=null){me._image.src = me._image.src.replace("_over","");}
		me._state = "out";
	}
//~
/**
* adds content to the selected output layer
*
* @returns void
* @param $id as integer = this.items index of menu to open
*/ function echo_DropMenu_Open(me,sticky){
		if(me==undefined||me==null){return(false);}
		if(me._output!=null&&me._content!=null) {
			me._loadContent = me._output.innerHTML;
			me._output.innerHTML = me._content.innerHTML;
		}
		if(me._image!=null){
			if(me._image.src.indexOf("_over")==-1){
				var __type = me._image.src.split(".")[me._image.src.split(".").length-1];
				me._image.src = me._image.src.replace("."+__type,"_over."+__type);
			}
		}
		me._state = (sticky)?"sticky":"open";
	}
//~
/**
* causes instance to close any open menus and populate the current
* menu output layer with content
*
* @returns void
* @param $obj as Object - reference to the link which is being triggered
*/ function echo_DropMenu_Trigger($obj){
		/*
		* first check to see if any menues are already open
		*/
		var me;
		for(var i=0;i<this.items.length;i++){
			me = this.items[i];
			if(typeof($obj)=="object"){
				if(me._state=="open"){this.close(me);}
				if(me._link==$obj){this.open(me);}
			} else if(typeof($obj)=="boolean") {
				if($obj==true){
					if(me._state=="open"){this.close(me);}
					this.open(me, false);
				} else {
					this.close(me)
				}
			}
		}
	}

//~
/**
* adds rollover state to a button
* @returns Boolean
* @param $obj as Object - reference to the link being rolled over
*/ function echo_DropMenu_onMouseOver($obj){

		if($obj==undefined){return(false);} // if we don't have a valid link object, then exit
		if((me = this.getByLink($obj))==null){return(false);} // if we can't find the object, exit
		if(me._state == "open"){return(false);} // no need to unroll, this item isn't rolled over
		if(me._image!=null){
			if(me._image.src.indexOf("_over")==-1){
				var __type = me._image.src.split(".")[me._image.src.split(".").length-1];
				me._image.src = me._image.src.replace("."+__type,"_over."+__type);
			}
			me._state = (me._state=="sticky")?"sticky":"over";
		}
	}
//~
/**
* removes rollover state from a button (that is not marked as "open"
* @returns Boolean
* @param $obj as Object - reference to the link being rolled off of
*/ function echo_DropMenu_onMouseOut($obj){
		if($obj==undefined){return(false);} // if we don't have a valid link object, then exit
		if((me = this.getByLink($obj))==null){return(false);} // if we can't find the object, exit
		if(me._state == "open"||me._state=="sticky"){return(false);} // no need to rollover if this is an open item

		if(me._image!=null){
			me._image.src = me._image.src.replace("_over","");
			me._state = "out";
		}
	}
//~
/*
* given a link object <a href "this"> will return the object assigned to it
*
* @returns Object
* @param $obj as Object
*/ function echo_DropMenu_GetItemByLinkObj($obj){
		for(var i=0;i<this.items.length;i++){if(this.items[i]._link == $obj){return(this.items[i]);}}
		return(null); // nothing was found, so return null to let the script using it know
	}
//~
/*
* given a item name will return the object assigned to it
*
* @returns Object
* @param $str as String
*/ function echo_DropMenu_GetItemByName($str){
		for(var i=0;i<this.items.length;i++){if(this.items[i]._name == $str){return(this.items[i]);}}
		return(null); // nothing was found, so return null to let the script using it know
	}
//~
/**
* triggers a rollover link to "Stick"
*
* @return void
* @param $link as string - name of link to show as sticky
*/ function echo_DropMenu_HoldRollOver($name){
		if($name==undefined){return(false);}
		if((me = this.getByName($name))==null){return(false);}
		this.open(me,true);
	}
//~
/**
* object to hold content and output layer references as well as over states
*/ function echo_DropMenu_Item(){
		this._name = "";
		this._link = new Object();
		this._content = new Object();
		this._loadContent = "";
		this._output = new Object();
		this._state = "out";
		this._image = new Object();
		this.report = function(_return){
			var $report = new String(
				this._name + "\n" +
				this._link + "\n" +
				this._output + "\n" +
				this._content + "\n" +
				this._image  + "\n" +
				this._loadContent  + "\n" +
				this._state
			)
			if(_return){return($report);} else {alert($report);}
		};
	}
//~
