///<reference path="jquery-1.3.2.js" />
///<reference path="jquery.cycle.js" />

function PPPromo(slides) {
    /* server returns an array of slides which looks like this: 
    [
    { imageUrl: "images/hero1.jpg", blurb: "<h1>Blurb 1</h1><p>Lorem ipsum dolor sit amet</p>" },
    { imageUrl: "images/hero2.jpg", blurb: "<h1>Blurb 2</h1><p>Lorem ipsum dolor sit amet</p>" },
    { imageUrl: "images/hero32.jpg", blurb: "<h1>Blurb 3</h1><p>Lorem ipsum dolor sit amet</p>" },
    { imageUrl: "images/hero4.jpg", blurb: "<h1>Blurb 4</h1><p>Lorem ipsum dolor sit amet</p>" },
    { imageUrl: "images/hero5.jpg", blurb: "<h1>Blurb 5</h1><p>Lorem ipsum dolor sit amet</p>" }
    ]
    */

    var totalSlideCount = 0;

    $.each(slides, function(i, obj) {
        if (obj.blurb != '') {
            totalSlideCount++;
            obj.imageUrl = stripImageURL(obj.imageUrl);
        }
    });
    
    var blurbTimeout;
    var $slideshow = $('.pp-Hero-Promo .pp-Hero-Cycle');
    var play = true;
    
    var $promo = $('.pp-Hero-Promo');
    var $promoBlurb = $('.pp-Hero-Promo .details');

    $promo.append('<div class="pp-Hero-Nav"><a href="javascript: void(0);" id="ppPromoPausePlay"></a><div id="ppPromoPager" /></div>');

    var $pausePlayButton = $('#ppPromoPausePlay');

    for (var i = 1; i < totalSlideCount; i++) {
        var img = new Image();
        $slideshow.append(
        $(img).load(function() {
            $(this).removeClass("loading");
        }).error(function() {
            $(this).attr("class", "error");
        }).attr('src', slides[i].imageUrl).attr('alt', '').addClass("loading")
      );
    }

    $('#ppPromoPausePlay').click(function() {
        if (play) {
            $slideshow.cycle('pause', true);
        }
        else
            $slideshow.cycle('resume', true);

        $(this).toggleClass('paused');
        play = !play;
    });
    


    // start slideshow
    $('.pp-Hero-Cycle').cycle({
        fx: 'fade',
        startingSlide: 0,  // start on the slide that was in the markup 
        timeout: 10000,
        speed: 1000,
        pager: '#ppPromoPager',
        before: onBefore,
        pagerClick: onPagerClick
    });

    function stripImageURL(str) {
        // checks to see if URL being passed in is in the form of an HTML <img> tag. If so, strips out the src
        if (str.indexOf('<img') > -1) {
            str = str.split('src="')[1].split('"')[0];
        }
        return str;
    }

    function onPagerClick(zeroBasedSlideIndex, slideElement) {
        $slideshow.cycle('pause');
        $pausePlayButton.addClass('paused');
        play = false;
    };

    function onBefore(curr, next, opts, fwd) {
        for (var j = 0; j < totalSlideCount; j++) {
            if (slides[j].imageUrl == $(next).attr('src')) {
                $promoBlurb.html(slides[j].blurb);
            }
        }
    };
    
};