var IsIE = document.all?true:false; 
 function $(Id){return document.getElementById(Id)};
 function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
 function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
 function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);};
 function getobjpos(el,left){
        var val = 0;
        while (el !=null) {
            val += el["offset" + (left? "Left": "Top")];
			el = el.offsetParent;
        }
        return val;
 };
 var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
 var isIE = document.all?true:false;
 var Bind = function(object, fun) {
  return function() {
   return fun.apply(object, arguments);
  }
 };
 var BindAsEventListener = function(object, fun) {
  return function(event) {
   return fun.call(object, (event || window.event));
  }
 };
 
 var extend = function() 
 {
      var args = arguments;
      if(!args[1])args = [this,args[0]];                                        
      for(var property in args[1])args[0][property] = args[1][property];          
      return args[0];
 };
 
 var Class = function(properties){
   var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
   _class.prototype = properties;
   return _class;
 };

var Drag = new Class({
	options:{
	    Custom      : false,
		Customdiv   : null,
		Limit       : false,
		mxLeft      : 0,
		mxRight     : 9999,
		mxTop       : 0,
		mxBottom    : 9999,
		Noscroll    : false,
		mxContainer : null,
		LockX       : false,
		LockY       : false,
		zIndex      : 2,
		Onstart     : function(){},
		Onmove      : function(){},
		Onstop      : function(){}
	},
	initialize:function(obj,options){
		this._obj = obj;
		this._x   = 0;
	    this._y   = 0;
		this._marginLeft = 0;
		this._marginTop  = 0;
		this._fM  = BindAsEventListener(this, this.Move);
        this._fS  = Bind(this, this.Stop);
/////////////////////////////////////////////////////////////////////////	
        this.Custom      = this.options.Custom;            //
		this.Customdiv   = this.options.Customdiv;         //
        this.Limit       = this.options.Limit;             //
		this.mxLeft      = this.options.mxLeft;        
		this.mxRight     = this.options.mxRight;
		this.mxTop       = this.options.mxTop;
		this.mxBottom    = this.options.mxBottom;
		this.mxContainer = this.options.mxContainer;       //
		this.LockX       = this.options.LockX;             //
		this.LockY       = this.options.LockY;             //
		this.Noscroll    = this.options.Noscroll;
		this.Onstart     = this.options.Onstart;
		this.Onmove      = this.options.Onmove;
		this.Onstop      = this.options.Onstop;
		this.zIndex      = Math.max(this.options.zIndex,Drag.zIndex||0);
/////////////////////////////////////////////////////////////////////////	
		extend(this,options||{});
		if(this.mxContainer&&this.Limit)            //
		{
			this.mxLeft   = getobjpos(this.mxContainer,1);
			this.mxTop    = getobjpos(this.mxContainer,0);
			this.mxRight  = getobjpos(this.mxContainer,1) + this.mxContainer.offsetWidth-this._obj.offsetWidth;
			this.mxBottom = getobjpos(this.mxContainer,0) + this.mxContainer.offsetHeight-this._obj.offsetHeight;
		}
		this._obj.style.position = "absolute";
		addListener(this._obj,"mousedown",BindAsEventListener(this,this.Start));
		Drag.zIndex = this.zIndex;
	},
	Start:function(e){
	    this._obj.style.zIndex = ++Drag.zIndex;
	    var self = this;
		if(this.Noscroll){          //
			this.mxRight  = Math.max(document.body.scrollWidth, document.documentElement.clientWidth)-parseInt($('s').offsetWidth)-2;
			this.mxBottom = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)-$('s').offsetHeight-2
		}
		this._x = e.clientX - this._obj.offsetLeft ;
		this._y = e.clientY - this._obj.offsetTop;
		this._marginLeft = parseInt(this._obj.style.marginLeft)||0;
		this._marginTop  = parseInt(this._obj.style.marginTop)||0;
		if(isIE)
		{
			addListener(this._obj, "losecapture", this._fS);
			this._obj.setCapture();
		}
	    else
		{
			e.preventDefault();
			addListener(window, "blur", this._fS);
		}
		addListener(document,"mousemove",this._fM);
		addListener(document,"mouseup",this._fS);
		this.Onstart();
	},
	Move:function(e){
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
		var iLeft = e.clientX - this._x, iTop = e.clientY - this._y;
		if(this.Limit){
			  iLeft= Math.min(Math.max(iLeft,this.mxLeft),this.mxRight);
			  iTop = Math.min(Math.max(iTop,this.mxTop),this.mxBottom);
		}
		var obj = this.custom?this.customobj:this._obj;
		if(!this.LockX)obj.style.left = iLeft - this._marginLeft + "px";
		if(!this.LockY)obj.style.top  = iTop - this._marginTop + "px";
		this.Onmove();
	},
	Stop:function(){
		removeListener(document,'mousemove',this._fM);
		removeListener(document,'mouseup',this._fS);
		if(isIE)
		{
		   removeListener(this._obj, "losecapture", this._fS);
		   this._obj.releaseCapture();
	    }
       else
        {  
	       removeListener(window, "blur", this._fS);
	    };
		this.Onstop();
   }	
})
new Drag($('ss'),{Limit:true,mxContainer:$('sss')});
new Drag($('ssss'),{
	custom:true,
	Onstart:function(){
		var self = this;
	create('div',document.body,function(elm){
					self.customobj = elm;
					with(elm){
						className="bgdiv1";
						style.width=self._obj.offsetWidth+'px';style.height=self._obj.offsetHeight+'px';style.left=getobjpos(self._obj,1)+'px';style.top=getobjpos(self._obj,0)+'px';
						style.position="absolute";
					}		  
		 })
	},
	Onstop:function(){
		this._obj.style.left = CurrentStyle(this.customobj).left;
		this._obj.style.top  = CurrentStyle(this.customobj).top;
		document.body.removeChild(this.customobj);
}});
new Drag($('s'),{Limit:true,Noscroll:true});
new Drag($('ii'),{Limit:true,mxContainer:$('iii'),LockY:true});
new Drag($('wt'),{
	Onstart:function(){
		IsIE?(this._obj.style.filter="alpha(opacity:20)"):(this._obj.style.opacity=0.2);
	},
	Onstop:function(){
		IsIE?(this._obj.style.filter="alpha(opacity:100)"):(this._obj.style.opacity=1);
	}
});