function PlaylistController(playlist, sourceLogo, videoDate, caption, thumbsContainer, scrollbarContainer, videoController) {
    this.div = playlist;
    this.videoController = videoController;
    this.sourceLogo = sourceLogo;
    this.date = videoDate;
    this.caption = caption;
    this.thumbsContainer = thumbsContainer;
    this.scrollbarContainer = scrollbarContainer;
    this.thumbs = new Array();
    this.captions = new Array();
    this.currentVideoIndex = 0;
    this.hasStarted = false;
    this.isScrolling = 0;
    this.initializePlaylist();
    this.bitrate="3G";
  };

  PlaylistController.prototype.initializePlaylist = function()
  {

    var context = this;
    var top = 0;
    $.each(H5Settings.playlist.videos, function(index, video)
    {
      if (index < H5Settings.playlist.videos.length)
      {
        var thumb = $('<div id="html5PlaylistVideoThumb' + index + '" class="html5PlaylistVideoThumb"></div>');
        var thumbImage = $('<img src="' + video.thumb + '" id="html5PlaylistVideoThumb' + index + 'Image" class="html5PlaylistVideoThumbImage"/>');
        var caption = $('<div id="html5PlaylistVideoThumb' + index + 'Caption" class="html5PlaylistVideoThumbCaption"></div>');
        var captionText = $('<div class="html5PlaylistVideoThumbCaptionText ipadText">' + video.headline + '</div>');
        var captionMask = $('<div id="html5PlaylistVideoThumb' + index + 'CaptionMask" class="html5PlaylistVideoThumbCaptionMask"></div>');

        caption.append(captionText);
        thumb.bind("click", function()
        {
          context.ScrollToIndex(index);
          context.loadVideo(context, index);
        });
        thumb.append(thumbImage);
        context.thumbsContainer.append(thumb);
        context.thumbsContainer.append(caption);
        context.thumbsContainer.append(captionMask);
        context.thumbs.push(thumb);
        context.captions.push(caption);

        var left = parseInt(thumb.css("width").replace(/px/,""));

        thumb.css("top", top);
        caption.css("top", top);
        captionMask.css("top", top);

        top += parseInt(thumb.css("height").replace(/px/,""));
        top += parseInt(thumb.css("margin-bottom").replace(/px/, ""));
      }
    });
    this.thumbsContainer.css("height", top);
  };

  PlaylistController.prototype.handleStateChanged = function(state)
  {
    switch (state)
    {
      case VideoState.ENDED:
        this.ScrollToIndex(this.currentVideoIndex + 1);
        this.loadVideo(this, this.currentVideoIndex + 1);
        break;
      case VideoState.LOADING:
        break;
      case VideoState.LOADED:
        break;
      case VideoState.PLAY:
        break;
      case VideoState.PAUSED:
        break;
    }
  };

  PlaylistController.prototype.loadVideo = function(context, index)
  {
    this.hasStarted = false;
    this.bitRate=this.videoController.bitrate;
    if (index < H5Settings.playlist.videos.length
      && index < context.thumbs.length
      && index < context.captions.length)
    {
      /* remove the now/next labels from the video thumbs */
      context.thumbs[context.currentVideoIndex].children("span").remove();
      if (context.currentVideoIndex + 1 < context.thumbs.length)
      {
        context.thumbs[context.currentVideoIndex + 1].children("span").remove();
      }

      /* update the current video index */
      context.currentVideoIndex = index;

      /* get a handle to the current video for ease of coding */
      var video = H5Settings.playlist.videos[context.currentVideoIndex];

      // We want ellipsis after a certain number of words
      var cap = "";
      var words = video.caption.split(" ");

      if (words.length > 25)
      {
        for (var i = 0; i < 25; i++) cap += words[i] + " ";
          cap += "...";
      }
      else
      {
        cap = video.caption;
      }

      /* Set the caption */
      context.caption.html(cap);

      /* get the prefix to use for the title */
      var titlePrefix = (H5Settings.titlePrefix == undefined || H5Settings.titlePrefix == null ) ? "" : H5Settings.titlePrefix;

      /* Set the window title */
  try{
   if (titlePrefix!=""){
       window.parent.document.title = titlePrefix + video.headline;
   }
  }
  catch(e){
  //noop
  }

      /* Set the date (if it's supposed to be shown) */
      if (H5Settings.playlist.videos[context.currentVideoIndex].hideDate.toLowerCase() == "false") {
        context.date.html(H5Settings.playlist.videos[index].prettyDate);
      }

      /* Set the video source on the video controller */
      context.videoController.setSource(
          video.videoUrls.high,
          video.videoUrls.low,
          video.docid,
          video.pg,
          video.isLive);


      /* Set the source skin */
      H5Settings.playlist.videos[index].sourceSkin(function(skin) {
      
      /*
        context.sourceLogo.css("background-repeat", "no-repeat");
        context.sourceLogo.css("background-image", "url('" + skin.brand + "')");
        */
        if (skin.brand){
               context.sourceLogo.html("<img src='"+skin.brand+"' />");
        }
        
        context.sourceLogo.bind("click", function(event) {
   
        var callback = function(sourceUrl) {
            window.open(sourceUrl, "_top");
          };
          video.sourceUrl(callback);
        });


        if (H5Settings.useBackgroundImage) {
          context.div.css("background-image", "url('" + H5Settings.skinBack + "')");
          context.div.css("background-repeat", "no-repeat");
        }
        else
        {
          context.div.css("background-image", "url('" + skin.sourceBackground + "')");
          context.div.css("background-repeat", "no-repeat");
        }


      });

      var now = $('<span class="html5PlaylistVideoThumbTitle">Now</span>');
      var next = $('<span class="html5PlaylistVideoThumbTitle">Next</span>');
      context.thumbs[context.currentVideoIndex].append(now);
      if (context.currentVideoIndex + 1 < context.thumbs.length) {
        context.thumbs[context.currentVideoIndex + 1].append(next);
      }

    }
  };

  PlaylistController.prototype.increment = function(current, duration)
  {

    // we only want to start the report when the video first starts
    if ((!this.hasStarted||(this.videoController.bitrate!=this.bitrate))&&(current>0))
    {

      this.bitrate=this.videoController.bitrate;
      this.hasStarted = true;
      H5Settings.report.start(this.currentVideoIndex, this.videoController.bitrate);
    }
  };

  PlaylistController.prototype.decrement = function(current, duration)
  {
  };

  PlaylistController.prototype.ApplicationInitialized = function()
  {
    this.loadVideo(this, this.currentVideoIndex);
  };

  PlaylistController.prototype.ScrollToIndex = function(index) {
    var thumbHeight = this.GetThumbnailHeight();
    var currentPosition = parseInt($(this.thumbsContainer).css("top"));
    var desiredPosition = thumbHeight * index;
    var distance = Math.abs(currentPosition) - Math.abs(desiredPosition);
    this.ScrollListByY(distance);
  };

  PlaylistController.prototype.ScrollListByY = function(offset)
  {
    /* to calculate the bottom we sum the height of each thumbail in the list excluding the last thumbail */
    /* bottom needs to be a negative number */
    var bottom = 0 - (this.GetThumbnailHeight() * (this.thumbs.length - 1));
    var currentTop = parseInt($(this.thumbsContainer).css("top"));

    /* offset > 0 means we're scrolling towards the top of the list */
    var newTop = (offset > 0) ? currentTop + offset : currentTop - Math.abs(offset);

    /* make sure we don't scroll above the first thumb */
    if(newTop > 0)
    {
      newTop = 0;
    }

    /* make sure we don't scroll past the last thumb */
    if(newTop < bottom)
    {
      newTop = bottom;
    }

    $(this.thumbsContainer).css("top", newTop);
  };

  PlaylistController.prototype.GetThumbnailHeight = function()
  {
    if(this.thumbs.length > 0)
    {
      var height = parseInt($(this.thumbs[0]).css("height").replace(/px/,""));
      var margin = parseInt($(this.thumbs[0]).css("margin-bottom").replace(/px/,""));
      return height + margin;
    }
    return 0;
  };

  PlaylistController.prototype.GetCaptionHeight = function()
  {
    if(this.captions.length > 0)
    {
      var height = parseInt($(this.captions[0]).css("height").replace(/px/,""));
      return height;
    }
    return 0;
  };

  PlaylistController.prototype.touchHandler = function(event)
  {
    if ( event.type == "touchstart" ) {
      /* if there is any scrolling still going we need to stop it */
      $(this.thumbsContainer).stop();
      this.ScrollY = event.targetTouches[0].pageY;
      this.ScrollMoves = 0;
      this.ScrollTotalDistance = 0;
    } else if ( event.type == "touchmove" ) {
      event.preventDefault();
      var curX = event.targetTouches[0].pageX;
      var curY = event.targetTouches[0].pageY;
      var distance = curY - this.ScrollY;
      this.ScrollListByY(distance);
      this.ScrollY = curY;
      /* keep some metrics for emulating a flick */
      this.ScrollDirection = (distance > 0) ? 1 : -1;
      this.ScrollMoves++;
      this.ScrollTotalDistance += Math.abs(distance);
    } else if ( event.type == "touchend" ) {
      /* Determine how far to keep scrolling after the user has finished the swipe */
      /* in order to emulate a flick */
      var averageDistance = (this.ScrollTotalDistance / this.ScrollMoves);
      averageDistance = (this.ScrollDirection > 0) ? "+=" + (averageDistance * 7) : "-=" + (averageDistance * 7);

      var context = this;
      $(this.thumbsContainer).animate({top:averageDistance}, 700, "linear", function() { context.ScrollListByY(0) });
    }
};