Tons of bug fixing (annoying bugs at that) + modal dialog now has nex…

…t and previous buttons

css/main.css

@@ -180,3 +180,19 @@ a:visited {
 #search {
 	text-align:center;
 }
+
+.playerButton {
+	width: 30px;
+	height: 30px;
+	cursor: pointer;
+}
+
+#nextButton {
+	background: url(../img/arrows/next.png);
+	float: right;
+}
+
+#previousButton {
+	background: url(../img/arrows/previous.png);
+	float: left;
+}

js/main.js

@@ -34,6 +34,8 @@ window.fbAsyncInit = function () {
 	mainContainer = $("#main"),
         box = $("#box"),
         serviceSelect = $("#serviceSelect"),
+	nextButton = $("<div/>").attr({id :'nextButton', title: 'Next video'}).addClass('playerButton'),
+	previousButton = $("<div/>").attr({id :'previousButton', title: 'Previous video'}).addClass('playerButton'),
         lastCtx, // the last canvas context that we drew on
         bodyWidth = $('body').innerWidth() - $.getScrollbarWidth(),
 	elementInfo = pojo('icon', 'name', 'description', 'link'),
@@ -56,6 +58,7 @@ window.fbAsyncInit = function () {
 	serviceName = queryStringValues.service || SERVICE_DEFAULT,
 	matrices = matrixCollection(box, postWidth, postHeight, postsPerRow),
 	lastElementClicked,
+	lastDialogOpened,
 	userLink = {
 		youtube :'http://www.youtube.com/user/',
 		facebook :'http://www.facebook.com/'
@@ -278,40 +281,64 @@ window.fbAsyncInit = function () {
 		    videoContainer = $("<div/>").attr('id', 'youtubeEmbed'),
 		    link = userLink[serviceName] + element.poster.id, 
 		    postedBy = $("<p/>").css({ 'padding-top': 5, float: 'right' }).html('Posted by <a href="' + link + '" target="_blank">' + element.poster.name + '</a>'),
-		    postedDate = $("<p/>").addClass('post-date').html(currentService.formatTime(element.created));
+		    postedDate = $("<p/>").addClass('post-date').html(currentService.formatTime(element.created)),
+		    buttonContainer = $("<div/>"),
+		    next = nextButton.clone(),
+		    previous = previousButton.clone();
+
+		    next.click(function () {
+			    addVideoToModalDialog(lastDialogOpened, getNextVideo(), true);
+		    });
+
+		    previous.click(function () {
+			    addVideoToModalDialog(lastDialogOpened, getPreviousVideo(), true);
+		    });
+
+		buttonContainer.append(previous);
+		buttonContainer.append(next);
 
 		modalContents.append(videoContainer);
 		modalContents.append(postedBy);
 		modalContents.append(postedDate);
+		modalContents.append($("<div/>").addClass("toclear"));
+		modalContents.append(buttonContainer);
 
 		return modalContents;
+        }, getPreviousVideo = function () {
+		return matrices.getPreviousElement(lastElementClicked.index);
+        }, getNextVideo = function () {
+		return matrices.getNextElement(lastElementClicked.index);
         }, addVideoToModalDialog = function (dialog, element, autoPlay) {
+		    if (!element) {
+			return;
+		    }
+
 		    var videoID = youtubeEmbedBuilder.getVideoID(element.url);
 
-		    yPlayer.add(videoID, autoPlay, function () {
-			    var nextVideo = matrices.getNextElement(element.index);
+		    dialog.html('').append(constructVideoModalContents(element));
+		    dialog.dialog({title: element.name});
+		    lastElementClicked = element;
+		    yPlayer.add(videoID, autoPlay, function () { // Play the next video once this one finishes
+			    var nextVideo = getNextVideo();
 			    if (!nextVideo) { // This video was the last one
 				    return;
 			    }
 
-			    dialog.html('').append(constructVideoModalContents(nextVideo));
-			    dialog.dialog({title: nextVideo.name});
 			    addVideoToModalDialog(dialog, nextVideo, true);
 		    });
 	}, showVideoModalDialog = function (element, autoPlay) {
-		var dialog = constructVideoModalContents(element).dialog({
-			    title: element.name,
+		lastDialogOpened = constructVideoModalContents(element).dialog({
 			    modal: true,
 			    closeOnEscape: true,
 			    width: 420,
-			    height: 411,
+			    height: 441,
 			    resizable: false,
 			    open: function (){
 			    	addVideoToModalDialog($(this), element, autoPlay);
 			    },
 			    close: function () {
 				    lastElementClicked.actionDone = false; // reset it so that an action request can be sent next time this video is opened in the dialog again.
-				    dialog.remove();
+				    lastDialogOpened.remove();
 			    }
 		});
 
@@ -355,7 +382,6 @@ window.fbAsyncInit = function () {
             return;
         }
 
-	lastElementClicked = element;
 
 	showVideoModalDialog(element, false);
     });
@@ -387,6 +413,7 @@ window.fbAsyncInit = function () {
 
     currentService = getServiceFromName(serviceName);
 
+
     facebook.isLoggedIn(function (accessToken) {  /// TODO: this callback is not always being invoked?
 	facebook.setLoggedIn(accessToken);
 	if (!accessToken && serviceName === "facebook") { // user is trying to see videos from Facebook but is not logged in, so he can't

js/matrices.js

@@ -19,6 +19,12 @@ var matrixCollection = function (box, postWidth, postHeight, postsPerRow) {
 	generateIndex = function (matrixIndex, elementIndex) {
 	    return (matrixIndex << 8) + elementIndex;
 	},
+	applyIndexes = function (matrixIndex) {
+		var theMatrix = list[matrixIndex], i = 0, j = theMatrix.cells.length;
+		for (; i < j; ++i) {
+			theMatrix.cells[i].index = generateIndex(matrixIndex, i);
+		}
+	},
 	getElementFromIndex = function (index) {
 		var expandedIndex = expandIndex(index), thisMatrix = list[expandedIndex.matrixIndex];
 		if (!thisMatrix) {
@@ -31,22 +37,38 @@ var matrixCollection = function (box, postWidth, postHeight, postsPerRow) {
     return {
         push: function (m) {
             list.push(m);
+	    applyIndexes(list.length - 1);
         },
         elementAt: function (n) {
             return list[n];
         },
         modifyCells: function (n, newCells) {
             list[n].cells = newCells;
+	    applyIndexes(n);
         },
         length: function () {
             return list.length;
         },
+	getPreviousElement: function (index) {
+		var expandedIndex = expandIndex(index),
+		    matrixIndex = expandedIndex.matrixIndex,
+		    elementIndex = expandedIndex.elementIndex;
+
+		if (!elementIndex) { // the first element in the matrix
+			matrixIndex--;
+			elementIndex = list[matrixIndex].cells.length - 1;
+		} else {
+			elementIndex--;
+		}
+
+		return getElementFromIndex(generateIndex(matrixIndex, elementIndex));
+        },
 	getNextElement: function (index) {
 		var expandedIndex = expandIndex(index),
 		    matrixIndex = expandedIndex.matrixIndex,
 		    elementIndex = expandedIndex.elementIndex;
 
-		if (elementIndex === list[expandedIndex.matrixIndex].cells.length - 1) { // the last element in the matrix
+		if (elementIndex === list[matrixIndex].cells.length - 1) { // the last element in the matrix
 			matrixIndex++;
 			elementIndex = 0;
 		} else {
@@ -81,7 +103,7 @@ var matrixCollection = function (box, postWidth, postHeight, postsPerRow) {
 		    return;
 	    }
 
-	    elementUnderCoordinates.index = generateIndex(i, elementIndex);
+	    //elementUnderCoordinates.index = generateIndex(i, elementIndex);
             return elementUnderCoordinates;
         },
         getTotalHeight: getTotalHeight

js/youtubeEmbedBuilder.js

@@ -1,3 +1,4 @@
+// TODO: Apart from the methods that get the ID, this function is pretty much obsolete now, since I started building the videos with swfobject
 var youtubeEmbedBuilder = (function () {
         var isShortLink = function (link) {
             return link.indexOf('youtu\.be') >= 0; // TODO: use regular expressions for better matching
@@ -15,17 +16,6 @@ var youtubeEmbedBuilder = (function () {
         };
 
     return {
-        build: function (link, width, height) {
-            var embedLink = 'http://www.youtube.com/v/' + getVideoID(link),
-		container = $("<div/>").attr('id', 'youtubeEmbed'),
-                embed = $('<object id="youtubeEmbed" type="application/x-shockwave-flash" data="' + embedLink + '?version=3"/>').css({width: width, height: height});
-            embed.append($('<param name="movie" value="' + embedLink + '?version=3" />'));
-            embed.append($('<param name="allowFullScreen" value="true" />'));
-            embed.append($('<param name="wmode" value="transparent" />'));
-            embed.append($('<param name="allowscriptaccess" value="always" />'));
-	    //container.append(embed); // TODO: working on it
-            return container;
-        },
         isYoutubeLink: function (link) {
             if (isShortLink(link)) {
                 return true;