added slider to getting started flow

app/views/layouts/application.html.haml

@@ -30,6 +30,7 @@
     = javascript_include_tag 'fileuploader'
 
     = javascript_include_tag 'view', 'image_picker', 'stream'
+    = javascript_include_tag 'easySlider1.7'
 
     = render 'js/websocket_js'
 

app/views/users/getting_started.html.haml

@@ -10,7 +10,10 @@
   .description
     Do the stuff below to further complete some things.
 
-%h2
+#slider
+  %ul
+    %li
+      %h2
         %u
           Edit your profile
         ➔
@@ -18,76 +21,73 @@
         Find your friends
 
 
-%h3
+      %h3
         Your Profile
         .description
           This info will be available to whomever you connect with on Diaspora.
 
-%h4
+      %h4
         Your name
         = text_field_tag :first_name, nil, :placeholder => "First name"
         = text_field_tag :last_name, nil, :placeholder => "Last name"
 
-%h4
+      %h4
         Your birthday
         %br
         = select_date
 
-%h4
+      %h4
         Your bio
         = text_area_tag :bio, nil, :placeholder => "Fill me out"
 
-%h4
+      %h4
         Your photo
         %br
         = file_field_tag :photo
 
 
-%br
+    %li
-%br
+      %h2
-%br
-%h2
         Edit your profile ➔
         %u
           Define your aspects
         ➔
         Find your friends
 
-%h3
+      %h3
         Your aspects
         .description
           These will be blah blah blah blah and some stuff.
 
-%h4
+      %h4
         Aspect name
         = text_field_tag :aspect_name, nil, :placeholder => "New aspect"
 
-%br
+
-%br
+    %li
-%br
+      %h2
-%h2
         Edit your profile ➔
         Define your aspects ➔
         %u
           Find your friends
 
 
-%h3
+    %h3
       Your friends
       .description
         Find your friends on Diaspora, Facebook, or send them an invite via email.
 
-.span-5
+    .span-5
       %h4
         On Diaspora
         = text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle"
 
-.span-5
+    .span-5
       %h4
         On Facebook
         = text_field_tag :facebook_handle, nil, :placeholder => "Name"
 
-.span-5
+    .span-5
       %h4
         Invite
         = text_field_tag :email, nil, :placeholder => "Email", :type => "email"

public/javascripts/easySlider1.7.js

@@ -0,0 +1,226 @@
+/*
+ * 	Easy Slider 1.7 - jQuery plugin
+ *	written by Alen Grakalic	
+ *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
+ *
+ *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
+ *	Dual licensed under the MIT (MIT-LICENSE.txt)
+ *	and GPL (GPL-LICENSE.txt) licenses.
+ *
+ *	Built for jQuery library
+ *	http://jquery.com
+ *
+ */
+ 
+/*
+ *	markup example for $("#slider").easySlider();
+ *	
+ * 	<div id="slider">
+ *		<ul>
+ *			<li><img src="images/01.jpg" alt="" /></li>
+ *			<li><img src="images/02.jpg" alt="" /></li>
+ *			<li><img src="images/03.jpg" alt="" /></li>
+ *			<li><img src="images/04.jpg" alt="" /></li>
+ *			<li><img src="images/05.jpg" alt="" /></li>
+ *		</ul>
+ *	</div>
+ *
+ */
+
+(function($) {
+
+	$.fn.easySlider = function(options){
+	  
+		// default configuration properties
+		var defaults = {			
+			prevId: 		'prevBtn',
+			prevText: 		'Previous',
+			nextId: 		'nextBtn',	
+			nextText: 		'Next',
+			controlsShow:	true,
+			controlsBefore:	'',
+			controlsAfter:	'',	
+			controlsFade:	true,
+			firstId: 		'firstBtn',
+			firstText: 		'First',
+			firstShow:		false,
+			lastId: 		'lastBtn',	
+			lastText: 		'Last',
+			lastShow:		false,				
+			vertical:		false,
+			speed: 			800,
+			auto:			false,
+			pause:			2000,
+			continuous:		false, 
+			numeric: 		false,
+			numericId: 		'controls'
+		}; 
+		
+		var options = $.extend(defaults, options);  
+				
+		this.each(function() {  
+			var obj = $(this); 				
+			var s = $("li", obj).length;
+			var w = $("li", obj).width(); 
+			var h = $("li", obj).height(); 
+			var clickable = true;
+			obj.width(w); 
+			obj.height(h); 
+			obj.css("overflow","hidden");
+			var ts = s-1;
+			var t = 0;
+			$("ul", obj).css('width',s*w);			
+			
+			if(options.continuous){
+				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
+				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
+				$("ul", obj).css('width',(s+1)*w);
+			};				
+			
+			if(!options.vertical) $("li", obj).css('float','left');
+								
+			if(options.controlsShow){
+				var html = options.controlsBefore;				
+				if(options.numeric){
+					html += '<ol id="'+ options.numericId +'"></ol>';
+				} else {
+					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
+					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
+					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
+					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
+				};
+				
+				html += options.controlsAfter;						
+				$(obj).after(html);										
+			};
+			
+			if(options.numeric){									
+				for(var i=0;i<s;i++){						
+					$(document.createElement("li"))
+						.attr('id',options.numericId + (i+1))
+						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
+						.appendTo($("#"+ options.numericId))
+						.click(function(){							
+							animate($("a",$(this)).attr('rel'),true);
+						}); 												
+				};							
+			} else {
+				$("a","#"+options.nextId).click(function(){		
+					animate("next",true);
+				});
+				$("a","#"+options.prevId).click(function(){		
+					animate("prev",true);				
+				});	
+				$("a","#"+options.firstId).click(function(){		
+					animate("first",true);
+				});				
+				$("a","#"+options.lastId).click(function(){		
+					animate("last",true);				
+				});				
+			};
+			
+			function setCurrent(i){
+				i = parseInt(i)+1;
+				$("li", "#" + options.numericId).removeClass("current");
+				$("li#" + options.numericId + i).addClass("current");
+			};
+			
+			function adjust(){
+				if(t>ts) t=0;		
+				if(t<0) t=ts;	
+				if(!options.vertical) {
+					$("ul",obj).css("margin-left",(t*w*-1));
+				} else {
+					$("ul",obj).css("margin-left",(t*h*-1));
+				}
+				clickable = true;
+				if(options.numeric) setCurrent(t);
+			};
+			
+			function animate(dir,clicked){
+				if (clickable){
+					clickable = false;
+					var ot = t;				
+					switch(dir){
+						case "next":
+							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
+							break; 
+						case "prev":
+							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
+							break; 
+						case "first":
+							t = 0;
+							break; 
+						case "last":
+							t = ts;
+							break; 
+						default:
+							t = dir;
+							break; 
+					};	
+					var diff = Math.abs(ot-t);
+					var speed = diff*options.speed;						
+					if(!options.vertical) {
+						p = (t*w*-1);
+						$("ul",obj).animate(
+							{ marginLeft: p }, 
+							{ queue:false, duration:speed, complete:adjust }
+						);				
+					} else {
+						p = (t*h*-1);
+						$("ul",obj).animate(
+							{ marginTop: p }, 
+							{ queue:false, duration:speed, complete:adjust }
+						);					
+					};
+					
+					if(!options.continuous && options.controlsFade){					
+						if(t==ts){
+							$("a","#"+options.nextId).hide();
+							$("a","#"+options.lastId).hide();
+						} else {
+							$("a","#"+options.nextId).show();
+							$("a","#"+options.lastId).show();					
+						};
+						if(t==0){
+							$("a","#"+options.prevId).hide();
+							$("a","#"+options.firstId).hide();
+						} else {
+							$("a","#"+options.prevId).show();
+							$("a","#"+options.firstId).show();
+						};					
+					};				
+					
+					if(clicked) clearTimeout(timeout);
+					if(options.auto && dir=="next" && !clicked){;
+						timeout = setTimeout(function(){
+							animate("next",false);
+						},diff*options.speed+options.pause);
+					};
+			
+				};
+				
+			};
+			// init
+			var timeout;
+			if(options.auto){;
+				timeout = setTimeout(function(){
+					animate("next",false);
+				},options.pause);
+			};		
+			
+			if(options.numeric) setCurrent(0);
+		
+			if(!options.continuous && options.controlsFade){					
+				$("a","#"+options.prevId).hide();
+				$("a","#"+options.firstId).hide();				
+			};				
+			
+		});
+	  
+	};
+
+})(jQuery);
+
+
+

public/javascripts/view.js

@@ -74,6 +74,9 @@ $(document).ready(function(){
     };
   });
   
+  $("#slider").easySlider({speed:400, numeric:true});
+  
+
   $("img", "#left_pane").tipsy({live:true});
   $(".add_aspect_button", "#aspect_nav").tipsy({gravity:'w'});
   $(".person img", ".dropzone").tipsy({live:true});
@@ -133,3 +136,10 @@ $(".make_profile_photo").live("click", function(){
   });
 });
 
+$(".getting_started_box").live("click",function(evt){
+  $(this).animate({
+    left: parseInt($(this).css('left'),30) == 0 ?
+        -$(this).outerWidth() :
+        0
+    },function(evt){ $(this).css('left', '1000px')});
+});

public/stylesheets/sass/application.sass

@@ -1243,3 +1243,12 @@ ul#breadcrumb
     &:last-child
       &:after
         :content ''
+
+#slider ul, #slider li
+  :margin 0
+  :padding 0
+  :list-style none
+
+#slider, #slider li
+  :width 1000px
+  :overflow hidden