more bracket

by lukerichison

HTML

<div id="LB">
    <div id="regionM">
        <div class="regionID">MIDWEST<span>Inidanapolis</span></div>
        <ul data-round="64">
            <li>
                <div>
                    <div class="rank">1</div>
                    <div data-team="M01">option</div>
                    <div class="score">&nbsp;</div>
                </div>
                <div>
                    <div class="rank">16</div>
                    <div data-team=""><select>
                        <option value="0"></option>
                        <option value="M16a">option</option>
                        <option value="M16b">option</option>
                        </select></div>
                    <div class="score">&nbsp;</div>
                </div>
            </li>
            <li>
                <div>
                    <div class="rank">8</div>
                    <div data-team="M08">option</div>
                    <div class="score">&nbsp;</div>
                </div>
                <div>
                    <div class="rank">9</div>
                    <div data-team="M09">option</div>
                    <div class="score">&nbsp;</div>
                </div>
            </li>
            <li>
                <div>
                    <div class="rank">5</div>
                    <div data-team="M05">option</div>
                    <div class="score">&nbsp;</div>
                </div>
                <div>
                    <div class="rank">12</div>
                    <div data-team="M12">option</div>
                    <div class="score">&nbsp;</div>
                </div>
            </li>
            <li>
                <div>
                    <div class="rank">4</div>
                    <div data-team="M04">option</div>
                    <div class="score">&nbsp;</div>
                </div>
                <div>
                    <div class="rank">13</div>
                    <div data-team="M13">option</div>
                    <div...

CSS

html, body {
    height: 100%;
}
#LB, #RB {
    height: 100%;
    width: 40%;
}
#LB { float: left; }
#RB { float: right; }
div[id^="region"] {
    position: relative;
    height: 50%;
}
div.regionID {
    text-align: center;
    position: absolute;
    width: 25%;
    top: 50%;
    line-height: 1.25em;
    margin-top: -1em;
}
#LB div.regionID { right: 25%; }
#RB div.regionID { left: 25%; }

div.regionID span {
    display: block;
    font-size: 0.75em;
    line-height: 1.25em;
}

ul[data-round] {
    width: 25.5%;
    height: 100%;
    border-right: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#LB ul[data-round] { float: left; }
#RB ul[data-round] { float: right; }
ul[data-round="64"] { width: 23.5%; }
#LB ul[data-round="64"] { border-left: 0; }
#RB ul[data-round="64"] { border-right: 0; }
ul[data-round] li {
    position: relative;
    outline: 0.0625em solid #E1E1E1;
}
ul[data-round] li:last-child {
    margin-bottom: 0 !important;
}
ul[data-round] li > div {
    position: relative;
    height: 1.5em;
    background: #ffffff;
    background:...

JavaScript

$(window).resize(function() { MAR("ul[data-round]"); });
MAR("ul[data-round]");
function MAR(el) {
    var OBJ = $("#regionM ul[data-round='64']");
    var VaH = 0; $("li", OBJ).each(function () { VaH += $(this).outerHeight(); });
    var ViH = VaH / $(OBJ).children("li").length;
    var MiH = ($("#regionM").height() - VaH) / ($("li", OBJ).length + 1);
    $("div[id^='region']").each(function () {
        var i = 0; var i1 = 0; var i2 = 0; var i3 = 1; var i4 = 0;
        $(el, this).each(function () {
            i1 = (Math.pow(2,i) + 1) / 2; i2 = (Math.pow(2,i) - 1) / 2; i3 += i; i4 += i; i++;
            var MaH = i1 * MiH + i2 * ViH; var McH = i3 * MiH + i4 * ViH;
            $("li", this).css("margin", McH + "px 0");
            $("li:first-child", this).css("margin-top", MaH + "px");
            $("li:last-child", this).css("margin-bottom", MaH + "px");
            var MbH = ViH + McH; var OBJb = $(this).data('round');
            $('html > head').append($('<style> ul[data-round="'+OBJb+'"] li:nth-child(odd):after { height:' + MbH + 'px; }</style>'));
        });
    });
}
var PREV; $("div[data-team] select").focus(function () { PREV = $(this).val(); });
$("div[data-team] select").change(function () {
    var team = $(this).val();
    var round = $(this).closest("ul").data("round");
    $("div[data-team] select:has(option[value=" + team + "])").filter(function () {
        return $(this).closest("ul").data("round") > round && team != "0";
    }).val(team).parent().attr("data-team", team).prev("div.rank").html( parseInt($(this).val().replace(/\D/g,''), 10));
    $("div[data-team] select:has(option[value=" + PREV + "]:selected)").filter(function () {
        return $(this).closest("ul").data("round") < round;
    }).val("0").parent().attr("data-team", "0").prev("div.rank").html("&nbsp;");
    if (team == "0") {
        $(this).parent().prev("div.rank").html("&nbsp;");
        $(this).parent().attr("data-team", team);
    } else {
       ...