+ shadows

app/views/books/edit.html.haml

@@ -1,4 +1,6 @@
 - form_for @book, :url => update_path do |f|
   .page.title
-    = f.text_area  :text
-    = f.submit 'Save the book'
+    = f.text_area :text
+    = f.submit 'Save the book'
+    :javascript
+      $('book_text').smartArea();

app/views/books/show.html.haml

@@ -1,10 +1,11 @@
-.page.title
+#head.page.title
   %h1= @book.title
   %h2= @book.subtitle
   // = "(#{@book.text.language})"
   by
   %h3= @book.author
   %h3{ :onclick => 'alert("email");' } ✏
+.shadow
 
 .page
   .text= @book.text
@@ -13,17 +14,20 @@
       splitPages();
     });
 
-.page.title
+#tail.page.title
   %h2 The End
   %h3 ❦
   // ⊛
   // ∞
   // ∗
+.shadow
 
 .hardcopy
   .pdf
-    = link_to 'download', pdf_path
+    = link_to 'd/l', pdf_path
 
 %ol.chapternav
   %li ch.
-  %li.current 1
+  %li.current 1
+  %li
+    = link_to 'title', '#head'

app/views/layouts/application.html.haml

@@ -3,6 +3,6 @@
 %head
   %title Bookz
   = stylesheet_link_tag 'basic'
-  = javascript_include_tag 'jquery-1.3.2', 'jquery.viewport', 'application'
+  = javascript_include_tag 'jquery-1.3.2', 'jquery.viewport', 'jquery.smartarea', 'tools.tooltip-1.0.2', 'application'
 %body
   = yield

public/javascripts/application.js

@@ -13,7 +13,7 @@ splitPages = function() {
   }).reverse();
   var chapters = $.map(chapters, function(chapter, number) {
     number = number + 1;
-    return '<div class="page" id="chapter' + number + '"><div class="chapter">' + number + '</div><div class="star" /><div class="text">' + chapter + '</div></div>';
+    return '<div class="page" id="chapter' + number + '"><div class="chapter">' + number + '</div><div class="star" /><div class="text">' + chapter + '</div></div><div class="shadow"></div>';
   }).reverse();
 
   $.each(chapters, function(number, page) {

public/javascripts/jquery.smartarea.js

@@ -0,0 +1,30 @@
+jQuery.fn.smartArea = function() {
+
+  return this.each(function() {
+  if (!jQuery(this).is("textarea")) {
+    return false;
+  }
+
+  jQuery(this).click( function() {
+    jQuery.SA.resizeArea( this );
+  }).keyup(function(){
+    jQuery.SA.resizeArea( this ); } );
+    return this;
+  });
+
+}
+
+jQuery.SA = {
+  resizeArea : function ( t ) {
+
+    var lines = t.value.split('\n') || [];
+    var newRows = lines.length;
+    var oldRows = t.rows;
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i];
+      if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
+    }
+    if (newRows > t.rows) t.rows = newRows;
+    if (newRows < t.rows) t.rows = Math.max(1, newRows);
+  }
+}

public/javascripts/tools.tooltip-1.0.2.js

@@ -0,0 +1,279 @@
+/**
+ * tools.tooltip 1.0.2 - Tooltips done right.
+ * 
+ * Copyright (c) 2009 Tero Piirainen
+ * http://flowplayer.org/tools/tooltip.html
+ *
+ * Dual licensed under MIT and GPL 2+ licenses
+ * http://www.opensource.org/licenses
+ *
+ * Launch  : November 2008
+ * Date: 2009-06-12 11:02:45 +0000 (Fri, 12 Jun 2009)
+ * Revision: 1911 
+ */
+(function($) { 
+
+	// static constructs
+	$.tools = $.tools || {version: {}};
+
+	$.tools.version.tooltip = '1.0.2';
+
+
+	var effects = { 
+		toggle: [
+			function() { this.getTip().show(); },  
+			function() { this.getTip().hide(); }
+		],
+
+		fade: [
+			function() { this.getTip().fadeIn(this.getConf().fadeInSpeed); },  
+			function() { this.getTip().fadeOut(this.getConf().fadeOutSpeed); } 
+		]		
+	};   
+
+
+	$.tools.addTipEffect = function(name, loadFn, hideFn) {
+		effects[name] = [loadFn, hideFn];	
+	};
+
+
+	/* this is how you add custom effects */
+
+	/*
+		default effect: "slideup", custom configuration variables: 
+			- slideOffset
+			- slideInSpeed
+			- slideOutSpeed
+	*/
+	$.tools.addTipEffect("slideup", 
+
+		function() { 
+			var conf = this.getConf();
+			var o = conf.slideOffset || 10;
+			this.getTip().css({opacity:0}).animate({
+				top: '-=' + o, 
+				opacity:conf.opacity				
+			}, conf.slideInSpeed || 200).show();                                            
+		}, 
+
+		function() {
+			var conf = this.getConf();
+			var o = conf.slideOffset || 10;
+			this.getTip().animate({top: '-=' + o, opacity:0}, conf.slideOutSpeed || 200, function() { 
+					$(this).hide().animate({top: '+=' + (o * 2)}, 0);
+			});
+		}
+	);
+
+	function Tooltip(trigger, conf) {
+
+		var self = this;
+
+		// find the tip
+		var tip = trigger.next(); 
+
+		if (conf.tip) {
+
+			// single tip. ie: #tip
+			if (conf.tip.indexOf("#") != -1) {
+				tip = $(conf.tip);	
+
+			} else {
+
+				// find sibling
+				tip = trigger.nextAll(conf.tip).eq(0);	
+
+				// find sibling from the parent element
+				if (!tip.length) {
+					tip = trigger.parent().nextAll(conf.tip).eq(0);
+				}
+			} 
+		} 
+
+		// generic binding function
+		function bind(name, fn) {
+			$(self).bind(name, function(e, args)  {
+				if (fn && fn.call(this) === false && args) {
+					args.proceed = false;	
+				}	
+			});	
+
+			return self;
+		}
+
+		// bind all callbacks from configuration
+		$.each(conf, function(name, fn) {                   
+			if ($.isFunction(fn)) { bind(name, fn); }
+		}); 
+
+
+		// mouse interaction 
+		var isInput = trigger.is("input, textarea"); 
+		trigger.bind(isInput ? "focus" : "mouseover", function(e) { 	 
+			e.target = this;	
+			self.show(e);  
+			tip.hover(function() { self.show(); }, function() { self.hide(); }); 
+		});
+
+		trigger.bind(isInput ? "blur" : "mouseout", function() {
+			self.hide(); 
+		});
+
+		tip.css("opacity", conf.opacity);		
+
+		var timer = 0;
+
+		$.extend(self, {
+
+			show: function(e) {
+
+				if (e) { trigger = $(e.target); }
+
+				clearTimeout(timer);
+				if (tip.is(":animated") || tip.is(":visible")) { return self; } 
+
+				// onBeforeShow
+				var p = {proceed: true};
+				$(self).trigger("onBeforeShow", p);				
+				if (!p.proceed) { return self; }
+
+
+
+				/* calculate tip position */  
+
+				// vertical axis
+				var top = trigger.position().top - tip.outerHeight();				
+				var height = tip.outerHeight() + trigger.outerHeight();				
+				var pos = conf.position[0];				
+				if (pos == 'center') { top += height / 2; }
+				if (pos == 'bottom') { top += height; }
+
+
+				// horizontal axis
+				var width = trigger.outerWidth() + tip.outerWidth();
+				var left = trigger.position().left + trigger.outerWidth();									
+				pos = conf.position[1];
+
+
+				if (pos == 'center') { left -= width / 2; }
+				if (pos == 'left')   { left -= width; }	
+
+				// offset
+				top += conf.offset[0];
+				left += conf.offset[1];
+
+				// set position
+				tip.css({position:'absolute', top: top, left: left});
+
+
+				effects[conf.effect][0].call(self);
+				$(self).trigger("onShow");
+				return self;
+			},
+
+			hide: function() {  
+				clearTimeout(timer); 
+
+				timer = setTimeout(function() {
+					if (!tip.is(":visible")) { return self; }
+
+					// onBeforeHide
+					var p = {proceed: true};
+					$(self).trigger("onBeforeHide", p);				
+					if (!p.proceed) { return self; }
+
+
+					effects[conf.effect][1].call(self); 
+					$(self).trigger("onHide");
+
+				}, conf.delay || 1);								 
+
+				return self;
+			},
+
+			isShown: function() {
+				return tip.is(":visible, :animated");	
+			},
+
+			getConf: function() {
+				return conf;	
+			},
+
+			getTip: function() {
+				return tip;	
+			},
+
+			getTrigger: function() {
+				return trigger;	
+			},
+
+			// callback functions
+			onBeforeShow: function(fn) {
+				return bind("onBeforeShow", fn); 		
+			},
+
+			onShow: function(fn) {
+				return bind("onShow", fn); 		
+			},
+
+			onBeforeHide: function(fn) {
+				return bind("onBeforeHide", fn); 		
+			},
+
+			onHide: function(fn) {
+				return bind("onHide", fn); 		
+			} 		
+
+		});
+
+	}
+
+
+	// jQuery plugin implementation
+	$.prototype.tooltip = function(conf) {
+
+		// return existing instance
+		var el = this.eq(typeof conf == 'number' ? conf : 0).data("tooltip");
+		if (el) { return el; }
+
+		// setup options
+		var opts = { 
+
+			/* 			
+			- slideOffset
+			- slideInSpeed
+			- slideOutSpeed 
+			*/	
+
+			tip: null,
+			effect: 'slideup',
+			delay: 30,
+			opacity: 1, 
+
+			// 'top', 'bottom', 'right', 'left', 'center'
+			position: ['top', 'center'], 
+			offset: [0, 0], 
+			api: false 
+		};
+
+		if ($.isFunction(conf)) {
+			conf = {onBeforeShow: conf};
+		}
+
+		$.extend(opts, conf);
+
+		// install tabs for each items in jQuery
+		this.each(function() {
+			el = new Tooltip($(this), opts);
+			$(this).data("tooltip", el);	 
+		});
+
+
+		return opts.api ? el: this;		
+
+	};
+
+}) (jQuery);
+
+
+