/**
 * Constructor
 * @param {String|Element} element - element id or element object
 */
var Draggable = function(element, target) {
  this.initialize(element, target);
}

/**
 * Remove the event listeners.
 */
Draggable.prototype.destroy = function() {
  //this.detach(this.draggableTarget, "mousedown", this.observers["mousedown"]);
  this.detach(this.eventTarget, "mousedown", this.observers["mousedown"]);
  this.detach(this.html, "mouseup", this.observers["mouseup"]);
  this.detach(this.html, "mousemove", this.observers["mousemove"]);
}

/**
 * Initialize the created object.
 */
Draggable.prototype.initialize = function(draggableTarget, eventTarget) {
  // Set the target element.
  if (typeof draggableTarget == "string") {
    this.draggableTarget = document.getElementById(draggableTarget);
  } else {
    this.draggableTarget = draggableTarget;
  }
  if (typeof eventTarget == "string") {
    this.eventTarget = document.getElementById(eventTarget);
  } else {
    this.eventTarget = eventTarget;
  }

  this.isIE = navigator.appVersion.lastIndexOf("MSIE") > 0;
  this.html = document.getElementsByTagName("html").item(0);
  this.style = this.draggableTarget.style;
  this.thisBaseX;
  this.thisBaseY;
  this.pageBaseX;
  this.pageBaseY;
  this.scrollBaseY;
  this.isMoving = false;

  var self = this;

  // Create the observers.
  this.observers = {};

  // Mousedown EventHandler
  //this.observers["mousedown"] = this.observe(this.draggableTarget, "mousedown", function(event) {
  this.observers["mousedown"] = this.observe(this.eventTarget, "mousedown", function(event) {
    if (self.isMoving) return;
//self.eventTarget.style.cursor = "move";
//self.setCursor("move");
    event = event || window.event;
    self.disableSelect(event);
    var position = self.getPosition();
    self.thisBaseX = position["x"];
    self.thisBaseY = position["y"];
    self.pageBaseX = event.pageX || event.clientX;
    self.pageBaseY = event.pageY || event.clientY;
    if (self.isIE) self.scrollBaseY = document.body.scrollTop;
    self.isMoving = true;
  });

  // Mousemove EventHandler
  this.observers["mousemove"] = this.observe(this.html, "mousemove", function(event) {
    if (!self.isMoving) return;
    event = event || window.event;
    var x = (event.pageX || event.clientX) - self.pageBaseX + self.thisBaseX;
    var y = (event.pageY || event.clientY) - self.pageBaseY + self.thisBaseY;
    if (self.isIE) y += (parseInt(document.body.scrollTop) - self.scrollBaseY);
    self.setPosition(x, y);
  });

  // Mouseup EventHandler
  this.observers["mouseup"] = this.observe(this.html, "mouseup", function(event) {
    if (!self.isMoving) return;
    self.enableSelect();
    self.isMoving = false;
//self.eventTarget.style.cursor = "";
//self.setCursor("");
  });

}

/**
 * Add the listener function on the element.
 */
Draggable.prototype.observe = function(element, name, observer) {
//alert(element.id);
  if (element.addEventListener) {
    element.addEventListener(name, observer, false);
  } else if (element.attachEvent) {
    element.attachEvent("on" + name, observer);
  }
  return observer;
}

/**
 * Remove the listener function on the element.
 */
Draggable.prototype.detach = function(element, name, observer) {
  if (element.removeEventListener) {
    element.removeEventListener(name, observer, false);
  } else if (element.detachEvent) {
    try {
      element.detachEvent("on" + name, observer);
    } catch (e) {
    }
  }
}

/**
 * Set the position on the self element.
 */
Draggable.prototype.setPosition = function(x, y) {
  this.style.left = x + "px";
  this.style.top = y + "px";
}

/**
 * Get the position of the self element.
 */
Draggable.prototype.getPosition = function() {
  var x, y;
  if (this.style.top == "" || this.style.left == "") {
    if (this.draggableTarget.currentStyle) {
      x = this.draggableTarget.currentStyle["left"];
      y = this.draggableTarget.currentStyle["top"];
    } else {
      var computedStyle = document.defaultView.getComputedStyle(this.draggableTarget, null);
      x = computedStyle["left"];
      y = computedStyle["top"];
    }
  } else {
    x = this.style.left;
    y = this.style.top;
  }
  return {"x": parseInt(x.replace("px", "")) || 0, "y": parseInt(y.replace("px", "")) || 0};
}

/**
 * Set the mouse cursor style on the self element.
 */
Draggable.prototype.setCursor = function(style) {
  this.style.cursor = style;
}

/**
 * Disable the select event handling.
 */
Draggable.prototype.disableSelect = function(event) {
  if (this.isIE) {
    document.getElementsByTagName("body").item(0).onselectstart = function(e) { return false };
  } else {
    try {
      event.preventDefault();
    } catch(e) {
    }
  }
}

/**
 * Enable the select event handling.
 */
Draggable.prototype.enableSelect = function() {
  if (this.isIE) document.getElementsByTagName("body").item(0).onselectstart = "";
}