<!--

  var DRAG = JClass.create();
  
  DragRange = DRAG.prototype = {
//  SYSTEM      :  PDRAG
//  PROGRAM     :  pascual
//  CREATE      :  2007.5.8
//  FILE NAME   :  dragobj.js
//@sample
//  draga = new DRAG("DIV", "dragdiva", 300, 10);
//  try {
//    dragb = new DRAG("DIV", "dragdivb", 200, 20);
//  } catch(err) {
//    alert(err.message);
//    delete(err);
//  }
//  draga.setinnerHTML("DRAG AAAA");
//  draga.moveTo(300, 200);
//  dragb.moveTo(200, 210);
//  dragb.setBounds(100, 30, 300 ,400);
//  dragb.toHtmlTag().innerHTML = "DRAG BBB"
//  
//  dragc = new DRAG("DIV", "dragdivc", 400, 60);
//  dragc.toHtmlTag().innerHTML = "DRAG CCCC";
//  
//  
//  dragb.movesync_add(draga.getId());
//  dragb.movesync_add(dragb.getId());
//  dragb.beforeDrag(befDrag);
//  dragb.onDrag(onDrag);
//  dragb.afterDrag(afterDrag);
//  dragb.movesync_remove(dragb.getId());
//  dragd = new DRAG_STATIC("staticDiv");
//  dragb.movesync_add(dragd.getId());
//  function befDrag(ee){window.status = "befDrag : after set mouse down";}
//  function onDrag(ee, x, y){
//    $("dragdivc").style.left =  parseInt($("dragdivc").style.left) - x  + "px";
//    $("dragdivc").style.top =  parseInt($("dragdivc").style.top) - y  + "px";
//    window.status = "after set mouse onMove";
//  }
//  function afterDrag(ee){window.status = "afterDrag";}


    drags : [], canvas : "", do_obj : "", extra_offX : 0, extra_offY : 0,
    Z_index : 100, fix_element : [], all : [],
    exists : function(id){ return this.drags[id];},
    add    : function(id) {
      if(DragRange.exists(id)) {
        throw new Error("Drag obj exist: [" +id+ "]");
        return false;
      }
      DragRange.drags[id] = id;
      return true;
    },
    initialize	: function(tagName, id, x, y) {
      var is_static = 0;
      if(document.getElementsByTagName('BODY').length==0) document.write('<body></body>');
      if(!DragRange.canvas)  DragRange.canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
      
      this.canvas = DragRange.canvas;
      if(!id) return false;
      
      if($(id)) {
      	var obj = $(id);
      	is_static = 1;
      } else {
        var obj  = document.body.appendChild(document.createElement(tagName));
        obj.setAttribute("id",id);
      }
      
      if(is_static && (!obj.style.left || !obj.style.top)) {
      	var s_top = 0, s_left = 0;
        do{
          s_top += obj.offsetTop;
          s_left += obj.offsetLeft;
        } while(obj = obj.offsetParent);
        if(typeof(x) == 'undefined') x = s_left;
        if(typeof(y) == 'undefined') y = s_top;
      }
      
      this.setTag(id, x, y);
    },
    setTag : function(id, x, y) {
      if(!id || !$(id)) return false;
      var obj = $(id);
      this.tag = obj;
      DragRange.all[id] = this;
      obj.thisDrag = this.thisDrag;
      if(!DragRange.add(id)) return false;
      obj.canvas = DragRange.canvas;
      obj.style.position	= "absolute";
      obj.offLeft		= 0;
      obj.offTop		= 0;
      obj.dragEnabled		= true;
      obj.boundEnabled		= false;
      obj.sync_group = [];
      Object.extend(obj, this.onDragPrototype);
      this.moveTo(x, y);
    },
    thisDrag : function() { return DragRange.all[this.id];},
    setDrag : function(){ this.tag.dragEnabled = true},
    disableDrag : function(){ this.tag.dragEnabled = false},
    setinnerHTML : function(html) { this.tag.innerHTML = html},
    setBounds : function(a, b, c, d) {
      this.tag.minX = a, this.tag.minY = b, this.tag.maxX = c, this.tag.maxY = d;
      this.tag.boundEnabled = true;
    },
    scroll_fix : function(status) {
      if(status) {
        if(!DragRange.fix_element[this.id]) {
          this.tag.fixLeft = this.tag.offsetLeft - this.tag.canvas.scrollLeft;
          this.tag.fixTop = this.tag.offsetTop - this.tag.canvas.scrollTop;
          DragRange.fix_element[this.id] = this;
          if(!DragRange.fix_element.length) setTimeout('DragRange.fixDrag()',100)
          DragRange.fix_element.length ++;
        }
      } else {
        if(DragRange.fix_element[this.id]) {
          delete DragRange.fix_element[this.id];
          DragRange.fix_element.length --;
        }
      }
    },
    fixDrag : function() {
      var length = 0;
      if(!DragRange.fix_element.length) return;
      for(var id in DragRange.fix_element) {
        length ++;
        var obj = DragRange.fix_element[id];
        if(obj.tag.draging) continue;
        obj.tag.style.top = obj.tag.canvas.scrollTop + obj.tag.fixTop;
        obj.tag.style.left = obj.tag.canvas.scrollLeft + obj.tag.fixLeft;
      }
      if(length) setTimeout('DragRange.fixDrag()',100);
    },
    
    moveTo : function(x, y){
      var x1 = parseInt(x), y1 = parseInt(y);
      if(!isNaN(x1)) this.tag.style.left = x1 + "px";
      if(!isNaN(y1)) this.tag.style.top = y1 + "px";
    },
    resize : function(w,h){
      if(w) this.tag.style.width = w;
      if(h) this.tag.style.height = h;
    },
    get_offset : function() {
      return {left: this.tag.style.left, top :this.tag.style.top, width: this.tag.style.width, Height : this.tag.style.height}
    },
    set_offset : function (obj, ee) {
      var a = obj.offX(ee);
      var b = obj.offY(ee);
      obj.diffX = a - obj.last_X;
      obj.diffY = b - obj.last_Y;
      obj.last_X = a;
      obj.last_Y = b;
    },
    toHtmlTag : function() {  return this.tag },
    getId : function() { return this.tag.id},
    mouseup : function(ee) {
      var obj = DragRange.do_obj;
      if(!obj) return ;
      if(obj.draging) {
        if(obj.releaseCapture) {
           obj.releaseCapture();
        }else if(window.releaseEvents) {
           window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        }
        
        if(DragRange.fix_element[obj.id]){
          obj.fixLeft =obj.offsetLeft - obj.canvas.scrollLeft;
          obj.fixTop = obj.offsetTop - obj.canvas.scrollTop;
        }
        obj.draging = false;
        if(obj.afterDrag) obj.afterDrag(ee);
      }
      
      document.onmousemove = DragRange.onmousemove;
      document.onmouseup = DragRange.onmouseup;
      if(obj.save_opacity) {
        obj.style.filter = obj.save_opacity.filter;
        obj.style.opacity = obj.save_opacity.opacity;
        obj.style.MozOpacity = obj.save_opacity.MozOpacity;
      }
      DragRange.setDragMouse(false);
      DragRange.do_obj = null;
    },
    mousemove : function(ee) {
      var obj = DragRange.do_obj;
      if(browser.msie && event.button == 0 || !obj.draging) {
      	document.onmouseup(ee);
      	return false;
      }
      if(obj.draging) {
        var n_left = obj.offX(ee) - obj.s_X + obj.s_left + DragRange.extra_offX;
        var n_top = obj.offY(ee) - obj.s_Y + obj.s_top + DragRange.extra_offY;
        if(n_top < 0 ) n_top = 0;
        if(obj.boundEnabled) {
          if(n_left < obj.minX) n_left = obj.minX;
          if(n_left > obj.maxX) n_left = obj.maxX;
          if(n_top < obj.minY) n_top = obj.minY;
          if(n_top > obj.maxY) n_top = obj.maxY;
        }
        obj.thisDrag().moveTo(n_left, n_top);
      }

      DragRange.set_offset(obj, ee);
      if(obj.sync_group) {
        for(var i in obj.sync_group) {
          if(obj.sync_group[i].style) {
            obj.sync_group[i].style.left = parseInt(obj.sync_group[i].style.left, 10) + obj.diffX + "px";
            obj.sync_group[i].style.top = parseInt(obj.sync_group[i].style.top, 10) + obj.diffY + "px";
          }
        }
      }
      if(obj.onDrag) obj.onDrag(ee, obj.diffX, obj.diffY);
      return false;
    },
    movesync_add: function (id) {
      if(!$(id)) return false;
      this.tag.sync_group[id] = $(id);
    },
    movesync_remove : function(id) {delete this.tag.sync_group[id];},
    onDrag : function (fun) { this.tag.onDrag = fun; },
    beforeDrag : function(fun) {this.tag.beforeDrag = fun;},
    afterDrag : function(fun) { this.tag.afterDrag = fun;},
    beforeMouseDown : function(fun) {this.tag.beforeMouseDown = fun;},
    onDragPrototype : {
      offX : function(ee) {
        var offx = (document.all)?(this.canvas.scrollLeft+ event.clientX):(document.getElementById)?ee.pageX:"";
        if(offx < 0) offx = 0;
        return offx; 
      },
      offY : function(ee) { 
      	return (document.all)?(this.canvas.scrollTop+event.clientY):(document.getElementById)?ee.pageY:""; 
      },
      rec_start : function(ee) {
        this.s_X = this.offX(ee);
        this.s_Y = this.offY(ee);
        this.s_top = parseInt(this.style.top);
        this.s_left = parseInt(this.style.left);
        this.last_X = this.s_X;
        this.last_Y = this.s_Y;
      },
      onselectstart : function (){ return false;},
      onmousedown   : function (ee) {
      	if(!this.dragEnabled) return;
      	DragRange.do_obj = this;
      	DragRange.setIframeMousemove(window, 0, 0);
        if(this.beforeMouseDown && !this.beforeMouseDown(ee)) return false;
        this.draging = true;
        this.rec_start(ee);
        this.style.zIndex = DragRange.Z_index++;
        if(this.setCapture) {
          this.setCapture();
        }else if(window.captureEvents) {
          window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        }

        DragRange.extra_offX = DragRange.extra_offY = 0;
        DragRange.onmousemove = document.onmousemove;
        DragRange.onmouseup = document.onmouseup;
        document.onmousemove = DragRange.mousemove;
        document.onmouseup = DragRange.mouseup;
        if(this.beforeDrag) this.beforeDrag(ee);
        if(!this.save_opacity) this.save_opacity = { filter: this.style.filter, opacity : this.style.opacity, MozOpacity: this.style.MozOpacity};
        this.style.filter += "alpha(opacity=75)" ;
        //this.style.filter = "alpha(opacity=100,style=1,finishX=100%)";
        this.style.opacity = 0.75;
        this.style.MozOpacity = 0.75;

        return false;
      }
    },
    setIframeMousemove : function(win, offx, offy) {
      if(!browser.mozes) return;
      var iframes = win.document.getElementsByTagName("IFRAME");

      for(var i=0; i < iframes.length; i++) {
        var ifr = iframes[i];
        var Doc = ifr.contentWindow.document;
        var offinfo = getOffset(ifr);
        try {
          Doc.mainFrame = ifr;
        } catch(err) {
          continue;
        }
        Doc.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        Doc.canvas = Doc[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
        if(!Doc._setDragMouse) {
          Doc._DragMousemove = Doc.onmousemove;
          Doc._DragMouseup = Doc.onmouseup;
          Doc._setDragMouse = true;
        }
        DragRange.setDragMouse(Doc);

        Doc.onmousemove = 
        function(ee) {
          var docOffinfo = getOffset(this.mainFrame);
          Doc._offx = offx + docOffinfo.left;
          Doc._offy = offy + docOffinfo.top;
          DragRange.extra_offX = Doc._offx;
          DragRange.extra_offY = Doc._offy;
          DragRange.mousemove(ee);
          DragRange.extra_offX = 0;
          DragRange.extra_offY = 0;
        };
        Doc.onmouseup = 
        function (ee){
          if(DragRange.do_obj && DragRange.do_obj.draging) {
            document.onmouseup(ee);
          } else {
            DragRange.setDragMouse(false);
          }
        }

        if(Doc.getElementsByTagName("IFRAME").length) DragRange.setIframeMousemove(ifr.contentWindow, offx + offinfo.left, offy + offinfo.top);
      }
    },
    _DragMouseAll : new Array(),
    setDragMouse : function(DocObj) {
      var saveDragMouse = DragRange._DragMouseAll;
      if(DocObj) {
        saveDragMouse[saveDragMouse.length] = DocObj;
      } else {
        if(!saveDragMouse.length) return;
        for(var i= saveDragMouse.length - 1; i >=0 ; i --) {
          if(saveDragMouse[i]._setDragMouse) {
            saveDragMouse[i].onmousemove= saveDragMouse[i]._DragMousemove;
            saveDragMouse[i].onmouseup= saveDragMouse[i]._DragMouseup;
            saveDragMouse[i].releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            saveDragMouse.splice(i, 1);
          }
        }
      }
    }
  }

  function getOffset(obj) {
      var left = 0, top = 0;
      while (obj.offsetParent){
        left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth).NaN0()):0);
        top  += obj.offsetTop  + (obj.currentStyle ?(parseInt(obj.currentStyle.borderTopWidth).NaN0()):0);
        obj  = obj.offsetParent;
      }
      
      left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth).NaN0()):0);
      top  += obj.offsetTop  + (obj.currentStyle?(parseInt(obj.currentStyle.borderTopWidth).NaN0()):0);
      return {'left': left, 'top': top};
  }

  function DRAG_STATIC(id){
    var obj = $(id);
    var left = 0, top = 0;
    while (obj.offsetParent){
      left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth).NaN0()):0);
      top  += obj.offsetTop  + (obj.currentStyle ?(parseInt(obj.currentStyle.borderTopWidth).NaN0()):0);
      obj  = obj.offsetParent;
    }
    
    left += obj.offsetLeft + (obj.currentStyle?(parseInt(obj.currentStyle.borderLeftWidth).NaN0()):0);
    top  += obj.offsetTop  + (obj.currentStyle?(parseInt(obj.currentStyle.borderTopWidth).NaN0()):0);
    this.setTag(id, left, top);
  }
  
  DRAG_STATIC.prototype = new DRAG();
  DRAG_STATIC.prototype.constructor = DRAG_STATIC;
//-->


