//=====================================================================
//  SYSTEM      :  DragableFloat DIV
//  PROGRAM     : µå·¢°¡´ÉÇÏ¸ç, ½ºÅ©·Ñ ½Ã¿¡´Â È­¸éÀÇ °íÁ¤À§Ä¡¿¡ Á¤ÁöÇÏ´Â DIV
//  FILE NAME   :  jsgt_dragfloat.js
//  CALL FROM   :  HTML
//  AUTHER      :  Toshirou Takahashi http://jsgt.org/mt/01/
//  SUPPORT URL :  http://jsgt.org/mt/archives/01/000419.html
//  CREATE      :  2005.7.8
//  UPDATE      :  2005.9.26 v07 floatEnabled boundEnabled setBounds chkBounds Ãß°¡
//  UPDATE      :  2005.9.22 v06 getTOP getLEFT getMouseX getMouseY¸¦ divÀÇ ÇÁ·ÎÆÛÆ¼È­
//  UPDATE      :  2005.8.12 v05µå·¢ ½Ã¿¡ ie¿¡¼­ ¹ß»ýÇÏ´Â select¸¦ onselectstart·Î Ãë¼Ò
//  UPDATE      :  2005.8.10 v04µå·¢ ½Ã¿¡ iframe À§ÀÇ ÀÌº¥Æ®¸¦ ¾òÀ» ¼ö ¾øÀ½À» ´Ù¼Ò ¼öÁ¤Çß½À´Ï´Ù
//  UPDATE      :  2005.8.8  dbg_echo()Ãß°¡
//  UPDATE      :  2005.8.8  bodyÅÂ±×°¡ ¾øÀ» ¶§¸¦ À§ÇØ ´õ¹Ì bodyÃâ·ÂÀ» Ãß°¡¡¡
//  UPDATE      :  2005.7.8 DOCTYPE Ç¥ÁØ ¸ðµå¿¡ ´ëÀÀ
//                   Âü°í http://otd8.jbbs.livedoor.jp/877597/bbs_tree?base=9322&range=1
//
//
// ÀÌ ¼Ò½º´Â °³Á¶µµ »ó¾÷ ÀÌ¿ëµµ ÀÚÀ¯ÀÔ´Ï´Ù¸¸,
// ±× ÀÚÀ¯¸¦ ÁöÅ°±â À§ÇØ ÀúÀÛ¿øÀº ¹ö¸®Áö ¾Ê½À´Ï´Ù.
//---------------------------------------------------------------------
// ÍÔÎéÔôÞÈÕÇ (Toshirou Takahashi http://jsgt.org/mt/01/) 2005.7.8

/*
//=====================================================================
// ¾Æ·¡ ¿¹Á¦

<-- ¶óÀÌºê·¯¸®  jsgt_dragfloat.js-->
<script type    = 'text/javascript'
        charset = 'UTF-8'
        src     = 'jsgt_dragfloat.js'></script>
<script type='text/javascript'>
<!--

////
// µ¿ÀÛ °³½Ã
//
// ÆäÀÌÁö ÀÐ¾î µéÀÓ ½Ã¿¡ µ¿ÀÛ °³½Ã
//
window.onload = function ()
{
    setDragableFloat() //¼³Á¤
}

////
// ¼³Á¤
//
// @syntax oj = dragableFloat("DIVÀÇ ID ÀÌ¸§",ÃÊ±âÀ§Ä¡X,ÃÊ±âÀ§Ä¡Y)
//
// @sample              div1 = dragableFloat("aaa",100,200) //»ý¼º
// @sample              div1.innerHTML="°¡³ª´Ù¶ó"         //HTMLÀ» »ðÀÔ
// @sample              div1.style.backgroundColor='orange' //CSS·Î ¼öÁ¤
// @sample              doDragableFloat()                   //°³½Ã
//    
function setDragableFloat()
{
    //µå·¢°¡´ÉÇÑ ÇÃ·ÎÆ® DIV¸¦ »ý¼º
    div1 = dragableFloat("aaa",100,200)
    div2 = dragableFloat("fff",200,300)
    div3 = dragableFloat("ddd",250,300)
    
    //°¢ DIVµµ HTMLÀ» »ðÀÔ
    div1.innerHTML="aaaaaaaa"
    div2.innerHTML="fffffff"
    div3.innerHTML="xx"

    //CSS·Î ¼ö½Ä
    div1.style.backgroundColor ="orange"
    div2.style.fontSize  ="18px"

    //°³½Ã
    doDragableFloat()
    
}

//-->
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



// ¿¹Á¦´Â ¿©±â±îÁö
//=====================================================================
 */
 





////
// Àü¿ª º¯¼ö
//
// @var    zcount             ¸ðµç µå·¢ °¡´ÉÇÑ DIV Áß¿¡ ÇöÀç zindex ÃÖÀü¸é
// @var    clickElement       ÇöÀç µå·¢ ÁßÀÇ DIVÀÇ ID ÀÌ¸§
// @var    canvas             document.bodyÀÇ DOCTYPE Ç¥ÁØ ¸ðµå ´ëÀÀ
// @array  dragableFloatId    Àü µå·¢ °¡´ÉÇÑ DIVÀÇ ID ÀÌ¸§À» ÇÒ´ç
//
var zcount = 0          ;
var clickElement = ""   ;
if(document.getElementsByTagName('BODY').length==0)document.write('<body>')//´õ¹Ì body ÅÂ±×
var canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
var dragableFloatId=[]  ;
var recx1,recy1,recx2,recy2,recxOffset,recyOffset


////
// ¼³Á¤µÈ ¸ðµå µå·¢ °¡´ÉÇÑ DIV¸¦ °³½Ã
//
//
function doDragableFloat()
{ 

  for(i in dragableFloatId){ 
    var oj = document.getElementById(dragableFloatId[i]) ;
    if(oj.floatEnabled){

      if(!(is.safari || is.khtml))
      {
        //½ºÅ©·Ñ ½ÃÀÇ µ¿ÀÛ
        window.onscroll = function(e){
            moveDiv(oj,oj.style.left,oj.style.top);
        }
      } else {
        aaa=setInterval(function(){
          moveDiv(oj,oj.style.left,oj.style.top);
        },100)
      }
    }
  }
}

//¸ðµç µå·¢ °¡´ÉÇÑ DIVÀÇ ÇÃ·ÎÆ®¸¦ ½ÃÀÛ
function startDragableFloat()
{
    for(i in dragableFloat ){
        var oj = document.getElementById(dragableFloat[i].id) ;
        moveDiv(oj,oj.style.left,oj.style.top);
    }
}

//DIV¸¦ °¡¶ó¾ÉÈù´Ù    
function moveDiv (oj,ofx,ofy)
{
    //Safari¿¡¼­ 1024*768¸ðµå·Î single frameÀ» º¼°æ¿ì¿¡ ¹ß»ýÇÏ´Â ¿ÀºêÁ§Æ® ºê¶ó¿ìÀú °ü·Ã ¹®Á¦ ÇØ°á
    //ÇöÀç´Â ¿ÀºêÁ§Æ® ºê¶ó¿ìÀú¸¸ »ç¿ëÇÏ¹Ç·Î..
    //ÇÏÁö¸¸ AJAX¸¦ ¾´ ´Ù¸¥ DIV¿ÀºêÁ§Æ®°¡ ´Ã¾î³¯¶§¿¡´Â ´Ù½Ã ÇÑ¹ø È®ÀÎÇØ º¸¾Æ¾ß ÇÑ´Ù.
    if(document.body.clientHeight < 420 && document.body.clientHeight > 380) {
      return;
    }
    if(oj.draging)return  ;//µå·¢ ÁßÀº ¹«½Ã
    if(oj.dragcnt == 0 ){ 
        ofx = parseInt(ofx,10) 
        ofy = parseInt(ofx,10) 
        oj.dragcnt++
    } else {//µå·¢ Á¾·á À§Ä¡°¡ ¿ÀÇÁ¼Â
        ofx = parseInt(oj.pageOffLeft,10) 
        ofy = parseInt(oj.pageOffTop,10) 
    }
    var l = parseInt(canvas.scrollLeft,10) 
    var t = parseInt(canvas.scrollTop,10) 
    oj.style.left = l + ofx+"px"
    oj.style.top  = t + ofy+"px"
}


////
//ºê¶ó¿ìÀú ÆÇÁ¤
//
// @sample               alert(is.ie)
//
var is = 
{
    ie     : !!document.all ,
    mac45  : navigator.userAgent.indexOf('MSIE 4.5; Mac_PowerPC') != -1 ,
    opera  : !!window.opera ,
    safari : navigator.userAgent.indexOf('Safari') != -1 ,
    khtml  : navigator.userAgent.indexOf('Konqueror') != -1 
}

////
// µå·¢ °¡´ÉÇÑ ÇÃ·ÎÆ® DIV »ý¼º
//
// @sample          div1 = dragableFloat("aaa",100,200)
//

function unDragableFloat(id,x,y)
{
    if(!!dragableFloatId[id]) return document.getElementById(id)
    
    ////
    // DIV »ý¼º
    // @param  id             DIVÀÇ ID ÀÌ¸§
    //
    this.mkDiv = function (id) 
    {
        var canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
        var doc   = document                           ; // document ¿ÀºêÁ§Æ®
        var body  = doc.body                           ;
        var elem  = doc.createElement("DIV")           ; //DIV ¿ä¼Ò¸¦ »ý¼º
        var div   = body.appendChild(elem);
            div.setAttribute("id",id)                   ;
            div.style.position = "absolute"           ;
            div.style.left     = x + "px"             ;
            div.style.top      = y + "px"             ;
            div.innerHTML      = ""                   ;
            div.offLeft        = 0                    ;
            div.offTop         = 0                    ;
            div.pageOffLeft    = x-parseInt(canvas.scrollLeft,10)+ "px";
            div.pageOffTop     = y-parseInt(canvas.scrollTop,10) + "px";
            div.dragcnt        = 0                    ;
            div.draging        = false                ;
            div.drag_opt        = false                ;
            div.getTOP         = getTOP               ;
            div.getLEFT        = getLEFT              ;
            div.getMouseX      = getMouseX            ;
            div.getMouseY      = getMouseY            ;
            recx1              = x
            recy1              = y
            div.floatEnabled   = true                 ; //ÇÃ·ÎÆ® °¡´É true|false
            div.boundEnabled   = false                ; //ÀÌµ¿ °¡´É ¿µ¿ª ÀÖÀ½ true|false
            div.setBounds      = function (a,b,c,d){
                div.minX=a;div.minY=b;div.maxX=c;div.maxY=d;
                div.boundEnabled = true;
            }
            div.onmouseout     = function (e){ 

                if(!clickElement) return
                selLay=document.getElementById(clickElement);

                //xy¿¡·¯ ½ÃÀÇ À¯Ãß ÃßÀû¿ë xy¼¼Æ®
                x =  recx2+=recxOffset  
                y =  recy2+=recyOffset  
                dofollow(x,y)
                x =  recx2+=recxOffset  
                y =  recy2+=recyOffset  
                setTimeout('"dofollow('+x+','+y+')"',10)

                //follow(e)
                //dbg.innerHTML += getMouseX(e)+"--"+getMouseY(e)+"<br>"
                div.style.zIndex = zcount++
                return false 
            }
            div.onselectstart  = function (e){ return false }
            div.onmouseover    = function (e){ return false }
            div.onmousedown    = function (e)
            {
		var obj = eval('div1');
		if(obj.drag_opt == true) {
			div.draging    = true  ;
			div.dragcnt ++         ;
			selLay=div
			clickElement = selLay.id

			//DIVÀÇ left,topÀ¸·ÎºÎÅÍ Æ÷Ä¿½º À§Ä¡±îÁö ¿ÀÇÁ¼ÂÀ» °¥¹«¸®
			if (selLay){    
			    selLay.offLeft = getMouseX(e) - getLEFT(selLay.id)
			    selLay.offTop  = getMouseY(e) - getTOP(selLay.id)
			
			} 
			return false
		}
            }

        dragableFloatId[div.id] = div.id;//window·Î µî·Ï
        div.index++;
        return div;
    }

    //¸¶¿ì½º ÀÌµ¿ ½ÃÀÇ µ¿ÀÛ
    document.onmousemove  = function (e)
    {
	var obj = eval('div1');
	if(obj.drag_opt == true) {
	        recTimeOffset(e) //rec
        	follow(e)
	        return false
	}
    }
    
    //¸¶¿ì½º ¾÷(up) ½ÃÀÇ µ¿ÀÛ
    document.onmouseup  = function (e)
    {
	var obj = eval('div1');
	if(obj.drag_opt == true) {
		if(!clickElement) return
		selLay=document.getElementById(clickElement);
		
		//µå·¢ ÁßÀÓ¿¡µµ ¹þ¾î³ª¹ö¸° °æ¿ì
		follow(e)
		
		//µå·¢ ÁßÁö
		selLay.draging   = false ;
		selLay.style.zIndex = zcount++

		//È­¸é ¾ÈÀÇ ¿ÀÇÁ¼Â left,top À§Ä¡¸¦ °¥¹«¸®
		if (selLay){
		    var sl = parseInt(canvas.scrollLeft,10)
		    var st = parseInt(canvas.scrollTop,10)
		    selLay.pageOffLeft = getLEFT(selLay.id)-sl
		    selLay.pageOffTop  = getTOP(selLay.id)-st
		}
		objectBrowserMouseOver(0);
		return false
	}
    }

    //µå·¢ ½ÇÆÐ ½ÃÀÇ À¯Ãß ÃßÀû
    function follow(e)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);

        //¸¶¿ì½º À§Ä¡ Ãëµæ
        var x = getMouseX(e)
        var y = getMouseY(e)

        //xy¿¡·¯ ½ÃÀÇ À¯Ãß ÃßÀû¿ë xy ¼¼Æ®
        x = (x == -1)? recx2+=recxOffset : x ;
        y = (y == -1)? recy2+=recyOffset : y ;
        if(x == -1 && y == -1)setTimeout('follow('+e+')',100)

        dofollow(x,y)
    }

    //¸¶¿ì½º ÃßÀû
    function dofollow(x,y)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);
        if(!chkBounds(selLay)){
          return
        } else {
          if(selLay.draging){
            //¿ÀÇÁ¼ÂÀ» ²ø¾î¿Í µû¸¥´Ù
            movetoX = x - selLay.offLeft
            movetoY = y - selLay.offTop
            selLay.style.left = parseInt(movetoX,10) +"px"
            selLay.style.top  = parseInt(movetoY,10) +"px"
          }
        }
       // window.status = selLay.style.left
    }

    //¸¶¿ì½º À§Ä¡¸¦ ±â·Ï
    function recTimeOffset(e)
    {
        if(x == -1 || y == -1)return 
        recx2= recx1
        recy2= recy1
        recx1= getMouseX(e)
        recy1= getMouseY(e)
        recxOffset= recx1 - recx2
        recyOffset= recy1 - recy2
        
    }
    
    //ÁöÁ¤ ¿µ¿ª ¾ÈÀÌ ¾î¶²Áö¸¦ Ã¼Å©
    function chkBounds(oj){

      var layName = oj.id
      if(oj.boundEnabled){
      
        //ÇöÀç À§Ä¡ Ãëµæ
        var nowX = getLEFT(layName);
        var nowY = getTOP(layName);
        //Ã¼Å©
        if( 
          nowX >= oj.minX &&
          nowY >= oj.minY &&
          nowX <= oj.maxX &&
          nowY <= oj.maxY
        ){
          return true //ÁöÁ¤¿µ¿ª ¾ÈÀÌ¸é true
        } else {
          returnPOS(nowX,nowY,oj)
          return false
        }
      } else {
        return true
      }
    }

    //¿µ¿ª ¾ÈÀ¸·Î µ¹¾Æ°£´Ù
    function returnPOS(nowX,nowY,oj){
      if(nowX < oj.minX) oj.style.left = oj.minX +"px"
      if(nowY < oj.minY) oj.style.top  = oj.minY +"px"
      if(nowX > oj.maxX) oj.style.left = oj.maxX +"px"
      if(nowY > oj.maxY) oj.style.top  = oj.maxY +"px"
    }

    //¸¶¿ì½º XÁÂÇ¥ Ãëµæ 
    function getMouseX(e)
    {
        if(document.all)               //e4,e5,e6¿ë
            return canvas.scrollLeft+event.clientX
        else if(document.getElementById)    //n6,n7,m1,o7,s1¿ë
            return e.pageX
    }

    //¸¶¿ì½º YÁÂÇ¥ Ãëµæ 
    function getMouseY(e)
    {
        if(document.all)               //e4,e5,e6¿ë
            return canvas.scrollTop+event.clientY
        else if(document.getElementById)    //n6,n7,m1,o7,s1¿ë
            return e.pageY
    }


    //·¹ÀÌ¾î ÁÂº¯ XÁÂÇ¥ Ãëµæ 
    function getLEFT(layName){
        //µð¹ö±×
        //document.getElementById('aaa').innerHTML+=layName+'<BR>'
        
        if(document.all)                    //e4,e5,e6,o6,o7¿ë
            return document.all(layName).style.pixelLeft
        else if(document.getElementById)    //n6,n7,m1,s1¿ë
            return (document.getElementById(layName).style.left!="")
                ?parseInt(document.getElementById(layName).style.left):""
    }

    //·¹ÀÌ¾î »óº¯ YÁÂÇ¥ Ãëµæ 
    function getTOP(layName){
        if(document.all)                    //e4,e5,e6,o6,o7¿ë
            return document.all(layName).style.pixelTop
        else if(document.getElementById)    //n6,n7,m1,s1¿ë
            return (document.getElementById(layName).style.top!="")
                    ?parseInt(document.getElementById(layName).style.top):""
    }

    //µð¹ö±×
    function dbg_echo(){
            ////////dbg.innerHTML += selLay.draging+"<br>"
            
        var debugDIV  = document.createElement("DIV")  ; //DIV ¿ä¼Ò¸¦ »ý¼º
        var dbg   = document.body.appendChild(debugDIV);
            dbg.setAttribute("id","dbg")                   ;
            dbg.style.position = "absolute"           ;
            dbg.style.left     =  "400px"             ;
            dbg.style.top      = "0px"             ;
            dbg.innerHTML      = "dbg"                   ;
            return dbg;
    }  //dbg = dbg_echo()


	function db1(e)
	{
		dbg.innerHTML += getMouseX(e)+"-1000-"+getMouseY(e)+"<br>"
	}
	
	
	return this.mkDiv(id) ;
}

function dragableFloat(id,x,y)
{
    if(!!dragableFloatId[id]) return document.getElementById(id)
    
    ////
    // DIV »ý¼º
    // @param  id             DIVÀÇ ID ÀÌ¸§
    //
    this.mkDiv = function (id) 
    {
        var canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
        var doc   = document                           ; // document ¿ÀºêÁ§Æ®
        var body  = doc.body                           ;
        var elem  = doc.createElement("DIV")           ; //DIV ¿ä¼Ò¸¦ »ý¼º
        var div   = body.appendChild(elem);
            div.setAttribute("id",id)                   ;
            div.style.position = "absolute"           ;
            div.style.left     = x + "px"             ;
            div.style.top      = y + "px"             ;
            div.innerHTML      = ""                   ;
            div.offLeft        = 0                    ;
            div.offTop         = 0                    ;
            div.pageOffLeft    = x-parseInt(canvas.scrollLeft,10)+ "px";
            div.pageOffTop     = y-parseInt(canvas.scrollTop,10) + "px";
            div.dragcnt        = 0                    ;
            div.draging        = false                ;
            div.drag_opt        = true                ;
            div.getTOP         = getTOP               ;
            div.getLEFT        = getLEFT              ;
            div.getMouseX      = getMouseX            ;
            div.getMouseY      = getMouseY            ;
            recx1              = x
            recy1              = y
            div.floatEnabled   = true                 ; //ÇÃ·ÎÆ® °¡´É true|false
            div.boundEnabled   = false                ; //ÀÌµ¿ °¡´É ¿µ¿ª ÀÖÀ½ true|false
            div.setBounds      = function (a,b,c,d){
                div.minX=a;div.minY=b;div.maxX=c;div.maxY=d;
                div.boundEnabled = true;
            }
            div.onmouseout     = function (e){ 

                if(!clickElement) return
                selLay=document.getElementById(clickElement);

                //xy¿¡·¯ ½ÃÀÇ À¯Ãß ÃßÀû¿ë xy¼¼Æ®
                x =  recx2+=recxOffset  
                y =  recy2+=recyOffset  
                dofollow(x,y)
                x =  recx2+=recxOffset  
                y =  recy2+=recyOffset  
                setTimeout('"dofollow('+x+','+y+')"',10)

                //follow(e)
                //dbg.innerHTML += getMouseX(e)+"--"+getMouseY(e)+"<br>"
                div.style.zIndex = zcount++
                return false 
            }
            div.onselectstart  = function (e){ return false }
            div.onmouseover    = function (e){ return false }
            div.onmousedown    = function (e)
            {
                div.draging    = true  ;
                div.dragcnt ++         ;
                selLay=div
                clickElement = selLay.id

                //DIVÀÇ left,topÀ¸·ÎºÎÅÍ Æ÷Ä¿½º À§Ä¡±îÁö ¿ÀÇÁ¼ÂÀ» °¥¹«¸®
                if (selLay){    
                    selLay.offLeft = getMouseX(e) - getLEFT(selLay.id)
                    selLay.offTop  = getMouseY(e) - getTOP(selLay.id)
                
                } 
                return false
            }

        dragableFloatId[div.id] = div.id;//window·Î µî·Ï
        div.index++;
        return div;
    }

    //¸¶¿ì½º ÀÌµ¿ ½ÃÀÇ µ¿ÀÛ
    document.onmousemove  = function (e)
    {
        recTimeOffset(e) //rec
        follow(e)
        return false
    }
    
    //¸¶¿ì½º ¾÷(up) ½ÃÀÇ µ¿ÀÛ
    document.onmouseup  = function (e)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);
        
        //µå·¢ ÁßÀÓ¿¡µµ ¹þ¾î³ª¹ö¸° °æ¿ì
        follow(e)
        
        //µå·¢ ÁßÁö
        selLay.draging   = false ;
        selLay.style.zIndex = zcount++

        //È­¸é ¾ÈÀÇ ¿ÀÇÁ¼Â left,top À§Ä¡¸¦ °¥¹«¸®
        if (selLay){
            var sl = parseInt(canvas.scrollLeft,10)
            var st = parseInt(canvas.scrollTop,10)
            selLay.pageOffLeft = getLEFT(selLay.id)-sl
            selLay.pageOffTop  = getTOP(selLay.id)-st
        }
        return false
    }

    //µå·¢ ½ÇÆÐ ½ÃÀÇ À¯Ãß ÃßÀû
    function follow(e)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);

        //¸¶¿ì½º À§Ä¡ Ãëµæ
        var x = getMouseX(e)
        var y = getMouseY(e)

        //xy¿¡·¯ ½ÃÀÇ À¯Ãß ÃßÀû¿ë xy ¼¼Æ®
        x = (x == -1)? recx2+=recxOffset : x ;
        y = (y == -1)? recy2+=recyOffset : y ;
        if(x == -1 && y == -1)setTimeout('follow('+e+')',100)

        dofollow(x,y)
    }

    //¸¶¿ì½º ÃßÀû
    function dofollow(x,y)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);
        if(!chkBounds(selLay)){
          return
        } else {
          if(selLay.draging){
            //¿ÀÇÁ¼ÂÀ» ²ø¾î¿Í µû¸¥´Ù
            movetoX = x - selLay.offLeft
            movetoY = y - selLay.offTop
            selLay.style.left = parseInt(movetoX,10) +"px"
            selLay.style.top  = parseInt(movetoY,10) +"px"
          }
        }
       // window.status = selLay.style.left
    }

    //¸¶¿ì½º À§Ä¡¸¦ ±â·Ï
    function recTimeOffset(e)
    {
        if(x == -1 || y == -1)return 
        recx2= recx1
        recy2= recy1
        recx1= getMouseX(e)
        recy1= getMouseY(e)
        recxOffset= recx1 - recx2
        recyOffset= recy1 - recy2
        
    }
    
    //ÁöÁ¤ ¿µ¿ª ¾ÈÀÌ ¾î¶²Áö¸¦ Ã¼Å©
    function chkBounds(oj){

      var layName = oj.id
      if(oj.boundEnabled){
      
        //ÇöÀç À§Ä¡ Ãëµæ
        var nowX = getLEFT(layName);
        var nowY = getTOP(layName);
        //Ã¼Å©
        if( 
          nowX >= oj.minX &&
          nowY >= oj.minY &&
          nowX <= oj.maxX &&
          nowY <= oj.maxY
        ){
          return true //ÁöÁ¤¿µ¿ª ¾ÈÀÌ¸é true
        } else {
          returnPOS(nowX,nowY,oj)
          return false
        }
      } else {
        return true
      }
    }

    //¿µ¿ª ¾ÈÀ¸·Î µ¹¾Æ°£´Ù
    function returnPOS(nowX,nowY,oj){
      if(nowX < oj.minX) oj.style.left = oj.minX +"px"
      if(nowY < oj.minY) oj.style.top  = oj.minY +"px"
      if(nowX > oj.maxX) oj.style.left = oj.maxX +"px"
      if(nowY > oj.maxY) oj.style.top  = oj.maxY +"px"
    }

    //¸¶¿ì½º XÁÂÇ¥ Ãëµæ 
    function getMouseX(e)
    {
        if(document.all)               //e4,e5,e6¿ë
            return canvas.scrollLeft+event.clientX
        else if(document.getElementById)    //n6,n7,m1,o7,s1¿ë
            return e.pageX
    }

    //¸¶¿ì½º YÁÂÇ¥ Ãëµæ 
    function getMouseY(e)
    {
        if(document.all)               //e4,e5,e6¿ë
            return canvas.scrollTop+event.clientY
        else if(document.getElementById)    //n6,n7,m1,o7,s1¿ë
            return e.pageY
    }


    //·¹ÀÌ¾î ÁÂº¯ XÁÂÇ¥ Ãëµæ 
    function getLEFT(layName){
        //µð¹ö±×
        //document.getElementById('aaa').innerHTML+=layName+'<BR>'
        
        if(document.all)                    //e4,e5,e6,o6,o7¿ë
            return document.all(layName).style.pixelLeft
        else if(document.getElementById)    //n6,n7,m1,s1¿ë
            return (document.getElementById(layName).style.left!="")
                ?parseInt(document.getElementById(layName).style.left):""
    }

    //·¹ÀÌ¾î »óº¯ YÁÂÇ¥ Ãëµæ 
    function getTOP(layName){
        if(document.all)                    //e4,e5,e6,o6,o7¿ë
            return document.all(layName).style.pixelTop
        else if(document.getElementById)    //n6,n7,m1,s1¿ë
            return (document.getElementById(layName).style.top!="")
                    ?parseInt(document.getElementById(layName).style.top):""
    }

    //µð¹ö±×
    function dbg_echo(){
            ////////dbg.innerHTML += selLay.draging+"<br>"
            
        var debugDIV  = document.createElement("DIV")  ; //DIV ¿ä¼Ò¸¦ »ý¼º
        var dbg   = document.body.appendChild(debugDIV);
            dbg.setAttribute("id","dbg")                   ;
            dbg.style.position = "absolute"           ;
            dbg.style.left     =  "400px"             ;
            dbg.style.top      = "0px"             ;
            dbg.innerHTML      = "dbg"                   ;
            return dbg;
    }  //dbg = dbg_echo()


	function db1(e)
	{
		dbg.innerHTML += getMouseX(e)+"-1000-"+getMouseY(e)+"<br>"
	}
	
	
	return this.mkDiv(id) ;
		
}
		
function dragableFloatWithSizeExpansion(id,x,y)
{
    if(!!dragableFloatId[id]) return document.getElementById(id)
    
    ////
    // DIV »ý¼º
    // @param  id             DIVÀÇ ID ÀÌ¸§
    //
    this.mkDiv = function (id) 
    {
        var canvas = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
        var doc   = document                           ; // document ¿ÀºêÁ§Æ®
        var body  = doc.body                           ;
        var elem  = doc.createElement("DIV")           ; //DIV ¿ä¼Ò¸¦ »ý¼º
        var div   = body.appendChild(elem);
            div.setAttribute("id",id)                   ;
            div.style.position = "absolute"           ;
            div.style.left     = x + "px"             ;
            div.style.top      = y + "px"             ;
            div.innerHTML      = ""                   ;
            div.offLeft        = 0                    ;
            div.offTop         = 0                    ;
            div.pageOffLeft    = x-parseInt(canvas.scrollLeft,10)+ "px";
            div.pageOffTop     = y-parseInt(canvas.scrollTop,10) + "px";
            div.dragcnt        = 0                    ;
            div.draging        = false                ;
            div.getTOP         = getTOP               ;
            div.getLEFT        = getLEFT              ;
            div.getMouseX      = getMouseX            ;
            div.getMouseY      = getMouseY            ;
            recx1              = x
            recy1              = y
            div.floatEnabled   = true                 ; //ÇÃ·ÎÆ® °¡´É true|false
            div.boundEnabled   = false                ; //ÀÌµ¿ °¡´É ¿µ¿ª ÀÖÀ½ true|false
            div.setBounds      = function (a,b,c,d){
                div.minX=a;div.minY=b;div.maxX=c;div.maxY=d;
                div.boundEnabled = true;
            }
	    div.expansionX = 0;
	    div.expansionY = 0;
            div.onmouseout     = function (e){ 

                if(!clickElement) return
                selLay=document.getElementById(clickElement);

                //xy¿¡·¯ ½ÃÀÇ À¯Ãß ÃßÀû¿ë xy¼¼Æ®
                x =  recx2+=recxOffset  
                y =  recy2+=recyOffset  
                dofollow(x,y)
                x =  recx2+=recxOffset  
                y =  recy2+=recyOffset  
                setTimeout('"dofollow('+x+','+y+')"',10)

                //follow(e)
                //dbg.innerHTML += getMouseX(e)+"--"+getMouseY(e)+"<br>"
                div.style.zIndex = zcount++
                return false 
            }
            div.onselectstart  = function (e){ return false }
            div.onmouseover    = function (e){ return false }
            div.onmousedown    = function (e)
            {
                div.draging    = true  ;
                div.dragcnt ++         ;
                selLay=div
                clickElement = selLay.id

                //DIVÀÇ left,topÀ¸·ÎºÎÅÍ Æ÷Ä¿½º À§Ä¡±îÁö ¿ÀÇÁ¼ÂÀ» °¥¹«¸®
                if (selLay){    
                    selLay.offLeft = getMouseX(e) - getLEFT(selLay.id)
                    selLay.offTop  = getMouseY(e) - getTOP(selLay.id)
                
                } 
                return false
            }

        dragableFloatId[div.id] = div.id;//window·Î µî·Ï
        div.index++;
        return div;
    }

    //¸¶¿ì½º ÀÌµ¿ ½ÃÀÇ µ¿ÀÛ
    document.onmousemove  = function (e)
    {
        recTimeOffset(e) //rec
        follow(e)
        return false
    }
    
    //¸¶¿ì½º ¾÷(up) ½ÃÀÇ µ¿ÀÛ
    document.onmouseup  = function (e)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);
        
        //µå·¢ ÁßÀÓ¿¡µµ ¹þ¾î³ª¹ö¸° °æ¿ì
        follow(e)
        
        //µå·¢ ÁßÁö
        selLay.draging   = false ;
        selLay.style.zIndex = zcount++

        //È­¸é ¾ÈÀÇ ¿ÀÇÁ¼Â left,top À§Ä¡¸¦ °¥¹«¸®
        if (selLay){
            var sl = parseInt(canvas.scrollLeft,10)
            var st = parseInt(canvas.scrollTop,10)
            selLay.pageOffLeft = getLEFT(selLay.id)-sl
            selLay.pageOffTop  = getTOP(selLay.id)-st
        }
        return false
    }

    //µå·¢ ½ÇÆÐ ½ÃÀÇ À¯Ãß ÃßÀû
    function follow(e)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);

        selLay=document.getElementById(clickElement);
        var x = getMouseX(e)
        var y = getMouseY(e)

        //¸¶¿ì½º À§Ä¡ Ãëµæ
	//xy¿¡·¯ ½ÃÀÇ À¯Ãß ÃßÀû¿ë xy ¼¼Æ®
	x = (x == -1)? recx2+=recxOffset : x ;
	y = (y == -1)? recy2+=recyOffset : y ;
	if(x == -1 && y == -1)setTimeout('follow('+e+')',100)

	dofollow(x,y)

    }

    //¸¶¿ì½º ÃßÀû
    function dofollow(x,y)
    {
        if(!clickElement) return
        selLay=document.getElementById(clickElement);
        if(!chkBounds(selLay)){
          return
        } else {
          if(selLay.draging){
		    //¿ÀÇÁ¼ÂÀ» ²ø¾î¿Í µû¸¥´Ù
		    movetoX = x - selLay.offLeft
		    movetoY = y - selLay.offTop
		    selLay.style.left = parseInt(movetoX,10) +"px"
		    selLay.style.top  = parseInt(movetoY,10) +"px"
          }
        }
       // window.status = selLay.style.left
    }

    //¸¶¿ì½º À§Ä¡¸¦ ±â·Ï
    function recTimeOffset(e)
    {
        if(x == -1 || y == -1)return 
        recx2= recx1
        recy2= recy1
        recx1= getMouseX(e)
        recy1= getMouseY(e)
        recxOffset= recx1 - recx2
        recyOffset= recy1 - recy2
        
    }
    
    //ÁöÁ¤ ¿µ¿ª ¾ÈÀÌ ¾î¶²Áö¸¦ Ã¼Å©
    function chkBounds(oj){

      var layName = oj.id
      if(oj.boundEnabled){
      
        //ÇöÀç À§Ä¡ Ãëµæ
        var nowX = getLEFT(layName);
        var nowY = getTOP(layName);
        //Ã¼Å©
        if( 
          nowX >= oj.minX &&
          nowY >= oj.minY &&
          nowX <= oj.maxX &&
          nowY <= oj.maxY
        ){
          return true //ÁöÁ¤¿µ¿ª ¾ÈÀÌ¸é true
        } else {
          returnPOS(nowX,nowY,oj)
          return false
        }
      } else {
        return true
      }
    }

    //¿µ¿ª ¾ÈÀ¸·Î µ¹¾Æ°£´Ù
    function returnPOS(nowX,nowY,oj){
      if(nowX < oj.minX) oj.style.left = oj.minX +"px"
      if(nowY < oj.minY) oj.style.top  = oj.minY +"px"
      if(nowX > oj.maxX) oj.style.left = oj.maxX +"px"
      if(nowY > oj.maxY) oj.style.top  = oj.maxY +"px"
    }

    //¸¶¿ì½º XÁÂÇ¥ Ãëµæ 
    function getMouseX(e)
    {
        if(document.all)               //e4,e5,e6¿ë
            return canvas.scrollLeft+event.clientX
        else if(document.getElementById)    //n6,n7,m1,o7,s1¿ë
            return e.pageX
    }

    //¸¶¿ì½º YÁÂÇ¥ Ãëµæ 
    function getMouseY(e)
    {
        if(document.all)               //e4,e5,e6¿ë
            return canvas.scrollTop+event.clientY
        else if(document.getElementById)    //n6,n7,m1,o7,s1¿ë
            return e.pageY
    }


    //·¹ÀÌ¾î ÁÂº¯ XÁÂÇ¥ Ãëµæ 
    function getLEFT(layName){
        //µð¹ö±×
        //document.getElementById('aaa').innerHTML+=layName+'<BR>'
        
        if(document.all)                    //e4,e5,e6,o6,o7¿ë
            return document.all(layName).style.pixelLeft
        else if(document.getElementById)    //n6,n7,m1,s1¿ë
            return (document.getElementById(layName).style.left!="")
                ?parseInt(document.getElementById(layName).style.left):""
    }

    //·¹ÀÌ¾î »óº¯ YÁÂÇ¥ Ãëµæ 
    function getTOP(layName){
        if(document.all)                    //e4,e5,e6,o6,o7¿ë
            return document.all(layName).style.pixelTop
        else if(document.getElementById)    //n6,n7,m1,s1¿ë
            return (document.getElementById(layName).style.top!="")
                    ?parseInt(document.getElementById(layName).style.top):""
    }

    //µð¹ö±×
    function dbg_echo(){
            ////////dbg.innerHTML += selLay.draging+"<br>"
            
        var debugDIV  = document.createElement("DIV")  ; //DIV ¿ä¼Ò¸¦ »ý¼º
        var dbg   = document.body.appendChild(debugDIV);
            dbg.setAttribute("id","dbg")                   ;
            dbg.style.position = "absolute"           ;
            dbg.style.left     =  "400px"             ;
            dbg.style.top      = "0px"             ;
            dbg.innerHTML      = "dbg"                   ;
            return dbg;
    }  //dbg = dbg_echo()


	function db1(e)
	{
		dbg.innerHTML += getMouseX(e)+"-1000-"+getMouseY(e)+"<br>"
	}
	
	
	return this.mkDiv(id) ;
		
}
		
