function nextPage() {	
	showNext = true;
	showPrevious = true;
	
	currentPage = currentPage + 1;	
	firstVideo = (paginationLength * (currentPage - 1) ); //off by one
	lastVideo = firstVideo + ( paginationLength ); //off by one
	
	if ( lastVideo > numberOfVideos ) { lastVideo = numberOfVideos; }
	if (lastVideo == numberOfVideos) { showNext = false; }

	drawTable(firstVideo, lastVideo, showPrevious, showNext);
}

function previousPage() {
	showNext = true;
	showPrevious = true;
	currentPage = currentPage - 1;
	firstVideo = (paginationLength * (currentPage - 1) ); //off by one
	lastVideo = firstVideo + ( paginationLength ); //off by one

	if ( lastVideo > numberOfVideos ) { lastVideo = numberOfVideos; }
	if (firstVideo == 0) { showPrevious = false; }

	drawTable(firstVideo, lastVideo, showPrevious, showNext );
}

function drawTable(start, finish, showPrevious, showNext ) {
	selected = "byDate";
	if ( jsonURL == "/armynavy/YouTube?sort=viewsDesc") {
		selected = "byViews";
	} else if ( jsonURL == "/armynavy/YouTube?sort=ratingsDesc") {
		selected = "byRatings";
	}
			
	$.getJSON(jsonURL , function(json){
		numberOfVideos = json.videos.length;
		numberOfPages = Math.ceil( numberOfVideos / 4 );
		
		newContents = "<table id=\"videoTable\">";
		newContents = newContents + "<tr><td><div id=\"spirtNav\"><form>";
		newContents = newContents + "<select id=\"sortBy\">";
		
		newContents = newContents + "<option value=\"#\"";
		if (selected=="byDate") { newContents = newContents + " selected "; }
		newContents = newContents + ">By Date</option>";
		newContents = newContents + "<option value=\"#\"";
		if (selected=="byViews") { newContents = newContents + " selected "; }
		newContents = newContents + ">By Views</option>";
		newContents = newContents + "<option value=\"#\"";
		if (selected=="byRatings") { newContents = newContents + " selected "; }
		newContents = newContents + ">By Ratings</option>";
		
		newContents = newContents + "</select>";
		newContents = newContents + "</form></div></tr></td>"; 
			
		for(i=start; i < finish; i++) {
			newContents=newContents + "<tr>";
			newContents=newContents + "<td>";
			newContents=newContents + "<a href=\"/fan-base/spirit-spots?id=" + json.videos[i].id + "\"><img class=\"videoThumbnail\" height=\"20%\" width=\"20%\" src=\"" + json.videos[i].thumbnail + "\" alt=\"\" /></a>";
			newContents=newContents + "<div class=\"videoDescription\">";
			newContents=newContents + "<h4><a href=\"/fan-base/spirit-spots?id=" + json.videos[i].id + "\">" + json.videos[i].title + "</a><span class=\"rating\">";

			if ( Math.round(json.videos[i].rating) == "0" ) {
				newContents=newContents + "<img src=\"/armynavy-static/images/fanbase/no-stars.gif\" alt=\"Zero of Five Stars\" />";
			} else if ( Math.round(json.videos[i].rating) == "1" ) {
				newContents=newContents + "<img src=\"/armynavy-static/images/fanbase/one-star.gif\" alt=\"One of Five Stars\" />";
			} else if ( Math.round(json.videos[i].rating) == "2" ) {
				newContents=newContents + "<img src=\"/armynavy-static/images/fanbase/two-stars.gif\" alt=\"Two of Five Stars\" />";
			} else if ( Math.round(json.videos[i].rating) == "3" ) {
				newContents=newContents + "<img src=\"/armynavy-static/images/fanbase/three-stars.gif\" alt=\"Three of Five Stars\" />";
			} else if ( Math.round(json.videos[i].rating) == "4" ) {
				newContents=newContents + "<img src=\"/armynavy-static/images/fanbase/four-stars.gif\" alt=\"Four of Five Stars\" />";
			} else {
				newContents=newContents + "<img src=\"/armynavy-static/images/fanbase/five-stars.gif\" alt=\"Five of Five Stars\" />";
			}
			newContents=newContents + "<br/>" + json.videos[i].views + " views";
			newContents=newContents + "</span></h4>";
			newContents=newContents + "<p class=\"uploader\">Created by " + json.videos[i].uploader + " about ago</p>";
			newContents=newContents + "<p class=\"description\">" + json.videos[i].description + "</p>";
			newContents=newContents + "</div>";
			newContents=newContents + "</td>";
			newContents=newContents + "</tr>";
			newContents=newContents + "<tr><td><img src=\"/armynavy-static/images/fanbase/dotted.gif\" alt=\"Seperator\" /></td></tr>"; 				
		}
		if (start==0) {
			newContents = newContents + "<tr><td>Showing Page " + currentPage + " of " + numberOfPages + " - <a href=\"javascript:void(0);\" onClick=\"nextPage()\" >next</a>";
		} else {
			if ( showPrevious == true || showNext == true ) {
				newContents = newContents + "<tr><td>Showing Page " + currentPage + " of " + numberOfPages + " ( <a href=\"javascript:void(0);\" onClick=\"previousPage()\" >previous</a> - <a href=\"javascript:void(0);\" onClick=\"nextPage()\" >next</a> )</td></tr>";
			} else if ( showPrevious == true || showNext == false ) {
				newContents = newContents + "<tr><td>Showing Page " + currentPage + " of " + numberOfPages + " ( <a href=\"javascript:void(0);\" onClick=\"previousPage()\" >previous</a> - next )</td></tr>";
			} else if ( currentPage == numberOfPages ) {
				newContents = newContents + "<tr><td>Showing Page " + currentPage + " of " + numberOfPages + " ( previous - <a href=\"javascript:void(0);\" onClick=\"nextPage()\" >next</a> )</td></tr>";
			} 
		}

		newContents = newContents + "</table>";
		$("#videoTable").replaceWith( newContents );
		$("#sortBy").bind("change", function(e) {
			selected = $('#sortBy :selected').text();
			if (selected == "By Date") {
				jsonURL = "/armynavy/YouTube";
			} else if (selected == "By Views") {
				jsonURL = "/armynavy/YouTube?sort=viewsDesc";
			} else if (selected == "By Ratings") {
				jsonURL = "/armynavy/YouTube?sort=ratingsDesc";
			}
			currentPage = 1;
			numberOfVideos = 0;
			numberOfPages = 0;
			drawTable(0, 4, false, true);
		});
	});		
}