function Tabs(etab, epnl) {
    var tabs = $(etab).find("> li");
    var panels = $(epnl).find("> div");
    $(tabs.get(0)).addClass("active");
    $(panels.get(0)).addClass("active");

    $(tabs).click(function() {
        var index = $(tabs).index(this);
        $(tabs).removeClass("active");
        $(panels).removeClass("active");
        $(tabs.get(index)).addClass("active");
        $(panels.get(index)).addClass("active");
    }, function() { });
}

function Panels(ppnl, mask) {
    var ap = $(mask).find('a.scroll');
    var cu = $(mask).find('ul');
    var p = $(ppnl).find('.pnl');
    var np = p.length - 1;
    var cp = 0;
    var pleft = 0;
    var navstr = '';
    var w = $(p.get(0)).width() + parseInt($(p.get(0)).css("padding-right"), 10) + parseInt($(p.get(0)).css("padding-left"), 10);
    $(ppnl).css('width', p.length * w + 'px');
    $(cu).css('width', p.length * 26 + 'px');
    if (np < 0) { ap.hide(); }
    $(ap.get(0)).addClass('hide');
    for (k = 0; k < np + 1; k++) { navstr += '<li><a> </a></li>'; }
    $(cu).html(navstr);

    var c = $(cu).find('li');
    $(c.get(0)).addClass('active');

    $(ap).click(function () {
        var i = $(ap).index(this);
        if (i == 1) { if (cp < np) { cp++; } } else { if (cp > 0) { cp--; } }
        c.removeClass('active');
        $(c.get(cp)).addClass('active');
        ap.removeClass('hide');
        if (cp == np) { $(ap.get(1)).addClass('hide'); }
        if (cp == 0) { $(ap.get(0)).addClass('hide'); }
        pleft = -(cp * w);
        $(ppnl).animate({ left: pleft + 'px' }, 500, function () { });
        return false;
    }, function () { });
    $(c).click(function () {
        cp = $(c).index(this);
        c.removeClass('active');
        $(c.get(cp)).addClass('active');
        ap.removeClass('hide');
        if (cp == np) { $(ap.get(1)).addClass('hide'); }
        if (cp == 0) { $(ap.get(0)).addClass('hide'); }
        pleft = -(cp * w);
        $(ppnl).animate({ left: pleft + 'px' }, 500, function () { });
        return false;
    }, function () { });
}

//Tabs('#snav ul', '#spanels');
//Tabs('#rnav ul', '#rpanels');
Panels('#panels1', '#mask1');
Panels('#panels2', '#mask2');