//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 visualsoftZoom(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        = 40;
  this.popup_height       = 40;
  this.position_x         = 0;
  this.position_y         = 0;

  arrZooms.push(this);

}

//Some browsers like to listen differently,
//so a function is in order
function _addListener(object, event, listener)
{
  if(useragent == 'gecko' || useragent == 'opera')
  {
    object.addEventListener(event,listener,false);
  }
  else if(useragent == 'msie')
  {
    object.attachEvent("on"+event,listener);
  }
}

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

visualsoftZoom.prototype.checkposition = function(e)
{
  var y = 0;
  var x = 0;

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

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

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

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

visualsoftZoom.prototype.mousemove = function(e)
{
  if (this.big_image.src != 'http://www.teessport.com/images/nopic.gif' && this.big_image.src != 'https://www.teessport.com/images/nopic.gif')
  {
    if(useragent == 'gecko')
    {
      //Kill listeners
      e.cancelBubble = true;
      e.preventDefault();
      e.stopPropagation();
    }
    else if(useragent == 'msie' || useragent == 'opera')
    {
      //Kill listeners
      window.event.cancelBubble = true;
    }

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

    if(this.checking)
    {
      return;
    }

    if(!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')
    {
      this.position_x = event.x - this.small_image.offsetLeft;
      var scroll_top = 0;
      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);
  }
}

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

  //Make sure we're viewing what we're hovering over
  pos_x = parseInt(this.popup.style.left) * (this.big_image_width / this.small_image_width);
  pos_y = parseInt(this.popup.style.top) * (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 for example see box clothing.
  pos_x = pos_x - 0;
  if(pos_x < 0)
  {
    pos_x = 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;

  /* Hide form elements */
  att_list = document.getElementById('attribute_list');
  if(typeof(att_list) == 'object')
  {
    //att_list.style.display='none';
    att_list.style.visibility='hidden';
  }
}

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

  /* Show form elements */
  att_list = document.getElementById('attribute_list');
  if(typeof(att_list) == 'object')
  {
    //att_list.style.display='block';
    att_list.style.visibility='visible';
  }

}

//Prepare the zoom container
visualsoftZoom.prototype.initializeBigContainer = function()
{
  var big_img_src = this.big_image.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
visualsoftZoom.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");
  this.popup_width = (parseInt(this.small_image_width / 1.6));
  this.popup_height = (parseInt(this.small_image_height / 1.6));
  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;};
}

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

  //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.initializePopup();

  //Add event listners
  _addListener(window.document,"mousemove",_createReference(this,"checkposition"));
  _addListener(this.small_container,"mousemove",_createReference(this,"mousemove"));

}

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

//** Image switching functions below **//
function changeImg(src)
{
  if(useragent == "msie")
  {
  	document.getElementById('sim2').style.filter='blendTrans(Duration=0.5)';
  	document.getElementById('sim2').filters[0].Apply();
  	document.getElementById('sim2').filters[0].Play();
  }

  document.images.sim2.src = src;
  setTimeout("checkImg('"+src+"')",image_timeout);

  return true;
}

function changeBigImg(src)
{
  if(typeof(zoom) == 'object')
  {
    zoom.big_container.removeChild(document.getElementById('zoom_popup_layer'));

    var layer = document.createElement("DIV");
    layer.setAttribute("name", "zoom_popup_layer");
    layer.setAttribute("id", "zoom_popup_layer");
    layer.style.overflow = "hidden";

    zoom.big_container.appendChild(layer);

    zoom.big_image=document.createElement("IMG");

    zoom.big_image.setAttribute("name", "zoom_popup_bigimage");
    zoom.big_image.setAttribute("id", "zoom_popup_bigimage");
    zoom.big_image.src=src;
    zoom.big_image.style.position='relative';

    layer.appendChild(zoom.big_image);

    if(!zoom.big_image.complete)
    {
      setTimeout("checkBigImg('"+src+"')",image_timeout);
    }
    return true;
  }
  else
  {
    return;
  }

}

function checkImg(src)
{
  if(!document.images.sim2.complete)
  {
    document.images.sim2.src = src;
    image_timeout = image_timeout+500;
    var imgcheck = setTimeout("checkImg('"+src+"')",image_timeout);
  }
  else
  {
    clearTimeout(imgcheck);
  }
}

function checkBigImg(src)
{
  if(typeof(zoom) == 'object')
  {
    if(!zoom.big_image.complete)
    {
      zoom.big_image.src=src;
      var bigimgcheck = setTimeout("checkBigImg('"+src+"')",image_timeout);
    }
    else
    {
      clearTimeout(bigimgcheck);
    }
  }
  else
  {
    return;
  }
}

function changePopLink(image_id,product_id)
{
  document.getElementById('sim2_link').onclick =
  function()
  {
    popupWindow(image_id,product_id);
  }
}

onerror=handleErr;

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