function fadeThis(el){
    el.fadeOut("slow", function(){
        if ($(this).next().length == 0) {
            $("#sets .set:first-child").fadeIn("slow", function(){
                fadeTimeout($(this));
            });
        } else {
            fadeNext($(this));
        }
    })
}
function fadeNext(el){
    el.next().fadeIn("slow", function(){
        fadeTimeout($(this));
    });
}
function fadeTimeout(el){
    setTimeout(function(){
        fadeThis($(el));
    }, 3000);
}

function prepareControls(el){
    $(el + " h3").after("<ul></ul>");
    $(el + " div h4").each(function(){
        $(el + " ul").append("<li class=\""+ this.parentNode.className +"\">" + $(this).html() + "</li>");
    }).remove();
    $(el + " div").not($(el + " div")[0]).addClass("hide");
    $(el + " li:first-child").addClass("act");
}
function toggleItem(el){
    var root = el.split(" ", 1)
    $(el).mouseover(function(){
        $(el + ".act").removeClass("act");
        $(root  + " div:not(.hide)").addClass("hide");
        $(root + " div." + this.className).removeClass("hide");
        $(this).addClass("act");
    });
}


$(document).ready(function(){
    var els = ["#p-weight", "#p-packed"];
    for (var i = 0; i < els.length; i++) {
        prepareControls(els[i]);
        toggleItem(els[i] + " li");
    }
});
window.onload = function() { fadeTimeout("#sets .set:not(.hide)"); }