Gabe's window within window

by gkohen

HTML

<link rel="stylesheet" href="http://www.dhtmlx.com/docs/products/dhtmlxWindows/samples/common/css/style.css">
<link rel="stylesheet" href="http://www.dhtmlx.com/docs/products/dhtmlxWindows/codebase/dhtmlxwindows.css">
<script src="http://www.dhtmlx.com/docs/products/dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
<script src="http://www.dhtmlx.com/docs/products/dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
<script src="http://www.dhtmlx.com/docs/products/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<link rel="stylesheet" href="http://www.dhtmlx.com/docs/products/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"></div>
<div id="myLocID">location is</div>

JavaScript

var dhxWins,
    w1;

    dhxWinsExt = new dhtmlXWindows();
    dhxWinsExt.enableAutoViewport(false);
    dhxWinsExt.attachViewportTo("winVP");
    dhxWinsExt.setImagePath("../../codebase/imgs/");
    w1 = dhxWinsExt.createWindow("extId", 20, 30, 520, 440);
    w1.button("close").disable();
    w1.setText("JDA's External window");


    dhxWins = new dhtmlXWindows();
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo(w1);
    dhxWins.setImagePath("../../codebase/imgs/");
    w2 = dhxWins.createWindow("w2", 10, 20, 220, 140);
    w2.setText("dhtmlxWindow");
    w2.button("close").disable();
    w2.setText("JDA's Internal window");
    dhxWins.window('w2').attachObject('myLocID');
    dhxWins.window('w2').keepInViewport(true);  
    updateLocation(w1,w2);

w2.attachEvent("onMoveFinish", function(win){
    updateLocation(w1,win);
    });

function updateLocation(extr,intr){
    var $offsetExt=$(extr).offset();
    var $offset=$(intr).offset();
    $('#myLocID').text('Windows moved to left:'+($offset.left-$offsetExt.left)+'  top:'+($offset.top-$offsetExt.top));

}