$(function () {

    var $panels = $("#panelScroller > div");
    var panelWidth = $panels[0].offsetWidth + 8;
    var panelNum = 0;
    var isMouseOver = false;

    $("#panelScroller").css("width", (panelWidth * $panels.length));

    $("#panelScroller").mouseenter(function () {
        isMouseOver = true;
    });

    $("#panelScroller").mouseleave(function () {
        isMouseOver = false;
    });

    $(".panelArrow").mouseover(function () {
        var src = $(this).attr("src").replace("_lo", "_hi");
        $(this).attr("src", src);
        isMouseOver = true;
    });

    $(".panelArrow").mouseout(function () {
        var src = $(this).attr("src").replace("_hi", "_lo");
        $(this).attr("src", src);
        isMouseOver = false;
    });

    $(".panelArrowLeft").click(function () {
        clickSlide(-1);
    });

    $(".panelArrowRight").click(function () {
        clickSlide(1);
    });

    setTimeout(slide, 3000);

    function slide() {

        if (!isMouseOver) {
            panelNum ++;
            if (panelNum >= $panels.length - 2) {
                panelNum = 0;
            }

            $("#panelScroller").stop().animate({ "left": -panelNum * panelWidth }, function () {
                setTimeout(slide, 3000);
            });
        }
        else {
            setTimeout(slide, 1000);
        }
    }

    function clickSlide(dir) {

        panelNum += dir;
        if (panelNum >= $panels.length - 2) {
            panelNum = 0;
        }
        if (panelNum < 0) {
            panelNum = $panels.length - 3;
        }

        $("#panelScroller").stop().animate({ "left": -panelNum * panelWidth });
    }

});