$(document).ready(function() {
    current = 1;
    button = 1;
    images = $("div.button").size();
    width = $("div.slider").width();

    $("div.buttons , div.slider , div.panel").addClass("script");

    $("#b1").addClass("active");
    $("div.slider").animate({ "height": $('#p1').height() + "px" }, 400, "swing");
    $('#p1').animate({ opacity: 0.2 }, 400).animate({ "left": "0px" }, 400, "swing").animate({ opacity: 1.0 }, 200);

    $("div.button").mouseover(function() {
        $(this).addClass("hover");
    });
    $("div.button").mouseout(function() {
        $(this).removeClass("hover");
    });

    $("div.button").click(function() {
        button = current;
        clickButton = $(this).attr('id');
        current = parseInt(clickButton.slice(1));
        if (current > button) { animateLeft(current, button) }
        if (current < button) { animateRight(current, button) }
    });

    function animateLeft(current, button) {
        $('#p' + current).css("left", width + "px");
        $('#p' + button).animate({ opacity: 0.2 }, 200).animate({ "left": -width + "px" }, 400, "swing");
        $("div.slider").animate({ opacity: 1.0 }, 600).animate({ "height": $('#p' + current).height() + "px" }, 400, "swing");
        $('#p' + current).animate({ opacity: 0.2 }, 1000).animate({ "left": "0px" }, 400, "swing").animate({ opacity: 1.0 }, 200);
        setbutton()
    }

    function animateRight(current, button) {
        $('#p' + current).css("left", -width + "px");
        $('#p' + button).animate({ opacity: 0.2 }, 200).animate({ "left": width + "px" }, 400, "swing");
        $("div.slider").animate({ opacity: 1.0 }, 600).animate({ "height": $('#p' + current).height() + "px" }, 400, "swing");
        $('#p' + current).animate({ opacity: 0.2 }, 1000).animate({ "left": "0px" }, 400, "swing").animate({ opacity: 1.0 }, 200);
        setbutton()
    }

    function setbutton() {
        $('#b' + button).removeClass("active");
        $('#b' + current).addClass("active"); ;
    }
});