$j(function() {
  hookHideUsersOtherAnnouncements();
  hookScrollableInitialiser();
  if(typeof(gradeActionUrl) != 'undefined') {
    hookGradeAnnouncementIcons();
  }
});

/** Hook for initializing the scrollable element. */
function hookScrollableInitialiser() {
  var scrollableInitialised = false;
  $j("#showUsersOtherAnnouncements").bind("click", function(e) {
    // Add a waiting animation?
    $j("#showUsersOtherAnnouncements").hide();
    $j("#hideUsersOtherAnnouncements").show();

    if(scrollableInitialised == false) {
      var scrollableContainer = "div.userAnnouncementsContainer";
      initialiseScrollable(scrollableContainer);
      scrollableInitialised = true;
      var api = $j(scrollableContainer).scrollable();
      $j(scrollableContainer + " div.items").load(userAnnouncementsUrl, function() {
        if(api.getItems().length <= api.getConf().size) {
          $j("a.next").addClass("disabled");
        }
      });
    }
    $j("div#userAnnouncementsOuterContainer").show();
  });  
}

function hookHideUsersOtherAnnouncements() {
  $j("#hideUsersOtherAnnouncements").bind("click", function(e) {
    $j("div#userAnnouncementsOuterContainer").hide();
    $j("#hideUsersOtherAnnouncements").hide();
    $j("#showUsersOtherAnnouncements").show();
  }); 
}

function initialiseScrollable(element) {
  $j("div.userAnnouncementsContainer").scrollable({
    size: 2,
    items: ".items",
    prev: ".prev",
    next: ".next",
    disabledClass: "disabled",          
    clickable: false,
    onSeek: function() {
      var api = this;
      if(this.getItems().length < totalCount && 
          (((this.getPageIndex() + 1) * this.getConf().size) >= this.getItems().length)) {
        $j.get(nextLink, function(data) {
          api.getItemWrap().append(data);
          if(api.getItems().length % api.getConf().size != 0) {
            totalCount = api.getItems().length;
          }
          // Artificially seeking current spot to refresh navis.
          api.seekTo(api.getIndex());
        });
      }
    }
  });
}

function hookGradeAnnouncementIcons() {
  var positiveElement = $j("#positiveGrade");
  var notSoPositiveElement = $j("#notSoPositiveGrade");
  positiveElement.bind("click", function(e) {
    unbindClickHover([notSoPositiveElement, positiveElement]);
    gradeAnnouncement(positiveElement, notSoPositiveElement, true);
    hookGradeAnnouncementIcons();
  })
  notSoPositiveElement.bind("click", function(e) {
    unbindClickHover([notSoPositiveElement, positiveElement]);
    gradeAnnouncement(notSoPositiveElement, positiveElement, false);
    hookGradeAnnouncementIcons();
  });
}

/** Loops through the parameter array and unbinds click and hover. */
function unbindClickHover(el) {
  for(var index = 0; index < el.length; index++)  {
    el[index].unbind("click");
    el[index].unbind("hover");
  }
}

/** Giving the grade. */
function gradeAnnouncement(chosen, unchosen, isPositive) {
  $j.post(gradeActionUrl, { announcementId: announcementId, isPositive: isPositive }, 
      function(data) {
        updateThumbRating(data.gradePositive, data.gradeNegative);
        updateThumbs(chosen, unchosen, isPositive);
      }, "json"
  );
}

function updateThumbRating(positives, negatives) {
  $j('#thumbsPositive').html(positives);
  $j('#thumbsNegative').html(negatives);
}

/** Update the icons corresponding with what was clicked. */
function updateThumbs(chosen, unchosen, isPositive) {
  if(isPositive) {
    chosen.removeClass("thumbUp").addClass("thumbUpEnabled");
    unchosen.removeClass("thumbDownEnabled").addClass("thumbDown");
  } else {
    chosen.removeClass("thumbDown").addClass("thumbDownEnabled");
    unchosen.removeClass("thumbUpEnabled").addClass("thumbUp");
  }
}