var autoAnimation = false;
var animationIndex = 0;
var AnimationId = 0;

function PlayAnimation() {

    if (animationIndex > 5) animationIndex = 0;

    switch (animationIndex) {
        case 0:
            {

                $("#ImageFrame").stop(true, true).animate();

                $("#ImageFrame").animate({
                    'left': "0px"
                }, 'normal');

                break;
            }
        case 1:
            {
                $("#ImageFrame").stop(true, true).animate();
                $("#ImageFrame").animate({
                    'left': "-554px"
                }, 'normal');
                break;
            }
        case 2:
            {
                $("#ImageFrame").stop(true, true).animate();
                $("#ImageFrame").animate({
                    'left': "-1108px"
                }, 'normal');
                break;
            }
        case 3:
            {
                $("#ImageFrame").stop(true, true).animate();
                $("#ImageFrame").animate({
                    'left': "-1662px"
                }, 'normal'); ;
                break;
            }
        case 4:
            {
                $("#ImageFrame").stop(true, true).animate();
                $("#ImageFrame").animate({
                    'left': "-2216px"
                }, 'normal');
                break;
            }
        case 5:
            {
                $("#ImageFrame").stop(true, true).animate();
                $("#ImageFrame").animate({
                    'left': "-2770px"
                }, 'normal');
                break;
            }
    }

    animationIndex += 1;
}

function StartAnimation() {

    AnimationId = setInterval("PlayAnimation()", 5000);
}

function StopAnimation() {
    clearInterval(AnimationId);
}


$(document).ready(function () {


    $("#SmallImage_1").hover(function (event) {

        $("#ImageFrame").stop(true, true).animate();

        $("#ImageFrame").animate({
            'left': "0px"
        }, 'normal');

    });

    $("#SmallImage_2").hover(function (event) {

        $("#ImageFrame").stop(true, true).animate();
        $("#ImageFrame").animate({
            'left': "-554px"
        }, 'normal');

    });

    $("#SmallImage_3").hover(function (event) {
        $("#ImageFrame").stop(true, true).animate();
        $("#ImageFrame").animate({
            'left': "-1108px"
        }, 'normal');

    });

    $("#SmallImage_4").hover(function (event) {
        $("#ImageFrame").stop(true, true).animate();
        $("#ImageFrame").animate({
            'left': "-1662px"
        }, 'normal');

    });

    $("#SmallImage_5").hover(function (event) {
        $("#ImageFrame").stop(true, true).animate();
        $("#ImageFrame").animate({
            'left': "-2216px"
        }, 'normal');

    });

    $("#SmallImage_6").hover(function (event) {
        $("#ImageFrame").stop(true, true).animate();
        $("#ImageFrame").animate({
            'left': "-2770px"
        }, 'normal');

    });


    $("#SmallImage_1").mouseenter(function (event) {
        StopAnimation();
    });
    $("#SmallImage_1").mouseleave(function (event) {
        StartAnimation();
    });

    $("#SmallImage_2").mouseenter(function (event) {
        StopAnimation();
    });
    $("#SmallImage_2").mouseleave(function (event) {
        StartAnimation();
    });

    $("#SmallImage_3").mouseenter(function (event) {
        StopAnimation();
    });
    $("#SmallImage_3").mouseleave(function (event) {
        StartAnimation();
    });

    $("#SmallImage_4").mouseenter(function (event) {
        StopAnimation();
    });
    $("#SmallImage_4").mouseleave(function (event) {
        StartAnimation();
    });

    $("#SmallImage_5").mouseenter(function (event) {
        StopAnimation();
    });
    $("#SmallImage_5").mouseleave(function (event) {
        StartAnimation();
    });

    $("#SmallImage_6").mouseenter(function (event) {
        StopAnimation();
    });
    $("#SmallImage_6").mouseleave(function (event) {
        StartAnimation();
    });


    animationIndex = 0;
    PlayAnimation();

    StartAnimation();
});