Minimize Maximize Close This script has been deprecated and should not be used. No update is forthcoming.

Fake Window

This window is done completely with CSS/Javascript and it behaves more or less like a normal win95/98 window.

It can be moved around, resized, minimized and maximized.

What for? Eh, I was bored.

Here is some more text so that
the scroll bar for the content div will appear...blah blah blah.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>slayeroffice | fake window</title>
<style type="text/css">
#windowContainer {
	position:absolute;
	top:10px;
	left:10px;
	background-color:#C0C0C0;
	border-style:solid;
	border-width:1px;
	border-top-color:#E0E0E0;
	border-left-color:#E0E0E0;
	width:300px;
	height:300px;
}

#windowContainerBorder1 {
	position:absolute;
	top:0px;
	left:0px;
	width:298px;
	height:298px;
	border-style:solid;
	border-width:1px;
	border-top-color:#FFFFFF;
	border-left-color:#FFFFFF;
	border-bottom-color:#808080;
	border-right-color:#808080;
}

#windowTitle {
	position:absolute;
	top:3px;
	left:3px;
	width:292px;
	height:18px;
	background-color:#000080;
	font-family:ms sans serif;
	font-size:8pt;
	padding-left:2px;
	font-weight:bold;
	color:#FFFFFF;
	cursor:default;
	vertical-align:middle;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#000080', EndColorStr='#96C8FF');
}


#controlBox {
	position:absolute;
	top:5px;
	left:243px;
}

body {
	background-color:#FFFFFF;
}

#contentArea {
	position:absolute;
	padding:5px;
	top:23px;
	left:3px;
	width:282px;
	height:250px;
	background-color:#FFFFFF;
	border-style:inset;
	border-width:2px;
	overflow:auto;
}

#resizeCapture {
	position:absolute;
	top:283px;
	left:285px;
	width:12px;
	height:16px;
	cursor:nw-resize;
	background-image:url("resizeArea.gif");
}

</style>

<script language="javascript" type="text/javascript">
var WIN_HEIGHT = 300;
var WIN_WIDTH = 300;
var WIN_TITLE = "slayeroffice | fake window";
var WIN_TOP  = 10;
var WIN_LEFT = 10;


var y,x;
var mDown = false;
var mResize = false;

var originalWidth = WIN_WIDTH;
var originalHeight = WIN_HEIGHT;
var originalTop = WIN_TOP;
var originalLeft = WIN_LEFT;

var isMaximized = false, isMinimized = false;

function init() {
	if(document.all)document.body.style.height = "100%";
	document.getElementById("windowContainer").style.height = WIN_HEIGHT;
	document.getElementById("windowContainer").style.width = WIN_WIDTH;
	document.getElementById("windowContainer").style.top = WIN_TOP;
	document.getElementById("windowContainer").style.left = WIN_LEFT;

	document.getElementById("windowTitle").innerHTML ="<img align=middle src=\"icon.gif\"> " +  WIN_TITLE;

	// event handlers
	if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
	document.onmousedown=handleMouseDownEvents;
	document.onmousemove=handleMouseMoveEvents
	document.onmouseup=handleMouseUpEvents;
	document.getElementById("windowTitle").onmouseup = windowTitleMouseUp
	document.getElementById("windowTitle").onmousedown = windowTitleMouseDown;
	document.getElementById("resizeCapture").onmousedown  = resizeCaptureOnMouseDown;
}

function resizeCaptureOnMouseDown(e) {
	mResize=true;
	captureClientXY(e);
}

function windowTitleMouseUp() {
	mDown = false;
}

function windowTitleMouseDown(e) {
	mDown=true;
	captureOffsetXY(e);
}

function initDrag(e) {
	if(!mDown)return;
	if(document.all) {
		x2 = window.event.clientX-(x+5);
		y2 = window.event.clientY-(y+5);
	} else {
		x2 = e.clientX - (x+5);
		y2 = e.clientY - (y+5);
	}
	document.getElementById("windowContainer").style.top = y2 + "px";
	document.getElementById("windowContainer").style.left = x2 + "px";
	originalLeft  = x2;
	originalTop = y2;
}

function doResize(nX,nY) {
	nWidth = nX - x;
	nHeight = nY- y;
	cWidth = originalWidth; cHeight = originalHeight;
	cWidth+=nWidth; cHeight+=nHeight;
	if(cWidth<=75 || cHeight <= 75) return;
	document.getElementById("windowContainer").style.width = cWidth + "px";
	document.getElementById("windowContainer").style.height = cHeight + "px";

	//resize/move children
	document.getElementById("windowTitle").style.width = (cWidth -8) + "px";
	document.getElementById("windowContainerBorder1").style.width = (cWidth - 2) + "px";
	document.getElementById("windowContainerBorder1").style.height = (cHeight-2) + "px";
	document.getElementById("contentArea").style.width = (cWidth-18) + "px";
	document.getElementById("contentArea").style.height = (cHeight-50) + "px";
	
	document.getElementById("resizeCapture").style.top = (cHeight-17) + "px";
	document.getElementById("resizeCapture").style.left = (cWidth-13) + "px";

	document.getElementById("controlBox").style.left = (cWidth - 57) + "px";
}

function handleMouseUpEvents() {
	if(mDown) {
		mDown=false;
		return;
	}
	
	if(mResize) {
		mResize=false;
		document.body.style.cursor = "default";
		originalWidth = parseInt(document.getElementById("windowContainer").style.width);
		originalHeight = parseInt(document.getElementById("windowContainer").style.height);
	}
}

function doClose() {
	document.getElementById("windowContainer").style.display = "none";
}

function doMinimize() {
	if(!isMinimized) {
		markCoordinates();
		document.getElementById("windowContainer").style.height = 24 + "px";
		minTop = document.all?document.body.clientHeight:window.innerHeight;
		document.getElementById("windowContainer").style.top = (minTop-25) + "px";
		document.getElementById("contentArea").style.display = "none";
		document.getElementById("windowContainerBorder1").style.display = "none";
		document.getElementById("resizeCapture").style.display = "none";
		isMinimized = true;
	} else {
		document.getElementById("windowContainer").style.top = originalTop + "px";
		document.getElementById("windowContainer").style.left = originalLeft + "px";
		document.getElementById("windowContainer").style.height = originalHeight + "px";
		document.getElementById("contentArea").style.display = "block";
		document.getElementById("windowContainerBorder1").style.display = "block";
		document.getElementById("resizeCapture").style.display = "block";
		isMinimized = false;
	}
}


function doMaximize() {
	x=0;y=0;
	if(!isMaximized) {
		markCoordinates();
		document.getElementById("windowContainer").style.top = 0;
		document.getElementById("windowContainer").style.left = 0;
		doResize(screen.width - originalWidth,screen.height - originalHeight);
		document.getElementById("contentArea").style.display = "block";
		document.getElementById("windowContainerBorder1").style.display = "block";
		document.getElementById("resizeCapture").style.display = "block";
		isMaximized = true;
	} else {
		doResize(0,0);
		isMaximized = false;
		document.getElementById("windowContainer").style.top = originalTop + "px";
		document.getElementById("windowContainer").style.left = originalLeft + "px";
	}
}

function handleMouseDownEvents(e) {
	if(mResize) {
		document.body.style.cursor = "nw-resize";
	}
}

function markCoordinates() {
	originalLeft  = parseInt(document.getElementById("windowContainer").style.left);
	originalTop = parseInt(document.getElementById("windowContainer").style.top);
}

function handleMouseMoveEvents(e) {
	if(mDown) {
		initDrag(e);
		return;
	}
	if(mResize) {
		if(document.all) {
			doResize(window.event.clientX,window.event.clientY);
		} else {
			doResize(e.clientX,e.clientY);
		}
	}
}

function captureOffsetXY(e) {
	if(document.all) {
		x=window.event.offsetX;
		y=window.event.offsetY
	} else {
		x = e.pageX - e.clientX;
		y = e.pageY - e.clientY;
	}
}

function captureClientXY(e) {
	if(document.all) {
		x = window.event.clientX;
		y = window.event.clientY;
	} else {
		x = e.clientX;
		y = e.clientY;
	}
}
</script>
<map name="ctrlBox">
<area alt="Minimize" title="Minimize" coords="1,0,16,15" href="javascript:doMinimize();">
<area alt="Maximize" title="Maximize" coords="16,0,34,16" href="javascript:doMaximize();">
<area alt="Close" title="Close" coords="33,0,53,16" href="javascript:doClose();"">
</map>
</head>
<body onload="init();">
<div id="windowContainer"  unselectable=on>
	<div id="windowContainerBorder1"></div>
	<div onSelect="return false" id="windowTitle"></div>
	<div id="controlBox"><img src="control_box.gif" width="52" height="15" border="0" usemap="#ctrlBox" /></div>
	<div id="contentArea">
		<h1>Fake Window</h1>
		This window is done completely with CSS/Javascript and it behaves more or less like a normal window.
		<p>
		It can be moved around, resized, minimized and maximized.
		</p>
		<p>
		What for? Eh, I was bored.
		</p>
		Here is some more text so that<br /> the scroll bar for the content div will appear...blah blah blah.
	</div>
	<div id="resizeCapture"></div>	
</div>
</body>
</html>

Fake Window v1.0
Last revision: 08.25.2003
steve@slayeroffice.com
http://www.slayeroffice.com