var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1);

function product(product_id) {

	if( product_id > 0 ) {

		OutputProductBox('<div id="ProductBox"><center><img src="/images/loading.gif" width="65" height="13" border="0" alt="Loading" /></center></div>');

		var product_box_url = '/ajax/product_html.php?productId=';

		var ajax = new Ajax();
		ajax.Output = function(txt) { OutputProductBox(txt); }
		ajax.Request(product_box_url + product_id);

	} else {
		OutputProductBox('');
	}
}

function OutputProductBox(html) {

	var product_output = document.getElementById('product_box_output');

	if ( html == null ) return;
	if ( product_output == null ) return;

	if ( product_output.innerHTML != html ) {
		product_output.innerHTML = html;
	}

	if( html.length > 0 ) {
		product_output.style.visibility = 'visible';
	} else {
		product_output.style.visibility = 'hidden';
	}
}


function handleMove(e) {

	if (!e) var e = window.event;

	var mouseX = 0;
	var mouseY = 0;
	var browserX = 0;
	var scrollY = 0;
	var box_pos = 0;

	if (e.pageX || e.pageY) {
		mouseX = e.pageX;
		mouseY = e.pageY;
	} else if (e.clientX || e.clientY) {
		mouseX = e.clientX;
		mouseY = e.clientY;
	}

	if ( document.body ) {
		browserX = document.body.clientWidth;
	}

	if ( document.documentElement && isIE == true ) {
		scrollY = document.documentElement.scrollTop;
	}

	if ( browserX > 0 ) {
		box_pos = 600 * ( mouseX / browserX );
	}

	var product_output = document.getElementById('product_box_output');

	if ( product_output != null ) {

		product_output.style.position = 'absolute';
		product_output.style.left = (mouseX - box_pos) + 'px';
		product_output.style.top = (mouseY + scrollY + 40) + 'px';
	}

	var status_output = document.getElementById('status_output');

	if ( status_output != null ) {
		status_output.innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
	}
}

if( document.addEventListener ) {
	document.addEventListener('mousemove', handleMove, true);
} else {
	document.onmousemove = handleMove;
}


function handleOver(e) {
	product(this.name);
}

function handleOut(e) {
	product();
}

window.onload=function() {

	var image_tags = document.getElementsByTagName('img');

	for( $i=0; $i < image_tags.length; $i++ ) {

		image_tags[$i].alt = '';

		if(image_tags[$i].name != null) {
			image_tags[$i].onmouseover = handleOver;
			image_tags[$i].onmouseout = handleOut;
		}
	}
}