var usAgent = 'mozilla';
var usAg = navigator.userAgent.toLowerCase();
if (usAg.indexOf("opera") != -1) {
  usAgent = 'opera';
} else if (usAg.indexOf("msie") != -1) {
  usAgent = 'msie';
}

function objListener(obj, eventName, func){
  if (usAgent=='msie') {
    obj.attachEvent("on"+eventName, func);
  } else {
    try {
      obj.addEventListener(eventName, func, false);
    } catch(e) {
      alert("Error: "+e+", event="+eventName);
    }
  }
}


function applyFunc(object, methodName){
  return function(){
    object[methodName].apply(object, arguments);
  }
}


function ZoomTool(nameImgDiv, nameImg, closeImgId, zoomlinkId, aPrefix){
  for (var i in aPrefix) {
    this[aPrefix[i]+'ImgDiv'] = document.getElementById(aPrefix[i]+'_'+nameImgDiv);
    this[aPrefix[i]+'Img'] = document.getElementById(aPrefix[i]+'_'+nameImg);
  }
  this.zoomlinkId = document.getElementById(zoomlinkId);
  this.closeImgId = document.getElementById(closeImgId);
}


ZoomTool.prototype = {
  init : function() {
    if (!this.dynamicImg.complete || !this.smImg.complete) {
      setTimeout(applyFunc(this, "init"), 100);
      return
    }
    //set flags
    this.isShowBigImg = false;
   // set start data
    this.posX = this.posY = 0;
    this.mouseDiv = 0;
    this.mouseDivSizeX = this.mouseDivSizeY = 20;
   // set start coord
    this.dynamicImgSizeX = this.dynamicImg.width;
    this.dynamicImgSizeY = this.dynamicImg.height;
    this.smImgSizeX = this.smImg.width;
    this.smImgSizeY = this.smImg.height;
    this.smImgDiv.style.width = this.smImg.width+"px";
    this.smImgDiv.style.height = this.smImg.height+"px";
    this.dynamicImgSrc = this.dynamicImg.src;
    this.dynamicImgId = this.dynamicImg.id;
    this.dynamicImgDiv.style.top = '-11px';
    if (typeof(dynamic_div_offset) != 'undefined' && dynamic_div_offset != 0) {
      this.dynamicImgDiv.style.left = (dynamic_div_offset - parseInt(this.dynamicImgDiv.style.width))+'px';
    } else {
      this.dynamicImgDiv.style.left = '-'+(95 + parseInt(this.dynamicImgDiv.style.width))+'px';
    }
    this.dynamicImgDivStyleLeft = this.dynamicImgDiv.style.left;
    
    this.prepareElem();
      objListener(this.smImgDiv, "mousemove", applyFunc(this, "mouseEvtMove"));
      objListener(window.document, "mousemove", applyFunc(this, "checkMousePos"));
      objListener(this.smImgDiv, "click", applyFunc(this, "showBigImg"));
      objListener(this.zoomlinkId, "click", applyFunc(this, "showBigImg"));
    this.anableView = (parseInt(this.dynamicImgDiv.style.width) < this.dynamicImgSizeX
      ||  parseInt(this.dynamicImgDiv.style.height) < this.dynamicImgSizeY) ? true : false;
  },
  
  prepareElem : function() {
    // creates small div which follows mouse
    this.mouseDiv = document.createElement("DIV");
    this.mouseDiv.style.visibility = 'hidden';
    this.mouseDiv.style.position = 'absolute';
    this.mouseDiv.style.border = '1px solid silver';
    this.mouseDiv.style.background = 'white';
    if (usAgent == 'msie') {
      this.mouseDiv.style["filter"] = "alpha(Opacity=50)";
    } else {
      this.mouseDiv.style["opacity"] = 0.5;
    }
    this.mouseDiv.style.zIndex = 100;
    this.smImgDiv.appendChild(this.mouseDiv);
    // prepare coordinate
    this.mouseDivSizeX = (parseInt(this.dynamicImgDiv.style.width) / (this.dynamicImgSizeX / this.smImgSizeX));// * 0.8;
    this.mouseDivSizeY = (parseInt(this.dynamicImgDiv.style.height) / (this.dynamicImgSizeY / this.smImgSizeY));// * 0.8;
    this.mouseDiv.style.width = (Math.round(( this.mouseDivSizeX > this.smImgSizeX) ? this.smImgSizeX : this.mouseDivSizeX))+'px';
    this.mouseDiv.style.height = (Math.round((this.mouseDivSizeY > this.smImgSizeY) ? this.smImgSizeY : this.mouseDivSizeY))+'px';
  
    // prepare big Image's elements
    while (this.dynamicImgDiv.firstChild) {
      this.dynamicImgDiv.removeChild(this.dynamicImgDiv.firstChild);
    }
    
    var tmpDiv = document.createElement("DIV");
    tmpDiv.style.overflow = "hidden";
    this.dynamicImgDiv.appendChild(tmpDiv);
    this.dynamicImg = document.createElement("IMG");
    this.dynamicImg.style.position = 'relative';
    this.dynamicImg.style.borderWidth = '0px';
    this.dynamicImg.src = this.dynamicImgSrc;
    this.dynamicImg.id = this.dynamicImgId;
    this.dynamicImg.style.padding = '0px';
    this.dynamicImgDiv.style.visibility = "hidden";
    tmpDiv.appendChild(this.dynamicImg);
  },

  mouseEvtMove : function(e) {
    if(this.anableView && !this.isShowBigImg && zoomObj.bigImgDiv.style.display != 'block'){
      if (usAgent == 'msie' && this.smImgDiv.getBoundingClientRect) {
        var smImgR = this.smImgDiv.getBoundingClientRect();
        var docScroll = this._getWinParam('scroll');
      }
      var smDivOffsetLeft = ((usAgent == 'msie') ? (smImgR['left'] + docScroll.x) : this.smImgDiv.offsetLeft)
      var smDivOffsetTop = ((usAgent == 'msie') ? (smImgR['top'] + docScroll.y) : this.smImgDiv.offsetTop);
      this.posX = e.clientX - smDivOffsetLeft;
      this.posY = e.clientY - smDivOffsetTop + document.documentElement.scrollTop;
      if ((this.posX + this.mouseDivSizeX/2) >= this.smImgSizeX) {
        this.posX = this.smImgSizeX - this.mouseDivSizeX/2;
      } else if ((this.posX - this.mouseDivSizeX/2) <= 0) {
        this.posX = this.mouseDivSizeX/2;
      }
      if ((this.posY + this.mouseDivSizeY/2) >= this.smImgSizeY) {
        this.posY = this.smImgSizeY - this.mouseDivSizeY/2;
      } else if ((this.posY - this.mouseDivSizeY/2) <= 0) {
        this.posY = this.mouseDivSizeY/2;
      }
      
      // show dynamic divs
      var mouseLeft = ((smDivOffsetLeft + this.posX - this.mouseDivSizeX/2) > smDivOffsetLeft) ? this.posX - this.mouseDivSizeX/2 : 1;
      var mouseTop =  ((smDivOffsetTop + this.posY - this.mouseDivSizeY/2) > smDivOffsetTop) ? this.posY - this.mouseDivSizeY/2 : 1;

      this.mouseDiv.style.left = mouseLeft+'px';
      this.mouseDiv.style.top = mouseTop+'px';
      this.mouseDiv.style.visibility = "visible";
      
      this.dynamicImg.style.left = (-(mouseLeft * (this.dynamicImgSizeX / this.smImgSizeX)))+'px';
      this.dynamicImg.style.top = (-(mouseTop * (this.dynamicImgSizeY / this.smImgSizeY)))+'px';
      this.dynamicImgDiv.style.left = this.dynamicImgDivStyleLeft;
      this.dynamicImgDiv.style.visibility = 'visible';
    }
  },
  
  hideDynamicDivs : function(e) {
    /* this.dynamicImgDiv.style.left = '-10000px'; */
    this.dynamicImgDiv.style.visibility = 'hidden';
    if (usAgent == 'msie') {
      this.smImgDiv.style.zIndex = 0;
    }
    if (this.mouseDiv) {
      this.mouseDiv.style.visibility = "hidden";
    }
  },
  
  showBigImg : function(e){
    if (usAgent == 'msie') {
      window.event.cancelBubble = true;
    } else {
      e.cancelBubble=true;
      e.preventDefault();
      e.stopPropagation();
    }
    this._showBigImg();
  },
  
  _showBigImg : function(){
    this.isShowBigImg = true;
    this.hideDynamicDivs();
    this.bigImg.src = this.dynamicImgSrc;

    //var winParam = this._getWinParam('size');
    x_coord = _wrapper.getWindowWidth();
    y_coord = _wrapper.getWindowHeight();

    this.bigImgDiv.style.left = (x_coord > this.dynamicImgSizeX) ? Math.round((x_coord - this.dynamicImgSizeX) / 2) + 'px' : '20px';
    this.bigImgDiv.style.top = (y_coord > this.dynamicImgSizeY) ? Math.round((y_coord - this.dynamicImgSizeY) / 2) + 'px' : '0px';
    this.bigImgDiv.style.display = 'block';
    this.bigImgDiv.style.zIndex = 200;

    objListener(this.closeImgId, "click", applyFunc(this, "hideBigImg"));
    objListener(this.bigImg, "click", applyFunc(this, "hideBigImg"));
  },

  hideBigImg  : function(e){
    this.bigImgDiv.style.display = 'none';
    this.isShowBigImg = false;
  },
  
  checkMousePos : function(e) {
    var docScroll = this._getWinParam("scroll");
    var x = e.clientX + docScroll.x;
    var y = e.clientY + docScroll.y;
    if (usAgent == 'msie' && this.smImg.getBoundingClientRect) {
      var smImgR = this.smImg.getBoundingClientRect();
    }
    var smallX = ((usAgent == 'msie') ? (smImgR['left'] + docScroll.x) : this.smImgDiv.offsetLeft);
    var smallY = ((usAgent == 'msie') ? (smImgR['top'] + docScroll.y) : this.smImgDiv.offsetTop);
    
    if (x > parseInt(smallX+this.smImgSizeX) || x < parseInt(smallX)
      || y > parseInt(smallY+this.smImgSizeY) || y<parseInt(smallY)) {
      this.hideDynamicDivs();
      return false;
    }
    return true;
  },
  
  add_param : function(){
  },
  
  _getWinParam : function(paramType) {
    var coordX = 0;
    var coordY = 0;
    var aParam = {
      'scroll':{'x':'scrollLeft','y':'scrollTop'},
      'size':{'x':'clientWidth','y':'clientHeight'}
    };

    if (document.body && ( document.body[aParam[paramType]['x']] || document.body[aParam[paramType]['y']] )) {
      coordX = document.body[aParam[paramType]['x']];
      coordY = document.body[aParam[paramType]['y']];
    } else if (document.documentElement && (document.documentElement[aParam[paramType]['x']] || document.documentElement[aParam[paramType]['y']])) {
      coordX = document.documentElement[aParam[paramType]['x']];
      coordY = document.documentElement[aParam[paramType]['y']];
    }
    return  {
      'x' : coordX,
      'y' : coordY
    }
  }
};

var zoomObj;
function createZoomObj(){
  zoomObj = new ZoomTool('zoom_div', 'zoom_img', 'close_big_div', 'sm_zoom_link', {'0':'sm','1':'dynamic','2':'big'});
  zoomObj.init();
}

if (typeof(zoomObj) == "undefined") {
 objListener(window, "load", createZoomObj);
 //objListener(window, "load", check_related_img);
 //objListener(window, "load", change_model);
}

function swap_img(sm_img_src, big_img_src, big_width, big_height) {
  var urlSpl = sm_img_src.split("&");
  for (var i in urlSpl) {
    var val = urlSpl[i];
    var valSpl = val.split("=");
    if (valSpl[0] == "w") {
      var smW = valSpl[1];
    }
    if (valSpl[0] == "h") {
      var smH = valSpl[1];
    }
  }

//  if (big_width >= big_height){
//    smH = Math.round(big_height * smW / big_width);
//  }else{
//    smW = Math.round(big_width * smH / big_height);
//  }
  if (typeof(zoomObj) == "undefined") {
    createZoomObj();
  }
  if (isNaN(smW) == true || isNaN(smH) == true) {
    document.getElementById('image_holder').style.display = "none";
    return;
  }
  zoomObj.smImg.src = sm_img_src;
  zoomObj.dynamicImg.src = big_img_src;
  zoomObj.smImg.style.width = smW+'px';
  zoomObj.smImg.style.height = smH+'px';
  zoomObj.dynamicImg.height = big_height;
  zoomObj.dynamicImg.width = big_width;
  zoomObj.init();
  zoomObj.hideDynamicDivs();
  if (zoomObj.bigImgDiv.style.display == 'block') {
    zoomObj._showBigImg();
  }
}