var ul;
var panes;

function createTabs(tabsList, panesList) {
    
    ul = tabsList;
    panes = panesList;
        
    var links = ul.find("li a");
    
    links.click(function(e) {
    
        e.preventDefault();
    
        var li = $(this).parent();
        var num = 0;
        while (li.prev().length > 0) {
            
            li = li.prev();
            num++;
        }
        selectTab(num);
    });
}

function selectTab(num) {
    
    var links = ul.find("li a");   
    
    //Mark selected tab    
    $(links[num]).removeClass("after-selected");
    $(links[num]).removeClass("before-selected");
    $(links[num]).addClass("selected");
    
        
    //Mark tab next to selected (shadow or something)
    if (num < (links.length - 1)) {
    
        $(links[num + 1]).removeClass("selected");        
        $(links[num + 1]).removeClass("before-selected");
        $(links[num + 1]).addClass("after-selected");
    }
    //Mark tab prev to selected (shadow or something)
    if (num > 0) {
    
        $(links[num - 1]).removeClass("selected");        
        $(links[num - 1]).removeClass("after-selected");        
        $(links[num - 1]).addClass("before-selected");
    }
    
    //Mark other non-selected tabs
    for (i = 0; i < links.length; i++) {
        
        if ((i != (num - 1)) && (i != num) && (i != (num+1))) {
            $(links[i]).removeClass("selected");
            $(links[i]).removeClass("before-selected");
            $(links[i]).removeClass("after-selected");
        }
    }
    	
	panes.children().hide();
	$(panes.children()[num]).show();
	$(panes.children()[num]).css("visibility", "visible");
	$(panes.children()[num]).find('div').css("visibility", "visible");	
}