var left = 0;
var cent = 1;
var right = 2;
var max;
var bkBtnLeft = -228;
$(document).ready(function() {

    $("#sl_" + left).css("left", "10px");
    $("#sl_" + cent).css("left", "228px");
    $("#sl_" + right).css("left", "491px");

    max = $(".sl").length;


    $("#sl_fwd").click(function() {
        shrinkCent();
        if (left >= 0) {
            $("#sl_" + left).animate({ left: "-=218px" }, 600);
        }
        else {
            $("#sl_" + (max - 1)).animate({ left: "-=218px" }, 600);
        }
        $("#sl_" + cent).animate({ left: "-=218px" }, 300);
        $("#sl_" + right).animate({ left: "-=263px" }, 600);
        //        $(".productimg_" + cent).animate({ height: "-=75px" });
        //        $(".productimg_" + right).animate({ height: "+=75px" });

        var nxt = right + 1;
        if (nxt >= max) {
            nxt = 0;
            right = 0;
            cent = max - 1;
            left = max - 2;
        }
        else {
            right++;
            cent = right - 1;
            left = right - 2;
        }
        $("#sl_" + nxt).removeAttr("style");
        $("#sl_" + nxt).animate({ left: "-=218px" }, 300);

        growCent();
        $("#sl_" + cent).attr("class", "sl activepanel");
        $("#sl_" + left).attr("class", "sl");

        if (cent == max - 2)
            $("#sl_0").attr("class", "sl");

        if (cent == 0) {
            $("#sl_" + (max - 1) ).attr("class", "sl");
           
        }
    });

    $("#sl_back").click(function() {
        shrinkCent();
        $("#sl_" + left).animate({ left: "+=218px" }, 600);
        $("#sl_" + cent).animate({ left: "+=263px" }, 300);
        //        $(".productimg_" + cent).animate({ height: "-=75px" });
        //        $(".productimg_" + left).animate({ height: "+=75px" });
        if (right >= max) {
            $("#sl_0").animate({ left: "+=218px" }, 600);
        }
        else {
            $("#sl_" + right).animate({ left: "+=218px" }, 600);
        }

        var nxt = left - 1;
        if (nxt < 0) {
            nxt = (max - 1);
            left = (max - 1);
            cent = 0;
            right = 1;
        }
        else {
            left--;
            cent = left + 1;
            right = left + 2;
        }

        $("#sl_" + nxt).css("left", bkBtnLeft + "px");
        $("#sl_" + nxt).animate({ left: "+=238px" }, 300);



        growCent();

        $("#sl_" + cent).attr("class", "sl activepanel");


        $("#sl_" + right).attr("class", "sl");
        if (cent == max - 1)
            $("#sl_0").attr("class", "sl");

        if (cent == 0)
            $("#sl_" + max - 1).attr("class", "sl");
    });

    growCent();
    $("#sl_" + cent).attr("class", "sl activepanel");


});

function growCent() {
    $("#sl_" + cent + " .productimg").animate({ width: "175px", height: "175px" }, 1000);
}
function shrinkCent() {
    $("#sl_" + cent + " .productimg").animate({ width: "100px", height: "100px" }, 1200);
}