From d099440e0ee2c6b5e806a889844b040777119942 Mon Sep 17 00:00:00 2001
From: Jono Brandel <jonobrandel@google.com>
Date: Mon, 31 Jan 2011 19:06:34 -0800
Subject: [PATCH] fixed the firefox horizontal issue

---
 controllers/controller.js |  2 +-
 gui.css                   | 17 +++++++++++------
 gui.js                    | 24 ++++++++++++++++++++++--
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/controllers/controller.js b/controllers/controller.js
index 59fdf29..c785d53 100644
--- a/controllers/controller.js
+++ b/controllers/controller.js
@@ -36,7 +36,7 @@ Controller.prototype.listen = function() {
 }
 
 Controller.prototype.unlisten = function() {
-	this.parent.unlistenTo(this); // <--- hasn't been implemented yet
+	this.parent.unlistenTo(this); // <--- hasn't been tested yet
 	return this;
 }
     
diff --git a/gui.css b/gui.css
index a3cb075..d33d588 100644
--- a/gui.css
+++ b/gui.css
@@ -1,10 +1,15 @@
 #guidat { 
-position: fixed;
-top: 0; 
-right: 0;
-width: auto;
-z-index: 1001;
-text-align: right;
+	position: fixed;
+	top: 0; 
+	right: 0;
+	width: auto;
+	z-index: 1001;
+	text-align: right;
+}
+
+.guidat * {
+	padding: 0px;
+	margin:  0px;
 }
 
 .guidat { 
diff --git a/gui.js b/gui.js
index f87afab..b14aa5c 100644
--- a/gui.js
+++ b/gui.js
@@ -37,11 +37,31 @@ var GUI = function() {
 	
 	this.domElement = document.createElement('div');
 	this.domElement.setAttribute('class', 'guidat');
-	this.domElement.style.width = width+'px'
+	this.domElement.style.width = width+'px';
 
 	var controllerContainer = document.createElement('div');
 	controllerContainer.setAttribute('class', 'guidat-controllers');
 	
+	// Firefox hack for horizontal scrolling
+	controllerContainer.addEventListener('DOMMouseScroll', function(e) {
+		
+		var scrollAmount = this.scrollTop;
+		
+		if (e.wheelDelta) {
+			scrollAmount+=e.wheelDelta; 
+		} else if (e.detail) {
+			scrollAmount+=e.detail;
+		}
+			
+		if (e.preventDefault) {
+			e.preventDefault();
+		}
+		e.returnValue = false;
+		
+		controllerContainer.scrollTop = scrollAmount;
+		
+	}, false);
+	
 	controllerContainer.style.height = '0px';
 
 	var toggleButton = document.createElement('a');
@@ -117,7 +137,6 @@ var GUI = function() {
 	
 	document.addEventListener('mouseup', function(e) {
 		
-		
 		if (togglePressed && !toggleDragged) {
 			
 			_this.toggle();
@@ -183,6 +202,7 @@ var GUI = function() {
 		if(GUI.autoPlaceContainer == null) {
 			GUI.autoPlaceContainer = document.createElement('div');
 			GUI.autoPlaceContainer.setAttribute("id", "guidat");
+			
 			document.body.appendChild(GUI.autoPlaceContainer);
 		}
 		GUI.autoPlaceContainer.appendChild(this.domElement);