window.js

JavaScript Window Demo

// WELCOME TO THE JS WINDOW PROJECT
// 
// By viewing this page, you agree to the following terms:
// 1. This page is not to modified in any form without permission from it's creator.
// 2. You will not participate in any means "modification" of the source code of this page in any form without permission.
// 3. You will not link or bookmark ANY of the javascript files affiliated with this script.
// 4. You will not "borrow" any source code to this project without permission.


// Pre-load all images into a hidden div (IE fix for preloading)
document.write('<div style="width:0px; height:0px; overflow:hidden">');
document.write('<img src="tbleft.gif"/><img src="tbleftoff.gif"/><img src="tbright.gif"/><img src="tbrightoff.gif"/>');
document.write('<img src="tbmidoff.gif"/><img src="close.gif"/><img src="closeon.gif"/><img src="icon.gif"/><img src="left.gif"/>');
document.write('<img src="leftoff.gif"/><img src="right.gif"/><img src="rightoff.gif"/><img src="tbmid.gif"/>');
document.write('<img src="tbmidoff.gif"/><img src="bright.gif"/><img src="bleft.gif"/><img src="bmid.gif"/><img src="brightoff.gif"/>');
document.write('<img src="bleftoff.gif"/><img src="bmidoff.gif"/><div>');

var copyAttempt;
var specialcase = ((navigator.userAgent.indexOf('Mac') != -1) || document.all)
var flag = 0;
document.oncontextmenu=new Function("return false")
function checkIt(){
	copyAttempt = 0;
	if (window.Event) flag = 0;
	if (specialcase) flag = 1;
	return false;
}
function clearIt(){
	flag = 0;
	if (copyAttempt){
		copyAttempt = 0;
		return false;
	}
}
function windowLoaded(evt) {
    document.body.ondrag = function () { return false; };
    document.body.onselectstart = function () { return false; };
	for (i=0;i<document.images.length;i++){
		document.images[i].onmousedown = checkIt;
		document.images[i].onmouseup = function() {return false};
		if (specialcase){
			document.images[i].onmousemove = special;
			document.images[i].onclick = clearIt;
		}
	}
}

var draggin=0;
var dragx,dragy;
var posx,posy;
var cx=new Array(),cy=new Array();
var focuson=new Array();
var ithid=new Array();
var lastfocused=0;
var zdex=new Array();
var zdexbyname=new Array();

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
function getMouseXY(e) {
	if (IE) {
		posx = event.clientX + document.body.scrollLeft;
		posy = event.clientY + document.body.scrollTop;
	} else {
		posx = e.pageX;
		posy = e.pageY;
	}
	Dragging();
	return true;
}

if (!IE) document.captureEvents(Event.MOUSEUP)
document.onmouseup = dragclose;

if (!IE) document.captureEvents(Event.MOUSEDOWN)
document.onmousedown = setnofocuslast;

function setValues(e) {
	dragx=posx;
	dragy=posy;
}

function dragopen(windowname){
	setValues(window.event);
	draggin=windowname;
}
function dragclose(){
	if(!draggin==0){
		cx[draggin]=cx[draggin]+posx-dragx;
		cy[draggin]=cy[draggin]+posy-dragy;
		draggin = 0;
	}
}
function Dragging(){
	if(draggin==0) return;
	document.getElementById(draggin).style.top=cy[draggin]+posy-dragy;
	document.getElementById(draggin).style.left=cx[draggin]+posx-dragx;
}
function XPWindow_setnofocus(windowname){
	if(windowname==0) return;
	if(focuson[windowname]==true) return;
	if(ithid[windowname]==true) return;
	document.getElementById(windowname + 'notfocused').style.visibility='visible';
	document.getElementById(windowname + 'focused').style.visibility='hidden';
	document.getElementById(windowname + 'cap1').style.visibility='hidden';
	document.getElementById(windowname + 'cap2').style.color='#d8e4f8';
}
function setnofocuslast(){
	if(ithid[lastfocused]==true){ return; }
	if(lastfocused==0) return;
	if(focuson[lastfocused]==true) return;
	document.getElementById(lastfocused + 'notfocused').style.visibility='visible';
	document.getElementById(lastfocused + 'focused').style.visibility='hidden';
	document.getElementById(lastfocused + 'cap1').style.visibility='hidden';
	document.getElementById(lastfocused + 'cap2').style.color='#d8e4f8';
	lastfocused=0;
}
function XPWindow_setfocus(windowname){
	XPWindow_setnofocus(lastfocused);
	document.getElementById(windowname + 'focused').style.visibility='visible';
	document.getElementById(windowname + 'notfocused').style.visibility='hidden';
	document.getElementById(windowname + 'cap1').style.visibility='visible';
	document.getElementById(windowname + 'cap2').style.color='#FFFFFF';
	lastfocused=windowname;
	BringToTop(zdexbyname[windowname]);
}
function XPWindow_hide(windowname) {
document.getElementById(windowname).style.visibility='hidden';
document.getElementById(windowname+'focused').style.visibility='hidden';
document.getElementById(windowname+'closebtn').style.visibility='hidden';
document.getElementById(windowname+'closebtn2').style.visibility='hidden';
document.getElementById(windowname + 'cap1').style.visibility='hidden';
ithid[windowname]=true;
}
function XPWindow_show(windowname) {
document.getElementById(windowname).style.visibility='visible';
document.getElementById(windowname+'focused').style.visibility='visible';
document.getElementById(windowname+'closebtn').style.visibility='visible';
document.getElementById(windowname+'closebtn2').style.visibility='visible';
document.getElementById(windowname + 'cap1').style.visibility='visible';
ithid[windowname]=false;
}
function XPWindow_setheight(windowname) {
document.all.focused.style.visibility='hidden';
ithid[windowname]=true;
}
function XPWindow_setwidth(windowname) {
document.all.focused.style.visibility='hidden';
ithid[windowname]=true;
}
function BringToTop(number){
	if(number==zdex.length-1) return;
	var temp=zdex[number];
	//alert(temp);
	//alert(number);
	for(var x=number; x < (zdex.length-1); x++){
		zdex[x]=zdex[x+1];
		zdexbyname[zdex[x]]=x;
		document.getElementById(zdex[x]).style.zIndex=x;
	}
	zdex[zdex.length-1]=temp;
	zdexbyname[temp]=zdex.length-1;
	document.getElementById(zdex[zdex.length-1]).style.zIndex=zdex.length-1;
}

//var len = array.length;
//for (var n = 0; n < len; n++)
//  DoSomething(array[n])

function XPWindow(name,caption,content,top,left,height,width,visible,icon) {
	var height2=height;
	var width2=width;
	height+=32;
	width+=6;
	this.name=name;
	this.top=top;
	this.left=left;
	this.height=height;
	this.content=content;
	this.caption=caption;
	this.icon=icon;
	if(content==''){ content='&nbsp;'; }
	var cspacing=8;
	if(!icon==''){ icon="<img id=\""+name+"icon\" src=\""+icon+"\" border=\"0\"/>"; cspacing=22; }
	if(!caption==''){ caption="<span id=\""+name+"cap1\" style=\"position:absolute; font-family:trebuchet ms; font-size:10pt; color:#0a1883; font-weight: bold; visibility:hidden; top:7px; left:"+(cspacing+1)+";\">"+caption+"</span><span id=\""+name+"cap2\" style=\"position:absolute; font-family:trebuchet ms; font-size:10pt; font-weight: bold; color:#d8e4f8; top:6px; left:"+cspacing+";\">"+caption+"</span>"; }
	zdexbyname[name]=zdex.length;
	zdex[zdex.length]=name;
	//this.hide=XPWindow_hide;
	cy[name]=top;
	cx[name]=left;
	focuson[name]=false;
	ithid[name]=false;
	//this.show=XPWindow_show(name);
	this.html="<div id=\""+name+"\" onMouseDown=\"XPWindow_setfocus('"+name+"')\" onMouseOver=\"focuson['"+name+"']=true;\" onMouseOut=\"focuson['"+name+"']=false;\" style=\"position:absolute; top:"+top+"; left:"+left+"; cursor:default; z-index:"+zdexbyname[name]+"\"><div style=\"z-index:3; position:absolute; top:29; left:3; width:"+width2+"px; height:"+height2+"px\">"+content+"</div><div style=\"z-index:2; position:absolute; width:100%; height:29px; padding-top:5px\" onMouseDown=\"dragopen('"+name+"')\"><span style=\"width:21; text-align:right; float:left; padding-top:2\">"+icon+caption+"</span><span style=\"width:26; text-align:left; float:right\"><div id=\""+name+"closebtn2\" style=\"z-index:4; position:relative; width:21; height:21; background-image:url('close.gif')\" onMouseOver=\"document.all."+name+"closebtn.style.visibility='visible'\"><img id=\""+name+"closebtn\" src=\"closeon.gif\" style=\"visibility:hidden;\" border=\"0\" onMouseOut=\"document.all."+name+"closebtn.style.visibility='hidden'\" onClick=\"XPWindow_hide('"+name+"')\"/></div></span></div><div id=\""+name+"focused\" style=\"visibility:hidden\"><table width=\""+width+"\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse\"><tr><td><table width=\"100%\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse\"><tr height=\"29\"><td width=\"31\" background=\"tbleft.gif\"></td><td background=\"tbmid.gif\">&nbsp;</td><td width=\"31\" background=\"tbright.gif\"></td></tr></table></td></tr><tr><td><table width=\"100%\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse\"><tr height=\""+height+"\"><td width=\"3\" background=\"left.gif\"></td><td bgcolor=\"#ece9d8\" style=\"font-size:1px;\">&nbsp;</td><td width=\"3\" background=\"right.gif\"></td></tr></table></td></tr><tr height=\"3\"><td><table width=\"100%\" height=\"100%\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse; font-size:1px;\"><tr><td width=\"3\" background=\"bleft.gif\"></td><td background=\"bmid.gif\">&nbsp;</td><td width=\"3\" background=\"bright.gif\"></td></tr></table></td></tr><tr><td></td></tr></table></div><div id=\""+name+"notfocused\" style=\"visibility:visible; position:absolute; top:0\"><table width=\""+width+"\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse\"><tr><td><table width=\"100%\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse\"><tr height=\"29\"><td width=\"31\" background=\"tbleftoff.gif\"></td><td background=\"tbmidoff.gif\">&nbsp;</td><td width=\"31\" background=\"tbrightoff.gif\"></td></tr></table></td></tr><tr><td><table width=\"100%\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse\"><tr height=\""+height+"\"><td width=\"3\" background=\"leftoff.gif\"></td><td bgcolor=\"#ece9d8\" style=\"font-size:1px;\">&nbsp;</td><td width=\"3\" background=\"rightoff.gif\"></td></tr></table></td></tr><tr height=\"3\"><td><table width=\"100%\" height=\"100%\" border=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse; font-size:1px;\"><tr><td width=\"3\" background=\"bleftoff.gif\"></td><td background=\"bmidoff.gif\">&nbsp;</td><td width=\"3\" background=\"brightoff.gif\"></td></tr></table></td></tr></table></div></div>";
}