navigate tips

app/assets/javascripts/outfits/edit.js

@@ -1362,9 +1362,29 @@ View.PrankColorMessage = function(wardrobe) {
 
 View.Tips = function() {
   var wrapper = $('#tips');
+
   var tips = wrapper.find('li');
   var index = Math.floor(Math.random() * tips.length);
   tips.eq(index).show();
+
+  for (var i = 0; i < tips.length; i++) {
+    var prev = i == 0 ? tips.eq(tips.length - 1) : tips.eq(i - 1);
+    var curr = tips.eq(i);
+    var next = i < tips.length - 1 ? tips.eq(i + 1) : tips.eq(0);
+    (function(prev, curr, next) {
+      curr.find('a.prev').click(function(e) {
+        e.preventDefault();
+        curr.hide();
+        prev.show();
+      });
+
+      curr.find('a.next').click(function(e) {
+        e.preventDefault();
+        curr.hide();
+        next.show();
+      });
+    })(prev, curr, next);
+  }
 }
 
 var userbar_sessions_link = $('#userbar a:last');

app/assets/stylesheets/outfits/_edit.sass

@@ -275,6 +275,14 @@ body.outfits-edit
       padding-left: image-width("tip.png") + 12px
       width: 400px
 
+      footer
+        color: $soft-text-color
+        font-size: 85%
+        text-align: right
+
+        a, span
+          margin-left: .5em
+
   #preview-search-advanced
     display: none
 

app/views/outfits/edit.html.haml

@@ -109,10 +109,15 @@
         %ul#preview-search-results
         #tips
           %ul
-            - WardrobeTip.by_index.each do |tip|
+            - tips = WardrobeTip.by_index.all
+            - tips.each_with_index do |tip, index|
               %li
                 %h3 Did you know?
                 %div= md tip.body
+                %footer
+                  %a.prev{href: 'javascript:void(0)'} ← Prev
+                  %span Tip #{index + 1} of #{tips.size}
+                  %a.next{href: 'javascript:void(0)'} Next →
     %form#preview-search-advanced
       %header
         %h2= t '.search.advanced.header'