Grid Layout Test

by mledbetter

HTML

<button id='newWin'>New</button><button id='killWin'>Delete</button>
<div id='container'>
</div>

CSS

#container {
    border: solid 1px Green;
    width: 100%;
    height: 100%;
    min-height: 500px;
}
.window {
    border: solid 1px Yellow;
    height: 20px;
    width: 20px;
    float: left;
}
.window span {
    padding-left: 10px;
}
.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}

JavaScript

(function() {
    var $container = $('#container'),
        containerProperties = {},
        createNewWindow = function() {};

    containerProperties = {
        children: [],
        cindex: 0,
        cols: 1,
        height: $container.innerHeight(),
        rows: 1,
        width: $container.innerWidth(),
        zIndex: 3
    };

    createNewWindow = function() {
        var nextIndex = containerProperties.cindex + 1,
            windowTemplate = '';

        windowTemplate = [
            '<div id="',
            (Math.floor(Math.random() * 100000001)),
            '" style="display: none;" class="window"><span>',
            nextIndex + " drag me",
            '</div>'
            ].join('');
        containerProperties.children.push($(windowTemplate));
        containerProperties.cindex = nextIndex;
    }

    $('#newWin').click(function() {
        var $lastFloat = {},
            $newWin = {},
            cp = containerProperties,
            i, j, lastChildNumber, randHex = Math.ceil(Math.random() * 16777215).toString(16),
            stopClearIndex, winHeight, winWidth;
        // remove draggable from the children:  
        for (i = 0, j = cp.children.length; i < j; i += 1) {
            var $curWin = cp.children[i];
            $curWin.draggable( 'option', 'disabled', true );
            $curWin.removeClass('ui-draggable');
            $curWin.css('top', '');
            $curWin.css('left', '');
            $curWin.css('position', '');
        }        
        // Add a new window to our list of windows
        createNewWindow();
        lastChildNumber = cp.children.length - 1;
        // Get the new window as a jQuery object
        $newWin = cp.children[lastChildNumber];

        $newWin.mousedown(function() {
            var $this = $(this);
            $this.addClass('top').removeClass('bottom');
            $this.siblings().removeClass('top').addClass('bottom');
            $this.css("z-index", cp.zIndex++);
        });
        if...