Metro UI CSS

HTML

<script src="//code.jquery.com/jquery-git.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/metro/3.0.14/js/metro.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metro/3.0.14/css/metro.min.css">
<div class="grid">
    <div class="row">
          <div class="accordion" data-role="accordion">
            <div class="frame">
                <div class="heading">Frame heading</div>
                <div class="content">Frame content</div>
            </div>
            <div class="frame">
                <div class="heading">Frame heading</div>
                <div class="content">Frame content</div>
            </div>
          </div>
    </div>
    <div class="ui-layout-center window-area" id='webgl'>
</div>

JavaScript

var Desktop = {
    options: {
        windowArea: ".window-area",
        windowAreaClass: "",
        taskBar: ".task-bar > .tasks",
        taskBarClass: ""
    },

    wins: {},

    setup: function(options){
        this.options = $.extend( {}, this.options, options );
        return this;
    },

    addToTaskBar: function(wnd){
        var icon = wnd.getIcon();
        var wID = wnd.win.attr("id");
        var item = $("<span>").addClass("task-bar-item started").html(icon);

        item.data("wID", wID);

        item.appendTo($(this.options.taskBar));
    },

    removeFromTaskBar: function(wnd){
        console.log(wnd);
        var wID = wnd.attr("id");
        var items = $(".task-bar-item");
        var that = this;
        $.each(items, function(){
            var item = $(this);
            if (item.data("wID") === wID) {
                delete that.wins[wID];
                item.remove();
            }
        })
    },

    createWindow: function(o){
        var that = this;
        o.onDragStart = function(pos, el){
            win = $(el);
            $(".window").css("z-index", 1);
            if (!win.hasClass("modal"))
                win.css("z-index", 3);
        };
        o.onDragStop = function(pos, el){
            win = $(el);
            if (!win.hasClass("modal"))
                win.css("z-index", 2);
        };
        o.onWindowDestroy = function(win){
            console.log(win);
            that.removeFromTaskBar(win);
        };
        var w = $("<div>").appendTo($(this.options.windowArea));
        var wnd = w.window(o).data("window");
        var win = wnd.win;
        var shift = Metro.utils.objectLength(this.wins) * 16;

        if (wnd.options.place === "auto" && wnd.options.top === "auto" && wnd.options.left === "auto") {
            win.css({
                top: shift,
                left: shift
            });
        }
        this.wins[win.attr("id")] = wnd;
        this.addToTaskBar(wnd);
        w.remove();
  ...