RedBlack Manipulation

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="#">Find</a></h3>
    <div><a href="#" id="find">node = root.left().right().left();</a></div>
<h3><a href="#">Insert</a></h3>
    <div><a href="#" id="insert">node.red().data({'key': key})<br />
        .append($('...').append(value))<br />
        .append($('...'));</a></div>
<h3><a href="#">Ancestors</a></h3>
    <div><a href="#" id="ancestors">var parent = node.closest('ul').closest('li').highlight(),<br />
    grandparent =...

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; }
.highlight2 { background-color: green; 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' ); };
$.fn.highlight = function(){ return this.addClass('highlight' ); };
$.fn.highlight2 = function(){ return this.addClass('highlight2' ); };

$.extend($.ui.accordion.prototype, {
    next: function(){
        var index = this.option('active') || 0,
            next = index + 1,
            nodes = $(this.element).children('h3').length;
        if(next >= nodes && this.option('loopOnNext') === true) {
            next = 0;
        }
        return this.activate(next);
    }
});


(function(){   
function clear(){
    $(".highlight").removeClass('highlight');
    $(".highlight2").removeClass('highlight2');
};
var key = 2893, value = "Stargazer",
    root = $("#tree").children('.black:first'),
    node, parent, grandparent;
    
function find(){
//Find insert node
node = root.left().right().left();
    $(node).highlight();
$("#accordion").accordion("next");
}

function insert(){
    clear();
    //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>'));
    $("#accordion").accordion("next");
}

function ancestors(){
//Find Ancestors
    node.highlight();
    parent = node.closest('ul').closest('li').highlight2(),
    grandparent = parent.closest('ul').closest('li').highlight2();
    $("#accordion").accordion("next");
}

function rotate(){
//Rotate
    parent.left().replaceWith(node.right());
    grandparent.right().replaceWith(node.left());
    grandparent.replaceWith(node);
    $("#accordion").accordion("next");
}
function append(){
    node.children('ul').prepend(grandparent);
   ...