From a7f1704c28f71f05ea7b187bbdb3c6d851f93ee4 Mon Sep 17 00:00:00 2001
From: Damien Churchill <damoc@gmail.com>
Date: Mon, 29 Sep 2008 23:09:44 +0000
Subject: [PATCH] huge update to mooui continuting change to camelcase

---
 .../render/html/preferences_bandwidth.html    |  20 +-
 .../ajax/render/html/preferences_daemon.html  |   2 +-
 .../ajax/render/html/preferences_network.html |   8 +-
 .../ajax/render/html/preferences_queue.html   |  14 +-
 .../webui/templates/ajax/static/css/mooui.css |  54 +-
 .../templates/ajax/static/js/deluge-ui.js     |   4 +-
 .../webui/templates/ajax/static/js/mooui.js   | 817 +++++++++---------
 .../ajax/static/themes/classic/style.css      |  40 +-
 .../ajax/static/themes/white/style.css        |  55 +-
 .../webui/templates/ajax/template_style.css   |  18 +-
 10 files changed, 515 insertions(+), 517 deletions(-)

diff --git a/deluge/ui/webui/templates/ajax/render/html/preferences_bandwidth.html b/deluge/ui/webui/templates/ajax/render/html/preferences_bandwidth.html
index 8e9065f04..30d0bf7b8 100644
--- a/deluge/ui/webui/templates/ajax/render/html/preferences_bandwidth.html
+++ b/deluge/ui/webui/templates/ajax/render/html/preferences_bandwidth.html
@@ -2,27 +2,27 @@
 	<fieldset>
 		<legend>$_('Global Bandwidth Usage')</legend>
 		<label>$_('Max Connections'):</label>
-		<input type="text" name="max_connections_global" class="mooui-spinner" />
+		<input type="text" name="max_connections_global" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Upload Slots'):</label>
-		<input type="text" name="max_upload_slots_global" class="mooui-spinner" />
+		<input type="text" name="max_upload_slots_global" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Download Speed') (KiB/s):</label>
-		<input type="text" name="max_download_speed" class="mooui-spinner" />
+		<input type="text" name="max_download_speed" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Upload Speed') (KiB/s):</label>
-		<input type="text" name="max_upload_speed" class="mooui-spinner" />
+		<input type="text" name="max_upload_speed" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Half-Open Connections'):</label>
-		<input type="text" name="max_half_open_connections" class="mooui-spinner" />
+		<input type="text" name="max_half_open_connections" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Conection Attempts per Second'):</label>
-		<input type="text" name="max_connections_per_second" class="mooui-spinner" />
+		<input type="text" name="max_connections_per_second" class="moouiSpinner" />
 		<br/>
 		
 		<label class="fluid">
@@ -33,19 +33,19 @@
 	<fieldset>
 		<legend>$_('Per Torrent Bandwidth Usage')</legend>
 		<label>$_('Max Connections'):</label>
-		<input type="text" name="max_connections_per_torrent" class="mooui-spinner" />
+		<input type="text" name="max_connections_per_torrent" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Upload Slots'):</label>
-		<input type="text" name="max_upload_slots_per_torrent" class="mooui-spinner" />
+		<input type="text" name="max_upload_slots_per_torrent" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Download Speed') (KiB/s):</label>
-		<input type="text" name="max_download_speed_per_torrent" class="mooui-spinner" />
+		<input type="text" name="max_download_speed_per_torrent" class="moouiSpinner" />
 		<br/>
 		
 		<label>$_('Max Upload Speed') (KiB/s):</label>
-		<input type="text" name="max_upload_speed_per_torrent" class="mooui-spinner" />
+		<input type="text" name="max_upload_speed_per_torrent" class="moouiSpinner" />
 		<br/>
 	</fieldset>
 </form>
diff --git a/deluge/ui/webui/templates/ajax/render/html/preferences_daemon.html b/deluge/ui/webui/templates/ajax/render/html/preferences_daemon.html
index 45a2b4094..119fd93f5 100644
--- a/deluge/ui/webui/templates/ajax/render/html/preferences_daemon.html
+++ b/deluge/ui/webui/templates/ajax/render/html/preferences_daemon.html
@@ -1,7 +1,7 @@
 <form>
 	<fieldset>
 		<legend>$_('Port')</legend>
-		<label>$_('Daemon Port'):</label><input type="text" name="daemon_port" class="mooui-spinner" /><br/>
+		<label>$_('Daemon Port'):</label><input type="text" name="daemon_port" class="moouiSpinner" /><br/>
 	</fieldset>
 	<fieldset>
 		<legend>$_('Connections')</legend>
diff --git a/deluge/ui/webui/templates/ajax/render/html/preferences_network.html b/deluge/ui/webui/templates/ajax/render/html/preferences_network.html
index 2fee6fea0..7c5d0a984 100644
--- a/deluge/ui/webui/templates/ajax/render/html/preferences_network.html
+++ b/deluge/ui/webui/templates/ajax/render/html/preferences_network.html
@@ -9,11 +9,11 @@
 		<label class="fluid">
 			$_('From'):
 		</label>
-		<input type="text" name="start_listen_port" class="mooui-spinner" />
+		<input type="text" name="start_listen_port" class="moouiSpinner" />
 		<label class="fluid">
 			$_('To'):
 		</label>
-		<input type="text" name="end_listen_port" class="mooui-spinner" /><br/>
+		<input type="text" name="end_listen_port" class="moouiSpinner" /><br/>
 	</fieldset>
 	
 	<fieldset>
@@ -26,11 +26,11 @@
 		<label class="fluid">
 			$_('From'):
 		</label>
-		<input type="text" name="start_outgoing_port" class="mooui-spinner" />
+		<input type="text" name="start_outgoing_port" class="moouiSpinner" />
 		<label class="fluid">
 			$_('To'):
 		</label>
-		<input type="text" name="end_outgoing_port" class="mooui-spinner" /><br/>
+		<input type="text" name="end_outgoing_port" class="moouiSpinner" /><br/>
 	</fieldset>
 	
 	<fieldset>
diff --git a/deluge/ui/webui/templates/ajax/render/html/preferences_queue.html b/deluge/ui/webui/templates/ajax/render/html/preferences_queue.html
index be67fd78b..ae287befd 100644
--- a/deluge/ui/webui/templates/ajax/render/html/preferences_queue.html
+++ b/deluge/ui/webui/templates/ajax/render/html/preferences_queue.html
@@ -5,17 +5,17 @@
 	</fieldset>
 	<fieldset>
 		<legend>$_('Active Torrents')</legend>
-		<label>$_('Total active'):</label><input type="text" name="max_active_limit" class="mooui-spinner" /><br/>
-		<label>$_('Total active downloading'):</label><input type="text" name="max_active_downloading" class="mooui-spinner" /><br/>
-		<label>$_('Total active seeding'):</label><input type="text" name="max_active_seeding" class="mooui-spinner" /><br/>
+		<label>$_('Total active'):</label><input type="text" name="max_active_limit" class="moouiSpinner" /><br/>
+		<label>$_('Total active downloading'):</label><input type="text" name="max_active_downloading" class="moouiSpinner" /><br/>
+		<label>$_('Total active seeding'):</label><input type="text" name="max_active_seeding" class="moouiSpinner" /><br/>
 		<label class="fluid"><input type="checkbox" name="dont_count_slow_torrents" />$_('Do not count slow torrents')</label>
 	</fieldset>
 	<fieldset>
 		<legend>$_('Seeding')</legend>
-		<label>$_('Share Ratio Limit'):</label><input type="text" name="share_ratio_limit" class="mooui-spinner" /><br/>
-		<label>$_('Seed Time Ratio'):</label><input type="text" name="stop_seed_ratio" class="mooui-spinner" /><br/>
-		<label>$_('Seed Time') (m):</label><input type="text" name="seed_time_limit" class="mooui-spinner" /><br/>
-		<label class="fluid"><input type="checkbox" name="stop_seed_at_ratio" />$_('Stop seeding when share ratio reaches'):</label><input type="text" name="stop_seed_ratio" class="mooui-spinner" />
+		<label>$_('Share Ratio Limit'):</label><input type="text" name="share_ratio_limit" class="moouiSpinner" /><br/>
+		<label>$_('Seed Time Ratio'):</label><input type="text" name="stop_seed_ratio" class="moouiSpinner" /><br/>
+		<label>$_('Seed Time') (m):</label><input type="text" name="seed_time_limit" class="moouiSpinner" /><br/>
+		<label class="fluid"><input type="checkbox" name="stop_seed_at_ratio" />$_('Stop seeding when share ratio reaches'):</label><input type="text" name="stop_seed_ratio" class="moouiSpinner" />
 		<label class="fluid"><input type="checkbox" name="remote_seed_at_ratio" />$_('Remove torrent when share ratio reached')</label>
 	</fieldset>
 </form>
diff --git a/deluge/ui/webui/templates/ajax/static/css/mooui.css b/deluge/ui/webui/templates/ajax/static/css/mooui.css
index 892d61607..2f58b2b60 100644
--- a/deluge/ui/webui/templates/ajax/static/css/mooui.css
+++ b/deluge/ui/webui/templates/ajax/static/css/mooui.css
@@ -4,13 +4,13 @@
  * Depends: []
  */
 
-ul.mooui-menu {
+ul.moouiMenu {
 	position: absolute;
 	z-index: 1000;
 	padding: 0;
 }
 
-ul.mooui-menu li {
+ul.moouiMenu li {
 	position: relative;
 	list-style: none;
 	margin: 1px;
@@ -21,40 +21,40 @@ ul.mooui-menu li {
 	background: no-repeat 2px;
 }
 
-ul.mooui-menu li.mooui-menu-icon {
+ul.moouiMenu li.moouiMenuIcon {
 	padding-left: 20px;
 }
 
-ul.mooui-menu li.mooui-menu-sep {
+ul.moouiMenu li.moouiMenuSep {
 	height: 1px;
 	line-height: 1px;
 }
 
-ul.mooui-menu li.mooui-menu-toggle input {
+ul.moouiMenu li.moouiMenuToggle input {
 	cursor: pointer;
 }
 
-ul.mooui-menu li.mooui-menu-toggle span span {
+ul.moouiMenu li.moouiMenuToggle span span {
 	position: relative;
 	top: -3px;
 }
 
-ul.mooui-menu li > ul {
+ul.moouiMenu li > ul {
 	display: none;
 	position: relative;
 	top: -20px;
 	width: 400px;
 }
 
-ul.mooui-menu li:hover {
+ul.moouiMenu li:hover {
 	cursor: pointer;
 }
 
-ul.mooui-menu li:hover > ul {	
+ul.moouiMenu li:hover > ul {	
 	display: block;
 }
 
-ul.mooui-menu li.mooui-menu-sep:hover {
+ul.moouiMenu li.moouiMenuSep:hover {
 	cursor: default;
 }
 
@@ -64,7 +64,7 @@ ul.mooui-menu li.mooui-menu-sep:hover {
  * Depends: []
  */
 
-.mooui-progressbar span {
+.moouiProgressBar span {
 	text-align: center;
 	float: left;
 }
@@ -75,20 +75,22 @@ ul.mooui-menu li.mooui-menu-sep:hover {
  * Depends: []
  */
 
-.mooui-pane {
-	position: absolute;
+.moouiPane {
+    float: left;
+	position: relative;
 }
 
-.mooui-splitter {
-	position: absolute;
+.moouiSplitter {
+	position: relative;
+	float: left;
 	background: Gray;
 }
 
-.mooui-splitter-vertical {
+.moouiSplitterVertical {
 	cursor: e-resize;
 }
 
-.mooui-splitter-horizontal {
+.moouiSplitterHorizontal {
 	cursor: n-resize;
 }
 
@@ -98,13 +100,13 @@ ul.mooui-menu li.mooui-menu-sep:hover {
  * Depends: []
  */
 
-.mooui-tabs ul {
+.moouiTabs ul {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 
-.mooui-tabs li {
+.moouiTabs li {
 	float: left;
 	padding: 4px;
 	cursor: pointer;
@@ -113,15 +115,15 @@ ul.mooui-menu li.mooui-menu-sep:hover {
 	-webkit-border-radius: 5px 5px 0 0;
 }
 
-.mooui-tabs div {
+.moouiTabs div {
 	clear: left;
 }
 
-.mooui-tabpage {
+.moouiTabPage {
 	display: none;	
 }
 
-.mooui-tabpage-active {
+.moouiTabPageActive {
 	display: block;
 }
 
@@ -131,20 +133,20 @@ ul.mooui-menu li.mooui-menu-sep:hover {
  * Depends: []
  */
 
-.mooui-window {
+.moouiWindow {
 	position: fixed;
 	top: 0px;
 	left: 200px;
 	z-index: 100;
 }
 
-.mooui-window-title {
+.moouiWindowTitle {
 	margin: 10px;
 	cursor: pointer;
 	float: left;
 }
 
-.mooui-window-close {
+.moouiWindowClose {
 	float: right;
 	width: 16px;
 	height: 16px;
@@ -152,7 +154,7 @@ ul.mooui-menu li.mooui-menu-sep:hover {
 	cursor: pointer;
 }
 
-.mooui-window-content {
+.moouiWindowContent {
 	clear: both;
 	padding: 5px;
 }
\ No newline at end of file
diff --git a/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js b/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js
index a7c0d9065..4c6698e45 100644
--- a/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js
+++ b/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js
@@ -79,7 +79,7 @@ Deluge.UI = {
             this.torrentAction(e.action, e.value)
         }.bind(this))
 
-        this.grid.addEvent('row_menu', function(e) {
+        this.grid.addEvent('rowMenu', function(e) {
             e.stop()
             var value = this.grid.selectedRow.torrent.is_auto_managed;
             menu.items[3].items[4].set(value)
@@ -87,7 +87,7 @@ Deluge.UI = {
             menu.show(e)
         }.bindWithEvent(this))
         
-        this.grid.addEvent('selectedchanged', function(e) {
+        this.grid.addEvent('selectedChanged', function(e) {
             if ($chk(this.grid.selectedRow)) {
                 this.details.update(this.grid.selectedRow.id);
             } else {
diff --git a/deluge/ui/webui/templates/ajax/static/js/mooui.js b/deluge/ui/webui/templates/ajax/static/js/mooui.js
index 4e5968a2f..ae3ad5154 100644
--- a/deluge/ui/webui/templates/ajax/static/js/mooui.js
+++ b/deluge/ui/webui/templates/ajax/static/js/mooui.js
@@ -128,17 +128,17 @@ Array.implement({
 
 Element.implement({
 	getInnerSize: function() {
-		this.getPadding()
+		this.getPadding();
 		if ((/^(?:body|html)$/i).test(this.tagName)) return this.getWindow().getSize();
 		return {x: this.clientWidth - this.padding.x, y: this.clientHeight - this.padding.y};
 	},
 	
 	getInnerHeight: function() {
-		return this.getInnerSize().y
+		return this.getInnerSize().y;
 	},
 	
 	getInnerWidth: function() {
-		return this.getInnerSize().x
+		return this.getInnerSize().x;
 	},
 	
 	getSizeModifiers: function() {
@@ -334,98 +334,127 @@ Sorters.Progress = new Class({
  */
 
 Widgets = {
-	version: 0.1,
-	authors: [
-		'Damien Churchill'
-	],
-	license: 'GPLv3'
-}
+    version: 0.1,
+    authors: [
+        'Damien Churchill'
+    ],
+    license: 'GPLv3'
+};
+
+elementMethods = [
+    'addClass',
+    'hasClass',
+    'removeClass',
+    'toggleClass',    
+    'getInnerSize',
+    'getTop',
+    'getLeft',
+    'getWidth',
+    'getHeight',
+    'getScrollTop',
+    'getScrollLeft',
+    'getScrollHeight',
+    'getScrollWidth',
+    'getSize',
+    'getScrollSize',
+    'getScroll',
+    'getScrolls',
+    'getOffsetParent',
+    'getOffsets',
+    'getPosition',
+    'getCoordinates',
+    'getInnerWidth',
+    'getInnerHeight',
+    'getStyle',
+    'getParent',
+    'getSizeModifiers'
+];
 
 Widgets.Base = new Class({
 
-	Implements: [Events,Options],
-	
-	options: {
-		width: 0,
-		height: 0,
-		expand: false
-	},
+    Implements: [Events,Options],
+    
+    options: {
+        expand: false
+    },
 
-	initialize: function(element, options) {
-		this.setOptions(options)
-		this.element = $(element)
-		this.ismoouiwidget = true
-		this.width = (this.options.width) ? this.options.width : this.element.getStyle('width').toInt()
-		this.height = (this.options.height) ? this.options.height : this.element.getStyle('height').toInt()
-		$A(['addClass', 'hasClass', 'removeClass', 'toggleClass', 'getInnerSize',
-		'getTop', 'getLeft', 'getWidth', 'getHeight', 'getScrollTop',
-		'getScrollLeft', 'getScrollHeight', 'getScrollWidth', 'getSize',
-		'getScrollSize', 'getScroll', 'getScrolls', 'getOffsetParent',
-		'getOffsets', 'getPosition', 'getCoordinates', 'getInnerWidth',
-		'getInnerHeight', 'getStyle', 'getParent', 'getSizeModifiers'
-		]).each(function(method) {
-			if (this.element[method])
-				this[method] = this.element[method].bind(this.element);
-		}, this)
-	},
-	
-	refresh: function() {
-		this.element.removeProperty('style');
-		this.width = (this.options.width) ? this.options.width : this.element.getStyle('width').toInt()
-		this.height = (this.options.height) ? this.options.height : this.element.getStyle('height').toInt()
-		this.getSizeModifiers();
-		if (this.refreshChildren) this.refreshChildren();
-	},
-	
-	expand: function() {
-		var parent = this.getParent()
-		var parentSize = this.getParent().getInnerSize();
-		this.element.getSizeModifiers();
-		parentSize.y -= this.element.modifiers.y;
-		parentSize.x -= this.element.modifiers.x;
-		this.sets({'width': parentSize.x, 'height': parentSize.y});
-	},
-	
-	set: function(property, value, nofire) {
-		if (property == 'height' || property == 'width') {
-			var eventArgs = {};
-			eventArgs[property] = value;
-			eventArgs['old_' + property] = this[property];
-			this[property] = value;
-			if (value > 0) this.element.setStyle(property, value);
-			if (!nofire) this.fireEvent('resize', eventArgs);
-		} else {
-			this[property] = value;
-			this.element.setStyle(property, value)
-		}
-	},
-	
-	sets: function(properties) {
-		properties = new Hash(properties);
-		var fireResize = false;
-		var eventArgs = {}
-		properties.each(function(value, key) {
-			if (key == 'height' || key == 'width') {
-				eventArgs['old_' + key] = this[key]
-				eventArgs[key] = value
-				fireResize = true;
-			}
-			this.set(key, value, true);
-		}, this);
-		if (fireResize) this.fireEvent('resize', eventArgs);
-	},
-	
-	toElement: function() {
-		return this.element
-	}
-})
+    initialize: function(element, options) {
+        this.setOptions(options);
+        this.element = $(element);
+        this.element.store('moouiWidget', this);
+        this.isMoouiWidget = true;
+        this.width = this.element.getStyle('width').toInt();
+        this.height = this.element.getStyle('height').toInt();
+        elementMethods.each(function(method) {
+            if (this.element[method]) {
+                this[method] = this.element[method].bind(this.element);
+            };
+        }, this);
+    },
+    
+    refresh: function() {
+        this.element.removeProperty('style');
+        this.width = this.element.getStyle('width').toInt()
+        this.height = this.element.getStyle('height').toInt()
+        this.getSizeModifiers();
+        if (this.refreshChildren) this.refreshChildren();
+    },
+    
+    expand: function() {
+        var parent = this.getParent();
+        var parentSize = this.getParent().getInnerSize();
+        this.element.getSizeModifiers();
+        parentSize.y -= this.element.modifiers.y;
+        parentSize.x -= this.element.modifiers.x;
+        this.sets({'width': parentSize.x, 'height': parentSize.y});
+    },
+    
+    set: function(property, value, noFire) {
+        if (property == 'height' || property == 'width') {
+            var eventArgs = {};
+            eventArgs[property] = value;
+            eventArgs[('old-' + property).camelCase()] = this[property];
+            this[property] = value;
+            if (value > 0) this.element.setStyle(property, value);
+            if (!noFire) this.fireEvent('resize', eventArgs);
+        } else {
+            this[property] = value;
+            this.element.setStyle(property, value);
+        }
+    },
+    
+    sets: function(properties) {
+        properties = new Hash(properties);
+        var fireResize = false;
+        var eventArgs = {};
+        properties.each(function(value, key) {
+            if (key == 'height' || key == 'width') {
+                eventArgs[('old-' + key).camelCase()] = this[key];
+                eventArgs[key] = value;
+                fireResize = true;
+            }
+            this.set(key, value, true);
+        }, this);
+        if (fireResize) this.fireEvent('resize', eventArgs);
+    },
+    
+    toElement: function() {
+        return this.element;
+    }
+});
 
 $W = function(wrap) {
-	if (!wrap.ismoouiwidget)
-		return new Widgets.Base($(wrap))
-	else
-		return wrap
-}
+    if (!wrap.isMoouiWidget) {
+        if (wrap.retrieve) {
+            wrap = wrap.retrieve('moouiWidget');
+            return (wrap) ? wrap : new Widgets.Base(wrap);
+        } else {
+            return new Widgets.Base(wrap);
+        };
+    } else {
+        return wrap;
+    };
+};
 /*
  * Script: Widgets.js
  *  The base class for all UI widgets
@@ -462,15 +491,15 @@ Widgets.PopupMenu = new Class({
 	},
 	_build: function(items) {
 		var menu = new Element('ul')
-		menu.addClass('mooui-menu')
+		menu.addClass('moouiMenu')
 		items.each(function(item) {
 			if (item.type == 'text') {
 				var el = new Element('li')
-				el.addClass('mooui-menu-text')
+				el.addClass('moouiMenuText')
 				new Element('span').set('text', item.text).inject(el)
 				if ($defined(item.icon)) {
 					el.setStyle('background-image', 'url('+item.icon+')')
-					el.addClass('mooui-menu-icon')
+					el.addClass('moouiMenuIcon')
 				}
 				el.inject(menu)
 				el.addEvent('click', function(e) {
@@ -479,14 +508,14 @@ Widgets.PopupMenu = new Class({
 				}.bind(this))
 			} else if (item.type == 'toggle') {
 				var el = new Element('li');
-				el.addClass('mooui-menu-toggle');
+				el.addClass('moouiMenuToggle');
 				var toggle = new Element('span').inject(el);
 				item.checkbox = new Element('input', {type: 'checkbox'}).inject(toggle);
 				new Element('span').set('text', item.text).inject(toggle)
 				if (item.value) item.checkbox.checked = item.value;
 				if ($defined(item.icon)) {
 					el.setStyle('background-image', 'url('+item.icon+')');
-					el.addClass('mooui-menu-icon');
+					el.addClass('moouiMenuIcon');
 				}
 				el.inject(menu);
 				var clicked = function(e) {
@@ -504,14 +533,14 @@ Widgets.PopupMenu = new Class({
 				el.addEvent('click', clicked)
 				
 			} else if (item.type == 'seperator') {
-				new Element('li').addClass('mooui-menu-sep').inject(menu)
+				new Element('li').addClass('moouiMenuSep').inject(menu)
 			} else if (item.type == 'submenu') {
 				var el = new Element('li')
 				el.addClass('mooui-menu-sub')
 				new Element('span').set('text', item.text).inject(el)
 				if ($defined(item.icon)) {
 					el.setStyle('background-image', 'url('+item.icon+')')
-					el.addClass('mooui-menu-icon')
+					el.addClass('moouiMenuIcon')
 				}
 				var sub = this._build(item.items).inject(el)
 				el.addEvent('mouseenter', function(e) {
@@ -542,7 +571,7 @@ Widgets.PopupMenu = new Class({
 		}
 	},
 	show: function(e) {
-		this.show_pos(e.client.x+10, e.client.y-10)
+		this.showPos(e.client.x+10, e.client.y-10)
 	},
 	
 	fixSize: function(el) {
@@ -568,7 +597,7 @@ Widgets.PopupMenu = new Class({
 		});
 	},
 	
-	show_pos: function(x, y) {
+	showPos: function(x, y) {
 		this.element.setStyles({
 			'left': x,
 			'top': y - 2
@@ -594,32 +623,35 @@ Widgets.ProgressBar = new Class({
 	Extends: Widgets.Base,
 	
 	initialize: function() {
-		this.parent(new Element('div'))
-		this.element.addClass('mooui-progressbar')
-		this.bar = new Element('div').inject(this.element)
-		this.textspan = new Element('span').inject(this.bar)
-		this.sets({width: 200, height: 20})
-		this.addEvent('resize', this.on_resize.bindWithEvent(this))
+		this.parent(new Element('div'));
+		this.bound = {
+		    onResize: this.onResize.bindWithEvent(this)
+		};
+		this.element.addClass('moouiProgressBar');
+		this.bar = new Element('div').inject(this.element);
+		this.textSpan = new Element('span').inject(this.bar);
+		this.sets({width: 200, height: 20});
+		this.addEvent('resize', this.bound.onResize);
 	},
 	
-	on_resize: function() {
-		this.textspan.setStyles({'width': this.width, 'height': this.height})
-		this.update(this.text, this.percent)
+	onResize: function() {
+		this.textSpan.setStyles({'width': this.width, 'height': this.height});
+		this.update(this.text, this.percent);
 	},
 	
 	update: function(text, percent) {
 		if (this.text != text) {
-			this.text = text
-			this.textspan.set('text', text)
-		}
+			this.text = text;
+			this.textSpan.set('text', text);
+		};
 		
 		if (this.percent != percent) {
-			this.percent = percent
+			this.percent = percent;
 			this.bar.setStyles({
 				'width': Math.floor(this.width / 100.0 * percent),
 				'height': this.height
-			})
-		}
+			});
+		};
 	}
 });
 /*
@@ -634,228 +666,204 @@ Widgets.ProgressBar = new Class({
 
 Widgets.SplitPane = new Class({
 
-	Extends: Widgets.Base,
-	
-	options: {
-		direction: 'horizontal',
-		name: null,
-		splitSize: 6,
-		pane1: {},
-		pane2: {}
-	},
-	
-	initialize: function(element, pane1, pane2, options) {
-		this.parent(element, options);
-		this.horizontal = (this.options.direction == 'horizontal') ? true : false;
-		this.pane1 = $W(pane1);
-		this.pane2 = $W(pane2);
-		
-		if (this.options.expand) this.expand();
-		
-		this.init_pane(this.pane1, this.options.pane1)
-		this.init_pane(this.pane2, this.options.pane2)
-		this.init_splitter()
-		this.calculatePositions()
-		this.setPosition(this.pane1);
-		this.setPosition(this.splitter);
-		this.setPosition(this.pane2);
-		this.init_drag()
-		this.addEvent('resize', this.onResize.bindWithEvent(this))
-	},
-	
-	init_splitter: function() {
-		this.splitter = new Element('div').addClass('mooui-splitter')
-		this.splitter.inject(this.pane1, 'after')
-		this.splitter.paneinfo = {}
-		if (this.horizontal) {
-			this.splitter.addClass('mooui-splitter-vertical')
-		} else {
-			this.splitter.addClass('mooui-splitter-horizontal')
-		}
-		this.splitter.grab(new Element('div'))
-		this.splitter.grab(new Element('div'))
-		this.splitter.grab(new Element('div'))
-	},
-	
-	init_drag: function() {
-		this.drag = new Drag(this.splitter)
-		this.drag.addEvent('drag', this.onDrag.bindWithEvent(this))
-		if (this.horizontal) {
-			this.drag.options.limit = {
-				x: [
-					this.pane1.paneinfo.left + this.pane1.paneinfo.min - this.pane1.element.modifiers.x,
-					this.pane1.paneinfo.left + this.getInnerWidth() - this.pane2.paneinfo.min - this.pane1.element.modifiers.x - this.pane2.element.modifiers.x
-				],
-				y: [this.pane1.paneinfo.top, this.pane1.paneinfo.top]
-			}
-		} else {
-			this.drag.options.limit = {
-				x: [this.pane1.paneinfo.left, this.pane1.paneinfo.left],
-				y: [
-					this.pane1.paneinfo.top + this.pane1.paneinfo.min,
-					this.pane1.top + this.getInnerHeight() - this.pane2.paneinfo.min
-				]
-			}
-		}
-	},
-	
-	init_pane: function(pane, options) {
-		pane.addClass('mooui-pane');
-		pane.paneinfo = {}
-		if (options) {
-			pane.paneinfo.min = (options.min) ? options.min : 0;
-			pane.paneinfo.expand = (options.expand) ? options.expand : false;
-		}
-	},
-	
-	calculatePositions: function(resized) {
-		if (resized) {
-			if (this.horizontal) {
-				this.calculateResize(resized, 'width', 'height', 'x', 'y');
-			} else {
-				this.calculateResize(resized, 'height', 'width', 'y', 'x');
-			}
-		} else {
-			if (this.horizontal) {
-				this.calculateInitial('width', 'height', 'x', 'y');
-			} else {
-				this.calculateInitial('height', 'width', 'y', 'x');
-			}
-		}
-	},
-	
-	calculateInitial: function(dm, ds, pm, ps) {
-		var size = this.getInnerSize(), position = this.pane1.getPosition(this);
-		this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers();
-		this.splitter.getSizeModifiers();
-		
-		position.x -= this.pane1.element.margin.left;
-		position.y -= this.pane1.element.margin.top;
-		
-		// Calculate Size
-		if (this.pane1.paneinfo.expand) {
-			this.pane2.paneinfo[dm] = this.pane2.paneinfo.min - this.pane2.element.modifiers[pm];
-			this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo.min - this.options.splitSize;
-			this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm];
-		} else {
-			this.pane1.paneinfo[dm] = this.pane1.paneinfo.min - this.pane1.element.modifiers[pm];
-			this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo.min - this.options.splitSize;
-			this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm];
-		}
-		this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps];
-		this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps];
-		this.pane2.paneinfo[ds] -= this.pane2.element.modifiers[ps];
-		
-		this.splitter.paneinfo[ds] = size[ps];
-		this.splitter.paneinfo[dm] = this.options.splitSize;
-		
-		
-		// Calculate Position		
-		$A([this.pane1, this.splitter, this.pane2]).each(function(item) {
-			item.paneinfo.left = position.x;
-			item.paneinfo.top = position.y;
-			if (item.modifiers)
-				position[pm] += item.paneinfo[dm] + item.modifiers[pm];
-			else
-				position[pm] += item.paneinfo[dm] + item.element.modifiers[pm];
-		})
-	},
-	
-	calculateResize: function(resized, dm, ds, pm, ps) {
-		var size = this.getInnerSize(), position = this.pane1.getPosition(this);
-		this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers();
-		this.splitter.getSizeModifiers();
-		
-		position.x -= this.pane1.element.margin.left;
-		position.y -= this.pane1.element.margin.top;
-		
-		if (resized[dm] && resized[dm] != resized['old_' + dm]) {
-			if (this.pane1.paneinfo.expand) {
-				this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo[dm] - this.options.splitSize;
-				this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm] + this.pane2.element.modifiers[pm];
-			} else {
-				this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo[dm] - this.options.splitSize;
-				this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm] + this.pane1.element.modifiers[pm];
-			}
-		}
-		
-		if (resized[ds] && resized[ds] != resized['old_' + ds]) {
-			this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps];
-			this.splitter.paneinfo[ds] = size[ps];
-			this.splitter.paneinfo[ds] -= this.splitter.modifiers[ps];
-			this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps];
-			this.pane2.paneinfo[ds] -= this.pane2.element.modifiers[ps];
-		}
-		
-		$A([this.pane1, this.splitter, this.pane2]).each(function(item) {
-			item.paneinfo.left = position.x;
-			item.paneinfo.top = position.y;
-			if (item.modifiers)
-				position[pm] += item.paneinfo[dm] + item.modifiers[pm];
-			else
-				position[pm] += item.paneinfo[dm] + item.element.modifiers[pm];
-		})
-		
-		if (this.horizontal) {
-			this.drag.options.limit = {
-				x: [
-					this.pane1.paneinfo.left + this.pane1.paneinfo.min,
-					this.pane1.paneinfo.left + this.getInnerWidth() - this.pane2.paneinfo.min
-				],
-				y: [this.pane1.paneinfo.top, this.pane1.paneinfo.top]
-			}
-		} else {
-			this.drag.options.limit = {
-				x: [this.pane1.paneinfo.left, this.pane1.paneinfo.left],
-				y: [
-					this.pane1.paneinfo.top + this.pane1.paneinfo.min,
-					this.pane1.top + this.getInnerHeight() - this.pane2.paneinfo.min
-				]
-			}
-		}
-	},
-	
-	setPosition: function(object) {		
-		if (object.hasClass('mooui-splitter')) {
-			var func = object.setStyles.bind(object);
-		} else {
-			var func = object.sets.bind(object);
-		}
-		
-		func({
-			width: object.paneinfo.width,
-			height: object.paneinfo.height,
-			left: object.paneinfo.left,
-			top: object.paneinfo.top
-		});
-	},
-	
-	onDrag: function(splitter) {
-		var position = splitter.getPosition(this)
-		if (this.horizontal) {
-			var diff = position.x - this.splitter.paneinfo.left
-			this.pane2.paneinfo.left += diff
-			this.pane1.paneinfo.width += diff
-			this.pane2.paneinfo.width -= diff
-			this.splitter.paneinfo.left += diff
-		} else {
-			var diff = position.y - this.splitter.paneinfo.top
-			this.pane2.paneinfo.top += diff
-			this.pane1.paneinfo.height += diff
-			this.pane2.paneinfo.height -= diff
-			this.splitter.paneinfo.top += diff
-		}
-		
-		this.setPosition(this.pane1)
-		this.setPosition(this.pane2)
-	},
-	
-	onResize: function(event) {
-		this.calculatePositions(event)
-		this.setPosition(this.pane1);
-		this.setPosition(this.splitter);
-		this.setPosition(this.pane2);
-	}
+    Extends: Widgets.Base,
+    
+    options: {
+        direction: 'horizontal',
+        name: null,
+        splitSize: 6,
+        pane1: {},
+        pane2: {}
+    },
+    
+    initialize: function(element, pane1, pane2, options) {
+        this.parent(element, options);
+        this.bound = {
+            onResize: this.onResize.bindWithEvent(this),
+            onMouseDown: this.onMouseDown.bindWithEvent(this),
+            onMouseMove: this.onMouseMove.bindWithEvent(this),
+            onMouseUp: this.onMouseUp.bindWithEvent(this)
+        };
+
+        this.horizontal = (this.options.direction == 'horizontal') ? true : false;
+        this.pane1 = $W(pane1);
+        this.pane2 = $W(pane2);
+        
+        if (this.options.expand) this.expand();
+        
+        this.initPane(this.pane1, this.options.pane1);
+        this.initPane(this.pane2, this.options.pane2);
+        this.initSplitter();
+        this.calculatePositions();
+        this.setPosition(this.pane1);
+        this.setPosition(this.splitter);
+        this.setPosition(this.pane2);
+        this.splitter.addEvent('mousedown', this.bound.onMouseDown);
+        this.addEvent('resize', this.onResize.bindWithEvent(this));
+    },
+    
+    initSplitter: function() {
+        this.splitter = new Element('div').addClass('moouiSplitter');
+        this.splitter.inject(this.pane1, 'after');
+        this.splitter.paneinfo = {};
+        if (this.horizontal) {
+            this.splitter.addClass('moouiSplitterVertical');
+        } else {
+            this.splitter.addClass('moouiSplitterHorizontal');
+        };
+        this.splitter.grab(new Element('div'));
+        this.splitter.grab(new Element('div'));
+        this.splitter.grab(new Element('div'));
+    },
+    
+    onMouseDown: function(e) {
+        window.addEvent('mouseup', this.bound.onMouseUp);
+        window.addEvent('mousemove', this.bound.onMouseMove);
+        this.mouseStart = {
+            x: e.client.x,
+            y: e.client.y
+        };
+        this.paneInfo = {
+            one: {
+                startWidth: this.pane1.paneinfo.width,
+                startHeight: this.pane1.paneinfo.height
+            },
+            two: {
+                startWidth: this.pane2.paneinfo.width,
+                startHeight: this.pane2.paneinfo.height
+            }
+        };
+    },
+    
+    onMouseMove: function(e) {
+        if (this.horizontal) {
+            diff = e.client.x - this.mouseStart.x;
+            p1width = this.paneInfo.one.startWidth + diff;
+            p2width = this.paneInfo.two.startWidth - diff;
+            if ((this.pane1.paneinfo.min - this.pane1.element.modifiers.y) > p1width) {
+                this.pane1.paneinfo.width = this.pane1.paneinfo.min;
+                this.pane2.paneinfo.width = this.paneInfo.two.startWidth + (this.paneInfo.one.startWidth - this.pane1.paneinfo.min);
+            } else if ((this.pane2.paneinfo.min - this.pane2.element.modifiers.y) > p2width) {
+                this.pane2.paneinfo.width = this.pane2.paneinfo.min;
+                this.pane1.paneinfo.width = this.paneInfo.one.startWidth + (this.paneInfo.two.startWidth - this.pane2.paneinfo.min);
+            } else {
+                this.pane1.paneinfo.width = p1width;
+                this.pane2.paneinfo.width = p2width;
+            };
+        } else {
+            diff = e.client.y - this.mouseStart.y;
+            p1height = this.paneInfo.one.startHeight + diff;
+            p2height = this.paneInfo.two.startHeight - diff;
+            if (this.pane1.paneinfo.min > p1height) {
+                this.pane1.paneinfo.height = this.pane1.paneinfo.min;
+                this.pane2.paneinfo.height = this.paneInfo.two.startHeight + (this.paneInfo.one.startHeight - this.pane1.paneinfo.min);
+            } else if (this.pane2.paneinfo.min > p2height) {
+                this.pane2.paneinfo.height = this.pane2.paneinfo.min;
+                this.pane1.paneinfo.height = this.paneInfo.one.startHeight + (this.paneInfo.two.startHeight - this.pane2.paneinfo.min);
+            } else {
+                this.pane1.paneinfo.height = p1height;
+                this.pane2.paneinfo.height = p2height;
+            };
+        };        
+        this.setPosition(this.pane1);
+        this.setPosition(this.pane2);
+    },
+    
+    onMouseUp: function(e) {
+        window.removeEvent('mouseup', this.bound.onMouseUp);
+        window.removeEvent('mousemove', this.bound.onMouseMove);
+    },
+    
+    initPane: function(pane, options) {
+        pane.addClass('moouiPane');
+        pane.paneinfo = {}
+        if (options) {
+            pane.paneinfo.min = (options.min) ? options.min : 0;
+            pane.paneinfo.expand = (options.expand) ? options.expand : false;
+        };
+    },
+    
+    calculatePositions: function(resized) {
+        if (resized) {
+            if (this.horizontal) {
+                this.calculateResize(resized, 'width', 'height', 'x', 'y');
+            } else {
+                this.calculateResize(resized, 'height', 'width', 'y', 'x');
+            }
+        } else {
+            if (this.horizontal) {
+                this.calculateInitial('width', 'height', 'x', 'y');
+            } else {
+                this.calculateInitial('height', 'width', 'y', 'x');
+            }
+        }
+    },
+    
+    calculateInitial: function(dm, ds, pm, ps) {
+        var size = this.getInnerSize();
+        this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers();
+        this.splitter.getSizeModifiers();
+        
+        // Calculate Size
+        if (this.pane1.paneinfo.expand) {
+            this.pane2.paneinfo[dm] = this.pane2.paneinfo.min;
+            this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo.min - this.options.splitSize;
+            this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm] + this.pane2.element.modifiers[pm];
+        } else {
+            this.pane1.paneinfo[dm] = this.pane1.paneinfo.min;
+            this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo.min - this.options.splitSize;
+            this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm] + this.pane1.element.modifiers[pm];
+        }
+        this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps];
+        this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps];
+        this.pane2.paneinfo[ds] -= this.pane2.element.modifiers[ps];
+        
+        this.splitter.paneinfo[ds] = size[ps];
+        this.splitter.paneinfo[dm] = this.options.splitSize;
+    },
+    
+    calculateResize: function(resized, dm, ds, pm, ps) {
+        size = this.getInnerSize();        
+        this.pane1.getSizeModifiers(); this.pane2.getSizeModifiers();
+        this.splitter.getSizeModifiers();
+        
+        if (resized[dm] && resized[dm] != resized[('old-' + dm).camelCase()]) {
+            if (this.pane1.paneinfo.expand) {
+                this.pane1.paneinfo[dm] = size[pm] - this.pane2.paneinfo[dm] - this.options.splitSize;
+                this.pane1.paneinfo[dm] -= this.pane1.element.modifiers[pm] + this.pane2.element.modifiers[pm];
+            } else {
+                this.pane2.paneinfo[dm] = size[pm] - this.pane1.paneinfo[dm] - this.options.splitSize;
+                this.pane2.paneinfo[dm] -= this.pane2.element.modifiers[pm] + this.pane1.element.modifiers[pm];
+            }
+        };
+        
+        if (resized[ds] && resized[ds] != resized[('old-' + ds).camelCase()]) {
+            this.pane1.paneinfo[ds] = this.pane2.paneinfo[ds] = size[ps];
+            this.splitter.paneinfo[ds] = size[ps];
+            this.splitter.paneinfo[ds] -= this.splitter.modifiers[ps];
+            this.pane1.paneinfo[ds] -= this.pane1.element.modifiers[ps];
+            this.pane2.paneinfo[ds] -= this.pane2.element.modifiers[ps];
+        };
+    },
+    
+    setPosition: function(object) {        
+        if (object.hasClass('moouiSplitter')) {
+            sets = object.setStyles.bind(object);
+        } else {
+            sets = object.sets.bind(object);
+        };
+        sets({
+            width: object.paneinfo.width,
+            height: object.paneinfo.height
+        });
+    },
+    
+    onResize: function(event) {
+        this.calculatePositions(event)
+        this.setPosition(this.pane1);
+        this.setPosition(this.splitter);
+        this.setPosition(this.pane2);
+    }
 })
 /*
  * Script: Widgets.Tabs.js
@@ -871,13 +879,17 @@ Widgets.Tabs = new Class({
 	Extends: Widgets.Base,
 	
 	initialize: function(element) {
-		this.parent(element)
-		this.pages = []
-		this.currentPage = -1
-		this.tabs_list = new Element('ul').inject(this.element)
-		this.pages_div = new Element('div').inject(this.element)
+		this.parent(element);
+		this.bound = {
+		    onResize: this.onResize.bindWithEvent(this)
+		};
+		this.pages = [];
+		this.currentPage = -1;
+		this.tabsList = new Element('ul').inject(this.element);
+		this.element.addClass('moouiTabs');
+		this.pagesDiv = new Element('div').inject(this.element);
 		
-		if (this.options.expand) this.expand()
+		if (this.options.expand) this.expand();
 	},
 	
 	addPage: function(page) {
@@ -890,8 +902,8 @@ Widgets.Tabs = new Class({
 		}.bindWithEvent(this))
 		page.tab = tab
 
-		this.tabs_list.grab(tab)
-		this.pages_div.grab(page.element.addClass('mooui-tabpage'))
+		this.tabsList.grab(tab)
+		this.pagesDiv.grab(page.element.addClass('moouiTabPage'))
 		
 		var pageIndex = this.pages.indexOf(page)
 		if (this.currentPage < 0) {
@@ -901,15 +913,15 @@ Widgets.Tabs = new Class({
 	},
 	
 	select: function(id) {
-		this.pages[this.currentPage].removeClass('mooui-tabpage-active')
-		this.pages[this.currentPage].tab.removeClass('mooui-tabs-active')
-		this.pages[id].addClass('mooui-tabpage-active')
-		this.pages[id].tab.addClass('mooui-tabs-active')
+		this.pages[this.currentPage].removeClass('moouiTabPageActive')
+		this.pages[this.currentPage].tab.removeClass('moouiTabActive')
+		this.pages[id].addClass('moouiTabPageActive')
+		this.pages[id].tab.addClass('moouiTabActive')
 		this.currentPage = id
 		this.fireEvent('pageChanged')
 	},
 	
-	on_resize: function() {
+	onResize: function() {
 		this._pages.each(function(page) {
 			page.resize(this.width, this.height - 45)
 		}, this)
@@ -962,54 +974,43 @@ Widgets.VBox = new Class({
 	
 	addBox: function(box, options) {
 		box = $W(box)
-		box.boxinfo = (options) ? options : {fixed: false};
+		box.boxInfo = (options) ? options : {fixed: false};
 		this.boxes.include(box);
 		this.element.grab(box);
-		box.element.setStyle('position', 'absolute');
+		box.element.setStyle('position', 'relative');
 	},
 	
 	calculatePositions: function() {
 		if (this.options.expand) this.expand();
 		var size = this.getInnerSize();
-		var position = this.boxes[0].getPosition(this);
 		var height = size.y, resizable = 0;
 		this.boxes.each(function(box) {
 			box.getSizeModifiers()
-			if (!box.boxinfo.fixed) resizable++;
+			if (!box.boxInfo.fixed) resizable++;
 			else height -= box.height + box.element.modifiers.y
-		}, this)
-		
-		position.x -= this.boxes[0].element.margin.left
-		position.y -= this.boxes[0].element.margin.top
+		}, this);
 		
 		var boxHeight = height / resizable, remainder = height % resizable
 		this.boxes.each(function(box) {
-			var boxinfo = {}
-			if (!box.boxinfo.fixed) {
+			var boxInfo = {}
+			if (!box.boxInfo.fixed) {
 				var setHeight = boxHeight - box.element.modifiers.y
 				if (remainder > 0) { setHeight -= 1; remainder-- }
-				boxinfo.height = setHeight
+				boxInfo.height = setHeight;
 			} else {
-				boxinfo.height = box.height
+				boxInfo.height = box.height;
 			}
-			boxinfo.width = size.x - box.element.modifiers.x
-			boxinfo.top = position.y
-			boxinfo.left = position.x
-
+			boxInfo.width = size.x - box.element.modifiers.x
 			box.sets({
-				height: boxinfo.height,
-				width: boxinfo.width,
-				top: boxinfo.top,
-				left: boxinfo.left
-			})
-			position.y += box.height + box.element.modifiers.y
+				height: boxInfo.height,
+				width: boxInfo.width
+			});
 		}, this)
 	},
 	
 	refreshChildren: function() {
 		this.boxes.each(function(box) {
 			box.refresh();
-			box.element.setStyle('position', 'absolute');
 		});
 	}
 })
@@ -1029,13 +1030,13 @@ Widgets.Window = new Class({
 	initialize: function(options) {
 		var element = new Element('div');
 		this.parent(element, options);
-		this.addClass('mooui-window');
+		this.addClass('moouiWindow');
 		this.sets({
 			width: this.options.width,
 			height: this.options.height
 		});
 		this.element.setStyle('opacity', 0);
-		this.title = new Element('h3').addClass('mooui-window-title');
+		this.title = new Element('h3').addClass('moouiWindowTitle');
 		this.element.grab(this.title);
 		this.title.set('text', this.options.title);
 		
@@ -1043,13 +1044,13 @@ Widgets.Window = new Class({
 			handle: this.title
 		});
 		
-		this.close = new Element('div').addClass('mooui-window-close');
+		this.close = new Element('div').addClass('moouiWindowClose');
 		this.close.inject(this.element);
 		this.close.addEvent('click', function(e) {
 			this.hide();
 		}.bindWithEvent(this));
 		
-		this.content = new Element('div').addClass('mooui-window-content');
+		this.content = new Element('div').addClass('moouiWindowContent');
 		this.content.inject(this.element);
 		
 		if (this.options.url) {
@@ -1255,6 +1256,12 @@ Widgets.DataGrid = new Class({
 	initialize: function(element, options) {
 		if (!element) element = this.createElement
 		this.parent(element, options)
+		this.bound = {
+		    onResize: this.onResize.bindWithEvent(this),
+		    onRowMenu: this.onRowMenu.bindWithEvent(this),
+		    onRowClick: this.onRowClick.bindWithEvent(this)
+		}
+		
 		this.columns = []
 		this.options.columns.each(function(column_info) {
 			var column = new Widgets.DataGridColumn(column_info)
@@ -1271,9 +1278,9 @@ Widgets.DataGrid = new Class({
 		this.sorted_by = 0
 		this.columns[0].order = -1
 		if ($chk(this.element)) { this.scanElement() } else { this.createElement }
-		this.element.setStyle('MozUserSelect', 'none')
-		this.resizeColumns()
-		this.addEvent('resize', this.resized.bindWithEvent(this))
+		this.element.setStyle('MozUserSelect', 'none');
+		this.resizeColumns();
+		this.addEvent('resize', this.bound.onResize);
 	},
 	
 	createElement: function() {
@@ -1290,7 +1297,7 @@ Widgets.DataGrid = new Class({
 	},
 	
 	scanElement: function() {
-		this.element.addClass('mooui-datagrid')
+		this.element.addClass('moouiDataGrid')
 		this.table = this.element.getElement('table')
 		if (!this.table) this.table = new Element('table').inject(this.element)
 		this.header = this.table.getElement('thead')
@@ -1314,31 +1321,31 @@ Widgets.DataGrid = new Class({
 		row.store = row_info.store
 		this.rows.include(row)
 		row.update(row_info)
-		row.addEvent('menu', this.onrowmenu.bind(this));
-		row.addEvent('click', this.onrowclick.bind(this))
-		if (!noRender) this.render()
+		row.addEvent('menu', this.bound.onRowMenu);
+		row.addEvent('click', this.bound.onRowClick);
+		if (!noRender) this.render();
 	},
 	
-	onrowmenu: function(e) {
+	onRowMenu: function(e) {
 		if (!this.selectedRow) {
-			this.selectRow(e.row)
-		}
-		this.fireEvent('row_menu', e)
+			this.selectRow(e.row);
+		};
+		this.fireEvent('rowMenu', e);
 	},
 	
-	onrowclick: function(e) {
-		e.row.index = this.displayRows.indexOf(this.getById(e.row.id))
+	onRowClick: function(e) {
+		e.row.index = this.displayRows.indexOf(this.getById(e.row.id));
 		if (e.shift) {
-			this.deselectRows()
-			this.selectRows(e.row.index)
+			this.deselectRows();
+			this.selectRows(e.row.index);
 		} else if (e.control) {
 			if (e.row.selected) { this.deselectRow(e.row) }
-			else { this.selectRow(e.row) }
+			else { this.selectRow(e.row) };
 		} else {
-			this.deselectRows()
-			this.selectRow(e.row)
+			this.deselectRows();
+			this.selectRow(e.row);
 		}
-		this.fireEvent('row_click', e)
+		this.fireEvent('rowClick', e);
 	},
 	
 	deselectRow: function(row) {
@@ -1347,7 +1354,7 @@ Widgets.DataGrid = new Class({
 		row.element.removeClass('selected')
 		if (row == this.selectedRow) {
 			this.selectedRow = null
-			this.fireEvent('selectedchanged')
+			this.fireEvent('selectedChanged')
 		}
 	},
 	
@@ -1360,13 +1367,11 @@ Widgets.DataGrid = new Class({
 	},
 	
 	filter: function() {
-		if (!$chk(this.filterer)) {
-			this.filterer = $lambda(true)
-		}
-		this.displayRows.empty()
-		this.rows.each(function(r) { 
-			if (this.filterer(r)) {this.displayRows.include(r)}
-		}.bind(this))
+	    this.filterer = (this.filterer) ? this.filterer : $lambda(true);
+		this.displayRows.empty();
+		this.rows.each(function(row) { 
+			if (this.filterer(row)) {this.displayRows.include(row)}
+		}.bind(this));
 	},
 	
 	getById: function(id) {
@@ -1393,8 +1398,8 @@ Widgets.DataGrid = new Class({
 	},
 	
 	render: function() {
-		this.filter()
-		this.resort()
+		this.filter();
+		this.resort();
 		var rows = [], rowIds = []
 		this.rows.each(function(row) {
 			if (this.displayRows.contains(row)) {
@@ -1428,7 +1433,7 @@ Widgets.DataGrid = new Class({
 		}, this)
 	},
 	
-	resized: function() {
+	onResize: function() {
 		var width = this.width
 		var columnWidth = this.options.columns.sum('width')
 		if (columnWidth > width) this.table.setStyle('width', columnWidth)
@@ -1464,7 +1469,7 @@ Widgets.DataGrid = new Class({
 		row.selected = true
 		row.element.addClass('selected')
 		this.selectedRow = row
-		this.fireEvent('selectedchanged')
+		this.fireEvent('selectedChanged');
 	},
 	
 	sort: function(column, index) {
diff --git a/deluge/ui/webui/templates/ajax/static/themes/classic/style.css b/deluge/ui/webui/templates/ajax/static/themes/classic/style.css
index 74334a764..0bd16909e 100644
--- a/deluge/ui/webui/templates/ajax/static/themes/classic/style.css
+++ b/deluge/ui/webui/templates/ajax/static/themes/classic/style.css
@@ -74,15 +74,15 @@ body {
 	text-align: right;
 }
 
-.mooui-splitter {
+.moouiSplitter {
 	background: none;
 }
 
-.mooui-splitter-vertical {
+.moouiSplitterVertical {
 	background: url(split_vertical.png) repeat-y;
 }
 
-.mooui-splitter-horizontal {
+.moouiSplitterHorizontal {
 	background: url(split_horizontal.png) repeat-x;
 }
 
@@ -138,39 +138,39 @@ body {
 	text-decoration: none;
 }
 
-.mooui-datagrid {
+.moouiDataGrid {
 	overflow: auto;
 	margin: 5px;
 	border: 1px solid #2a425c;
 }
 
-.mooui-datagrid table {
+.moouiDataGrid table {
 	/*background: #304663;*/
 	border-spacing: 0px;
 }
 
-.mooui-datagrid table th {
+.moouiDataGrid table th {
 	font-weight: normal;
 	border: 1px outset #1c2431;
 	margin-bottom: 2px;
 	cursor: pointer;
 }
 
-.mooui-datagrid table td {
+.moouiDataGrid table td {
 	padding: 2px;
 	border-bottom: 1px solid #1c2431;
 	cursor: pointer;
 }
-.mooui-datagrid table tr.selected td { background: #900; }
-.mooui-datagrid table tr:hover td { background: #68a; }
+.moouiDataGrid table tr.selected td { background: #900; }
+.moouiDataGrid table tr:hover td { background: #68a; }
 
-.mooui-progressbar div {
+.moouiProgressBar div {
 	background: #4573a5;
 	-moz-border-radius:5px; /*ff only setting*/
 	-webkit-border-radius: 5px;
 }
 
-.mooui-progressbar span {
+.moouiProgressBar span {
 	text-align: center;
 }
 
@@ -179,37 +179,37 @@ body {
 	background: #1c2431 url(simple_line_flipped.png) repeat-x;
 }
 
-.mooui-menu {
+.moouiMenu {
 	background: #304663 url(menu_bg.jpg) repeat-x;
 	border: 1px outset #37506f;
 }
 
-ul.mooui-menu li.mooui-menu-sep {
+ul.moouiMenu li.moouiMenuSep {
 	background-color: #aaa;
 }
 
-ul.mooui-menu li:hover {
+ul.moouiMenu li:hover {
 	background-color: #426187;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 }
 
-ul.mooui-menu li.mooui-menu-sep:hover {
+ul.moouiMenu li.moouiMenuSep:hover {
 	background-color: #aaa;
 }
 
-.mooui-window {
+.moouiWindow {
 	background: #426187;
 	border: 1px solid #1c2431;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
 }
 
-.mooui-window-close {
+.moouiWindowClose {
 	background-image: url(window_close.png);
 }
 
-.mooui-window-title {
+.moouiWindowTitle {
 	margin: 5px;
 }
 
@@ -281,7 +281,7 @@ form br {
 	margin-left: 100px;
 }
 
-.mooui-window-content #preferences .categories li:hover {
+.moouiWindowContent #preferences .categories li:hover {
 	text-decoration: underline;
 }
 
@@ -305,7 +305,7 @@ form br {
 	font-weight: bold;
 }
 
-.mooui-spinner {
+.moouiSpinner {
 	width: 40px;
 	margin-right: 20px;
 }
diff --git a/deluge/ui/webui/templates/ajax/static/themes/white/style.css b/deluge/ui/webui/templates/ajax/static/themes/white/style.css
index b53e6b762..2df04a747 100644
--- a/deluge/ui/webui/templates/ajax/static/themes/white/style.css
+++ b/deluge/ui/webui/templates/ajax/static/themes/white/style.css
@@ -74,19 +74,10 @@ body {
 	font-size: 26px;
 }
 
-.mooui-splitter {
+.moouiSplitter {
 	background: none;
 }
 
-/*.mooui-splitter-vertical {
-	background: url(/template/static/images/split_vertical.png) repeat-y;
-}
-
-.mooui-splitter-horizontal {
-	background: url(/template/static/images/split_horizontal.png) repeat-x;
-}*/
-
-
 #toolbar #buttons #add {background-image:url(/template/static/icons/32/add.png)}
 #toolbar #buttons #remove {background-image:url(/template/static/icons/32/remove.png)}
 #toolbar #buttons #pause {background-image:url(/template/static/icons/32/pause.png)}
@@ -145,7 +136,7 @@ body {
 }
 
 
-.mooui-datagrid {
+.moouiDataGrid {
 	overflow: auto;
 	margin: 5px;
 	border: 4px solid #C3D9FF;
@@ -153,33 +144,33 @@ body {
 	-webkit-border-radius: 5px;
 }
 
-.mooui-datagrid table {
+.moouiDataGrid table {
 	/*background: #304663;*/
 	border-spacing: 0px;
 }
 
-.mooui-datagrid table th {
+.moouiDataGrid table th {
 	font-weight: normal;
 	background: #C3D9FF;
 	margin-bottom: 2px;
 	cursor: pointer;
 }
 
-.mooui-datagrid table td {
+.moouiDataGrid table td {
 	padding: 2px;
 	border-bottom: 1px solid #1c2431;
 	cursor: pointer;
 }
-.mooui-datagrid table tr.selected td { background: #E0ECFF; }
-.mooui-datagrid table tr:hover td { background: #FFFFCC; }
+.moouiDataGrid table tr.selected td { background: #E0ECFF; }
+.moouiDataGrid table tr:hover td { background: #FFFFCC; }
 
-.mooui-progressbar div {
+.moouiProgressBar div {
 	background: #C3D9FF;
 	-moz-border-radius:5px; /*ff only setting*/
 	-webkit-border-radius: 5px;
 }
 
-.mooui-progressbar span {
+.moouiProgressBar span {
 	text-align: center;
 }
 
@@ -187,21 +178,21 @@ body {
 	padding: 5px;
 }
 
-#details .mooui-tabs li {
+#details .moouiTabs li {
 	background: #E0ECFF;
 	padding: 7px;
 	font-size: 1.1em;
 }
 
-#details .mooui-tabs li:hover {
+#details .moouiTabs li:hover {
 	background: #C3D9FF;
 }
 
-#details li.mooui-tabs-active {
+#details li.moouiTabActive {
 	background: #C3D9FF;
 }
 
-#details .mooui-tabpage {
+#details .moouiTabPage {
 	background: #C3D9FF;
 	padding: 5px;
 	-moz-border-radius:0 5px 5px 5px;
@@ -248,37 +239,37 @@ body {
 	-moz-border-radius: 7px 7px 0px 0px;
 }
 
-.mooui-menu {
+.moouiMenu {
 	background: #E0ECFF;
 	border: 1px outset Gray;
 }
 
-ul.mooui-menu li.mooui-menu-sep {
+ul.moouiMenu li.moouiMenuSep {
 	background-color: Gray;
 }
 
-ul.mooui-menu li:hover {
+ul.moouiMenu li:hover {
 	background-color: #a0a0a0;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 }
 
-ul.mooui-menu li.mooui-menu-sep:hover {
+ul.moouiMenu li.moouiMenuSep:hover {
 	background-color: Gray;
 }
 
-.mooui-window {
+.moouiWindow {
 	background: #C3D9FF;
 	border: 1px solid #1c2431;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
 }
 
-.mooui-window-close {
-	background-image: url(/template/static/images/window_close.png);
+.moouiWindowClose {
+	background-image: url(/template/static/themes/white/window_close.png);
 }
 
-.mooui-window-title {
+.moouiWindowTitle {
 	margin: 5px;
 }
 
@@ -346,7 +337,7 @@ form br {
 	margin-left: 100px;
 }
 
-.mooui-window-content #preferences .categories li:hover {
+.moouiWindowContent #preferences .categories li:hover {
 	text-decoration: underline;
 }
 
@@ -370,7 +361,7 @@ form br {
 	font-weight: bold;
 }
 
-.mooui-spinner {
+.moouiSpinner {
 	width: 40px;
 	margin-right: 20px;
 }
diff --git a/deluge/ui/webui/templates/ajax/template_style.css b/deluge/ui/webui/templates/ajax/template_style.css
index d85572473..7719945f6 100644
--- a/deluge/ui/webui/templates/ajax/template_style.css
+++ b/deluge/ui/webui/templates/ajax/template_style.css
@@ -43,21 +43,21 @@ html, body {
 	padding: 5px;
 }
 
-#details .mooui-tabs li {
+#details .moouiTabs li {
 	background: #37506f;
 	padding: 7px;
 	font-size: 1.1em;
 }
 
-#details .mooui-tabs li:hover {
+#details .moouiTabs li:hover {
 	background: #426187;
 }
 
-#details li.mooui-tabs-active {
+#details li.moouiTabActive {
 	background: #426187;
 }
 
-#details .mooui-tabpage {
+#details .moouiTabPage {
 	background: #426187;
 	padding: 5px;
 	-moz-border-radius:0 5px 5px 5px;
@@ -123,28 +123,28 @@ html, body {
 	display: block;
 }
 
-.mooui-window-content #preferences .categories {
+.moouiWindowContent #preferences .categories {
 	float: left;
 	width: 100px;
 	padding-left: 10px;
 }
 
-.mooui-window-content #preferences .pref_pages h3 {
+.moouiWindowContent #preferences .pref_pages h3 {
 	margin-bottom: 5px;
 }
 
-.mooui-window-content #preferences .pref_pages {
+.moouiWindowContent #preferences .pref_pages {
 	float: left;
 	width: 380px;
 }
 
-.mooui-window-content #preferences .categories ul {
+.moouiWindowContent #preferences .categories ul {
 	list-style: none;
 	padding: 0;
 	padding-left: 10px;
 }
 
-.mooui-window-content #preferences .categories li {
+.moouiWindowContent #preferences .categories li {
 	cursor: pointer;
 }