Update docs, set defaults, and implement resizing

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;

docs/api.zpy

@@ -0,0 +1,171 @@
+# JSDE API Reference
+
+{TOC}
+
+## jQuery extensions
+
+^ $.getWindow()
+
+	Returns the JsdeWindow that the applicable element exists in. Useful to
+	do things like dynamically updating windows from an AJAX response.
+
+## JsdeWindow
+
+### Member variables
+
+^ JsdeWindow.id
+
+	Holds the unique ID of the window.
+
+^ JsdeWindow.x
+
+	Holds the current X position of the window.
+
+^ JsdeWindow.y
+
+	Holds the current Y position of the window.
+	
+^ JsdeWindow.z
+
+	Holds the current Z-index of the window.
+	
+^ JsdeWindow.width
+
+	Holds the current width of the window.
+	
+^ JsdeWindow.height
+
+	Holds the current height of the window.
+	
+^ JsdeWindow._inner
+
+	! Do __not__ use this to set the window contents, use JsdeWindow.SetContents() instead!
+
+	Holds a reference to the DOM element containing the window contents.
+
+### Constructor
+
+^ new JsdeWindow(options)
+
+	Creates a new window.
+	
+	options::
+		A plain object that contains the options for this window. Options can be any of
+		the following.
+		
+		title::
+			The title of the new window. You can use HTML here.
+			
+		contents::
+			The contents of the new window. You can use HTML here.
+		
+		visible::
+			A boolean indicating whether the window should be visible. Defaults to `true`.
+			
+		x::
+			An integer specifying the X coordinate that the window should be spawned at.
+			
+		y::
+			An integer specifying the Y coordinate that the window should be spawned at.
+			
+		width::
+			An integer specifying the initial width of the window in pixels.
+			
+		height::
+			An integer specifying the initial height of the window in pixels.
+			
+		resizable::
+			A boolean indicating whether the user is allowed to resize the window.
+			Defaults to `true`.
+			
+		min_width::
+			The minimum width of the window in pixels (used to restrict resizing). Defaults to `120`.
+			
+		min_height::
+			The minimum height of the window in pixels (used to restrict resizing). Defaults to `120`.
+			
+		max_width::
+			The maximum width of the window in pixels (used to restrict resizing). Defaults to unlimited.
+			
+		max_height::
+			The maximum height of the window in pixels (used to restrict resizing). Defaults to unlimited.
+			
+		
+
+### Member functions	
+
+^ JsdeWindow.SetPosition(**x**, **y**)
+
+	Sets the current position of a window.
+	
+	x::
+		The X coordinate.
+	
+	y::
+		The Y coordinate.
+		
+	@ Setting the window position
+	
+		$ win.SetPosition(100, 110);
+
+^ JsdeWindow.GetPosition()
+
+	Retrieves the current position of a window.
+	
+	Returns an object with an `x` and a `y` key.
+
+^ JsdeWindow.SetSize(**width**, **height**)
+
+	Sets the current size of a window.
+	
+	width::
+		The new width.
+	
+	height::
+		The new height.
+		
+	@ Setting the window size
+	
+		$ win.SetSize(400, 350);
+		
+^ JsdeWindow.GetTitle()
+
+	Returns the current title of the window.
+	
+	@ Retrieving the window title
+	
+		$ console.log(win.GetTitle());
+		
+		> "Example window title"
+		
+^ JsdeWindow.SetTitle(**title**)
+
+	Sets the current title of the window.
+	
+	title::
+		The title to set.
+	
+	@ Setting the window title
+	
+		$ win.SetTitle("Fancy new window title");
+		
+^ JsdeWindow.GetContents()
+
+	Returns the current contents of the window.
+	
+	@ Retrieving the window contents
+	
+		$ console.log(win.GetContents());
+		
+		> "These are some example contents that could hypothetically be in a <strong>JSDE window</strong>."
+
+^ JsdeWindow.SetContents(**contents**)
+
+	Sets the contents of the window.
+	
+	contents::
+		The new window contents.
+	
+	@ Setting the window contents
+	
+		$ win.SetContents("These are <em>new</em> hypothetical contents for a window.");

index.html

@@ -1,32 +1,59 @@
-<!DOCTYPE HTML>
+<!doctype html>
-<html><head>
+<html>
-<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 		<title>Javascript Desktop Environment</title>
 		<script type="text/javascript" src="jquery.js"></script>
-		<script type="text/javascript" src="jquery.disable.select.js"></script>
 		<script type="text/javascript" src="jsde.js"></script>
 		<script type="text/javascript">
-			var t;
 			$(function(){
-				createWindow(140, 30, "Test title", "<strong>Test contents</strong><pre></pre>", 500, 620, false);
+				/*createWindow(140, 30, "Test title", "<strong>Test contents</strong><pre></pre>", 500, 620, false);
 				var secondWindow = createWindow(440, 120, "Test title", "<strong>Test contents</strong>", 300, 150).bringToForeground();
 				debugEl = secondWindow;
 				secondWindow.minHeight = 100;
 				secondWindow.minWidth = 100;
 				secondWindow.maxHeight = 400;
-				secondWindow.maxWidth = 400;
+				secondWindow.maxWidth = 400;*/
+				
+				new JsdeWindow({
+					x: 20,
+					y: 20,
+					width: 400,
+					height: 300,
+					title: "Hi"
+				});
+				
+				new JsdeWindow({
+					x: 120,
+					y: 40,
+					width: 400,
+					height: 300,
+					title: "Whee!"
+				});
+				
+				$("#demo_button").click(function(event){
+					new JsdeWindow({
+						width: parseInt($("#w").val()),
+						height: parseInt($("#h").val()),
+						x: parseInt($("#x").val()),
+						y: parseInt($("#y").val()),
+						title: $("#title").val(),
+						contents: $("#contents").val()
+					});
+				});
 			})
 		</script>
 		<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
 		<link rel="stylesheet" type="text/css" href="base.css">
 		<link rel="stylesheet" type="text/css" href="style.css">
-	</head><body>
+	</head>
+	<body>
 		<div id="make-window">
 			<span id="id1">140, -8</span><br>
 			<span id="id2">733, 85<br>873, 77</span><br><br>
 			X: <input id="x" value="200" type="text"><br>
 			Y: <input id="y" value="250" type="text"><br>
-			Title: <input id="title" value="200" type="text"><br>
+			Title: <input id="title" value="Sample title" type="text"><br>
 			Contents (HTML): <br>
 <textarea id="contents" style="width: 300px; height: 180px;">&lt;strong&gt;ohai!&lt;/strong&gt;&lt;br&gt;
 lol&lt;hr&gt;
@@ -34,7 +61,7 @@ lol&lt;hr&gt;
 </textarea><br>
 			Width: <input id="w" value="400" type="text"><br>
 			Height: <input id="h" value="300" type="text"><br>
-			<button onclick="createWindow(parseInt($('#x').val()),parseInt($('#y').val()),$('#title').val(),$('#contents').val(),parseInt($('#w').val()),parseInt($('#h').val())).bringToForeground();">Make new window</button>
+			<button id="demo_button">Make new window</button>
 		</div>
 		<div class="workspace-bar">
 			<span id="workspace-tab-list">
@@ -42,4 +69,25 @@ lol&lt;hr&gt;
 			</span>
 			<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
 		</div>
-	</body></html>
+		<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>
+				</div>
+				<div class="window-outer">
+					<div class="window-inner">
+						<strong>Test contents</strong>
+					</div>
+					<div class="window-resizer">
+					</div>
+				</div>
+				<input type="hidden" name="MDIWindowIdentifier" value="1" class="MDIWindowIdentifier">
+			</div>
+		</div>
+	</body>
+</html>

jsde.js

@@ -1,290 +1,240 @@
-/**
+(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/)
+	$.fn.enableSelection = function() {
- *
+		return this
- * Dual licensed under the MIT (MIT-LICENSE.txt)
+		 .attr('unselectable', 'off')
- * and GPL (GPL-LICENSE.txt) licenses.
+		 .css('user-select', 'text')
- **/
+		 .off('selectstart');
-
+	};
-/**
+	
- * Requirements:
+	$.fn.getWindow = function() {
- * - jQuery (John Resig, http://www.jquery.com/)
+		return this.closest(".window-inner").data("jsde-window");
- **/
+	};
-(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)
+})(jQuery);
-
+
-/* JSDE code starts here */
+var next_z_index = 1;
-
+var currently_dragged_window = null;
-var dragCurrentElement = null;
+var currently_dragging = false;
-var dragStartX = 0;
+var drag_start = {x: 0, y: 0};
-var dragStartY = 0;
+var currently_resized_window = null;
-var dragCurrentX = 0;
+var currently_resizing = false;
-var dragCurrentY = 0;
+var resize_start = {x: 0, y: 0};
-var dragOriginalX = 0;
+
-var dragOriginalY = 0;
+$(function(){
-var dragEnabled = false;
+	$("body").mousemove(_HandleMouseMove);
-var dragMode = 'none';
+	$("body").mouseup(_HandleMouseUp);
-
+})
-var mouseX = 0;
+
-var mouseY = 0;
+function JsdeWindow(options)
-
+{
-var windowCurrentZ = 1;
+	$.extend(this, options);
-var windowList = [];
+	
-var windowIterator = 0;
+	this._outer = $("#jsde_templates .template_window").clone()[0];
-
+	this._inner = $(this._outer).find(".window-inner")[0];
-var lastWorkspace = 0;
+	this._title = $(this._outer).children(".window-title")[0];
-var currentWorkspace = 0;
+	
-
+	if(typeof options.visible !== "undefined" && options.visible == false)
-var debugEl = null;
+	{
-
+		this.Hide();
-$(function(){
+	}
-	// Initialization function
+	
-	$(document).mousemove(function(e){
+	if(typeof options.title !== "undefined")
-		mouseX = e.pageX;
+	{
-		mouseY = e.pageY;
+		this.SetTitle(options.title);
-		if(dragEnabled)
+	}
-		{
+	
-			if(dragMode == 'moveWindow')
+	if(typeof options.contents !== "undefined")
-			{
+	{
-				dragCurrentX = e.pageX - dragStartX;
+		this.SetContents(options.contents);
-				dragCurrentY = e.pageY - dragStartY;
+	}
-				$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
+	
-				dragCurrentElement.x = dragOriginalX + dragCurrentX;
+	if(typeof options.x === "undefined") { this.x = 0; }
-				dragCurrentElement.y = dragOriginalY + dragCurrentY;
+	if(typeof options.y === "undefined") { this.y = 0; }
-				if(dragCurrentElement.y < 0)
+	if(typeof options.width === "undefined") { this.width = 250; }
-				{
+	if(typeof options.height === "undefined") { this.height = 200; }
-					dragCurrentElement.y = 0;
+	if(typeof options.min_width === "undefined") { this.min_width = 120; }
-				}
+	if(typeof options.min_height === "undefined") { this.min_height = 120; }
-				dragCurrentElement.element.css({'left':dragCurrentElement.x+'px','top':dragCurrentElement.y+'px'});
+	if(typeof options.resizable === "undefined") { this.resizable = true; }
-				$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.x + ", " + dragCurrentElement.y);
+	
-			}
+	this.SetPosition(this.x, this.y);
-			else if(dragMode == 'resizeWindow')
+	this.SetSize(this.width, this.height);
-			{
+	
-				var dragNewX, dragNewY;
+	$(this._outer).click(this._HandleClick);
-				dragCurrentX = e.pageX - dragStartX;
+	$(this._outer).appendTo("body");
-				dragCurrentY = e.pageY - dragStartY;
+	
-				$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
+	$(this._title).mousedown(this._HandleMouseDown);
-				dragNewX = dragOriginalX + dragCurrentX;
+	
-				dragNewY = dragOriginalY + dragCurrentY;
+	$(this._outer).data("jsde-window", this)
-				
+	$(this._inner).data("jsde-window", this)
-				if(dragCurrentElement.maxWidth != undefined && dragNewX > dragCurrentElement.maxWidth)
+	$(this._title).data("jsde-window", this)
-				{
+	
-					dragNewX = dragCurrentElement.maxWidth;
+	$(this._outer).find(".window-close a").click(this._HandleClose);
-				}
+	
-				if(dragCurrentElement.minWidth != undefined && dragNewX < dragCurrentElement.minWidth)
+	$(this._outer).find(".window-resizer").mousedown(this._HandleStartResize.bind(this));
-				{
+	
-					dragNewX = dragCurrentElement.minWidth;
+	this.BringToForeground();
-				}
+}
-				if(dragCurrentElement.maxHeight != undefined && dragNewY > dragCurrentElement.maxHeight)
+
-				{
+JsdeWindow.prototype.BringToForeground = function()
-					dragNewY = dragCurrentElement.maxHeight;
+{
-				}
+	this.z = next_z_index;
-				if(dragCurrentElement.minHeight != undefined && dragNewY < dragCurrentElement.minHeight)
+	$(this._outer).css({"z-index": next_z_index})
-				{
+	next_z_index++;
-					dragNewY = dragCurrentElement.minHeight;
+	return this;
-				}
+}
-				
+
-				dragCurrentElement.width = dragNewX;
+JsdeWindow.prototype.Close = function(forced)
-				dragCurrentElement.height = dragNewY;
+{
-				if(dragCurrentElement.y < 0)
+	if(typeof forced === "undefined")
-				{
+	{
-					dragCurrentElement.y = 0;
+		forced = false;
-				}
+	}
-				dragCurrentElement.element.css({'width':dragCurrentElement.width+'px','height':dragCurrentElement.height+'px'});
+	
-				$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.width + ", " + dragCurrentElement.height);
+	$(this._outer).remove();
-			}
+}
-		}
+
-		else
+JsdeWindow.prototype.GetContents = function()
-		{
+{
-			$("span#id1").text(dragCurrentX + ", " + dragCurrentY);
+	return $(this._inner).html();
-		}
+}
-	});
+
-	$(document).mouseup(function(){
+JsdeWindow.prototype.GetTitle = function()
-		if(dragEnabled)
+{
-		{
+	return $(this._title).children(".window-title-inner").html();
-			dragEnabled = false;
+}
-			$(document).enableTextSelect();
+
-			dragCurrentElement.element.addClass('window-styled').removeClass('window-dragged');
+JsdeWindow.prototype.Hide = function()
-			$('.workspace-tab-popup').removeClass('workspace-tab-popup');
+{
-			debugEl = dragCurrentElement;
+	this.visible = false;
-		}
+	return $(this._outer).hide();
-	});
+}
-	$('#workspace_tab_add').click(function(){
+
-		createWorkspace();
+JsdeWindow.prototype.SetPosition = function(x, y)
-	});
+{
-	createWorkspace();  // creates initial workspace
+	this.x = x;
-	activateWorkspace(1);
+	this.y = y;
-})
+	
-
+	return $(this._outer).css({left: this.x, top: this.y});
-function createWindow(x, y, title, contents, width, height, resizable)
+}
-{
+
-	if(width === undefined) { var width = 400; }
+JsdeWindow.prototype.GetPosition = function()
-	if(height === undefined) { var height = 300; }
+{
-	var _newWindow = new MDIWindow(x, y, title, contents, width, height, currentWorkspace, resizable);
+	return {x: this.x, y: this.y};
-	$('body').append(_newWindow.element);
+}
-	_newWindow.bringToForeground();
+
-	return _newWindow;
+JsdeWindow.prototype.SetSize = function(width, height)
-}
+{
-
+	this.width = width;
-function createWorkspace()
+	this.height = height;
-{
+	
-	var newWorkspaceId = lastWorkspace + 1;
+	return $(this._outer).css({width: this.width, height: this.height});
-	var workspaceHtmlElement = document.createElement('a');
+}
-	workspaceHtmlElement.setAttribute('href','#');
+
-	workspaceHtmlElement.setAttribute('id','tab_' + newWorkspaceId);
+JsdeWindow.prototype.SetContents = function(html)
-	var workspaceElement = $(workspaceHtmlElement).addClass('workspace-tab');
+{
-	workspaceElement.click(function(){
+	console.log("set contents", html, this);
-		activateWorkspace(newWorkspaceId);
+	return $(this._inner).html(html);
-	});
+}
-	debugEl = workspaceElement;
+
-	$('#workspace-tab-list').append(workspaceElement);
+JsdeWindow.prototype.SetTitle = function(html)
-	workspaceElement.html(newWorkspaceId);
+{
-	lastWorkspace += 1;
+	return $(this._title).children(".window-title-inner").html(html);
-}
+}
-
+
-function activateWorkspace(id)
+JsdeWindow.prototype.Show = function()
-{
+{
-	currentWorkspace = id;
+	this.visible = true;
-	$('.workspace-tab-active').removeClass('workspace-tab-active');
+	return $(this._outer).show();
-	$('#tab_' + id).addClass('workspace-tab-active');
+}
-	redrawWindows();
+
-}
+JsdeWindow.prototype._HandleClick = function(event)
-
+{
-function redrawWindows()
+	$(this).data("jsde-window").BringToForeground();
-{
+}
-	$.each($('.window-wrapper'),function(id, element){
+
-		var currentElement = $(element);
+JsdeWindow.prototype._HandleMouseDown = function(event)
-		debugEl = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
+{
-		//alert(windowList[currentElement.children('input.MDIWindowIdentifier')[0].value]);
+	currently_dragging = true;
-		var currentWindow = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
+	currently_dragged_window = $(this).data("jsde-window");
-		if(currentWindow.assignedWorkspace == currentWorkspace)
+	drag_start = {x: event.pageX - currently_dragged_window.x, y: event.pageY - currently_dragged_window.y};
-		{
+	$(currently_dragged_window._outer).addClass("window-dragged");
-			currentElement.css({display: 'block'});
+	currently_dragged_window.BringToForeground();
-		}
+	$("body").disableSelection();
-		else
+	event.stopPropagation();
-		{
+}
-			currentElement.css({display: 'none'});
+
-		}
+JsdeWindow.prototype._HandleClose = function(event)
-	});
+{
-}
+	affected_window = $(this).closest(".window-title").data("jsde-window");
-
+	affected_window.Close();
-function MDIWindow(x, y, title, contents, width, height, workspace, resizable)
+}
-{
+
-	this.x = x;
+JsdeWindow.prototype._HandleStartResize = function(event)
-	this.y = y;
+{
-	this.title = title;
+	currently_resizing = true;
-	this.contents = contents;
+	currently_resized_window = this;
-	this.width = width;
+	resize_start = {x: event.pageX - (currently_resized_window.x + currently_resized_window.width), 
-	this.height = height;
+	                y: event.pageY - (currently_resized_window.y + currently_resized_window.height)};
-	this.minWidth = undefined;
+	$(currently_resized_window._outer).addClass("window-dragged");
-	this.minHeight = undefined;
+	currently_resized_window.BringToForeground();
-	this.maxWidth = undefined;
+	$("body").disableSelection();
-	this.maxHeight = undefined;
+	event.stopPropagation();
-	this.windowId = windowIterator;
+}
-	
+
-	if(resizable == undefined)
+function _HandleMouseUp(event)
-	{
+{
-		this.resizable = true;
+	if(currently_dragging === true)
-	}
+	{
-	else
+		currently_dragging = false;
-	{
+		$("body").enableSelection();
-		this.resizable = resizable;
+		$(currently_dragged_window._outer).removeClass("window-dragged");
-	}
+	}
-	
+	
-	if(workspace == undefined)
+	if(currently_resizing === true)
-	{
+	{
-		this.assignedWorkspace = 1;
+		currently_resizing = false;
-	}
+		$("body").enableSelection();
-	else
+		$(currently_resized_window._outer).removeClass("window-dragged");
-	{
+	}
-		this.assignedWorkspace = workspace;
+}
-	}
+
-	
+function _HandleMouseMove(event)
-	var parentMDIWindow = this;
+{
-	
+	if(currently_dragging === true)
-	var _wrapper = $(document.createElement('div')).addClass('window-wrapper').addClass('window-styled').css({'top':y+'px', 'left':x+'px', 'width':width+'px', 'height':height+'px'});
+	{
-	var _titlebar = $(document.createElement('div')).addClass('window-title').html(title);
+		currently_dragged_window.SetPosition(event.pageX - drag_start.x, event.pageY - drag_start.y);
-	var _close = $(document.createElement('div')).addClass('window-close').html('<a href="#">X</a>');
+	}
-	var _outer = $(document.createElement('div')).addClass('window-outer');
+	else if(currently_resizing === true)
-	var _inner = $(document.createElement('div')).addClass('window-inner').html(contents);
+	{
-	var _identifier = document.createElement('input');
+		var new_w = event.pageX - (resize_start.x + currently_resized_window.x);
-	var _resizer = $(document.createElement('div')).addClass('window-resizer');
+		var new_h = event.pageY - (resize_start.y + currently_resized_window.y);
-	
+		
-	_identifier.setAttribute('type', 'hidden');
+		if(typeof currently_resized_window.min_width !== "undefined" && new_w < currently_resized_window.min_width)
-	_identifier.setAttribute('name', 'MDIWindowIdentifier');
+		{
-	_identifier.setAttribute('value', windowIterator);
+			new_w = currently_resized_window.min_width;
-	_identifier = $(_identifier).addClass('MDIWindowIdentifier');
+		}
-	
+		
-	_titlebar.mousedown(function(){
+		if(typeof currently_resized_window.min_height !== "undefined" && new_h < currently_resized_window.min_height)
-		parentMDIWindow.bringToForeground();
+		{
-	});
+			new_h = currently_resized_window.min_height;
-	
+		}
-	_outer.mousedown(function(){
+		
-		parentMDIWindow.bringToForeground();
+		if(typeof currently_resized_window.max_width !== "undefined" && new_w > currently_resized_window.max_width)
-	});
+		{
-	
+			new_w = currently_resized_window.max_width;
-	_close.children("a").click(function(){
+		}
-		parentMDIWindow.close();
+		
-	});
+		if(typeof currently_resized_window.max_height !== "undefined" && new_h > currently_resized_window.max_height)
-	
+		{
-	_titlebar.append(_close);
+			new_h = currently_resized_window.max_height;
-	_outer.append(_inner);
+		}
-	
+		
-	if(this.resizable == true)
+		currently_resized_window.SetSize(new_w, new_h);
-	{
+	}
-		_outer.append(_resizer);
+}
-	}
-	
-	_wrapper.append(_titlebar).append(_outer).append(_identifier);
-	
-	this.element = _wrapper;
-	
-	this.bringToForeground = function(){
-		this.element.css('z-index',windowCurrentZ);
-		windowCurrentZ += 1;
-		return this;
-	}
-	
-	this.startDrag = function(){
-		$('.workspace-tab').addClass('workspace-tab-popup');
-		dragCurrentElement = this;
-		$(document).disableTextSelect();
-		this.element.removeClass('window-styled').addClass('window-dragged');
-		dragOriginalX = this.x;
-		dragOriginalY = this.y;
-		dragStartX = mouseX;
-		dragStartY = mouseY;
-		dragMode = 'moveWindow';
-		dragEnabled = true;
-	}
-	
-	this.startResize = function(){
-		dragCurrentElement = this;
-		$(document).disableTextSelect();
-		this.element.removeClass('window-styled').addClass('window-dragged');
-		dragOriginalX = this.width;
-		dragOriginalY = this.height;
-		dragStartX = mouseX;
-		dragStartY = mouseY;
-		dragMode = 'resizeWindow';
-		dragEnabled = true;
-	}
-	
-	this.close = function(){
-		windowList[this.windowId] = null;
-		$(this.element).remove();
-	}
-	
-	debugEl = this.element.children('.window-title');
-	var thisElement = this;
-	this.element.children('.window-title').mousedown(function(){thisElement.startDrag();});
-	this.element.find('.window-resizer').mousedown(function(){thisElement.startResize();});
-	
-	windowList[windowIterator] = this;
-	windowIterator += 1;
-}

old.js

@@ -0,0 +1,273 @@
+
+
+
+
+
+var dragCurrentElement = null;
+var dragStartX = 0;
+var dragStartY = 0;
+var dragCurrentX = 0;
+var dragCurrentY = 0;
+var dragOriginalX = 0;
+var dragOriginalY = 0;
+var dragEnabled = false;
+var dragMode = 'none';
+
+var mouseX = 0;
+var mouseY = 0;
+
+var windowCurrentZ = 1;
+var windowList = [];
+var windowIterator = 0;
+
+var lastWorkspace = 0;
+var currentWorkspace = 0;
+
+var debugEl = null;
+
+$(function(){
+	// Initialization function
+	$(document).mousemove(function(e){
+		mouseX = e.pageX;
+		mouseY = e.pageY;
+		if(dragEnabled)
+		{
+			if(dragMode == 'moveWindow')
+			{
+				dragCurrentX = e.pageX - dragStartX;
+				dragCurrentY = e.pageY - dragStartY;
+				$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
+				dragCurrentElement.x = dragOriginalX + dragCurrentX;
+				dragCurrentElement.y = dragOriginalY + dragCurrentY;
+				if(dragCurrentElement.y < 0)
+				{
+					dragCurrentElement.y = 0;
+				}
+				dragCurrentElement.element.css({'left':dragCurrentElement.x+'px','top':dragCurrentElement.y+'px'});
+				$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.x + ", " + dragCurrentElement.y);
+			}
+			else if(dragMode == 'resizeWindow')
+			{
+				var dragNewX, dragNewY;
+				dragCurrentX = e.pageX - dragStartX;
+				dragCurrentY = e.pageY - dragStartY;
+				$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
+				dragNewX = dragOriginalX + dragCurrentX;
+				dragNewY = dragOriginalY + dragCurrentY;
+				
+				if(dragCurrentElement.maxWidth != undefined && dragNewX > dragCurrentElement.maxWidth)
+				{
+					dragNewX = dragCurrentElement.maxWidth;
+				}
+				if(dragCurrentElement.minWidth != undefined && dragNewX < dragCurrentElement.minWidth)
+				{
+					dragNewX = dragCurrentElement.minWidth;
+				}
+				if(dragCurrentElement.maxHeight != undefined && dragNewY > dragCurrentElement.maxHeight)
+				{
+					dragNewY = dragCurrentElement.maxHeight;
+				}
+				if(dragCurrentElement.minHeight != undefined && dragNewY < dragCurrentElement.minHeight)
+				{
+					dragNewY = dragCurrentElement.minHeight;
+				}
+				
+				dragCurrentElement.width = dragNewX;
+				dragCurrentElement.height = dragNewY;
+				if(dragCurrentElement.y < 0)
+				{
+					dragCurrentElement.y = 0;
+				}
+				dragCurrentElement.element.css({'width':dragCurrentElement.width+'px','height':dragCurrentElement.height+'px'});
+				$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.width + ", " + dragCurrentElement.height);
+			}
+		}
+		else
+		{
+			$("span#id1").text(dragCurrentX + ", " + dragCurrentY);
+		}
+	});
+	$(document).mouseup(function(){
+		if(dragEnabled)
+		{
+			dragEnabled = false;
+			$(document).enableTextSelect();
+			dragCurrentElement.element.addClass('window-styled').removeClass('window-dragged');
+			$('.workspace-tab-popup').removeClass('workspace-tab-popup');
+			debugEl = dragCurrentElement;
+		}
+	});
+	$('#workspace_tab_add').click(function(){
+		createWorkspace();
+	});
+	createWorkspace();  // creates initial workspace
+	activateWorkspace(1);
+})
+
+function createWindow(x, y, title, contents, width, height, resizable)
+{
+	if(width === undefined) { var width = 400; }
+	if(height === undefined) { var height = 300; }
+	var _newWindow = new MDIWindow(x, y, title, contents, width, height, currentWorkspace, resizable);
+	$('body').append(_newWindow.element);
+	_newWindow.bringToForeground();
+	return _newWindow;
+}
+
+function createWorkspace()
+{
+	var newWorkspaceId = lastWorkspace + 1;
+	var workspaceHtmlElement = document.createElement('a');
+	workspaceHtmlElement.setAttribute('href','#');
+	workspaceHtmlElement.setAttribute('id','tab_' + newWorkspaceId);
+	var workspaceElement = $(workspaceHtmlElement).addClass('workspace-tab');
+	workspaceElement.click(function(){
+		activateWorkspace(newWorkspaceId);
+	});
+	debugEl = workspaceElement;
+	$('#workspace-tab-list').append(workspaceElement);
+	workspaceElement.html(newWorkspaceId);
+	lastWorkspace += 1;
+}
+
+function activateWorkspace(id)
+{
+	currentWorkspace = id;
+	$('.workspace-tab-active').removeClass('workspace-tab-active');
+	$('#tab_' + id).addClass('workspace-tab-active');
+	redrawWindows();
+}
+
+function redrawWindows()
+{
+	$.each($('.window-wrapper'),function(id, element){
+		var currentElement = $(element);
+		debugEl = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
+		//alert(windowList[currentElement.children('input.MDIWindowIdentifier')[0].value]);
+		var currentWindow = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
+		if(currentWindow.assignedWorkspace == currentWorkspace)
+		{
+			currentElement.css({display: 'block'});
+		}
+		else
+		{
+			currentElement.css({display: 'none'});
+		}
+	});
+}
+
+function MDIWindow(x, y, title, contents, width, height, workspace, resizable)
+{
+	this.x = x;
+	this.y = y;
+	this.title = title;
+	this.contents = contents;
+	this.width = width;
+	this.height = height;
+	this.minWidth = undefined;
+	this.minHeight = undefined;
+	this.maxWidth = undefined;
+	this.maxHeight = undefined;
+	this.windowId = windowIterator;
+	
+	if(resizable == undefined)
+	{
+		this.resizable = true;
+	}
+	else
+	{
+		this.resizable = resizable;
+	}
+	
+	if(workspace == undefined)
+	{
+		this.assignedWorkspace = 1;
+	}
+	else
+	{
+		this.assignedWorkspace = workspace;
+	}
+	
+	var parentMDIWindow = this;
+	
+	var _wrapper = $(document.createElement('div')).addClass('window-wrapper').addClass('window-styled').css({'top':y+'px', 'left':x+'px', 'width':width+'px', 'height':height+'px'});
+	var _titlebar = $(document.createElement('div')).addClass('window-title').html(title);
+	var _close = $(document.createElement('div')).addClass('window-close').html('<a href="#">X</a>');
+	var _outer = $(document.createElement('div')).addClass('window-outer');
+	var _inner = $(document.createElement('div')).addClass('window-inner').html(contents);
+	var _identifier = document.createElement('input');
+	var _resizer = $(document.createElement('div')).addClass('window-resizer');
+	
+	_identifier.setAttribute('type', 'hidden');
+	_identifier.setAttribute('name', 'MDIWindowIdentifier');
+	_identifier.setAttribute('value', windowIterator);
+	_identifier = $(_identifier).addClass('MDIWindowIdentifier');
+	
+	_titlebar.mousedown(function(){
+		parentMDIWindow.bringToForeground();
+	});
+	
+	_outer.mousedown(function(){
+		parentMDIWindow.bringToForeground();
+	});
+	
+	_close.children("a").click(function(){
+		parentMDIWindow.close();
+	});
+	
+	_titlebar.append(_close);
+	_outer.append(_inner);
+	
+	if(this.resizable == true)
+	{
+		_outer.append(_resizer);
+	}
+	
+	_wrapper.append(_titlebar).append(_outer).append(_identifier);
+	
+	this.element = _wrapper;
+	
+	this.bringToForeground = function(){
+		this.element.css('z-index',windowCurrentZ);
+		windowCurrentZ += 1;
+		return this;
+	}
+	
+	this.startDrag = function(){
+		$('.workspace-tab').addClass('workspace-tab-popup');
+		dragCurrentElement = this;
+		$(document).disableTextSelect();
+		this.element.removeClass('window-styled').addClass('window-dragged');
+		dragOriginalX = this.x;
+		dragOriginalY = this.y;
+		dragStartX = mouseX;
+		dragStartY = mouseY;
+		dragMode = 'moveWindow';
+		dragEnabled = true;
+	}
+	
+	this.startResize = function(){
+		dragCurrentElement = this;
+		$(document).disableTextSelect();
+		this.element.removeClass('window-styled').addClass('window-dragged');
+		dragOriginalX = this.width;
+		dragOriginalY = this.height;
+		dragStartX = mouseX;
+		dragStartY = mouseY;
+		dragMode = 'resizeWindow';
+		dragEnabled = true;
+	}
+	
+	this.close = function(){
+		windowList[this.windowId] = null;
+		$(this.element).remove();
+	}
+	
+	debugEl = this.element.children('.window-title');
+	var thisElement = this;
+	this.element.children('.window-title').mousedown(function(){thisElement.startDrag();});
+	this.element.find('.window-resizer').mousedown(function(){thisElement.startResize();});
+	
+	windowList[windowIterator] = this;
+	windowIterator += 1;
+}

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;