var Elements;
var Current;

$(document).ready(function() {
    Elements = $("#tab_container img").size();
    Current = 1;

    var DivWidth = Elements * 16;
    $('#tab_buttons').css('left', '100%');
    $('#tab_buttons').css('width', DivWidth);
    $('#tab_buttons').css('margin-left', '-' + (DivWidth + 10));
    //$('#tab_buttons').css('position', 'relative');

    $("#tab_buttons div:first").addClass("active").show();

    $("#tab_container img").hide();
    $("#tab_container img:first").addClass("active").show();

    $("#tab_buttons div").click(function() {
        $("#tab_buttons div").removeClass("active");
        $(this).addClass("active");

        $("#tab_container img").removeClass("active");
        $("#tab_container img").hide();

        var activeIndex = $(this).attr("id").substring(3, $(this).attr("id").lenght);
        $("#tab" + activeIndex).fadeIn();
    });
});

function Slide() {
    if (Current < Elements) {
        Current++;
    }
    else {
        Current = 1;
    }
    $("#tab_buttons div").removeClass("active");
    $("#tab_buttons div:#but" + Current).addClass("active");

    $("#tab_container img").removeClass("active");
    $("#tab_container img").hide();

    $("#tab_container img:#tab" + Current).fadeIn();
}

$(function() {
    setInterval("Slide()", 5000);
});