var zoomingAllowed = true;

//Global vars
var image_timeout = 1000;
var useragent = 'msie';
var browser = navigator.userAgent.toLowerCase();
var arrZooms = new Array();

//Browser detection
if(browser.indexOf("opera") != -1)
  useragent = 'opera';
else if(browser.indexOf("msie") != -1)
  useragent = 'msie';
else if(browser.indexOf("mozilla") != -1)
  useragent = 'gecko';

function rotorZoom(small_container, small_image, big_container, big_image, settings)
{
  //Set the load vars
  this.checking           = false;
  this.safari_loaded      = false;

  //Get the form object for the passed in id's
  this.small_container    = document.getElementById(small_container);
  this.small_image        = document.getElementById(small_image);
  this.big_container      = document.getElementById(big_container);
  this.big_image          = document.getElementById(big_image);
  this.settings           = settings;

  //Clear all widths, heights and positions
  this.small_image_height = 0;
  this.small_image_width  = 0;
  this.big_image_height   = 0;
  this.big_image_width    = 0;

  this.popup              = 0;
  this.popup_width        = 60;
  this.popup_height       = 60;
  this.position_x         = 0;
  this.position_y         = 0;

  arrZooms.push(this);
}

function _addListener(object, event, listener)
{
  if(object.addEventListener)
    object.addEventListener(event,listener,false);
  else if(object.attachEvent)
    object.attachEvent("on"+event,listener);
}

function _createReference(object,method)
{
  return function()
  {
    object[method].apply(object,arguments,"");
  }
}

rotorZoom.prototype.checkposition = function(e)
{
  if(!zoomingAllowed) return false;
  var y = 0;
  var x = 0;

  if(useragent == 'msie')
  {
    y = e.clientY;
    x = e.clientX;

    if(document.body && (document.body.scrollLeft || document.body.scrollTop))
    {
      y = e.clientY + document.body.scrollTop;
      x = e.clientX + document.body.scrollLeft
    }
    else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
    {
      y= e.clientY + document.documentElement.scrollTop;
      x= e.clientX + document.documentElement.scrollLeft;
    }
  }
  else
  {
    y = e.clientY;
    x = e.clientX;

    if(browser.indexOf("safari") == -1)
    {
      y += window.pageYOffset;
      x += window.pageXOffset
    }
  }

  small_y = small_x = 0;
  var tag = this.small_image;

  while(tag.tagName != "BODY" && tag.tagName != "HTML")
  {
    small_y += tag.offsetTop;
    small_x += tag.offsetLeft;
    tag = tag.offsetParent
  }

  if(x > parseInt(small_x + this.small_image_width))
  {
    this.hideHover();
    return false;
  }

  if(y > parseInt(small_y + this.small_image_height))
  {
    this.hideHover();
    return false;
  }

  if(x < parseInt(small_x))
  {
    this.hideHover();
    return false;
  }

  if(y < parseInt(small_y))
  {
    this.hideHover();
    return false;
  }
  return true;
}

rotorZoom.prototype.mousemove = function(e)
{
  if (zoomingAllowed && this.big_image && this.big_image.src != '')
  {
    if(useragent == 'gecko')
    {
      e.cancelBubble = true;
      e.preventDefault();
      e.stopPropagation();
    }
    else if(useragent == 'msie' || useragent == 'opera')
    {
      window.event.cancelBubble = true;
    }

    for(i=0; i < arrZooms.length; i++)
    {
      if(arrZooms[i] != this)
      {
        arrZooms[i].checkposition(e);
      }
    }

    if(this.checking || !this.checkposition(e))
      return;

    this.checking = true;

    var small_x = 0;
    var small_y = 0;

    if(useragent == 'gecko' || useragent == 'opera')
    {
      var tag = this.small_image;

      while(tag.tagName != "BODY" && tag.tagName != "HTML")
      {
        small_y += tag.offsetTop;
        small_x += tag.offsetLeft;
        tag = tag.offsetParent;
      }
    }

    if(useragent == 'msie')
    {
      var scroll_top = 0;
      this.position_x = event.x - this.small_image.offsetLeft;
      this.position_y = event.y + scroll_top;
    }
    else
    {
      this.position_x = e.clientX - small_x;
      this.position_y = e.clientY - small_y;

      if(browser.indexOf("safari") == -1)
      {
        this.position_x += window.pageXOffset;
        this.position_y += window.pageYOffset;
      }
    }

    if((this.position_x + this.popup_width / 2) >= this.small_image_width)
      this.position_x = this.small_image_width - this.popup_width / 2;

    if((this.position_y + this.popup_height / 2) >= this.small_image_height)
      this.position_y = this.small_image_height - this.popup_height / 2;

    if((this.position_x - this.popup_width / 2) <= 0)
      this.position_x = this.popup_width / 2;

    if((this.position_y - this.popup_height / 2) <= 0)
      this.position_y = this.popup_height / 2;

    setTimeout(_createReference(this,"showHover"),10);
  }
}

rotorZoom.prototype.showHover = function()
{
  //show the zoom container
  l = (this.position_x - this.popup_width / 2);
  t = (this.position_y - this.popup_height / 2);
  this.popup.style.left = l + 'px';
  this.popup.style.top = t + 'px';
  this.popup.style.visibility = "visible";
  this.popup.onclick = document.getElementById('shoe_link').onclick;

  //Make sure we're viewing what we're hovering over
  //alert(this.big_image_width / this.small_image_width);
  pos_x = parseInt(l * (this.big_image_width / this.small_image_width));
  pos_y = parseInt(t * (this.big_image_height / this.small_image_height));

  //Change this zero to the number of pixels to hide from the width
  //Hides some left / right borders
  pos_x = Math.max(pos_x - 0, 0);

  //Display the image and the container
  this.big_image.style.left = (-pos_x-1)+ 'px';
  this.big_image.style.top  = (-pos_y-1)+ 'px';
  this.big_container.style.display = 'block';
  this.big_container.style.visibility = 'visible';
  this.big_image.style.display = 'block';
  this.big_image.style.visibility = 'visible';
  this.checking = false;
}

rotorZoom.prototype.hideHover = function()
{
  //Hide the zoom container
  this.popup.style.visibility = "hidden";
  this.big_container.style.display = 'none';
  this.big_container.style.visibility = 'visible';
}

//Prepare the zoom container
rotorZoom.prototype.initializeBigContainer = function(big_img_src)
{
  //Make sure we're viewing the correct layer
  while(this.big_container.firstChild)
    this.big_container.removeChild(this.big_container.firstChild);

  //Create the layer for the zoom image,
  //then populate it with the image
  var layer = document.createElement("DIV");
  layer.setAttribute("name", "zoom_popup_layer");
  layer.setAttribute("id", "zoom_popup_layer");
  layer.style.overflow = "hidden";

  this.big_container.appendChild(layer);
  this.big_image=document.createElement("IMG");
  this.big_image.setAttribute("name", "zoom_popup_bigimage");
  this.big_image.setAttribute("id", "zoom_popup_bigimage");
  this.big_image.src=big_img_src;
  this.big_image.style.position='relative';
  layer.appendChild(this.big_image)
}

//Prepare the popup
rotorZoom.prototype.initializePopup = function()
{
  //Create the zoom window within the small container
  this.popup = document.createElement("DIV");
  this.popup.className = 'zoomPup';
  this.popup.setAttribute("name", "zoom_popup");
  this.popup.setAttribute("id", "zoom_popup");
  rat = this.small_image_width / this.big_image_width;
  this.popup_width  = Math.ceil(rat * 305);//(parseInt(this.small_image_width / 3));
  this.popup_height = Math.ceil(rat * 305);//(parseInt(this.small_image_height / 3));
  this.popup.style.width = this.popup_width + 'px';
  this.popup.style.height = this.popup_height + 'px';
  this.small_container.appendChild(this.popup);
  this.small_container.unselectable = "on";
  this.small_container.style.MozUserSelect = "none";
  this.small_container.onselectstart = function() {return false;};
  this.small_container.oncontextmenu = function() {return false;};
}

rotorZoom.prototype.initialize = function()
{
  //Safari is a beach, so have to keep checking that its loaded
  if(browser.indexOf("safari") != -1)
  {
    if(!this.safari_loaded)
    {
      _addListener(this.big_image,"load",_createReference(this,"initialize"));
      this.safari_loaded=true;
      return;
    }
  }
  else
  {
    //re-initialize if the images aint loaded
    if(!this.big_image.complete || !this.small_image.complete)
    {
      setTimeout(_createReference(this,"initialize"),100);
      return;
    }
  }
  //set the height / width vars
  this.big_image_width = this.big_image.width;
  this.big_image_height = this.big_image.height;
  this.small_image_width = this.small_image.width;
  this.small_image_height = this.small_image.height;

  //Double check
  //re-initialize if the images aint loaded
  if(this.big_image_width == 0 || this.big_image_height == 0 || this.small_image_width == 0 || this.small_image_height == 0)
  {
    this.big_image.src += '?' + Math.random();
    this.small_image.src += '?' + Math.random();
    setTimeout(_createReference(this,"initialize"),100);
    return;
  }
  
  if(this.small_image_height < this.big_image_height) // Er moet wel iets te 'zoomen' zijn.
  {
    //Set the width of the small container to that of the image
    this.small_container.style.width=this.small_image.width+'px';
    this.small_container.style.height=this.small_image.height+'px';
  
    //Prepare the containers
    this.initializeBigContainer(this.big_image.src);
    this.initializePopup();
  
    //Add event listners
    _addListener(window.document,"mousemove",_createReference(this,"checkposition"));
    _addListener(this.small_container,"mousemove",_createReference(this,"mousemove"));
  }else
    this.small_container.style.cursor='default';
}

rotorZoom.prototype.initZoom = function()
{
  this.initialize();
}

onerror=handleErr;

function handleErr(msg,url,l)
{
  //alert(url + "  "+ l);
  return true;
}