RedBlack HTML

by southerd

HTML

<ul id="tree" class="red_black_tree">
    <li class="black" data-key="21382">
        <span class="value">Tian An Men</span>
        <ul><li class="black" data-key="1701">
            <span class="value">Enterprise</span>
            <ul><li class="black"></li>
                <li class="red" data-key="11574">
                    <span class="value">Ajax</span>
                    <ul><li class="black"></li>
                        <li class="black"></li>
                    </ul> </li> </ul> </li>
            <li class="red" data-key="62158">
                <span class="value">Akagi</span>
                <ul><li class="black" data-key="42296">
                    <span class="value">Hood</span>
                    <ul><li class="red" data-key="26517">
                        <span class="value">Excalibur</span>
                        <ul><li class="black"></li>
                            <li class="black"></li>
                        </ul> </li>
                        <li class="red" data-key="45231">
                            <span class="value">Hornet</span>
                            <ul><li class="black"></li>
                                <li class="black">&nbsp;</li>
                            </ul> </li> </ul> </li>
                <li class="black" data-key="72015">
                    <span class="value">Sutherland</span>
                    <ul><li class="black"></li>
                        <li class="black"></li>
                    </ul> </li> </ul> </li> </ul> </li> </ul>

<div id="accordion">
<h3><a href="#">Insert</a></h3>
    <div><a href="#" id="insert">Add Stargazer</a></div>
</div>
<script>$("#accordion").accordion();</script>
<link rel="stylesheet" href="http://davidsouther.com/projects/glight/css/glight/glight.css" />

CSS

* { color: white; margin: 0; }
ul li { border: thin solid grey; }
.black { background-color: black; }
.red { background-color: red; color: black; }
.highlight { background-color: yellow; color: black; font-weight: bold; }

li { padding-left: 20px; min-height: 1em; }
a {color: blue;}

JavaScript

//Plugins
$.fn.black = function(){ return this.addClass('black').removeClass('red'  ); };
$.fn.red   = function(){ return this.addClass('red'  ).removeClass('black'); };
$.fn.left  = function(){ return this.children('ul').children(':first'); };
$.fn.right = function(){ return this.children('ul').children(':last' ); };

$("#insert").click(insert);

function insert(){
var key = 2893, value = "Stargazer",
    root = $("#tree").children('.black:first');

//Find insert node
var node = root.left().right().left();

//Add new node
    node.red().data({'key': key})
        .append($('<span class="value"></span>').append(value))
        .append($('<ul><li class="black"></li><li class="black"></li></ul>'));

//Find Ancestors
var parent = node.closest('ul').closest('li'),
    grandparent = parent.closest('ul').closest('li');

//Rotate
    parent.left().replaceWith(node.right());
    grandparent.right().replaceWith(node.left());
    grandparent.replaceWith(node);

    node.children('ul').prepend(grandparent);
    node.children('ul').append(parent);

//Recolor    
    node.black();
    grandparent.red();
    parent.red();
}