$(document).ready(function () {
    var prevImgIndex = 0;
    var imgIndex = 0;
    var timerAnimation = null;
    var timerSeconds = 6000;
    var timerStage = 0;
    var animationSteps = 33;
    var changingAnimation = false;

    function ChangeMainImage(stop) {
        timerStage = 0;
        var cur = $("#main_image_background").find("span:visible");
        var spans = $("#main_image_background").find("span");
        var next = $(spans[imgIndex]);
        next.css("z-index", parseInt(cur.css("z-index")) + 1);
        if (!stop) next.fadeIn(1100, function () {
            cur.hide();
            BindHover(prevImgIndex);
            timerAnimation = setInterval(AnimateCurrent, timerSeconds / animationSteps);
            changingAnimation = false;
        });
        else next.fadeIn(1100, function () {
            cur.hide();
            changingAnimation = false;
        });
    }

    function GetNextMainImage(direction) {
        prevImgIndex = imgIndex;
        if (direction == 'left') {
            imgIndex--;
            if (imgIndex < 0) {
                imgIndex = $("#main_image_background").find("span").size() - 1;
            }
        } else if (direction == 'right') {
            imgIndex++;
            if (imgIndex >= $("#main_image_background").find("span").size()) {
                imgIndex = 0;
            }
        }
        ChangeMainImage(false);
    }

    function BindHover(i) {
        $("#imgBtn_" + i).css('background-position', '-' + (80 + (i * 40)) + 'px 0px');
        $("#imgBtn_" + i).hover(function () {
            var thisid = $(this).attr("id").split("_")[1];
            $(this).css('background-position', '-' + (100 + (parseInt(thisid) * 40)) + 'px 0px');
        }, function () {
            var thisid = $(this).attr("id").split("_")[1];
            $(this).css('background-position', '-' + (80 + (parseInt(thisid) * 40)) + 'px 0px');
        });
    }

    function AnimateCurrent() {
        $("#imgBtn_" + imgIndex).css('background-position', '-' + (440 + (timerStage * 20)) + 'px 0px');
        $("#imgBtn_" + imgIndex).unbind('mouseenter mouseleave');
        timerStage++;
        if (timerStage >= animationSteps) {
            if (timerAnimation) clearInterval(timerAnimation);
            changingAnimation = true;
            GetNextMainImage('right');
        }
    }

    function InitializeMainImage() {
        // determine amount of images
        var imgCount = $("#main_image_background").find("span").size();
        $("#btnScrollLeft").bind("click", function () {
            if (changingAnimation) return;
            changingAnimation = true;
            if (timerAnimation) clearInterval(timerAnimation);
            GetNextMainImage('left');
        });
        $("#btnScrollRight").bind("click", function () {
            if (changingAnimation) return;
            changingAnimation = true;
            if (timerAnimation) clearInterval(timerAnimation);
            GetNextMainImage('right');
        });
        if (imgCount > 1) {
            //
            // add buttons
            //
            var i;
            for (i = 0; i < imgCount; i++) {
                //
                // add button
                //
                var item = $("#barControlButtons").append('<a href="javascript:void(0);" id="imgBtn_' + i + '" class="center_button"> </a>');
                $("#imgBtn_" + i).bind("click", function () {
                    if (changingAnimation) return;
                    changingAnimation = true;
                    if (timerAnimation) clearInterval(timerAnimation);
                    prevImgIndex = imgIndex;
                    imgIndex = parseInt($(this).attr("id").split("_")[1]);
                    BindHover(prevImgIndex);
                    $("#imgBtn_" + imgIndex).unbind('mouseenter mouseleave');
                    $("#imgBtn_" + imgIndex).css('background-position', '-' + (100 + (imgIndex * 40)) + 'px 0px');
                    if (prevImgIndex != imgIndex) {
                        ChangeMainImage(true);
                    } else changingAnimation = false;
                });
                BindHover(i);
            }
            $("#barControlButtons").css('width', ((20 * imgCount) + (10 * imgCount)));
            //
            // show navigation
            //
            $("#barControl").slideDown('slow');
        }
    }
  InitializeMainImage();
  timerAnimation = setInterval(AnimateCurrent, timerSeconds / animationSteps);
});