Update jQuery version and turn code into something working

base.css

@@ -3,6 +3,19 @@ html, body
 	overflow: hidden;
 }
 
+body
+{
+	position: fixed;
+	margin: 0px;
+	width: 100%;
+	height: 100%;
+}
+
+#jsde_templates
+{
+	display: none;
+}
+
 /* MDIWindow Styling | Generic */
 
 div.window-wrapper
@@ -40,8 +53,8 @@ div.window-close
 div.window-close a
 {
 	position: absolute;
-	right: 2px;
+	right: 3px;
-	top: 1px;
+	top: 2px;
 	display: block;
 	padding: 1px 4px;
 	text-decoration: none;

index.html

@@ -22,6 +22,14 @@
 					height: 300,
 					title: "Hi"
 				});
+				
+				new JsdeWindow({
+					x: 20,
+					y: 20,
+					width: 400,
+					height: 300,
+					title: "Whee!"
+				});
 			})
 		</script>
 		<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
@@ -50,10 +58,12 @@ lol&lt;hr&gt;
 			</span>
 			<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
 		</div>
-		<div id="templates">
+		<div id="jsde_templates">
 			<div class="template_window window-wrapper window-styled">
 				<div class="window-title">
+					<span class="window-title-inner">
 						Test title
+					</span>
 					<div class="window-close">
 						<a href="#">X</a>
 					</div>

jsde.js

@@ -1,34 +1,34 @@
-/**
+(function($){
- * .disableTextSelect - Disable Text Select Plugin
+	$.fn.disableSelection = function() {
- *
+		return this
- * Version: 1.1
+		 .attr('unselectable', 'on')
- * Updated: 2007-11-28
+		 .css('user-select', 'none')
- *
+		 .on('selectstart', false);
- * Used to stop users from selecting text
+	};
- *
- * Copyright (c) 2007 James Dempster (letssurf@gmail.com, http://www.jdempster.com/category/jquery/disabletextselect/)
- *
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- **/
 	
-/**
+	$.fn.enableSelection = function() {
- * Requirements:
+		return this
- * - jQuery (John Resig, http://www.jquery.com/)
+		 .attr('unselectable', 'off')
- **/
+		 .css('user-select', 'text')
-(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
+		 .off('selectstart');
-
+	};
-/* JSDE code starts here */
+})(jQuery);
 
 var next_z_index = 1;
 var currently_dragged_window = null;
-var currently_dragging = true;
+var currently_dragging = false;
+var drag_start = {x: 0, y: 0};
+
+$(function(){
+	$("body").mousemove(_HandleMouseMove);
+	$("body").mouseup(_HandleMouseUp);
+})
 
 function JsdeWindow(options)
 {
 	$.extend(this, options);
 	
-	this._outer = $("#templates .template_window").clone()[0];
+	this._outer = $("#jsde_templates .template_window").clone()[0];
 	this._inner = $(this._outer).children(".window-inner")[0];
 	this._title = $(this._outer).children(".window-title")[0];
 	
@@ -56,13 +56,20 @@ function JsdeWindow(options)
 	this.SetSize(this.width, this.height);
 	
 	$(this._outer).click(this._HandleClick);
-	$(this._outer).mousedown(this._HandleMouseDown);
 	$(this._outer).appendTo("body");
+	
+	$(this._title).mousedown(this._HandleMouseDown);
+	
+	$(this._outer).data("jsde-window", this)
+	$(this._inner).data("jsde-window", this)
+	$(this._title).data("jsde-window", this)
+	
+	this.BringToForeground();
 }
 
 JsdeWindow.prototype.BringToForeground = function()
 {
-	this.element.css({"z-index": next_z_index})
+	$(this._outer).css({"z-index": next_z_index})
 	next_z_index++;
 	return this;
 }
@@ -91,6 +98,11 @@ JsdeWindow.prototype.SetPosition = function(x, y)
 	return $(this._outer).css({left: this.x, top: this.y});
 }
 
+JsdeWindow.prototype.GetPosition = function()
+{
+	return {x: this.x, y: this.y};
+}
+
 JsdeWindow.prototype.SetSize = function(width, height)
 {
 	this.width = width;
@@ -117,15 +129,34 @@ JsdeWindow.prototype.Show = function()
 
 JsdeWindow.prototype._HandleClick = function(event)
 {
-	
+	$(this).data("jsde-window").BringToForeground();
 }
 
 JsdeWindow.prototype._HandleMouseDown = function(event)
 {
-	
+	currently_dragging = true;
+	currently_dragged_window = $(this).data("jsde-window");
+	drag_start = {x: event.pageX - currently_dragged_window.x, y: event.pageY - currently_dragged_window.y};
+	$(currently_dragged_window._outer).addClass("window-dragged");
+	currently_dragged_window.BringToForeground();
+	$("body").disableSelection();
+	event.stopPropagation();
 }
 
-JsdeWindow.prototype._HandleMouseUp = function(event)
+function _HandleMouseUp(event)
 {
-	
+	if(currently_dragging === true)
+	{
+		currently_dragging = false;
+		$("body").enableSelection();
+		$(currently_dragged_window._outer).removeClass("window-dragged");
+	}
+}
+
+function _HandleMouseMove(event)
+{
+	if(currently_dragging === true)
+	{
+		currently_dragged_window.SetPosition(event.pageX - drag_start.x, event.pageY - drag_start.y);
+	}
 }

style.css

@@ -29,11 +29,11 @@ div.window-title
 	-moz-border-radius-topright: 10px;
 	border-top-left-radius: 10px;
 	border-top-right-radius: 10px;
-	height: 18px;
+	height: 16px;
 	color: white;
 	font-size: 14px;
 	font-weight: bold;
-	padding: 2px;
+	padding: 4px;
 	padding-left: 7px;
 	border-top: 1px solid #6262FF;
 	border-right: 1px solid #6262FF;
@@ -43,7 +43,7 @@ div.window-title
 div.window-outer
 {
 	font-size: 13px;
-	top: 23px;
+	top: 25px;
 	border-bottom: 1px solid gray;
 	border-right: 1px solid gray;
 	border-left: 1px solid gray;
@@ -107,6 +107,7 @@ div.window-styled div.window-outer
 div.window-dragged div.window-title
 {
 	background-color: #0070D5;
+	background-image: none;
 }
 
 div.workspace-bar
@@ -114,6 +115,18 @@ div.workspace-bar
 	height: 32px;
 }
 
+div.window-dragged div.window-outer
+{
+	background: none;
+}
+
+div.window-dragged div.window-title, div.window-dragged div.window-outer
+{
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+}
+
 a.workspace-tab
 {
 	height: 32px;