function Drag(ID,parentID,range,onstart,onchange,onstop){
      if( Drag.el ){ Drag.stop();
      return;
      }
      
      var el = (typeof( ID ) == 'string'? $(ID):ID);
      var obj = el;  
      
     
      if( parentID  )
        obj = (typeof(parentID) == 'string' ? $(parentID):parent);
             
      el.onmousedown=function(e){Drag.start(e,obj);};
      
      if(!Drag.zIndex) Drag.zIndex=1000;
      
      if( ! ( el.tagName == 'IMG' || el.tagName == 'IFRAME'))  { 
          el.style.cursor='move';
          createShim( obj );
      } 
      if( range ) el.range = range;
      if( onstart ) el.onstart = onstart;
      if( onchange ) el.onchange = onchange;
      if( onstop ) el.onstop = onstop;
}



Drag.start=function(e,el){
      Drag.el = el;
      
      if( el.style.position == "") el.style.position='absolute';
      
      if( el.tagName != 'IMG' ){
        el.style.zIndex=Drag.zIndex+1;
        createShim( el );
        //Drag.modal = getModalState();
        //if( !Drag.modal ) 
        setModalState( true );
        Drag.zIndex+=2;
      }
      
      var p = getPosTopLeft(Drag.el);
      var client = getClientXY(e);
      
      Drag.startX = p.left - client.X ;
      Drag.startY = p.top  - client.Y ;
      
      addEvent(document,'mousemove',Drag.mousemove);
      addEvent(document,'mouseup',Drag.stop);
      addEvent(Drag.el, 'mouseup',Drag.stop);
      if( Drag.el.onstart ) Drag.el.onstart(Drag.el);
     return false;
    }
    
    Drag.mousemove=function(e){
     
       var client = getClientXY(e);
       var y =  (client.Y + Drag.startY);
       var x =  (client.X + Drag.startX);
       if( Drag.el.range ){
        var r = Drag.el.range;
        var update=true;
         if( Drag.el.onchange ) update = Drag.el.onchange(x,y,Drag.el);
         if( update && y >= r.y1 && y <= r.y2) Drag.el.style.top = y.toString() + 'px';
         if( update && x >= r.x1 && x <= r.x2) Drag.el.style.left = x.toString() + 'px';
       
       }else {
       
       if( client.Y > Drag.startY ) y = y + 10;
       if( client.X > Drag.startX ) x = x + 10;
 
       Drag.el.style.top =  y.toString() + 'px';
       Drag.el.style.left = x.toString() + 'px';
      } 
       
       if( ! ( Drag.el.tagName == 'IMG' || Drag.el.tagName == 'IFRAME'))   positionShim( Drag.el );
      
      
     return false;
     }
    
    Drag.stop=function(e){
      removeEvent(document,'mousemove',Drag.mousemove);
      removeEvent(document,'mouseup',Drag.stop);
      removeEvent(Drag.el,'mouseup',Drag.stop);
      
      if( Drag.el.tagName != 'IMG'){
     //if( ! Drag.modal ) 
     setModalState( false );
     }
     if( Drag.el.onstop ) Drag.el.onstop(Drag.el);
     Drag.el = null;
    return false;  
         }

function Resize(e,parentID){
  if ( Resize.el ) { 
         Resize.stop( e );
  return false;
  }
   Resize.el = $(parentID );
   Resize.dragEl = e[window.event ? 'srcElement' : 'target'];
   
  // alert( Resize.dragEl.tagName + '   ' + Resize.dragEl.className + ' H:' + Resize.el.style.height + '  W:' + Resize.el.style.width   );
   
   var client = getClientXY(e);
   Resize.startX = client.X ;
   Resize.startY = client.Y ;
   Resize.startHeight = Resize.el.offsetHeight - 20;
   Resize.startWidth  = Resize.el.offsetWidth;
   
   
    // save if document modal is true
    // reset when done
   //Resize.modal = getModalState();
   //if( !Resize.modal ) 
   setModalState( true );
   
   addEvent(document,'mousemove',Resize.mousemove);
   addEvent(document,'mouseup',Resize.stop);
  //addEvent(document,'click',Resize.stop);
   addEvent(Resize.el, 'mouseup',Resize.stop);
   
 
}

Resize.mousemove=function(e){
      
      if(  ! Resize.el ) return;
       
       var client = getClientXY(e);
       var h = Resize.startHeight + client.Y - Resize.startY;
       var w = Resize.startWidth + client.X - Resize.startX;
       if( client.Y < Resize.startY ) h = h - 10;
       if( client.X < Resize.startX ) w = w - 10;
         
       window.status = 'W: ' + w + ' H:' + h + ' type: ' + e.type;
       if( w > 200) { Resize.el.style.width  = w.toString() +'px';}
       if( h > 100) { Resize.el.style.height = h.toString() +'px';}
       
      positionShim( Resize.el );      
     
}
    
    Resize.stop=function(e){ 
 
    
      removeEvent(document,'mousemove',Resize.mousemove);
      removeEvent(document,'mouseup',Resize.stop);
      removeEvent(Resize.el,'mouseup',Resize.stop);
      //removeEvent(document,'click',Resize.stop);
      Resize.el=null;
   
   //if( ! Resize.modal ) 
   setModalState( false );
   
    return false;  
         }


  
  function getClientXY(e){   
    
   if (window.event) {
   
    this.X = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
	this.Y = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}else{
	this.X = e.clientX + window.scrollX;
	this.Y = e.clientY + window.scrollY;
}

return this;
}


function createShim( el ){
// only IE needs a shim to cover SELECT element

if( document.all && el.tagName != 'IMG' && el.id) {
  var oShim = $(el.id +'.Shim');
  if( ! oShim ) {
 
           oShim = document.createElement('iframe');
           oShim.style.display='none';
           oShim.id = el.id +'.Shim';
           oShim.style.position='absolute';  
           oShim.style.border='none';
           oShim.frameBorder='0';
           oShim.className='Shim';
           document.body.appendChild(oShim);
         } 
   else {
      oShim.style.zIndex=el.style.zIndex - 1;
   }   
    
    positionShim( el );
         
 }        
}

function positionShim( el ){
      if( document.all  && el.tagName != 'IMG' && el.id && el.style.zIndex > 0){
      var oShim = $(el.id+".Shim");
      
      oShim.style.display='block'; 
      oShim.style.top = el.style.top;
      oShim.style.left = el.style.left;
      oShim.style.width= (el.offsetWidth?el.offsetWidth:0) + 'px';
      oShim.style.height=( el.offsetHeight?el.offsetHeight:0) +'px'
   
     }

}

function hideShim(o){
  var oShim = $(o.id+'.Shim');
  if( oShim) oShim.style.display='none';
}

function setModalState( state, zIndex ){
  var oShim = $('ModalShim');

    if (!oShim) {
        oShim = document.createElement('DIV');
        oShim.id = 'ModalShim';
        with (oShim.style ){
        zIndex=zIndex||700;
        width='100%';
        height='100%';
        position='absolute';
        top=0;
        left=0;
        backgroundColor='white';    
        filter='progid:DXImageTransform.Microsoft.Alpha(opacity=10)';
        opacity=.1;
        }
        oShim.style['-moz-opacity']=.1; 
        
        document.body.appendChild(oShim);
     }
   
       oShim.style.display=(state?'block':'none');
}

function getModalState(){
 var oShim = $('ModalShim');
  return (oShim && oShim.style.display != 'none');
}