Previous and next arrows

css/layout.css

@@ -355,6 +355,31 @@ body.video-loading #loading {
     position: relative;
 }
 
+#prev-button, #next-button {
+    color:#fff;
+    position:absolute;
+    top:calc(50% - 75px);
+}
+
+#prev-button img, #next-button img {
+    height:100px;
+    opacity:0.05;
+    transition: opacity 0.5s;
+    -webkit-transition: opacity 0.5s;
+}
+
+#prev-button img:hover, #next-button img:hover {
+    opacity:0.5;
+}
+
+#prev-button {
+    left: -100px;
+}
+
+#next-button {
+    right:-100px;
+}
+
 #video-container.sponsored #video-actions, #sponsored-actions {
     display: none;
 }

index.php

@@ -113,6 +113,8 @@ Globals = {
         <div id="video-embed" class="grid-100 mobile-grid-100">
 
         </div>
+        <a id="prev-button" href="javascript:void(0);"><img src="img/arrow-prev.png" /></a>
+        <a id="next-button" href="javascript:void(0);"><img src="img/arrow-next.png" /></a>
         <div id="video-meta">
           <div id="video-description" class="grid-70 mobile-grid-75">
             <span id="video-sponsored-label" class="sponsored">SPONSORED </span>

js/tv.js

@@ -179,10 +179,10 @@ var RedditTV = Class.extend({
 			window.open($(this).attr('href'));
 		});
 		$('#next-button').click(function() {
-			loadVideo('next');
+			self.loadVideo('next');
 		});
 		$('#prev-button').click(function() {
-			loadVideo('prev');
+			self.loadVideo('prev');
 		});
 		$('#video-list').bind('mousewheel', function(event,delta){
 			// $(this).animate({ scrollLeft: this.scrollLeft - (delta * 30) }, 100);