/******************************************************************************
Extension of DropDownMenuX to support rollovers.

USAGE:
	// typical DropDownMenuX usage
	var menu = new DropDownMenuX("nav_header_menu");
	menu.init();
	menu.activateRollovers();

NOTES:
	- Makes assumptions about image names.
	- Not tested with hovers on subitems.
	- init() method must be called first, then activateRollovers().
******************************************************************************/

DropDownMenuX.prototype.activateRollovers = function () {

	// idempotence
	if (this.rolloversActivated) return;
	this.rolloversActivated = true;
	
	// build the list of rollovers: any img element with "rollover" as one
	// of its CSS classes.
	var ddmx = document.getElementById(this.id);
	var images = ddmx.getElementsByTagName("img");
	this.rollovers = [];
	for (var i = 0; i < images.length; ++i) {
		var image = images[i];
		if (/\brollover\b/i.test(image.className)) {
			this.rollovers.push(image);
		}
	}

	this.rollover_preloaded = {};
	
	for (var i = 0; i < this.rollovers.length; ++i) {
		var rollover = this.rollovers[i];
		
		var default_src      = rollover.src;
		var hover_src        = rollover.src.replace(/\.gif$/i, "_hover.gif");
		var active_src       = rollover.src.replace(/\.gif$/i, "_active.gif");
		var active_hover_src = rollover.src.replace(/\.gif$/i, "_active_hover.gif");
		
		if (/\bselected\b/i.test(rollover.className)) {
			rollover.src         = active_src; // selected tab
			rollover.default_src = active_src;
			rollover.hover_src   = active_hover_src;
		} else {
			rollover.default_src = default_src;
			rollover.hover_src   = hover_src;
		}

		// preload the hover image (incase it's not yet preloaded)
		if (!this.rollover_preloaded[rollover.hover_src]) {
			new Image().src = rollover.hover_src;
			this.rollover_preloaded[rollover.hover_src] = true;
		}

		// our custom showSection and hideSection methods are called
		// on rollover.parentNode, and need to access the rollover.
		rollover.parentNode.rollover = rollover;

		if (this.sections.contains(rollover.parentNode.id + "-section")) {
			// for tabs which have sections, our wrapper
			// showSection and hideSection methods (below) call these.
			rollover.hover = function () {
				this.src = this.hover_src;
			};
			rollover.unhover = function () {
				this.src = this.default_src;
			};
		} else {
			// for tabs which do not have sections...
			rollover.onmouseover = function () {
				this.src = this.hover_src;
			};
			rollover.onmouseout = function () {
				this.src = this.default_src;
			};
		}
	}

	// Augment existing showSection and hideSection methods with
	// wrappers that call the old methods.
	var oldShowSection = this.showSection;
	var oldHideSection = this.hideSection;
	this.showSection = function (id, cnt) {
		oldShowSection.apply(this, [id, cnt]); // call old method
		var id2 = id.replace(/-section$/, "");
		var e = document.getElementById(id2);
		if (e && e.rollover) {
			e.rollover.hover();
		}
	};
	this.hideSection = function (id, cnt) {
		oldHideSection.apply(this, [id, cnt]); // call old method
		var id2 = id.replace(/-section$/, "");
		var e = document.getElementById(id2);
		if (e && e.rollover) {
			e.rollover.unhover();
		}		
	};

}