//define reference to the hidden div element
var div;

// set reference to the div element after page is loaded
window.onload = function (){
	div = document.getElementById('hoverbox');
	div2 = document.getElementById('styleBox');
}

// show hoverbox
function hoverbox_show(obj, src, name, text, price, specialPrice, discount, fabricDetail, colorWays, review, id, category){
	var priceLine = price;
	if (specialPrice > 0) {
		priceLine = '<span style="text-decoration:line-through;">' + price + '</span>&nbsp;&nbsp;' +
				    '<b>$' + specialPrice + '&nbsp;&nbsp;<span style="color:red;">Save: ' +
				    discount + '% off!</span></b>';
	}
    var productImageStyle = 'style="height:100%;float:left;max-height:100%;max-width:65%;"';
    var descriptorStyle = 'style="float:left;width:34%;padding-top:1em;margin-left:1.5em;font-size:0.9em;"';
    var headingStyle = 'style="margin-top:1em;text-align:left;font-size:1.1em;"';
	div2.style.visibility = 'hidden';
	div.innerHTML = '<img ' + productImageStyle + ' src="'+src+'"/>'+ 
        '<div ' + descriptorStyle + '>' +
		'<h3 ' + headingStyle + '>' + name + '</h2>' + 
		'<p>' + text + '</p><p>' + priceLine + '</p><p>' + fabricDetail + '</p><p>' + colorWays + 
		'</p><p><i>' + review + '</i></p>' +
		'<p style="font-size:1em;color:#707070;">Click on the Thumbnail to<br/>' +
		'<a href="index.php?main_page=product_info&cPath=' +
		category + '&products_id=' +
		id + '">Buy Now</a></p><div>';
	div.style.visibility = 'visible';
}

// hide hoverbox (hide div element)
function hoverbox_hide(){
	div.style.visibility = 'hidden';
}