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

function cappPromo(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 = slides.length;
  var blurbTimeout;
  var $slideshow = $('.capp-Hero-Promo .capp-Hero-Cycle');

  var $promo = $('.capp-Hero-Promo');
  var $promoBlurb = $('.capp-Hero-Promo .capp-Hero-Body');
  
  $promo.append('<div class="capp-Hero-Nav"><div id="cappPromoPrev">&#60;</div><div id="cappPromoPager"></div><div id="cappPromoNext">&#62;</div></div>');

  $('#cappPromoPrev').hover(function() { $(this).addClass('hover') }, function() { $(this).removeClass('hover') });
  $('#cappPromoNext').hover(function() { $(this).addClass('hover') }, function() { $(this).removeClass('hover') });
  

  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).addClass("loading")
      );
  }


  // start slideshow
  $('.capp-Hero-Promo .capp-Hero-Cycle').cycle({
    fx: 'fade',
    startingSlide: 0,  // start on the slide that was in the markup 
    timeout: 10000,
    speed: 1000,
    prev: '#cappPromoPrev',
    next: '#cappPromoNext',
    pager: '#cappPromoPager',
    before: onBefore,
    after: onAfter,
    prevNextClick: onPrevNextClick,
    pagerClick: onPagerClick
  });


  function onPrevNextClick(isNext, zeroBasedSlideIndex, slideElement) {
    $slideshow.cycle('pause');
  };

  function onPagerClick(zeroBasedSlideIndex, slideElement) {
    $slideshow.cycle('pause');
  };

  function onAfter(curr, next, opts, fwd) {
    for (var j = 0; j < totalSlideCount; j++) {
      if (slides[j].imageUrl == $(next).attr('src')) {
        // if first run, don't fade in and remove 'first' class.
        if (!$promoBlurb.hasClass('first')) {
          $promoBlurb.fadeTo(0, 0,
            (slides[j].blurbLocation == "Right"
              ? function() {
                $(this).hide().addClass("capp-Hero-Body-Right");
              }
              : function() {
                $(this).hide().removeClass("capp-Hero-Body-Right");
              }
            )
          );
              //          $promoBlurb.html(slides[j].blurb).decHTML();
          var s = '$(".capp-Hero-Promo .capp-Hero-Body").fadeTo(0, 0).html("' + slides[j].blurb + '").decHTML().show().fadeTo(1000, ($.browser.msie ? 0.85 : 1))';
          blurbTimeout = setTimeout(s, 1500);
        } else {
          $promoBlurb.removeClass('first');
        }
        break;
      }
    }
  };

  function onBefore(curr, next, opts, fwd) {
    clearTimeout(blurbTimeout);
    $promoBlurb.stop();
    $slideshow.removeClass("error");

    // if first run, don't fade out.
    if (!$promoBlurb.hasClass('first')) {
      $promoBlurb.fadeTo(1000, 0);
    }
  
    if ($(next).hasClass('error')) {
      $slideshow.removeClass("loading");
      $slideshow.addClass("error");
      $(next).css("visibility", "hidden");
    } else if ($(next).hasClass('loading')) {
      $slideshow.addClass("loading");
    } else {
      $slideshow.removeClass("loading");
    }
  };
};