// load all ratings as soon as the dom is ready
Event.observe(document, 'dom:loaded', loadAllRatings);

/**
 * Finds all episode container elements in the dom
 * @return array of elements
 */
function findAllEpisodeContainers() {
  var containers = [];

  // #episodeInfo is the current epsiode, at the top of the page
  containers.push($('episodeInfo'));

  // #showDashboard has "full episodes" and "video extras"
  var clips = $('showDashboard').select('.episodeListing');
  for (var i=0, numClips = clips.length; i<numClips; i++) {
    containers.push(clips[i]);
  }

  return containers;
}

/**
 * Extract an episode id from an episode container
 * @param element Episode container
 * @return string Episode id
 */
function extractIdFromEpisodeContainer(container) { 
  var domId = container.id;
  var episodeId = false;

  // case: Full Episodes
  if (domId.indexOf('clip') == 0) {
    episodeId = domId.substring(4, domId.length);
  }
  // case: Video Extras
  else if (domId.indexOf('extra') == 0) {
    episodeId = domId.substring(5, domId.length);
  }
  // case: Current Episode
  else if (domId == 'episodeInfo') {
    episodeId = $('VideoID').value;
  }

  return episodeId;
}

/**
 * Load ratings for all episodes on the page
 */
function loadAllRatings() {
  var containers = findAllEpisodeContainers();
  var episodeIds = [];
  var containerRefs = [];

  // make a list of episode ids
  for (var i=0, numContainers=containers.length; i<numContainers; i++) {
    episodeIds[i] = extractIdFromEpisodeContainer(containers[i]);
    
    // link episode ids to containers
    containerRefs.push({episodeId: episodeIds[i], elm: containers[i]});
  }

  // do ajax request
  var request = new Ajax.Request('/scripts/ratings_rpc.php', {
    method:'get',
	parameters: {episodes: episodeIds.toJSON()},
	onSuccess: function(transport){

	// eval JSON response
	eval('var ratingData = '+transport.responseText);
	
	// set all the ratings
	for (var i=0, numContainers=containerRefs.length; i<numContainers; i++) {
	  var data = ratingData[containerRefs[i].episodeId];
	  if (!data) continue;
	  //console.info('setRating', containerRefs[i].elm, ratingData[containerRefs[i].episodeId]);
	  setRating(containerRefs[i].elm, ratingData[containerRefs[i].episodeId]);
	}
      },
	onFailure: function(){ }
    });
}

/**
 * Sets rating values on the page
 * @param element Container
 * @param object Rating data
 */
function setRating(container, ratingData) {
  // get stars container
  var starsContainer = container.select('.rating');
  if (starsContainer.length != 1) return false;
  else starsContainer = starsContainer[0];
  
  // get count element
  var countElm = container.select('.ratingsCount');
  if (countElm.length != 1) return false;
  else countElm = countElm[0];

  // set the rating count
  countElm.innerHTML = ratingData.rating_count;

  // color the stars
  var activeStarSrc =  '/images/star_white.png';
  var inactiveStarSrc = '/images/star_gray.png'
  var starWalker = starsContainer.firstChild;
  var i=1;
  do {
    // ignore non-images
    if (starWalker.nodeName != 'IMG') continue;

    // ignore the 'dash' img element
    // TODO: the dash should really be a background image applied to
    // the ratings div.  Once that's done we can remove the following line
    if (i > 5) continue;    

    // set the image src for the star
    starWalker.src = (i <= ratingData.avg_rating)
      ? activeStarSrc
      : inactiveStarSrc;
    
    // move to the next image
    i++;
  } while (starWalker = starWalker.nextSibling); 
}