var sliderIndex = 0;
var panelCount = 0;
var timeOut;

function HomepageScrollerInit() {
    var scrollerHeight = $("div#firstPanel").height();
    panelCount = $("div.panel").length;

    if (panelCount > 1) {

        $("div#scroll").css({ "height": scrollerHeight });

        $("div#scrollContainer").css({ "width": (panelCount * 668) + "px", "position": "absolute", "left": "0px", "top": "0px" });

        $("div.panel").each(function (index) {
            $(this).css({ "position": "absolute", "left": (index * 668) + "px", "top": "0px", "display": "block" });
        }
    );

        $("a#rightScroll").click(function () {
            clearTimeout(timeOut);
            if ((sliderIndex + 1) < panelCount) {
                sliderIndex++;
                $("div#scrollContainer").stop("true", "true").animate({ left: (sliderIndex * -668) + "px" }, 350);
            }
            else {
                sliderIndex = 0;
                $("div#scrollContainer").stop("true", "true").animate({ left: "0px" }, 900);
            }

            SetScrollLeftTimeout();
        });

        $("a#leftScroll").click(function () {
            clearTimeout(timeOut);
            if ((sliderIndex) > 0) {
                sliderIndex--;
                $("div#scrollContainer").stop("true", "true").animate({ left: (sliderIndex * -668) + "px" }, 350);
            }
            else {
                sliderIndex = panelCount - 1;
                $("div#scrollContainer").stop("true", "true").animate({ left: ((panelCount - 1) * -668) + "px" }, 900);
            }

            SetScrollLeftTimeout();
        });

        $("a.scrollButtons").hover(function () {
            $(this).css({ "background-position": "bottom left" });
        }, function () {
            $(this).css({ "background-position": "top left" });
        });

        SetScrollLeftTimeout();
    }
}

function SetScrollLeftTimeout()
{
    timeOut = setTimeout(function () {
        ScrollLeft();
    }, 4000);
}

function ScrollLeft() {
    if ((sliderIndex + 1) < panelCount) {
        sliderIndex++;
        $("div#scrollContainer").stop("true", "true").animate({ left: (sliderIndex * -668) + "px" }, 350, SetScrollLeftTimeout());
    }
    else {
        sliderIndex = 0;
        $("div#scrollContainer").stop("true", "true").animate({ left: "0px" }, 900, SetScrollLeftTimeout());
    }
}