var windowIsFocused = true;
function onBlur() {
    windowIsFocused = false;
};
function onFocus() {
    windowIsFocused = true;
};

$(document).ready(function () {

    //Set up the focus in / out events
    if (/*@cc_on!@*/false) { // check for Internet Explorer
        document.onfocusin = onFocus;
        document.onfocusout = onBlur;
    } else {
        window.onfocus = onFocus;
        window.onblur = onBlur;
    }

    $(".paging a:first").addClass("active");
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = $(".rotator").width() * imageSum;
    $(".image_reel").css({ 'width': imageReelWidth });
    var paused = false;
    var play = null;

    rotate = function () {
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * $(".rotator").width(); //Determines the distance the image reel needs to slide
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500);
    };

    //Rotation + Timing Event
    rotateSwitch = function () {
        window.play = setInterval(function () { //Set timer - this will repeat itself every 3 seconds
            if (windowIsFocused) {
                $('.paging a.button img').attr('src', '/Style%20Library/TUPSS/images/rotator-btn2.png');
                $active = $('.paging a.active').next(".button");
                if ($active.length === 0) { //If paging reaches the end...
                    $active = $('.paging a:first'); //go back to first
                }

                //set the currently active one as selected
                $active.children("img").attr('src', '/Style%20Library/TUPSS/images/rotator-btn1.png');

                rotate(); //Trigger the paging and slider function
            }
        }, 5000); //Timer speed in milliseconds (5 seconds)
    };

    createJumpToButtons = function () {
        var count = $('div.image_reel a').size();
        if (count === 1) {
            $('.paging').hide();
            return true;
        }
        for (var i = count; i > 0; i--) {
            $('.paging').prepend('<a href="#" rel="' + (i) + '" class="button"><img src="/Style%20Library/TUPSS/images/rotator-btn2.png" width="12" height="12" border="0" /></a>');
        }
        //First button selected initially
        $('.paging a.button img').first().attr('src', '/Style%20Library/TUPSS/images/rotator-btn1.png');
    }

    //Initialize everything, but only if more than 1 image exists
    var onlyOne = createJumpToButtons(); //Create jump buttons dynamically
    if (!onlyOne) {
        rotateSwitch();
        //On Hover
        $(".image_reel a").hover(function () {
            clearInterval(window.play); //Stop the rotation
        }, function () {
            if (!paused)
                rotateSwitch(); //Resume rotation
        });

        //On Click
        $(".paging a.button").click(function () {
            $active = $(this); //Activate the clicked paging
            //set the currently active one as selected
            $('.paging a.button img').attr('src', '/Style%20Library/TUPSS/images/rotator-btn2.png');
            $active.children("img").attr('src', '/Style%20Library/TUPSS/images/rotator-btn1.png');
            //Reset Timer
            clearInterval(window.play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        });

        $(".paging a.play").click(function () {
            $(this).hide();
            $(".paging a.pause").show();

            paused = false;

            //Reset timer
            clearInterval(window.play); //Stop the rotation
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        });

        $(".paging a.pause").click(function () {
            $(this).hide();
            $(".paging a.play").show();

            //Reset Timer
            clearInterval(window.play); //Stop the rotation
            paused = true;
            return false; //Prevent browser jump to link anchor
        });
    }
});