var VideoRelated = function(item){
  var uuid = item.className.match(/uuid\-([\w\-]+)/)[1];
  attachVideoPage($(item).find('div.videoPage')[0]);
  attachTopicNav($(item).find('.topicNav')[0], $(item).find('.topicPage'));

  function attachVideoPage(el){
    var $el = $(el);
    var aPrev = $el.find('a.prevLink');
    if (aPrev) aPrev.bind('click', function(){
      $el.css('display', 'none');
      $el.prev().css('display', '');
      return false;
    });
    var aNext = $el.find('a.nextLink');
    if (aNext) aNext.bind('click', function(){
      var $nextEl = $el.next();
      if ($nextEl.length){
        $el.css('display', 'none');
        $nextEl.css('display', '');
      } else {
        var token = this.href.match(/nextPageToken=([^&]+)/)[1];
        $nextEl = $('<div/>').addClass('videoPage').css('display', 'none');
        $nextEl.appendTo(el.parentNode).load(contextPath + '/ajaxupdate?paragraphUUID=' + uuid + '&nextPageToken=' + token, undefined, function(){
          $el.css('display', 'none');
          $nextEl.css('display', '');
          attachVideoPage($nextEl[0]);
        });
      }
      return false;
    });
  }

  var topicPageIndex = 0;

  function attachTopicNav(nav, pages){
    var $nav = $(nav);
    var aPrev = $nav.find('a.prevLink');
    var aNext = $nav.find('a.nextLink');
    aPrev.bind('click', function(){
      $(pages[topicPageIndex--]).css('display', 'none');
      if (topicPageIndex == 0) aPrev.css('display', 'none');
      $(pages[topicPageIndex]).css('display', '');
      if (topicPageIndex == pages.length - 2) aNext.css('display', '');
      return false;
    });
    aNext.bind('click', function(){
      $(pages[topicPageIndex++]).css('display', 'none');
      if (topicPageIndex == pages.length - 1) aNext.css('display', 'none');
      $(pages[topicPageIndex]).css('display', '');
      if (topicPageIndex == 1) aPrev.css('display', '');
      return false;
    });
  }
}

$(document).ready(function(){
  $('.videoRelated').each(function(i, item) {
    VideoRelated(item);
  });
});