/*<%--
	Rollover code for the application, completely reworked.
	
	Because all graphics in the application may be changed completely for each
	partner, they are no longer implemented as <IMG> objects.  Rather, each is
	implemented as a uniquely id'd DIV tag, and the size and image come from the 
	partner stylesheet.  This allows for more flexibility, as things can be
	repositioned, resized, omitted, etc.
	
	Note that both the normal image and the hilight image *must* be present for 
	each partner, or the rollover will make the image disappear.  If you don't 
	have an  explicit hilight image, just copy the normal image and rename it
	with the appropriate extension.
	
	
	To create a rollover-able image:
	
	1) in your HTML file, create a DIV tag with a unique id:

		<div id="MySampleButton" 	onClick="doSomething()" 	
			onMouseOver="switchOn(this)" onMouseOut="switchOff(this)"></div>
	
	
	2) add an entry to each partner's CSS file that specifies at least 
		the URL and size of the image:
		
			#MySampleButton
			{
				background-image:url(../../images/mySampleButton.gif);
				cursor:hand;
				width:181;
				height:25;
			}

		or, for an absolutely positioned button:
		
			#MySampleButton
			{
				background-image:url(../../images/mySampleButton.gif);
				cursor:hand;
				position:absolute;
				left:0;
				top:0;
				width:181;
				height:25;
			}

		- note: you probably want to put in "cursor:hand" so it looks clickable.


	3) Call "addRolloverButton(id, url)" to add your button to the list of rollover buttons
		and preload its images:
		
			addRolloverButton("MySampleButton", "mySampleButton.gif")
			
		Note that the URL is local to the "rolloverButtonPath" (see below).
		
		Note also that the standard images have been added in this file already.
		
	

	4) Create two graphics for each partner:
			mySampleButton.gif
		and
			mySampleButton_h.gif

		The "_h" image is for the hilighted form of the image.
		
		Note: your life will be easier if the filenames of the images are the
			same for each different partner.  If they are different for one partner, 
			you'll need to call addRolloverButton() in your partner-specific 
			javascript file to override any images with different names.
		
	
	
	5) Create the "doSomething()" function in an external script file somewhere.
		The reason we don't just in-line the method is that we may need to change
		the script for a different partner.  For example, the URL to go to the
		home page for mirra is likely to be different than the URL for a partner;
		if we inline it in the HTML, we can't change it for that partner.
		
	
	When the user mouses over the DIV in the page, the "switchOn(this)" method
	in the DIV will look up the ID of the button in the rolloverButtonList, 
	and, if found, will switch the DIV background image to the hilight image.  
	On mouse out, "switchOff(this)" will reset the graphic.
	
	
	
	We also have the concept that one button on the page may indicate which page you 
	are currently on, and should be hilighted at the start and remain hilighted
	(eg: not be mouse-sensitive).  You can enable this behavior by initializing the
	variable "currentPageNavButton" to be the ID of the button to hilight.  Note that
	you must do this *after* this file has loaded, and *before* the BODY onLoad method fires.


--%>*/


//	currentPageNavButton 	[public]
//
//	This is the id of a button on the page that should always remain hilighted to show which
//	page they are on.  Leave it null to omit this functionality, or set to the id of a button
//	in your .jsp to enable it.
//
var currentPageNavButton = null;




//	rolloverButtonPath 		[public]
//
//	This is the path to the rollover images, relative to the location of the main .jsp file.
//	
//	Partners that use different graphics should change this variable 
//	to point to their graphics, probably in the file "htmlStyles.jsi" or something like that.
//
var rolloverButtonPath = ""; //"/dyn/m/img/";



//	rolloverButtonList 		[private]
//	
//	This is the list of 'button' that will have the swtichOn()/switchOff() functionality.
//	The first part is the ID of the DIV that represents the button, the second part is
//	the URL (relative to "rolloverButtonPath") for the normal image.  The URL of the hilight
//	image will be derived automatically by appending the "rolloverButtonHilightModifier" 
//	immediately before the file extension.
//
var rolloverButtonList = new Object();
var enablementList     = new Object();

//	add the standard images to the rolloverButtonList
//addRolloverButton("MOW_Navbar_SharesButton", 	"nav/nav_shared.gif");
//addRolloverButton("MOW_Navbar_BackupsButton",	"nav/nav_backups.gif");
//addRolloverButton("MOW_Navbar_AccountButton",	"nav/nav_account.gif");
//addRolloverButton("MOW_Navbar_SignOutButton",	"nav/nav_sign.gif");
//addRolloverButton("MOW_AddFiles_Button", 		"icons/but_add.gif");
//addRolloverButton("MOW_Refresh_Button",			"icons/but_refresh.gif");

//	rolloverButtonHilightModifier [protected]
//
//	This is the modifier that is appended to the normal URL (set in 
//	rolloverButtonList) to generate the hilight URL for each image.  
//	It is possible to change for each partner if you want in "htmlStyles.jsi"
//
var rolloverButtonHilightModifier = ""; //"_h";

var rolloverButtonGreyoutModifier = ""; //"_g";



//	addRolloverButton(id, url)	 [public]
//
//	Add a button to our list of rollover buttons by its id and the url of the
//	"normal" graphic.  This will preload the button for you.
//
function addRolloverButton(id, url) {
	rolloverButtonList[id] = url;
    enablementList[id]     = true;

	// if we've already set up the rollover buttons, preload these images now
	if (window.rolloverButtonsPreloaded == true) {
		preloadRolloverButton(id);
	}
}



// setUpRolloverButtons()		[public]
//
//	Set up rollover images to use the above scheme, preloading them.
//
//	This must be called in the BODY onLoad handler.
//
function setUpRolloverButtons() {
	if (document.images == null) return;
	
	// preload all the images for the normal and hilight graphics listed above in "rolloverButtonList"
	// also makes a list of the pages to do automatic hilighting of the current page image
	for (var imgId in rolloverButtonList) {
		preloadRolloverButton(imgId);
	}
	
	// if the "currentPageNavButton" variable has been set, this indicates a rollover graphic
	//	that should always be hilighted to show which page we're on.  Hilight it now.
	if (window.currentPageNavButton != null) {
		// switch the image on
		switchOn(window.currentPageNavButton);
	}
	
	window.rolloverButtonsPreloaded = true;
}


// 	switchOn(element|id)	[public]
//
//	"Switch on" a rollover image, showing it in its hilighted state.
//
//	* element can be passed as the ID of or a pointer to an ID'd element.
//		- for this to work, an element must have an ID and the ID must be 
//			in the "rolloverButtonList" above.
//
function switchOn(element) {
	// get a pointer to the element, if required
	if (typeof element == "string") element = document.getElementById(element);
	if (element == null) return;
	
	// get the id of the element in question
	var id = element.getAttribute("id");
	// get the normal URL from the rolloverButtonList
	var normalURL = rolloverButtonList[id];

	// if we couldn't find the normal URL, forget it
	if (normalURL == null) return;

    var enabled = enablementList[id];

    var resultUrl;

    if (enabled != null && enabled == false)
    {
        resultUrl = "url(" + rolloverButtonPath + getGreyoutURL(normalURL) + ")";
    }
    else
    {
        // now set the actual CSS style property to the hilight image
        resultUrl = "url(" + rolloverButtonPath + getHilightURL(normalURL) + ")";
    }
	element.style.backgroundImage = resultUrl;
}   




// 	switchOff(element|id)	[public]
//
//	"Switch off" a rollover image, showing it in its normal state.
//
//	* element can be passed as the ID of or a pointer to an ID'd element.
//		- for this to work, an element must have an ID and the ID must be 
//			in the "rolloverButtonList" above.
//
function switchOff(element) {
	// get a pointer to the element, if required
	if (typeof element == "string") element = document.getElementById(element);
	if (element == null) return;
	
	// get the id of the element in question
	var id = element.getAttribute("id");

	// if it's the current page image, exit as we don't want that image to flash
	if (id == currentPageNavButton) return;
	
	// get the normal URL from the rolloverButtonList
	var normalURL = rolloverButtonList[id];

	// if we couldn't find the normal URL, forget it
	if (normalURL == null) return;

    // let's check if the element is disabled
    var enabled = enablementList[id];

    var resultUrl;

    // use the greyed out image if is disabled
    if (enabled != null && enabled == false)
    {
        resultUrl = "url(" + rolloverButtonPath + getGreyoutURL(normalURL) + ")";
    }
    else
    {
        // now set the actual CSS style property to the hilight image
        resultUrl = "url(" + rolloverButtonPath + normalURL + ")";
    }
	element.style.backgroundImage = resultUrl;
}

// 	getHilightURL(URL)		[protected]
//
//	Given a "normal" URL from the rolloverButtonList or otherwise,
//	convert it to the "hilight" URL according to our scheme.
//
function getHilightURL(URL) {
	URL = URL.substring(0, URL.lastIndexOf("."))
			+ rolloverButtonHilightModifier
			+ URL.substring(URL.lastIndexOf("."));
	return URL;
}

// 	getGreyoutURL(URL)		[protected]
//
//	Given a "normal" URL from the rolloverButtonList then
//	convert it to the "greyed out" URL according to our scheme.
//
function getGreyoutURL(URL) {
	URL = URL.substring(0, URL.lastIndexOf("."))
			+ rolloverButtonGreyoutModifier
			+ URL.substring(URL.lastIndexOf("."));
	return URL;
}

// 	preloadRolloverButton(id)		[private]
//
//	Preload the images for a particular rollover button.
//
//	You don't have to call this explicitly, it will be done for you.
//
function preloadRolloverButton(id) {
	var normalURL = rolloverButtonList[id];

	// MOW Note:  We could modify this so that we retain the pointers to the 
	//	pre-load images created below and only do a switchOn() if the image 
	//	has loaded properly...

	// create an image for the normal URL
	var img = new Image();
	img.src = rolloverButtonPath + normalURL;
	
	// create an image for the hilight URL
	img = new Image();
	img.src = rolloverButtonPath + getHilightURL(normalURL);
}

// 	setEnablement(id, value)
//
//	Enable or disable the element, and switch the background image
//
function setEnablement(id, value)
{
    if (enablementList[id] != value)
    {
        enablementList[id] = value;
     	switchOff(id);
    }
}

function getEnablement(id)
{
    return enablementList[id];
}