var Interval = 0;
var AnimationPause = false;

function theRotator(pElement) {
    //Set the opacity of all images to 0
    $('div#' + pElement + ' img').css({ opacity: 0.0 });

    //Get the first image and display it (gets set to full opacity)
    $('div#' + pElement + ' img:first').css({ opacity: 1.0 }).addClass('show');

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval(function() { rotate(pElement); }, 10000);

}

function rotate(pElement) {
    //Get the first image
    var current = ($('div#' + pElement + ' img.show') ? $('div#' + pElement + ' img.show') : $('div#' + pElement + ' img:first'));

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#' + pElement + ' img:first') : current.next()) : $('div#' + pElement + ' img:first'));

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({ opacity: 0.0 })
	.addClass('show')
	.animate({ opacity: 1.0 }, 1000);

    //Hide the current image
    current.animate({ opacity: 0.0 }, 1000)
	.removeClass('show');

};

function RotateQuotes () {

    var Quotes = $(".ClientQuote");
    
        var IsReadyToShow = false;
        for (var i = 0; i < Quotes.length; i++)
        {
            if( $( Quotes[i] ).css("width") == "466px" )
            {
                $(Quotes[i]).animate({ width: "156px", queue: true });
                IsReadyToShow = true;
            }
            else if( IsReadyToShow )
            {
                $(Quotes[i]).animate({ width: "466px", queue: true });
                IsReadyToShow = false;
                break;
            }
        }
        
        if( IsReadyToShow )
        {
            $(Quotes[0]).animate({ width: "466px", queue: true });
        }

    };

    function MouseOverQuote(j) {
        var Quotes = $(".ClientQuote");
        clearInterval(Interval);

        if (!AnimationPause) {
            for (var i = 0; i < Quotes.length; i++) {
                if ($(Quotes[i]).width() > 156 && i != j) {
                    $(Quotes[i]).stop(true);
                    // $(Quotes[i]).animate({ width: "156px", duration: 200 });
                    $(Quotes[i]).css("width", "156px");
                    break;
                }
            }

            if ($(Quotes[j]).width() <= 156) {
                AnimationPause = true;
                $(Quotes[j]).animate({ width: "466px" }, function() { AnimationPause = false; });
            }
        }
        return false;
    };

    function MouseOutQuote(i) {
        Interval = setInterval("RotateQuotes()", 5000);
        return false;
    };

$(document).ready(function() {
    //Load the slideshow
    theRotator("Browser");
    theRotator("iPhone");
    
    Interval = setInterval("RotateQuotes()", 5000);
});