var mouseDown = false;
var posXOffset = 0;
var posYOffset = 0;

var detailsShown = false;
var largePicturePath = "";

// 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

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;
    }

}

function moveDetails(e)
{
  if(mouseDown) {
      object = document.getElementById("details");

	nLeft = (xMousePos + posXOffset);
	nTop = (yMousePos + posYOffset);

	object.style.left = nLeft + 'px';
	object.style.top = nTop + 'px';
  }

}

function detailsMouseDown(e) {

  object = document.getElementById("details");

  posXOffset = object.offsetLeft - xMousePos;
  posYOffset = object.offsetTop - yMousePos;

  mouseDown = true;
}

function detailsMouseUp() {
  mouseDown = false;
}

function showDetailsPage(model)
{
  var object = document.getElementById("details");
  var size_option = document.getElementById(model+"_size");
  var size = "";
  if(size_option != null) {
  	size = size_option.value;
  }
  
  window.open("product_info.php?model=" + model + "&size=" + size, "_blank");
}

function showDetails(model, title)
{
  var object = document.getElementById("details");
  var size_option = document.getElementById(model+"_size");
  var size = "";
  if(size_option != null) {
  	size = size_option.value;
  }

  newTop = document.body.scrollTop + (document.body.clientHeight -  object.clientHeight)/2;
  if(newTop < document.body.scrollTop) {
     newTop = document.body.scrollTop;
  }
  
  newLeft = document.body.scrollLeft + (document.body.clientWidth -  object.clientWidth)/2;
  if(newLeft < 0) {
     newLeft = 0;
  }
  object.style.top = newTop;
  object.style.left = newLeft;
  
  object.style.visibility = "visible";

  object = document.getElementById("details_title");
  object.innerHTML = title + " (Model: " + model + ")";

  object = document.getElementById("details_content");
  object.innerHTML = "<table border='0' width='100%'><tr><td width='40%' align='right'><img border='0' src='images/wait.gif'></td><td width='60%'>&nbsp;Loading... Please wait.</td></tr></table>";

  // retrieve details
  var xmlHttp;
  try
  {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
  }
  catch (e)
  {
    // Internet Explorer
    try
    {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
  {
    if(xmlHttp.readyState==4)
    {
      largePicturePath = "";
      document.getElementById("details_content").innerHTML=xmlHttp.responseText;
    }
  }
  xmlHttp.open("GET","get_details.php?model="+model+"&size="+size+"&sid="+Math.random(),true);
  xmlHttp.send(null);

  
  detailsShown = true;
}

function hideDetails()
{
  object = document.getElementById("details");
  object.style.visibility = "hidden";
  object.style.top = 0;
  object.style.left = 0;

  detailsShown = false;
}

function showDetailsPicture(num, obj, detailsImagePath, largeImagePath) {
	for(tn_index = 0; tn_index < num; tn_index++) {
		object = document.getElementById("thumbnail" + tn_index);
		object.className="details_thumbnail";
	}

	obj.className="details_curr_thumbnail";
	
	largePicturePath = largeImagePath;
	
	object = document.getElementById("details_picture");
	object.src = detailsImagePath;
}

function showLargePicture() {
	window.open(largePicturePath,"Image","menubar=no,width=860,height=860,toolbar=no, resizable=yes, scrollbars=yes");
}

function setLargePicturePathIfEmpty(path) {
	if(largePicturePath == "") {
		largePicturePath = path;
	}
}