var SidebarList = Class.extend({
    sidebar: null,
    content: null,
    old_element: null,
    old_i: 0,
    init_h_sidebar: 0,
    
    init: function(sidebar,i,content) {
        this.content = content;
        
        this.sidebar = sidebar;
        this.sidebar.css({backgroundPosition: '0px 0px'});
        
        this.init_h_sidebar = sidebar.height();
        
        var selected_element = $($($("#"+sidebar.attr("id")+"").children()[i]).children()[1]);
        selected_element.parent().addClass("selected");
        selected_element.css({backgroundPosition: '200px 13px'});
        this.old_element = selected_element;
        this.old_i = i;
        
        this.refresh();
        
        var ref = this;
        $(window).load(function() {
            ref.onResize();
        })
        
        this.onResize();
        
        $.doc.loaded(function() {
            var anchor = $.url.anchor();
            if(anchor != "") {
                ref.elements().each(function(i,element) {
                    if($(element).attr("title") == anchor)
                        $(element).click();
                });
            }
            
        });
    
    },
    
    onResize: function() {
        var h = $("#content"+this.old_i).height();
        this.content.css({height: h+"px"});    
        this.sidebar.css({height: h+"px"});
    },
    
    elements: function() {
        return $("#"+this.sidebar.attr("id")+" li a");
    },

    refresh: function() {
        var ref = this;
        this.elements().each(function(i,element) {
            $(element).click(function() {
                ref.select($(element),i);
                return false;
            });
        });
    },
    
    select: function(element,i) {
        if(this.old_i == i) return;

        if(this.old_element != null) {
            this.old_element.parent().removeClass("selected");
            if($.browser.msie) {
                // Don't animate for that crap
                this.old_element.css({
                    backgroundPosition: "172px 13px"
                });
            }
            else {
                this.old_element.animate({
                    backgroundPosition: "(172px 13px)"
                }, {duration:500});             
            }
        }
        
        window.location = $.url.before_anchor()+"#"+element.attr("title");
        
        element.parent().addClass("selected");
        if($.browser.msie) {
            // Don't animate for that crap
            element.css({
                backgroundPosition: "200px 13px"
            });
        }
        else {
            element.animate({
                backgroundPosition: "(200px 13px)"
            }, {duration:500});
        }
        this.sidebar.animate({ 
            backgroundPosition: "(0px "+(i*37)+"px)"
        }, {duration:500});

        this.slide_to(i);
        
        this.old_element = element;
        this.old_i = i;
    },
    
    slide_to: function(to) {
        var h = 0;
        for (var i=0; i < to; i++) {
            h += $("#content"+i).height();
        };
        $("#content_to_slide").animate({
            marginTop: "-"+h+"px"
        }, {duration:500});
        
        var h = $("#content"+to).height();
        if(h < this.init_h_sidebar)
            h = this.init_h_sidebar;
        this.content.animate({height: h+"px"},{queue:false});    
        this.sidebar.animate({height: h+"px"},{queue:false});
    }
});