// Set Netscape up to run the "captureMousePosition" function whenever
// the mouse is moved. For Internet Explorer and Netscape 6, you can capture
// the movement a little easier.
if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page

//used for presetting to pos form last hide - seems to reduce flickering:
hover_product_image_last_pos_x = 0;
hover_product_image_last_pos_y = 0;

function captureMousePosition(e) {
    if (document.layers) {
        // When the page scrolls in Netscape, the event's mouse position
        // reflects the absolute position on the screen. innerHight/Width
        // is the position from the top/left of the screen that the user is
        // looking at. pageX/YOffset is the amount that the user has
        // scrolled into the page. So the values will be in relation to
        // each other as the total offsets into the page, no matter if
        // the user has scrolled or not.
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        // When the page scrolls in IE, the event's mouse position
        // reflects the position from the top/left of the screen the
        // user is looking at. scrollLeft/Top is the amount the user
        // has scrolled into the page. clientWidth/Height is the height/
        // width of the current page the user is looking at. So, to be
        // consistent with Netscape (above), add the scroll offsets to
        // both so we end up with an absolute value on the page, no
        // matter if the user has scrolled or not.
        xMousePos = window.event.x+document.body.scrollLeft;
        yMousePos = window.event.y+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }
}


hover_product_image_move=function(el_id) {
	
	var element = document.getElementById(el_id);
	var offset_x = element.offsetWidth;
	var offset_y = element.offsetHeight;
	
	//preset to pos form last hide - seems to reduce flickering
	if(hover_product_image_last_pos_x > 0) {
		element.style.left = hover_product_image_last_pos_x;
		element.style.top = hover_product_image_last_pos_y;
	}
	hover_product_image_last_pos_x = 0;
	hover_product_image_last_pos_y = 0;
	
    while (element = element.offsetParent) {
        offset_x += element.offsetLeft;
        offset_y += element.offsetTop;
    }
	
	var pos_x = xMousePos - offset_x - 30; //movel el width left plus X px //was 20
	var pos_y = yMousePos - offset_y*0.4 + 10; //move 40% of el height up
	if(pos_x < 0) {
		pos_x = 0;
	}
	if(pos_y < 0) {
		pos_y = 0;
	}
	if( (pos_y + offset_y) > yMousePosMax) {
		pos_y = yMousePosMax - offset_y;
	}
	document.getElementById(el_id).style.left = Math.round(pos_x) + 'px';
	document.getElementById(el_id).style.top = Math.round(pos_y) + 'px';
}

position=function(element, coordinate) {
    var p = {x: element.offsetLeft || 0, y:element.offsetTop || 0};
    while (element = element.offsetParent) {
        p.x += element.offsetLeft;
        p.y += element.offsetTop;
    }
	if(coordinate == 'x') {
		return p.x;
	}
	if(coordinate == 'y') {
		return p.y;
	}
    return p;
}


hover_product_image=function(action, el_id, url_params) {
	//alert(action);
	if(action=="show") {
		//ami IE issue: pic stays within overflowing div id="osc"
		if(document.getElementById("osc")) {
			document.getElementById("osc").style.overflow = "visible";
		}
		
		var one = document.getElementById('product_image_one');
		if(one) {
			document.getElementById('product_image_one').style.display="none";
		}
		var two = document.getElementById('product_image_two');
		if(two) {
			document.getElementById('product_image_two').style.display="none";
		}
		var three = document.getElementById('product_image_three');
		if(three) {
			document.getElementById('product_image_three').style.display="none";
		}
		
		//document.getElementById(el_id).style.left = 0; //event.clientX - document.getElementById(el_id).offsetWidth - 10; //movel el width left plus X px
		//document.getElementById(el_id).style.top = 0; //event.clientY - document.getElementById(el_id).offsetHeight*0.4 + 10; //move 40% of el height up
		
		//check if an image was already loaded:
		var children = document.getElementById(el_id).getElementsByTagName("div");
		if(children.length > 0) {
			if(children[0].className == "loading") {
				hover_product_image_load(el_id, url_params + '&parent=' + el_id, xMousePos, yMousePos);
			}
		}
		document.getElementById(el_id).style.display="block";
	}
	if(action=="hide") {
		//ami IE issue: pic stays within overflowing div id="osc"
		if(document.getElementById("osc")) {
			document.getElementById("osc").style.overflow = "auto";
		}
		
		//check if mouse position is within popup and dont hide if so
		var hover_div = document.getElementById(el_id);
		var p = position(hover_div);
		
		var hover_link = document.getElementById(el_id + '_link');
		var hover_link_pos = position(hover_link);
		
		if(  ( xMousePos >= p.x && xMousePos <= (p.x + hover_div.offsetWidth + 10) && yMousePos >= p.y && yMousePos <= (p.y + hover_div.offsetHeight) ) ) { //   ||   ( xMousePos >= hover_link_pos.x && xMousePos <= (hover_link_pos.x + hover_link.offsetWidth) && yMousePos >= hover_link_pos.y && yMousePos <= (hover_link_pos.y + hover_link.offsetHeight) )  ) {
			//mouse is within popup element, so dont hide it
		} else {
			document.getElementById(el_id).style.display="none";
			//phil
			hover_product_image_last_pos_x = p.x;
			hover_product_image_last_pos_y = p.y;
		}
	}
}


function hover_product_image_load(el_id, url_params, mouse_pos_x, mouse_pos_y) {
    // native XMLHttpRequest object
    //document.getElementById(el_id).innerHTML = 'Loading...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {hover_product_image_done(el_id, mouse_pos_x, mouse_pos_y);};
        req.open("GET", "hover_product_image.php?" + url_params, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {hover_product_image_done(el_id, mouse_pos_x, mouse_pos_y);};
            req.open("GET", "hover_product_image.php?" + url_params, true);
            req.send();
        }
    }
}

function hover_product_image_done(el_id, mouse_pos_x, mouse_pos_y) {
    if (req.readyState == 4) { //req is "loaded"
        if (req.status == 200) { //status OK
			//default offset (used to make sure mouse isnt within div when it shows up which prevents closing/repositioning):
			document.getElementById(el_id).style.left = mouse_pos_x - 560 - 20;
			document.getElementById(el_id).style.top = mouse_pos_y - 400*0.4 + 5;
			
            results = req.responseText;
            document.getElementById(el_id).innerHTML = results;
			
			//reposition relative to mouse:
			hover_product_image_move(el_id);
        } else {
            document.getElementById(el_id).innerHTML="Error:\n" +
                req.statusText;
        }
    }
}