pre_obj = new Object();
browser = new browser();

function init_preview(){
	//set up all the images
	div = tag("div");
	for(i=0;i<=div.length-1;i++){
		//adds register the on mousedown function
		if(div[i].className.indexOf('prodBox') > -1){
			prod = div[i];
			id = prod.id;
			prod.onmouseover = function(){
				initPreview(this.id);
			}
		}
	}
}
function browser() {
	this.IE    = false;
	this.NS    = false
	agent = navigator.userAgent;
	if ((i = agent.indexOf("MSIE")) >= 0) {
		this.IE = true;
		return;
	}
	if ((i = agent.indexOf("Gecko")) >= 0) {
		this.NS = true;
		return;
	}
	if ((i = agent.indexOf("Netscape6/")) >= 0) {
		this.NS = true;
		return;
	}
}
function initPreview(prodid){
	/*show the preview div and put in the image
	setup the dragable so the preview images will move with the mouse
	*/
	desc_box = $("desc");
	//position the box
	//set the preview image
	var id = prodid;
	pre_obj = $(id);
	var title = $(id).getAttribute("title");
	var desc= $(id).getAttribute("desc");
	setPreviewImg(id,title,desc);

	if (browser.IE) {
		//for ie
		document.attachEvent("onmousemove", dragPreview);
		pre_obj.attachEvent("onmouseout",   stopPreview);
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (browser.NS) {
		document.addEventListener("mousemove", dragPreview,   true);
		pre_obj.addEventListener("mouseout",   stopPreview, true);
 	}

}

function dragPreview(event){
	//this will do all of the draging of the image
	
	var tbody = (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
	var docwidth=document.all? tbody.scrollLeft+tbody.clientWidth : pageXOffset+window.innerWidth;
	var docheight=document.all? Math.min(tbody.scrollHeight, tbody.clientHeight) : Math.min(window.innerHeight);
	xpos = event.clientX
	ypos = tbody.scrollTop + event.clientY;	
	
	if((event.clientX + 325) > docwidth){
		//make the box appear on the left
		xpos = (event.clientX - 325) - 10;
	}else{
		xpos = (event.clientX + 10);
	}
	if(docheight - event.clientY < (200)){
		//the box is overlapping
		ypos = event.clientY + tbody.scrollTop - (200 + event.clientY - docheight);
	}else{
		ypos = tbody.scrollTop + event.clientY;	
	}

	desc_box.style.left = xpos+"px";
	desc_box.style.top = ypos+"px";
	
}

function stopPreview(){
	//this will remove the onmousemove and the onmouseup functions from the image
	if (browser.IE) {
   		document.detachEvent("onmousemove", dragPreview);
	    pre_obj.detachEvent("onmouseout",   stopPreview);
  	}
  	if (browser.NS) {
    	document.removeEventListener("mousemove", dragPreview,   true);
	    pre_obj.removeEventListener("mouseout",   stopPreview, true);
  	}
	
	resetPreviewImg(pre_obj.id)
	desc_box = $("desc");
	desc_box.style.left = "-500px";
	desc_box.style.top = "-500px";
	
}

function setPreviewImg(id,title,descShort){
		$("title").innerHTML = "<h2>"+title+"</h2>";
		$("descShort").innerHTML = descShort;
}
function resetPreviewImg(id){
		$("title").innerHTML = "";
		$("descShort").innerHTML = "";
}