Popup Widget

by StriplingWarrior

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<div style="height: 400px; border: 1px solid black; ">
    <ul>
        <li>
    <div class="tnl-popup-menu">
        <a href="#" class="tnl-popup-menu-icon">
            <span class="ui-icon-pencil ui-icon ui-state-default"></span>
        </a>
        <div>
            <a href="#" class="tnl-popup-menu-icon">
                <span class="ui-icon-pencil ui-icon ui-state-active"></span>
            </a>
            <div>
            Here's some static content
                <div class="tnl-popup-widget">
                    <a href="/gh/get/response.html/zalun/jsFiddleGithubDemo/tree/master/Demo/">
                        <span class="ui-icon-pencil ui-icon ui-state-default"></span>
                    </a>
                    <div>
                        <h4>Test</h4>
                        <div>Loading content...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    This is a test
</li>
<li>
    <div class="tnl-popup-menu">
        <a href="#" class="tnl-popup-menu-icon">
            <span class="ui-icon-pencil ui-icon ui-state-default"></span>
        </a>
        <div>
            <a href="#" class="tnl-popup-menu-icon">
                <span class="ui-icon-pencil ui-icon ui-state-active"></span>
            </a>
            <div>
            Here's some static content
                <div class="tnl-popup-widget">
                    <a href="/gh/get/response.html/zalun/jsFiddleGithubDemo/tree/master/Demo/">
                        <span class="ui-icon-pencil ui-icon ui-state-default"></span>
                    </a>
                    <div>
                        <h4>Test</h4>
                        <div>Loading content...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    This is a test
</li><li>
    <li>
    <div class="tnl-popup-menu">
 ...

CSS

.tnl-popup-menu {position:relative; display:inline-block; height: 1em; }
.tnl-popup-menu > a {display:inline-block;}
.tnl-popup-menu > div {display:none; position:absolute; top:0; left:0;}
.tnl-popup-menu > div > div {position:absolute; top:0; left:20px; width: 100px; background-color:white; border: 1px solid black; }
.tnl-popup-widget {position:relative; display:inline-block;}
.tnl-popup-widget > a {display: inline-block;}
.tnl-popup-widget > div {display:none; position:absolute; top:0; left:20px;}

JavaScript

var Truenorth = Truenorth || {};
Truenorth.PopupWidget = function(container) {
    var w = $(container);
    var a = w.children('a').first();
    var p = w.children('div').first()
        .addClass('ui-widget ui-helper-reset');
    var h = p.children('h1,h2,h3,h4').first()
        .addClass('ui-widget-header ui-corner-top');
    var c = p.children('div').first()
        .addClass('ui-widget-content ui-corner-bottom');
    a.click(function(e) {
        e.preventDefault();
        
        if(!a.data('popup-widget-content-loaded')) {
            var loc = a.attr('href');
            if(loc && loc[0] != '#') {
                c.load(loc, function() {
                    a.data('popup-widget-content-loaded', true);
                });
            }
        }
        Truenorth.PopupPanel.togglePanel(p, w);
    });
};

Truenorth.PopupPanel = function() {
    var currentPopups = $();
    
    var hidePanels = function(panels) {
        panels.each(function() {
            var t = $(this).hide();
            var alt = t.data('tnl-popup-altPanel');
            if(alt) {alt.show();}
        });
        currentPopups = currentPopups.not(panels);
    };
    
    var togglePanel = function(targetPanel, container, altPanel) {
        /// <summary>
        /// Toggles the visibility of the given panel.
        /// If this causes the panel to close, all open
        /// panels inside it will be closed.
        /// If this causes the panel to open, all open
        /// panels that aren't a parent of this panel
        /// will be closed.
        /// </summary>
        /// <param name="targetPanel" domElement="true">
        /// The DOM element to toggle.
        /// </param>
        /// <param name="altPanel" domElement="true">
        /// (optional) A panel that should be visible when 
        /// the target panel is invisible, and invisible 
        /// when the target panel is visible.
        /// </param>
        var tp = $(targetPanel);
        var ap = altPanel ?...