Factbook Layout Testing

by WizKid81

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=234"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js?cacheBust=234"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.maps.js?cacheBust=234"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js?cacheBust=234"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=234"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.worldwithcountries.js?cacheBust=234"></script>
<div id="header" style="height:2em">
    <div id="BreadcrumbLabel" class="Left breadcrumbs">Current Filters:</div>
    <div id="Breadcrumbs" style="float:left">
        <ul id="LocationBreadcrumb" class="breadcrumbs"></ul>
        <ul id="FilterBreadcrumb" class="breadcrumbs"></ul>
    </div>
    <div id="menu_container" style="width: 300px; height: 65px; position: absolute; right: 0px;pointer-events:none;z-index:100">
        <input id="menu_opener" value="Share" type="button" class="button-link Right" style="pointer-events:all" />
        <div id="ShareOptions" style="right: 0px; position: absolute; top: 1em; display: none; background-color: white">
            <input id="CurrentLink" type="text" style="width: 300px" />
            <br />
            <img src="/Content/Images/Email.png" width="25" height="25" style="float: right; cursor: pointer" onclick="Factbook.Utilities.SendEmail($('#CurrentLink').val());" alt="Email Link" title="Email Link" />
        </div>
    </div>
</div>
<div class="Clear"></div>
<div id="LeftColumn" class="Left" style="width:60%;margin:0;height:99%;">
    <div...

CSS

/* Small form factor screens will show the Hide button rather than the resizer ----------- */
 @media only screen and (min-width: 1224px) {
    #HidePanelButton {
        visibility:hidden;
    }
}
@media only screen and (max-width: 1224px) {
    #RightColumn {
        border:none ! important;
    }
    #RightColumn .ui-resizable-w {
        background:none ! important;
    }
}
.javaonly {
    visibility:hidden;
}
body {
    font-size: 80%;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin:0px;
}
.Left {
    float:left;
}
.Right {
    float: right;
}
.Clear {
    clear:both;
}
/*Styles for the tabs*/
 ul#tabs {
    list-style-type: none;
    padding-right:.3em;
    padding-left:.3em;
    margin:0;
}
ul#tabs li {
    display: inline;
}
ul#tabs li a {
    display:inline-block;
    color: #42454a;
    background-color: #dedbde;
    border: 1px solid #c9c3ba;
    border-bottom: none;
    padding: 0.3em;
    text-decoration: none;
}
ul#tabs li a:hover {
    background-color: #f1f0ee;
}
ul#tabs li a.selected {
    color: #000;
    background-color: #f1f0ee;
    font-weight: bold;
    padding: 0.7em 0.3em 0.38em 0.3em;
}
div.tabContent {
    padding: 0.5em;
}
div.tabContent.hide {
    display: none;
}
/*Styles for the rotated buttons*/
 .rotate {
    display:inline-block;
    /*The rotation matrix, expressed as a vector, is [cos(a) sin(a) -sin(a) cos(a) 0 0] where a is an angle.*/
    /*The translation matrix, expressed as a vector, is [1 0 0 1 tx ty]*/
    /*The two are combined below to rotate -90 degrees and shift down 60 pixels*/
    -webkit-transform-origin:top left;
    -moz-transform-origin:top left;
    -o-transform-origin:top left;
    -ms-transform-origin:top left;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    padding-left:3em;
}
.rotate .button {
    background-color:#dedbde;
    border:solid;
    border-top:none;
    border-width:thin;
   ...

JavaScript

function namespace(namespaceString) {
    var parts = namespaceString.split('.'),
        parent = window,
        currentPart = '';

    for (var i = 0, length = parts.length; i < length; i++) {
        currentPart = parts[i];
        parent[currentPart] = parent[currentPart] || {};
        parent = parent[currentPart];
    }

    return parent;
}

//Setting up namespaces for function organization
namespace("Factbook");

Factbook.Utilities = (function () {
    /*******************************/
    /*     internal functions      */

    //Accepts an array of table data and then returns a table that has the elements formatted correctly.  Will look to the first element in the array to determine columns to output
    function buildHTMLForTableData(tabledata) {
        var outputtable = $("<table>").attr("id", "dialog-table");

        if (tabledata.length > 0) {
            var showID = false;
            var showName = false;
            var showValue = false;

            var firstrec = tabledata[0];
            var headerrow = $('<tr>');

            if (firstrec["ID"] != null) {
                var id = $('<th>');
                id.text("ID");
                headerrow.append(id);
                showID = true;
            }

            if (firstrec["Name"] != null) {
                var name = $('<th>');
                name.text("Name");
                headerrow.append(name);
                showName = true;
            }

            if (firstrec["Value"] != null) {
                var value = $('<th>');
                value.text("Value");
                headerrow.append(value);
                showValue = true;
            }
            var thead = $('<thead>');
            thead.append(headerrow);

            outputtable.append(thead);

            for (var record in tabledata) {
                var row = $('<tr>').addClass("data");
                if (showID == true) {
                    var id = $('<td>');
                   ...