/**
 * This function is used to simulate a CSS :hover.
 * Internet Explorer handles hovers only for the tag <a>, all other tags are ignored.
 * This function is used to simulate a hover.
 *
 * Instead of doing:
 *
 * CSS:
 * ---
 *
 * image.icon { ... }
 * image.icon:hover { ... }
 *
 *
 * HTML:
 * ----
 *
 * <image class="icon" ...>
 *
 *
 * Do the following:
 *
 * CSS:
 * ---
 *
 * image.icon { ... }
 * image.icon-hover { ... }
 *
 *
 * HTML:
 * ----
 *
 * <image 
 *   class="icon" 
 *   onMouseOver="simulate_css_hover(this)"  
 *   onMouseOut="simulate_css_hover(this)"
 *   ...
 * >
 */
function simulate_css_hover(tag) {
	
	// Check if there is a class name
	var className = tag.className;
	if (! className) {
		// Nothing to do since we don't have a class name
		return;
	}
	
	// Find if '-hover' is in the class name
	var position = className.lastIndexOf('-hover');
	var clazz = '';
	var is_mouse_on = false;
	if (position < 0) {
		// Not found - simulate a hover
		className = tag.className + '-hover';
		is_mouse_on = true;
	}
	else {
		// Found - simulate a hover release
		className = tag.className.substr(0, position);
		is_mouse_on = false;
	}
	
	// Change the class
	tag.className = className;
	
	return is_mouse_on;
}

/**
 * This function is a complement to the simulate_css_hover() function.
 * It will resize an image based on it's name, the image name must be 
 * in the form  "_${WIDTH}x${HEIGHT}.${FORMAT}" example "_60x80.png".
 *
 * At the moment, the widths and heights are hardcoded in the function.
 */
function resize_on_mouse_event(image) {

	// Act as if a mouse hover happend
	var is_mouse_on = simulate_css_hover(image);
	
	// Must have a src in order to continue
	var src = image.src;
	if (! src) {
		// Not an image
		return;
	}
	
	// Get the image dimensions
	var pattern = new RegExp("^(.*)_(\\d+)x(\\d+)\\.([^.]+)$");
	if (! pattern.exec(src)) {
		// Nothing to do
		return;
	}
	
	// Get the dimensions
	var prefix = RegExp.$1;
	var width = RegExp.$2;
	var height = RegExp.$3;
	var extension = RegExp.$4;

	// Find the new width/height
	if (width == 60) {
		width  = 78;
		height = 104;
	}

	else if (width == 78) {
		width  = 60;
		height = 80;
	}
		
	else if (width == 80) {
		width  = 104;
		height = 78;
	}

	else if (width == 104) {
		width  = 80;
		height = 60;
	}

	else if (width == 150) {
		width  = 130;
		height = 130;
	}

	else if (width == 130) {
		width  = 150;
		height = 150;
	}

	
	// The new image
	var url = prefix + "_" + width + "x" + height + "." + extension;

	// Change the image
	image.src = url;
}


/**
 * This function returns a reference to the DOM element that has the given ID.
 *
 */
// Probe the browser
var isIE4 = document.all ? true : false;
var isIE6 = (document.getElementById && document.all) ? true : false;
var isNS4 = document.layers ? true : false;
var isNS6 = (document.getElementById && !document.all) ? true : false; 

function getDOMObject(documentID){
	if (isIE4) {
		return document.all[documentID];
	}
	else if(isIE6) {
		return document.getElementById(documentID);
	}
	else if (isNS4) {
		return document.layers[documentID];
	}
	else if (isNS6) {
		return document.getElementById(documentID);
	}
}