diff --git a/test/index.html b/test/index.html
index ce716a40e..ed2da733c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -8,7 +8,7 @@
 		<style>
 			#test1 {
 				background-color: #000;
-				width: 100px;
+				width: 120px;
 				height: 100px;
 				color: #fff;
 				float: left;
@@ -16,7 +16,7 @@
 			
 			#test2 {
 				background-color: #333;
-				width: 100px;
+				width: 120px;
 				height: 100px;
 				color: #fff;
 				float: left;
@@ -24,7 +24,7 @@
 			
 			#test3 {
 				background-color: #666;
-				width: 100px;
+				width: 120px;
 				height: 100px;
 				color: #fff;
 				float: left;
@@ -32,7 +32,7 @@
 			
 			#test4 {
 				background-color: #000;
-				width: 100px;
+				width: 120px;
 				height: 100px;
 				color: #fff;
 				float: left;
@@ -74,10 +74,26 @@
 				position: absolute;
 				top: 395px;
 				left: 12px;
-				width: 380px;
+				width: 460px;
 				height: 290px;
 				overflow: auto;
 			}
+			
+			#logger p {
+				font-family: Arial, sans-serif;
+				font-size: 13px;
+				padding: 2px;
+				border-bottom: 1px solid #ccc;
+				margin: 0;
+			}
+			
+			#logger p:nth-child(even) {
+				background-color: #FFFFE8;
+			}
+			
+			#logger p:nth-child(10n) {
+				border-bottom-color: #000;
+			}
 		</style>
 		<script type="text/javascript">
 			$(function() {
@@ -85,87 +101,185 @@
 				
 				
 				$('#test1')
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test1: up ('+delta+')');
+							o = '#test1: up ('+delta+')';
 						else if (delta < 0)
-							log('#test1: down ('+delta+')');
+							o = '#test1: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o );
 						
 						log('pageX: ' + event.pageX + ' pageY: ' + event.pageY );
 					});
 				
 				$('#test2')
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test2: up ('+delta+')');
+							o = '#test2: up ('+delta+')';
 						else if (delta < 0)
-							log('#test2: down ('+delta+')');
+							o = '#test2: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o );
 						return false; // prevent default
 					});
 				
 				$('#test3')
 					.hover(function() { log('#test3: mouseover'); }, function() { log('#test3: mouseout'); })
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
 						log('#test3: I should not have been logged');
 					})
 					.unmousewheel();
 				
-				var testRemoval = function(event, delta) {
+				var testRemoval = function(event, delta, deltaX, deltaY) {
 					log('#test4: I should not have been logged');
 				};
 				
 				$('#test4')
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test4: up ('+delta+')');
+							o = '#test4: up ('+delta+')';
 						else if (delta < 0)
-							log('#test4: down ('+delta+')');
+							o = '#test4: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o );
 						return false;
 					})
 					.mousewheel(testRemoval)
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test4: up ('+delta+') from 2nd handler');
+							o = '#test4: up ('+delta+')';
 						else if (delta < 0)
-							log('#test4: down ('+delta+') from 2nd handler');
+							o = '#test4: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o + ' from 2nd handler' );
 						return false;
 					})
 					.unmousewheel(testRemoval);
 				
 				$('#test5')
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test5: up ('+delta+')');
+							o = '#test5: up ('+delta+')';
 						else if (delta < 0)
-							log('#test5: down ('+delta+')');
+							o = '#test5: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o );
 						
 						event.stopPropagation();
 						event.preventDefault();
 					});
 				
 				$('#test6')
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test6: up ('+delta+')');
+							o = '#test6: up ('+delta+')';
 						else if (delta < 0)
-							log('#test6: down ('+delta+')');
+							o = '#test6: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o );
 						
 						event.stopPropagation();
 						event.preventDefault();
 					});
 
 				$('#test7')
-					.mousewheel(function(event, delta) {
+					.mousewheel(function(event, delta, deltaX, deltaY) {
+						var o = '';
 						if (delta > 0)
-							log('#test7: up ('+delta+')');
+							o = '#test7: up ('+delta+')';
 						else if (delta < 0)
-							log('#test7 down ('+delta+')');
+							o = '#test7: down ('+delta+')';
+						
+						if (deltaX > 0)
+							o = o + ', east ('+deltaX+')';
+						else if (deltaX < 0)
+							o = o + ', west ('+deltaX+')';
+						
+						if (deltaY > 0)
+							o = o + ', north ('+deltaY+')';
+						else if (deltaY < 0)
+							o = o + ', south ('+deltaY+')';
+						
+						if( o != '' )
+							log( o );
 						
 						event.preventDefault();
 					});
 				
 				function log(msg) {
-					$('#logger').append(msg+'<br>').scrollTop(999999);
+					$('#logger').append('<p>'+msg+'</p>').scrollTop(999999);
 				};
 			});
 		</script>