Update w/ PROD images

3 files changed, 980 insertions, 1 deletions

diff --git a/static/js/jScrollPane.js b/static/js/jScrollPane.js
new file mode 100644
index 0000000..ad090d1
--- /dev/null
+++ b/static/js/jScrollPane.js
@@ -0,0 +1,652 @@
+/* Copyright (c) 2009 Kelvin Luck (kelvin AT kelvinluck DOT com || http://www.kelvinluck.com)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * 
+ * See http://kelvinluck.com/assets/jquery/jScrollPane/
+ * $Id: jScrollPane.js 87 2009-10-12 10:44:17Z kelvin.luck $
+ */
+
+/**
+ * Replace the vertical scroll bars on any matched elements with a fancy
+ * styleable (via CSS) version. With JS disabled the elements will
+ * gracefully degrade to the browsers own implementation of overflow:auto.
+ * If the mousewheel plugin has been included on the page then the scrollable areas will also
+ * respond to the mouse wheel.
+ *
+ * @example jQuery(".scroll-pane").jScrollPane();
+ *
+ * @name jScrollPane
+ * @type jQuery
+ * @param Object	settings	hash with options, described below.
+ *								scrollbarWidth	-	The width of the generated scrollbar in pixels
+ *								scrollbarMargin	-	The amount of space to leave on the side of the scrollbar in pixels
+ *								wheelSpeed		-	The speed the pane will scroll in response to the mouse wheel in pixels
+ *								showArrows		-	Whether to display arrows for the user to scroll with
+ *								arrowSize		-	The height of the arrow buttons if showArrows=true
+ *								animateTo		-	Whether to animate when calling scrollTo and scrollBy
+ *								dragMinHeight	-	The minimum height to allow the drag bar to be
+ *								dragMaxHeight	-	The maximum height to allow the drag bar to be
+ *								animateInterval	-	The interval in milliseconds to update an animating scrollPane (default 100)
+ *								animateStep		-	The amount to divide the remaining scroll distance by when animating (default 3)
+ *								maintainPosition-	Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it - so it doesn't scroll as you add more content (default true)
+ *								tabIndex		-	The tabindex for this jScrollPane to control when it is tabbed to when navigating via keyboard (default 0)
+ *								enableKeyboardNavigation - Whether to allow keyboard scrolling of this jScrollPane when it is focused (default true)
+ *								animateToInternalLinks - Whether the move to an internal link (e.g. when it's focused by tabbing or by a hash change in the URL) should be animated or instant (default false)
+ *								scrollbarOnLeft	-	Display the scrollbar on the left side?  (needs stylesheet changes, see examples.html)
+ *								reinitialiseOnImageLoad - Whether the jScrollPane should automatically re-initialise itself when any contained images are loaded (default false)
+ *								topCapHeight	-	The height of the "cap" area between the top of the jScrollPane and the top of the track/ buttons
+ *								bottomCapHeight	-	The height of the "cap" area between the bottom of the jScrollPane and the bottom of the track/ buttons
+ * @return jQuery
+ * @cat Plugins/jScrollPane
+ * @author Kelvin Luck (kelvin AT kelvinluck DOT com || http://www.kelvinluck.com)
+ */
+
+(function($) {
+
+$.jScrollPane = {
+	active : []
+};
+$.fn.jScrollPane = function(settings)
+{
+	settings = $.extend({}, $.fn.jScrollPane.defaults, settings);
+
+	var rf = function() { return false; };
+	
+	return this.each(
+		function()
+		{
+			var $this = $(this);
+			var paneEle = this;
+			var currentScrollPosition = 0;
+			var paneWidth;
+			var paneHeight;
+			var trackHeight;
+			var trackOffset = settings.topCapHeight;
+			
+			if ($(this).parent().is('.jScrollPaneContainer')) {
+				currentScrollPosition = settings.maintainPosition ? $this.position().top : 0;
+				var $c = $(this).parent();
+				paneWidth = $c.innerWidth();
+				paneHeight = $c.outerHeight();
+				$('>.jScrollPaneTrack, >.jScrollArrowUp, >.jScrollArrowDown, >.jScrollCap', $c).remove();
+				$this.css({'top':0});
+			} else {
+				$this.data('originalStyleTag', $this.attr('style'));
+				// Switch the element's overflow to hidden to ensure we get the size of the element without the scrollbars [http://plugins.jquery.com/node/1208]
+				$this.css('overflow', 'hidden');
+				this.originalPadding = $this.css('paddingTop') + ' ' + $this.css('paddingRight') + ' ' + $this.css('paddingBottom') + ' ' + $this.css('paddingLeft');
+				this.originalSidePaddingTotal = (parseInt($this.css('paddingLeft')) || 0) + (parseInt($this.css('paddingRight')) || 0);
+				paneWidth = $this.innerWidth();
+				paneHeight = $this.innerHeight();
+				var $container = $('<div></div>')
+					.attr({'className':'jScrollPaneContainer'})
+					.css(
+						{
+							'height':paneHeight+'px', 
+							'width':paneWidth+'px'
+						}
+					);
+				if (settings.enableKeyboardNavigation) {
+					$container.attr(
+						'tabindex', 
+						settings.tabIndex
+					);
+				}
+				$this.wrap($container);
+				// deal with text size changes (if the jquery.em plugin is included)
+				// and re-initialise the scrollPane so the track maintains the
+				// correct size
+				$(document).bind(
+					'emchange', 
+					function(e, cur, prev)
+					{
+						$this.jScrollPane(settings);
+					}
+				);
+				
+			}
+			trackHeight = paneHeight;
+			
+			if (settings.reinitialiseOnImageLoad) {
+				// code inspired by jquery.onImagesLoad: http://plugins.jquery.com/project/onImagesLoad
+				// except we re-initialise the scroll pane when each image loads so that the scroll pane is always up to size...
+				// TODO: Do I even need to store it in $.data? Is a local variable here the same since I don't pass the reinitialiseOnImageLoad when I re-initialise?
+				var $imagesToLoad = $.data(paneEle, 'jScrollPaneImagesToLoad') || $('img', $this);
+				var loadedImages = [];
+				
+				if ($imagesToLoad.length) {
+					$imagesToLoad.each(function(i, val)	{
+						$(this).bind('load readystatechange', function() {
+							if($.inArray(i, loadedImages) == -1){ //don't double count images
+								loadedImages.push(val); //keep a record of images we've seen
+								$imagesToLoad = $.grep($imagesToLoad, function(n, i) {
+									return n != val;
+								});
+								$.data(paneEle, 'jScrollPaneImagesToLoad', $imagesToLoad);
+								var s2 = $.extend(settings, {reinitialiseOnImageLoad:false});
+								$this.jScrollPane(s2); // re-initialise
+							}
+						}).each(function(i, val) {
+							if(this.complete || this.complete===undefined) { 
+								//needed for potential cached images
+								this.src = this.src; 
+							} 
+						});
+					});
+				};
+			}
+
+			var p = this.originalSidePaddingTotal;
+			var realPaneWidth = paneWidth - settings.scrollbarWidth - settings.scrollbarMargin - p;
+
+			var cssToApply = {
+				'height':'auto',
+				'width': realPaneWidth + 'px'
+			}
+
+			if(settings.scrollbarOnLeft) {
+				cssToApply.paddingLeft = settings.scrollbarMargin + settings.scrollbarWidth + 'px';
+			} else {
+				cssToApply.paddingRight = settings.scrollbarMargin + 'px';
+			}
+
+			$this.css(cssToApply);
+
+			var contentHeight = $this.outerHeight();
+			var percentInView = paneHeight / contentHeight;
+
+			if (percentInView < .99) {
+				var $container = $this.parent();
+				$container.append(
+					$('<div></div>').addClass('jScrollCap jScrollCapTop').css({height:settings.topCapHeight}),
+					$('<div></div>').attr({'className':'jScrollPaneTrack'}).css({'width':settings.scrollbarWidth+'px'}).append(
+						$('<div></div>').attr({'className':'jScrollPaneDrag'}).css({'width':settings.scrollbarWidth+'px'}).append(
+							$('<div></div>').attr({'className':'jScrollPaneDragTop'}).css({'width':settings.scrollbarWidth+'px'}),
+							$('<div></div>').attr({'className':'jScrollPaneDragBottom'}).css({'width':settings.scrollbarWidth+'px'})
+						)
+					),
+					$('<div></div>').addClass('jScrollCap jScrollCapBottom').css({height:settings.bottomCapHeight})
+				);
+				
+				var $track = $('>.jScrollPaneTrack', $container);
+				var $drag = $('>.jScrollPaneTrack .jScrollPaneDrag', $container);
+				
+				
+				var currentArrowDirection;
+				var currentArrowTimerArr = [];// Array is used to store timers since they can stack up when dealing with keyboard events. This ensures all timers are cleaned up in the end, preventing an acceleration bug.
+				var currentArrowInc;
+				var whileArrowButtonDown = function() 
+				{
+					if (currentArrowInc > 4 || currentArrowInc % 4 == 0) {
+						positionDrag(dragPosition + currentArrowDirection * mouseWheelMultiplier);
+					}
+					currentArrowInc++;
+				};
+
+				if (settings.enableKeyboardNavigation) {
+					$container.bind(
+						'keydown.jscrollpane',
+						function(e) 
+						{
+							switch (e.keyCode) {
+								case 38: //up
+									currentArrowDirection = -1;
+									currentArrowInc = 0;
+									whileArrowButtonDown();
+									currentArrowTimerArr[currentArrowTimerArr.length] = setInterval(whileArrowButtonDown, 100);
+									return false;
+								case 40: //down
+									currentArrowDirection = 1;
+									currentArrowInc = 0;
+									whileArrowButtonDown();
+									currentArrowTimerArr[currentArrowTimerArr.length] = setInterval(whileArrowButtonDown, 100);
+									return false;
+								case 33: // page up
+								case 34: // page down
+									// TODO
+									return false;
+								default:
+							}
+						}
+					).bind(
+						'keyup.jscrollpane',
+						function(e) 
+						{
+							if (e.keyCode == 38 || e.keyCode == 40) {
+								for (var i = 0; i < currentArrowTimerArr.length; i++) {
+									clearInterval(currentArrowTimerArr[i]);
+								}
+								return false;
+							}
+						}
+					);
+				}
+
+				if (settings.showArrows) {
+					
+					var currentArrowButton;
+					var currentArrowInterval;
+
+					var onArrowMouseUp = function(event)
+					{
+						$('html').unbind('mouseup', onArrowMouseUp);
+						currentArrowButton.removeClass('jScrollActiveArrowButton');
+						clearInterval(currentArrowInterval);
+					};
+					var onArrowMouseDown = function() {
+						$('html').bind('mouseup', onArrowMouseUp);
+						currentArrowButton.addClass('jScrollActiveArrowButton');
+						currentArrowInc = 0;
+						whileArrowButtonDown();
+						currentArrowInterval = setInterval(whileArrowButtonDown, 100);
+					};
+					$container
+						.append(
+							$('<a></a>')
+								.attr(
+									{
+										'href':'javascript:;', 
+										'className':'jScrollArrowUp', 
+										'tabindex':-1
+									}
+								)
+								.css(
+									{
+										'width':settings.scrollbarWidth+'px',
+										'top':settings.topCapHeight + 'px'
+									}
+								)
+								.html('Scroll up')
+								.bind('mousedown', function()
+								{
+									currentArrowButton = $(this);
+									currentArrowDirection = -1;
+									onArrowMouseDown();
+									this.blur();
+									return false;
+								})
+								.bind('click', rf),
+							$('<a></a>')
+								.attr(
+									{
+										'href':'javascript:;', 
+										'className':'jScrollArrowDown', 
+										'tabindex':-1
+									}
+								)
+								.css(
+									{
+										'width':settings.scrollbarWidth+'px',
+										'bottom':settings.bottomCapHeight + 'px'
+									}
+								)
+								.html('Scroll down')
+								.bind('mousedown', function()
+								{
+									currentArrowButton = $(this);
+									currentArrowDirection = 1;
+									onArrowMouseDown();
+									this.blur();
+									return false;
+								})
+								.bind('click', rf)
+						);
+					var $upArrow = $('>.jScrollArrowUp', $container);
+					var $downArrow = $('>.jScrollArrowDown', $container);
+				}
+				
+				if (settings.arrowSize) {
+					trackHeight = paneHeight - settings.arrowSize - settings.arrowSize;
+					trackOffset += settings.arrowSize;
+				} else if ($upArrow) {
+					var topArrowHeight = $upArrow.height();
+					settings.arrowSize = topArrowHeight;
+					trackHeight = paneHeight - topArrowHeight - $downArrow.height();
+					trackOffset += topArrowHeight;
+				}
+				trackHeight -= settings.topCapHeight + settings.bottomCapHeight;
+				$track.css({'height': trackHeight+'px', top:trackOffset+'px'})
+				
+				var $pane = $(this).css({'position':'absolute', 'overflow':'visible'});
+				
+				var currentOffset;
+				var maxY;
+				var mouseWheelMultiplier;
+				// store this in a seperate variable so we can keep track more accurately than just updating the css property..
+				var dragPosition = 0;
+				var dragMiddle = percentInView*paneHeight/2;
+				
+				// pos function borrowed from tooltip plugin and adapted...
+				var getPos = function (event, c) {
+					var p = c == 'X' ? 'Left' : 'Top';
+					return event['page' + c] || (event['client' + c] + (document.documentElement['scroll' + p] || document.body['scroll' + p])) || 0;
+				};
+				
+				var ignoreNativeDrag = function() {	return false; };
+				
+				var initDrag = function()
+				{
+					ceaseAnimation();
+					currentOffset = $drag.offset(false);
+					currentOffset.top -= dragPosition;
+					maxY = trackHeight - $drag[0].offsetHeight;
+					mouseWheelMultiplier = 2 * settings.wheelSpeed * maxY / contentHeight;
+				};
+				
+				var onStartDrag = function(event)
+				{
+					initDrag();
+					dragMiddle = getPos(event, 'Y') - dragPosition - currentOffset.top;
+					$('html').bind('mouseup', onStopDrag).bind('mousemove', updateScroll);
+					if ($.browser.msie) {
+						$('html').bind('dragstart', ignoreNativeDrag).bind('selectstart', ignoreNativeDrag);
+					}
+					return false;
+				};
+				var onStopDrag = function()
+				{
+					$('html').unbind('mouseup', onStopDrag).unbind('mousemove', updateScroll);
+					dragMiddle = percentInView*paneHeight/2;
+					if ($.browser.msie) {
+						$('html').unbind('dragstart', ignoreNativeDrag).unbind('selectstart', ignoreNativeDrag);
+					}
+				};
+				var positionDrag = function(destY)
+				{
+					$container.scrollTop(0);
+					destY = destY < 0 ? 0 : (destY > maxY ? maxY : destY);
+					dragPosition = destY;
+					$drag.css({'top':destY+'px'});
+					var p = destY / maxY;
+					$this.data('jScrollPanePosition', (paneHeight-contentHeight)*-p);
+					$pane.css({'top':((paneHeight-contentHeight)*p) + 'px'});
+					$this.trigger('scroll');
+					if (settings.showArrows) {
+						$upArrow[destY == 0 ? 'addClass' : 'removeClass']('disabled');
+						$downArrow[destY == maxY ? 'addClass' : 'removeClass']('disabled');
+					}
+				};
+				var updateScroll = function(e)
+				{
+					positionDrag(getPos(e, 'Y') - currentOffset.top - dragMiddle);
+				};
+				
+				var dragH = Math.max(Math.min(percentInView*(paneHeight-settings.arrowSize*2), settings.dragMaxHeight), settings.dragMinHeight);
+				
+				$drag.css(
+					{'height':dragH+'px'}
+				).bind('mousedown', onStartDrag);
+				
+				var trackScrollInterval;
+				var trackScrollInc;
+				var trackScrollMousePos;
+				var doTrackScroll = function()
+				{
+					if (trackScrollInc > 8 || trackScrollInc%4==0) {
+						positionDrag((dragPosition - ((dragPosition - trackScrollMousePos) / 2)));
+					}
+					trackScrollInc ++;
+				};
+				var onStopTrackClick = function()
+				{
+					clearInterval(trackScrollInterval);
+					$('html').unbind('mouseup', onStopTrackClick).unbind('mousemove', onTrackMouseMove);
+				};
+				var onTrackMouseMove = function(event)
+				{
+					trackScrollMousePos = getPos(event, 'Y') - currentOffset.top - dragMiddle;
+				};
+				var onTrackClick = function(event)
+				{
+					initDrag();
+					onTrackMouseMove(event);
+					trackScrollInc = 0;
+					$('html').bind('mouseup', onStopTrackClick).bind('mousemove', onTrackMouseMove);
+					trackScrollInterval = setInterval(doTrackScroll, 100);
+					doTrackScroll();
+					return false;
+				};
+				
+				$track.bind('mousedown', onTrackClick);
+				
+				$container.bind(
+					'mousewheel',
+					function (event, delta) {
+						delta = delta || (event.wheelDelta ? event.wheelDelta / 120 : (event.detail) ?
+-event.detail/3 : 0);
+						initDrag();
+						ceaseAnimation();
+						var d = dragPosition;
+						positionDrag(dragPosition - delta * mouseWheelMultiplier);
+						var dragOccured = d != dragPosition;
+						return !dragOccured;
+					}
+				);
+
+				var _animateToPosition;
+				var _animateToInterval;
+				function animateToPosition()
+				{
+					var diff = (_animateToPosition - dragPosition) / settings.animateStep;
+					if (diff > 1 || diff < -1) {
+						positionDrag(dragPosition + diff);
+					} else {
+						positionDrag(_animateToPosition);
+						ceaseAnimation();
+					}
+				}
+				var ceaseAnimation = function()
+				{
+					if (_animateToInterval) {
+						clearInterval(_animateToInterval);
+						delete _animateToPosition;
+					}
+				};
+				var scrollTo = function(pos, preventAni)
+				{
+					if (typeof pos == "string") {
+						$e = $(pos, $this);
+						if (!$e.length) return;
+						pos = $e.offset().top - $this.offset().top;
+					}
+					ceaseAnimation();
+					var maxScroll = contentHeight - paneHeight;
+					pos = pos > maxScroll ? maxScroll : pos;
+					$this.data('jScrollPaneMaxScroll', maxScroll);
+					var destDragPosition = pos/maxScroll * maxY;
+					if (preventAni || !settings.animateTo) {
+						positionDrag(destDragPosition);
+					} else {
+						$container.scrollTop(0);
+						_animateToPosition = destDragPosition;
+						_animateToInterval = setInterval(animateToPosition, settings.animateInterval);
+					}
+				};
+				$this[0].scrollTo = scrollTo;
+				
+				$this[0].scrollBy = function(delta)
+				{
+					var currentPos = -parseInt($pane.css('top')) || 0;
+					scrollTo(currentPos + delta);
+				};
+				
+				initDrag();
+				
+				scrollTo(-currentScrollPosition, true);
+			
+				// Deal with it when the user tabs to a link or form element within this scrollpane
+				$('*', this).bind(
+					'focus',
+					function(event)
+					{
+						var $e = $(this);
+						
+						// loop through parents adding the offset top of any elements that are relatively positioned between
+						// the focused element and the jScrollPaneContainer so we can get the true distance from the top
+						// of the focused element to the top of the scrollpane...
+						var eleTop = 0;
+						
+						while ($e[0] != $this[0]) {
+							eleTop += $e.position().top;
+							$e = $e.offsetParent();
+						}
+						
+						var viewportTop = -parseInt($pane.css('top')) || 0;
+						var maxVisibleEleTop = viewportTop + paneHeight;
+						var eleInView = eleTop > viewportTop && eleTop < maxVisibleEleTop;
+						if (!eleInView) {
+							var destPos = eleTop - settings.scrollbarMargin;
+							if (eleTop > viewportTop) { // element is below viewport - scroll so it is at bottom.
+								destPos += $(this).height() + 15 + settings.scrollbarMargin - paneHeight;
+							}
+							scrollTo(destPos);
+						}
+					}
+				)
+				
+				
+				if (location.hash && location.hash.length > 1) {
+					setTimeout(function() {scrollTo(location.hash);}, $.browser.safari ? 100 : 0);
+				}
+				
+				// use event delegation to listen for all clicks on links and hijack them if they are links to
+				// anchors within our content...
+				$(document).bind(
+					'click',
+					function(e)
+					{
+						$target = $(e.target);
+						if ($target.is('a')) {
+							var h = $target.attr('href');
+							if (h && h.substr(0, 1) == '#' && h.length > 1) {
+								setTimeout(function() {scrollTo(h, !settings.animateToInternalLinks);}, $.browser.safari ? 100 : 0);
+							}
+						}
+					}
+				); 
+				
+				// Deal with dragging and selecting text to make the scrollpane scroll...
+				function onSelectScrollMouseDown(e)
+				{
+				   $(document).bind('mousemove.jScrollPaneDragging', onTextSelectionScrollMouseMove);
+				   $(document).bind('mouseup.jScrollPaneDragging',   onSelectScrollMouseUp);
+				  
+				}
+				
+				var textDragDistanceAway;
+				var textSelectionInterval;
+				
+				function onTextSelectionInterval()
+				{
+					direction = textDragDistanceAway < 0 ? -1 : 1;
+					$this[0].scrollBy(textDragDistanceAway / 2);
+				}
+
+				function clearTextSelectionInterval()
+				{
+					if (textSelectionInterval) {
+						clearInterval(textSelectionInterval);
+						textSelectionInterval = undefined;
+					}
+				}
+				
+				function onTextSelectionScrollMouseMove(e)
+				{
+					var offset = $this.parent().offset().top;
+					var maxOffset = offset + paneHeight;
+					var mouseOffset = getPos(e, 'Y');
+					textDragDistanceAway = mouseOffset < offset ? mouseOffset - offset : (mouseOffset > maxOffset ? mouseOffset - maxOffset : 0);
+					if (textDragDistanceAway == 0) {
+						clearTextSelectionInterval();
+					} else {
+						if (!textSelectionInterval) {
+							textSelectionInterval  = setInterval(onTextSelectionInterval, 100);
+						}
+					}
+				}
+
+				function onSelectScrollMouseUp(e)
+				{
+				   $(document)
+					  .unbind('mousemove.jScrollPaneDragging')
+					  .unbind('mouseup.jScrollPaneDragging');
+				   clearTextSelectionInterval();
+				}
+
+				$container.bind('mousedown.jScrollPane', onSelectScrollMouseDown);
+
+				
+				$.jScrollPane.active.push($this[0]);
+				
+			} else {
+				$this.css(
+					{
+						'height':paneHeight+'px',
+						'width':paneWidth-this.originalSidePaddingTotal+'px',
+						'padding':this.originalPadding
+					}
+				);
+				$this[0].scrollTo = $this[0].scrollBy = function() {};
+				// clean up listeners
+				$this.parent().unbind('mousewheel').unbind('mousedown.jScrollPane').unbind('keydown.jscrollpane').unbind('keyup.jscrollpane');
+			}
+			
+		}
+	)
+};
+
+$.fn.jScrollPaneRemove = function()
+{
+	$(this).each(function()
+	{
+		$this = $(this);
+		var $c = $this.parent();
+		if ($c.is('.jScrollPaneContainer')) {
+			$this.css(
+				{
+					'top':'',
+					'height':'',
+					'width':'',
+					'padding':'',
+					'overflow':'',
+					'position':''
+				}
+			);
+			$this.attr('style', $this.data('originalStyleTag'));
+			$c.after($this).remove();
+		}
+	});
+}
+
+$.fn.jScrollPane.defaults = {
+	scrollbarWidth : 10,
+	scrollbarMargin : 5,
+	wheelSpeed : 18,
+	showArrows : false,
+	arrowSize : 0,
+	animateTo : false,
+	dragMinHeight : 1,
+	dragMaxHeight : 99999,
+	animateInterval : 100,
+	animateStep: 3,
+	maintainPosition: true,
+	scrollbarOnLeft: false,
+	reinitialiseOnImageLoad: false,
+	tabIndex : 0,
+	enableKeyboardNavigation: true,
+	animateToInternalLinks: false,
+	topCapHeight: 0,
+	bottomCapHeight: 0
+};
+
+// clean up the scrollTo expandos
+$(window)
+	.bind('unload', function() {
+		var els = $.jScrollPane.active; 
+		for (var i=0; i<els.length; i++) {
+			els[i].scrollTo = els[i].scrollBy = null;
+		}
+	}
+);
+
+})(jQuery);
\ No newline at end of file
diff --git a/static/js/register.js b/static/js/register.js
index 1739ed6..af7529b 100755
--- a/static/js/register.js
+++ b/static/js/register.js
@@ -6,7 +6,7 @@ function validateNick(n) {
 
 // HOPE NO HACKERS ARE READING THIS :o
 var ValidCodes = ['WAXWANYE23',
-		    'HOTDUMPING5000'];
+		    'HOTDUMPING5000','RHIZOME',];
 
 function submitRegistration() {
     var nick = $('#nickInput').val();
diff --git a/static/js/win.js b/static/js/win.js
new file mode 100644
index 0000000..7571791
--- /dev/null
+++ b/static/js/win.js
@@ -0,0 +1,327 @@
+// JavaScript Document
+//<![CDATA[
+// ==== First some helper functions ====
+
+// Nice, handy strprintf for javascript
+
+function jstrprintf() {
+    len = arguments.length;
+    if (len == 0) { return; }
+    if (len == 1) { return arguments[0]; }
+    
+    var result;
+    var regexstr;
+    var replstr;
+    var formatstr;
+    var re;
+    
+    result = "";
+    regexstr = "";
+    replstr = "";
+    formatstr = arguments[0];
+    
+    for (var i=1; i<arguments.length; i++) {
+        replstr += String(i+100) + arguments[i]  + String(i + 100);
+        regexstr += String(i+100) + "(.*)" + String(i+100);
+    }
+    re = new RegExp(regexstr);
+    var result;
+    result = replstr.replace(re, formatstr);
+    return result;
+}
+
+function AddPx(num) {
+    return String(num) + "px";
+}
+
+function findParentDiv(obj) {
+    while (obj) {
+        if (obj.tagName.toUpperCase() == "DIV") {
+            return obj;
+        }
+        
+        if (obj.parentElement) {
+            obj = obj.parentElement;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+}
+
+function findParentTagById(obj, parentname) {
+    while (obj) {
+        if (obj.id.match(parentname)) {
+            return obj;
+        }
+        
+        if (obj.parentElement) {
+            obj = obj.parentElement;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+}
+
+// Now for the real thing
+
+var topZ = 1;
+var startX;
+var startY;
+nextID = 1;
+
+function CreateDropdownWindow( caption, theWidth, canMove, contentSource, startX, startY) {
+    var newdiv;
+    newdiv = document.createElement("div");
+    newdiv.id = "dragTitle" + String(nextID);
+    newdiv.className = "divDragTitle";
+    newdiv.style.width = theWidth;
+    newdiv.style.left = AddPx(startX);
+    newdiv.style.top = AddPx(startY);
+    newdiv.style.zIndex = topZ;
+    newdiv.innerHTML = jstrprintf(
+        '<table><tr><td>$1</td>' + 
+        '<td style="text-align:right">' +
+        '<img src="/static/buttontop.gif" class="divTitleButton" id="dragButton$2" ' + 
+        'onmousedown="javascript:toggleContentWin($2)" /></td>' +
+        '</tr></table>',
+        caption, nextID);
+    
+    // If canMove is false, don't register event handlers
+    if (canMove) {
+        // IE doesn't support addEventListener, so check for its presence
+        if (newdiv.addEventListener) {
+            // firefox, etc.
+            newdiv.addEventListener("mousemove", function(e) { return mouseMove(e) }, true);
+            newdiv.addEventListener("mousedown", function(e) { return mouseDown(e) }, true);
+            newdiv.addEventListener("mouseup", function(e) { return mouseUp(e) }, true);
+        }
+        else {
+            // IE
+            newdiv.attachEvent("onmousemove", function(e) { return mouseMove(e) });
+            newdiv.attachEvent("onmousedown", function(e) { return mouseDown(e) });
+            newdiv.attachEvent("onmouseup", function(e) { return mouseUp(e) });
+        }
+    }
+    document.body.appendChild(newdiv);
+
+    var newdiv2;
+    newdiv2 = document.createElement("div");
+    newdiv2.id = "dragContent" + String(nextID);
+    newdiv2.className = "divDragContent";
+    newdiv2.style.width = theWidth;
+    newdiv2.style.left = AddPx(startX);
+    newdiv2.style.top = AddPx(startY + 20);
+    newdiv2.style.zIndex = topZ;
+    if (contentSource) {
+        newdiv2.innerHTML = document.getElementById(contentSource).innerHTML;
+    }
+    
+    if (canMove) {
+        if (newdiv2.addEventListener) {
+            // firefox, etc.
+            newdiv2.addEventListener("mousedown", function(e) { return contentMouseDown(e) }, true);
+        }
+        else {
+            // IE
+            newdiv2.attachEvent("onmousedown", function(e) { return contentMouseDown(e) });
+        }
+    }
+    document.body.appendChild(newdiv2);
+    
+    // Save away the content DIV into the title DIV for 
+    // later access, and vice versa
+    newdiv.content = newdiv2;
+    newdiv2.titlediv = newdiv;
+
+    topZ += 1;
+    startX += 20;
+    startY += 20;
+    // If you want you can check when these two are greater than
+    // a certain number and then rotate them back to 100,100...
+    
+    nextID++;
+}
+
+function toggleContentWin(id) {
+    var elem = document.getElementById("dragContent" + String(id));
+    var img = document.getElementById("dragButton" + String(id));
+
+    if (elem.style.display == "none") {
+        // hidden, so unhide
+        elem.style.display = "block";
+        
+        // Change the button's image
+        img.src = "/static/buttontop.gif";
+}
+    else {
+        // showing, so hide
+        elem.style.display = "none";
+
+        // Change the button's image
+        img.src = "/static/buttonbottom.gif";
+    }
+}
+
+// Drag methods
+var dragObjTitle = null;
+var dragOffsetX = 0;
+var dragOffsetY = 0;
+
+function contentMouseDown(e) {
+    // Move the window to the front
+    // Use a handy trick for IE vs FF
+    var dragContent = e.srcElement || e.currentTarget;
+    if ( ! dragContent.id.match("dragContent")) {
+        dragContent = findParentTagById(dragContent, "dragContent");
+    }
+    if (dragContent) {
+        dragContent.style.zIndex = topZ;
+        dragContent.titlediv.style.zIndex = topZ;
+        topZ++;
+    }
+}
+
+function mouseDown(e) {
+    // These first two lines are written to handle both FF and IE
+    var curElem = e.srcElement || e.target;
+    var dragTitle = e.currentTarget || findParentDiv(curElem);
+    if (dragTitle) {
+        if (dragTitle.className != 'divDragTitle') {
+            return;
+        }
+    }
+    
+    // Start the drag, but first make sure neither is null
+    if (curElem && dragTitle) {
+    
+        // Attach the document handlers. We don't want these running all the time.
+        addDocumentHandlers(true);
+    
+        // Move this window to the front.
+        dragTitle.style.zIndex = topZ;
+        dragTitle.content.style.zIndex = topZ;
+        topZ++;
+    
+        // Check if it's the button. If so, don't drag.
+        if (curElem.className != "divTitleButton") {
+            
+            // Save away the two objects
+            dragObjTitle = dragTitle;
+            
+            // Calculate the offset
+            dragOffsetX = e.clientX - 
+                dragTitle.offsetLeft;
+            dragOffsetY = e.clientY - 
+                dragTitle.offsetTop;
+                
+            // Don't let the default actions take place
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+            else {
+                document.onselectstart = function () { return false; };
+                e.cancelBubble = true;
+                return false;
+            }
+        }
+    }
+}
+
+function mouseMove(e) {
+    // If not null, then we're in a drag
+    if (dragObjTitle) {
+    
+        if (!e.preventDefault) {
+            // This is the IE version for handling a strange
+            // problem when you quickly move the mouse
+            // out of the window and let go of the button.
+            if (e.button == 0) {
+                finishDrag(e);
+                return;
+            }
+        }
+    
+        dragObjTitle.style.left = AddPx(e.clientX - dragOffsetX);
+        dragObjTitle.style.top = AddPx(e.clientY - dragOffsetY);
+        dragObjTitle.content.style.left = AddPx(e.clientX - dragOffsetX);
+        dragObjTitle.content.style.top = AddPx(e.clientY - dragOffsetY + 20);
+        if (e.preventDefault) {
+            e.preventDefault();
+        }
+        else {
+            e.cancelBubble = true;
+            return false;
+        }
+    }
+}
+
+function mouseUp(e) {
+    if (dragObjTitle) {
+        finishDrag(e);
+    }
+}
+
+function finishDrag(e) {
+    var finalX = e.clientX - dragOffsetX;
+    var finalY = e.clientY - dragOffsetY;
+    if (finalX < 0) { finalX = 0 };
+    if (finalY < 0) { finalY = 0 };
+
+    dragObjTitle.style.left = AddPx(finalX);
+    dragObjTitle.style.top = AddPx(finalY);
+    dragObjTitle.content.style.left = AddPx(finalX);
+    dragObjTitle.content.style.top = AddPx(finalY + 20);
+
+    
+    // Done, so reset to null
+    dragObjTitle = null;
+    addDocumentHandlers(false);
+    if (e.preventDefault) {
+        e.preventDefault();
+    }
+    else {
+        document.onselectstart = null;
+        e.cancelBubble = true;
+        return false;
+    }
+}
+
+function addDocumentHandlers(addOrRemove) {
+    if (addOrRemove) {
+        if (document.body.addEventListener) {
+            // firefox, etc.
+            document.addEventListener("mousedown", function(e) { return mouseDown(e) }, true);
+            document.addEventListener("mousemove", function(e) { return mouseMove(e) }, true);
+            document.addEventListener("mouseup", function(e) { return mouseUp(e) }, true);
+        }
+        else {
+            // IE
+            document.onmousedown = function() { mouseDown(window.event) } ;
+            document.onmousemove = function() { mouseMove(window.event) } ;
+            document.onmouseup = function() { mouseUp(window.event) } ;
+        }
+    }
+    else {
+        if (document.body.addEventListener) {
+            // firefox, etc.
+            remove.addEventListener("mousedown", function(e) { return mouseDown(e) }, true);
+            remove.addEventListener("mousemove", function(e) { return mouseMove(e) }, true);
+            remove.addEventListener("mouseup", function(e) { return mouseUp(e) }, true);
+        }
+        else {
+            // IE
+            // Be careful here. If you have other code that sets these events,
+            // you'll want this code here to restore the values to your other handlers,
+            // rather than just clear them out.
+            document.onmousedown = null;
+            document.onmousemove = null;
+            document.onmouseup = null;
+        }
+    }
+}
+
+//]]>
\ No newline at end of file