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

function ClbcPromo(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);
        }
    });

    jQuery.fn.swapWith = function(to) {
        return this.each(function() {
            var copy_to = $(to).clone(true);
            var copy_from = $(this).clone(true);
            $(to).replaceWith(copy_from);
            $(this).replaceWith(copy_to);
        });
    }

    var blurbTimeout;
    var $slideshow = $('.clbc-Hero-Promo .clbc-Hero-Cycle');
    var blankImage = '/assets/images/blank.gif';
    var play = true;
    var initialLoad = true;
    
    var $promo = $('.clbc-Hero-Promo');
    var $promoBlurb = $('.clbc-Hero-Promo .details');

    $promo.append('<div class="clbc-Hero-Nav"><a href="javascript: void(0);" id="clbcPromoPausePlay">Pause</a><div id="clbcPromoPager" /></div>');

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

    // Replace markup image with first image
    $('.clbc-Hero-Image', $slideshow).attr('src', slides[0].ImageUrl).removeClass('loading');

    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', blankImage).attr('alt', '').addClass("loading")*/
            $(img).attr('src', blankImage).attr('alt', '').addClass('loaded')
        );
    }

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

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


    // start slideshow
    $('.clbc-Hero-Cycle').cycle({
        fx: 'fade',
        startingSlide: 0,  // start on the slide that was in the markup 
        timeout: 10000,
        speed: 1000,
        pager: '#clbcPromoPager',
        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) {
        var slide = (initialLoad) ? curr : next;
        var slideNum = (initialLoad) ? opts.currSlide : opts.nextSlide;
        
        initialLoad = false;

        //var slideNum = ($(curr).attr('src') == blankImage) ? opts.currSlide : opts.nextSlide;

        if ($(slide).attr('src') == blankImage) {
            $slideshow.find('img:eq(' + (slideNum) + ')').attr('src', slides[slideNum].ImageUrl).removeClass('loading').show();
        }
    
        for (var j = 0; j < totalSlideCount; j++) {
            if (slides[j].ImageUrl == $(next).attr('src')) {
                $promoBlurb.html("<p class='title'>"+slides[j].Blurb+"</p>");
            }
        }
    };
    
};