var magnifier = function(sender, width, height)
{
  this.img = sender;
  this.width =  (width != undefined) ? width : this.img.width;
  this.height = (height != undefined) ? height : this.img.height;
  this.img.parentNode.style.width = this.img.width;
  this.img.parentNode.style.height = this.img.height;
  this.img.parentNode.style.position = "relative";
  this.outer = this.img.parentNode;
  this.org = new Image();
  this.org.src = sender.getAttribute("org");
  var self = this;
  this.org.onload = function() {
    this.style.margin = "";
    if ((this.height-this.width)>0){
        this.style.marginLeft = this.style.marginRight = ((this.height-this.width)/2) + "px";
    }
    if ((this.height-this.width)<0){
        this.style.marginTop = this.style.marginBottom = (Math.abs(this.height-this.width)/2) + "px";
    }
  };

  this.delegate = new Object();
  this.delegate.select = this.select.bind(this);
  this.delegate.start = this.start.bind(this);

  Event.observe(this.img, "mousemove", this.delegate.start);

  this.box = $ce("DIV");
  this.box.className = "showBox";
  this.box.style.width =  this.width + "px";
  this.box.style.height = this.height + "px";
  this.box.style.overflow = "hidden";
  this.box.style.position = "absolute";
  this.box.style.left = this.box.style.top = "0px";
  this.box.style.border = "1px solid #0C0";
  this.box.style.background = "#fff";
  this.box.appendChild(this.org);
  Element.hide(this.box);
  document.body.appendChild(this.box);

};

magnifier.prototype = {
  setImage : function(url) {
    var self = this;
    var img = $ce("IMG");
    img.src = url;
    img.onload = function() {
        this.style.margin = "";
        if ((this.height-this.width)>0){
            this.style.marginLeft = this.style.marginRight = ((this.height-this.width)/2) + "px";
        }
        if ((this.height-this.width)<0){
            this.style.marginTop = this.style.marginBottom = (Math.abs(this.height-this.width)/2) + "px";
        }
    };
    Element.remove(this.org);
    self.box.appendChild(img);
    this.org = img;
  },
  start: function() {
    Event.observe(document, "mousemove", this.delegate.select);
    Event.stopObserving(this.img, "mousemove", this.delegate.start);
  },
  select : function(event) {
    if (!this.selArea) {
      this.selArea = $ce("div");
      this.selArea.className = "selArea";
      this.selArea.style.width = "40px";
      this.selArea.style.height = parseInt(this.height / this.width * 40) + "px";
      this.selArea.style.position = "absolute";
      this.selArea.style.background = "#666";
      this.selArea.style.border = "1px solid #0F0";
      this.selArea.style.cursor = "move";
      ui.effect._setOpacity(this.selArea, 50);

      this.img.parentNode.appendChild(this.selArea);
    }

    var X = Event.pointerX(event);
    var Y = Event.pointerY(event);
    var pos = Element.getPosition(this.img);
    pos.right = pos.left + this.img.offsetWidth;
    pos.bottom = pos.top + this.img.offsetHeight;

    var paddingLeft = parseInt(Element.getStyle(this.outer.parentNode, "paddingLeft"));
    var paddingTop  = parseInt(Element.getStyle(this.outer.parentNode, "paddingTop"));
    var right = Element.getPosition(this.outer).left + this.outer.offsetWidth;
    this.box.style.left = (right + paddingLeft + 1) + "px";
    this.box.style.top  = (Element.getPosition(this.outer).top - paddingTop + 3) + "px";

    if (X < pos.left || Y < pos.top || X > pos.right || Y > pos.bottom){
      Element.hide(this.selArea);
      Element.hide(this.box);
      Event.stopObserving(document, "mousemove", this.delegate.select);
      Event.observe(this.img, "mousemove", this.delegate.start);
      return;
    } else {

      Element.show(this.selArea);
      Element.show(this.box);
    }

    var scaleOrg = this.org.offsetWidth / this.org.offsetHeight;
    var scaleBox = this.box.offsetWidth / this.box.offsetHeight;
    var scaleImg = this.img.parentNode.offsetWidth / this.img.parentNode.offsetHeight;

    var l = X - pos.left - 1 - (this.selArea.offsetWidth / 2);
    var t = Y - pos.top - 1 - (this.selArea.offsetHeight / 2);

    if (l <= 0) l = 0;
    if (t <= 0) t = 0;
    if ((l + this.selArea.offsetWidth) > this.img.offsetWidth) l = this.img.offsetWidth-this.selArea.offsetWidth;
    if ((t + this.selArea.offsetHeight) > this.img.offsetHeight) t = this.img.offsetHeight-this.selArea.offsetHeight;
    this.selArea.style.left = l + "px";
    this.selArea.style.top = t + "px";

    var thumbCenter = {"X":(pos.left + (this.img.offsetWidth / 2)), "Y":(pos.top + this.img.offsetHeight / 2) };
    var mouseOffset = {"X": X-thumbCenter.X, "Y": Y-thumbCenter.Y};
    var orgOffset = {"X" : mouseOffset.X/this.img.offsetWidth*this.box.scrollWidth, "Y": mouseOffset.Y/this.img.offsetHeight*this.box.scrollHeight};
    var orgCenter = { "X": this.box.scrollWidth/2, "Y": this.box.scrollHeight/2};
    var orgMoved = {"X" : orgCenter.X + orgOffset.X, "Y": orgCenter.Y + orgOffset.Y};

    this.box.scrollLeft = orgMoved.X - this.box.offsetWidth / 2;
    this.box.scrollTop = orgMoved.Y - this.box.offsetHeight / 2;
  }
};