Merge branch 'dev' of github.com:jquerytools/jquerytools into dev

Author: bradrobertson

src/scrollable/scrollable.js

@@ -256,8 +256,8 @@
 		}
 
 		// next/prev buttons
-		var prev = find(root, conf.prev).click(function() { self.prev(); }),
-			 next = find(root, conf.next).click(function() { self.next(); }); 
+		var prev = find(root, conf.prev).click(function(e) { e.stopPropagation(); self.prev(); }),
+			 next = find(root, conf.next).click(function(e) { e.stopPropagation(); self.next(); }); 
 
 		if (!conf.circular) {
 			self.onBeforeSeek(function(e, i) {

src/tabs/tabs.js

@@ -90,24 +90,52 @@
 	 * @deprecated will be replaced with a more robust implementation
 	*/
 
-	var w;
+	var
+	  /**
+	  *   @type {Boolean}
+	  *
+	  *   Mutex to control horizontal animation
+	  *   Disables clicking of tabs while animating
+	  *   They mess up otherwise as currentPane gets set *after* animation is done
+	  */
+	  animating,
+	  /**
+	  *   @type {Number}
+	  *   
+	  *   Initial width of tab panes
+	  */
+	  w;
 
 	$.tools.tabs.addEffect("horizontal", function(i, done) {
+	  if (animating) return;    // don't allow other animations
 
+	  var nextPane = this.getPanes().eq(i),
+	      currentPane = this.getCurrentPane();
+	      
 		// store original width of a pane into memory
 		w || ( w = this.getPanes().eq(0).width() );
+		animating = true;
 
-		// set current pane's width to zero
-		this.getCurrentPane().animate({width: 0}, function(){
-		  $(this).hide();
-		});
+		nextPane.show(); // hidden by default
 
-    // grow opened pane to it's original width
-    this.getPanes().eq(i).animate({width: w}, function() { 
-     $(this).show();
-     done.call();
+		// animate current pane's width to zero
+    // animate next pane's width at the same time for smooth animation
+    currentPane.animate({width: 0}, {
+      step: function(now){
+        nextPane.css("width", w-now);
+      },
+      complete: function(){
+        $(this).hide();
+        done.call();
+        animating = false;
+     }
     });
-		
+    // Dirty hack...  onLoad, currentPant will be empty and nextPane will be the first pane
+    // If this is the case, manually run callback since the animation never occured, and reset animating
+    if (!currentPane.length){ 
+      done.call(); 
+      animating = false;
+    }
 	});	
 
 
@@ -130,7 +158,7 @@
 		$.extend(this, {				
 			click: function(i, e) {
 
-				var tab = tabs.eq(i);												 
+				var tab = tabs.eq(i);
 
 				if (typeof i == 'string' && i.replace("#", "")) {
 					tab = tabs.filter("[href*=" + i.replace("#", "") + "]");
@@ -160,11 +188,10 @@
 
 				// call the effect
 				effects[conf.effect].call(self, i, function() {
-
+					current = i;
 					// onClick callback
 					e.type = "onClick";
-					trigger.trigger(e, [i]);					
-					current = i;
+					trigger.trigger(e, [i]);
 				});			
 
 				// default behaviour

test/dateinput/skin1.css

@@ -9,6 +9,7 @@
 	text-align:center;
 	width:194px;		
 	-moz-box-shadow:0 0 10px #eee inset;
+	box-shadow:0 0 10px #eee inset;
 }
 
 /* calendar root element */
@@ -21,9 +22,11 @@
 	border:1px solid #ccc;
 	z-index:1;
 	-moz-border-radius:5px;
+	border-radius:5px;
 	-webkit-border-radius:5px;
 	-moz-box-shadow: 0 0 15px #666;
 	-webkit-box-shadow: 0 0 15px #666;	
+	box-shadow: 0 0 15px #666;
 }
 
 /* head. contains title, prev/next month controls and possible month/year selectors */

test/form/dateinput.css

@@ -5,8 +5,10 @@
 	font-size:11px;
 	-moz-border-radius:5px;
 	-webkit-border-radius:5px;
+	border-radius:5px;
 	-moz-box-shadow: 0 0 20px #999;
 	-webkit-box-shadow: 0 0 20px #999;		
+	box-shadow: 0 0 20px #999;
 }
 
 #datehead {	
@@ -93,6 +95,7 @@
 	color:#666;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px; 		
+	border-radius:3px;
 } 
 
 .pickweek a:hover, .pickfocus {

test/overlay/style.css

@@ -20,6 +20,7 @@ div.overlay a.close {
 	height:200px;		
 	background-color:#666;
 	-moz-border-radius:15px;		
+	border-radius:15px;
 }
 
 #overlay2 {

test/rangeinput/css/multiple.css

@@ -6,6 +6,7 @@
 	width:670px;
 	-moz-border-radius:5px;
 	-webkit-border-radius:5px;
+	border-radius:5px;
 }
 
 .column {

test/rangeinput/css/skin1.css

@@ -13,6 +13,7 @@
 	cursor:pointer; 
 	margin:15px 0; 
 	-moz-border-radius:5px; 
+	border-radius:5px;
 	border:1px inset #333;
 	width:400px;
 	float:left; 
@@ -35,6 +36,7 @@
 	display:block; 
 	margin-top:1px;
 	-moz-border-radius:14px;
+	border-radius:14px;
 }
 
 .range {

test/rangeinput/css/small.css

@@ -27,6 +27,7 @@
 	color:#fff;
 	-moz-border-radius:2px; 
 	-webkit-border-radius:2px; 	
+	border-radius:2px;
 }
 
 .range:focus { 

test/rangeinput/scrollbar.htm

@@ -21,6 +21,7 @@
 	margin-bottom:15px;
 	-moz-box-shadow:0 0 20px #666;
 	-webkit-box-shadow:0 0 20px #666;
+	box-shadow:0 0 20px #666;
 }
 
 #scroll { 	
@@ -42,6 +43,7 @@
 	border:2px solid #00118E;	
 	width:658px;
 	-moz-border-radius:2px;
+	border-radius:2px;
 }
 
 .handle { 
@@ -55,6 +57,7 @@
 	cursor:move;
 	-moz-border-radius:14px;
 	-webkit-border-radius:14px;
+	border-radius:14px;
 }
 
 .handle:active {

test/scrollable/style.css

@@ -30,6 +30,7 @@
 	margin-right: 20px;
 	float:left;
 	-moz-border-radius:5px;
+	border-radius:5px;
 }
 
 .navi {