Add all static website files.

static/Res/code/boxController.js

@@ -0,0 +1,183 @@
+/* 
+BoxController
+Note: Requires boxSettings.js also be included
+
+Revisions
+2003-09-13: Jeff edited. Added expand all of type.
+2003-09-15: Jeff added cookie code.
+
+Boxes are the bordered divs with a header and body, and a expand/collapse button.
+Box types:
+partialMap, subTopic, callouts, comments, taskInformation, legend.
+
+If you collapse a subTopic box on one page, you collapse all subTopic boxes that and other pages. Same with expanding.
+Note: There can be more than one box of each type on the page.
+
+In HTML, the structure expected is:
+
+div.{boxType}Area (useful for CSS selector of different types of boxes, e.g. div.{boxType}Area div.box)
+	div class="collapsiblebox" id="{boxType}{index}" (1+) 
+		div.header onclick = "boxController.expandOrCollapse(this,'{boxType}')" (0-1) 
+			span.title
+			span.commands  ? (mike)
+				span.command  ? (mike)
+					img.expandOrCollapseButton src="{buttonsPath}{collapseButtonUrl} or {expandButtonUrl}"
+		div.body
+			(varies)
+	
+	Note: Visibility of div.body (i.e. style="display:block" or style="display:none") is overwritten by code.
+	Note: Button graphics as well.									
+	
+ */
+
+function init() {
+	boxController = new BoxController("Res/images/", "box_collapse_button.gif","box_expand_button.gif", true);
+	boxController.init();
+}
+
+// BoxController class
+
+function BoxController (buttonsPath, collapseButtonFilename,expandButtonFilename, changeAllOfType) {
+	this.objectClass = "BoxController";
+	this.buttonsPath = buttonsPath;
+	this.collapseButtonUrl = buttonsPath + collapseButtonFilename;
+	this.expandButtonUrl = buttonsPath + expandButtonFilename;
+	this.changeAllOfType = changeAllOfType; // if true, all boxes of a type are expanded or collapsed together, not just clicked one
+	this.boxTypes = null;
+}
+
+
+BoxController.prototype.init = function() {
+	// initialize boxTypes
+	this.boxTypes = INITIAL_BOX_SETTINGS; // defaults loaded from boxSettings.js
+
+	// check if cookie has stored states
+	var cookieString = this.getCookieString();
+	if (cookieString!=null) {
+		// for each boxType, get stored value from cookie
+		for (var i=0; i < this.boxTypes.length; i++) {
+			var boxType = this.boxTypes[i];
+			var value = getValueFromCookieString ( cookieString, boxType.name );
+			if (value!=null) {
+				boxType.state = value=="true" ? true : false;
+			}
+		}
+	}
+	
+	
+	// for each boxType, change state of all boxes of that type
+	for (var i=0; i < this.boxTypes.length; i++) {
+		this.changeStateOfAllBoxesOfType( this.boxTypes[i].name, this.boxTypes[i].state );
+	}
+}
+
+BoxController.prototype.dumpBoxTypes = function() {
+	var s = "BoxTypes\n";
+	for (var i=0; i < this.boxTypes.length; i++) {
+		s += this.boxTypes[i].name + "," + this.boxTypes[i].state+ "\n";
+	}
+	return s;
+}
+	
+BoxController.prototype.saveStateToCookie = function() {
+	// stores state of controller in cookie
+	var cookieString = "";
+
+	// for each box type...
+	for (var i=0; i < this.boxTypes.length; i++ ) {
+		var boxType = this.boxTypes[i];
+		if (cookieString!="") cookieString += "&";
+		cookieString += boxType.name + ":" + escape(boxType.state); 
+	}
+
+	// Cookie properties (if needed)
+	// Currently assumes that all html pages are in the same directory together, otherwise cookie's path property would need to be set
+	// Currently that cookie should expire when user closes the browser (expires property)
+	// save cookie; will be only accessible to this html page
+	var cookieName = this.objectClass;
+	document.cookie = cookieName + "=" + cookieString; 
+}
+
+BoxController.prototype.getCookieString = function() {
+	// checks saved state of controller from cookie; returns string of values or null if desired cookie does not exist
+	var cookieName = this.objectClass;
+	var allCookies = document.cookie;
+	if (allCookies=="") return null;
+	
+	// extract the named cookie we want
+	var start = allCookies.indexOf(cookieName + "=");
+	if (start == -1) return null;
+	
+	start += cookieName.length + 1;  // skip over name and = sign
+	var end = allCookies.indexOf(";", start);
+	if (end==-1) end = allCookies.length;
+	var cookieString = allCookies.substring(start,end);
+	return cookieString;
+}
+
+BoxController.prototype.changeStateOfAllBoxesOfType = function( boxType, newState ) {
+	// changes all boxes on the page of boxType to newState ("expand" or "collapse") 
+	// loop through all boxes of boxType
+	var boxIndex = 0;
+	while (document.getElementById (boxType + boxIndex) ) {
+		// change state
+		this.changeStateOfBoxOnPage ( document.getElementById (boxType + boxIndex), newState );
+		boxIndex++;
+	}
+	// store new state in array
+	for (var i=0; i < this.boxTypes.length; i++ ) {
+		var boxTypeItem = this.boxTypes[i];
+		if (boxTypeItem.name == boxType) {
+			boxTypeItem.state = newState;
+			break;
+		}
+	}
+}
+
+BoxController.prototype.expandOrCollapse = function( headerElement, boxType ) {
+	// Note: Having one routine for both expand and collapse let's the function that html calls be the same
+	// Uses img's src attribute to determine which command is being called
+	// First get the button element; may be the elementActivated or within the elementActivated (like an anchor element)
+	var buttonElement = getFirstDescendentOrSelfOfClass ( headerElement, "expandOrCollapseButton");
+	if (!buttonElement) return;
+		
+	var currentImageUrl = buttonElement.src;
+	if (!currentImageUrl) return;
+
+	// if src value contains url of collapse button, this is, presumably a collapse command
+	var newState = false;
+	if (currentImageUrl.lastIndexOf(this.collapseButtonUrl)==-1) newState = true;
+	
+	// change state of all boxes of this type ...
+	if (this.changeAllOfType) {
+		this.changeStateOfAllBoxesOfType (boxType,newState);
+		this.saveStateToCookie();
+	}
+	// or just this one box
+	else {
+		var boxElement = headerElement.parentNode;
+		if (boxElement) this.changeStateOfBoxOnPage(boxElement,newState);
+	}
+	
+}
+
+BoxController.prototype.changeStateOfBoxOnPage = function( boxElement, makeOpen) {
+	// change UI of box on the html page
+	
+	// get button element
+	var buttonElement = getFirstDescendentOrSelfOfClass( boxElement, "expandOrCollapseButton");
+	if (!buttonElement) return false; // if not found, give up
+	// get body element
+	var bodyElement = getFirstDescendentOrSelfOfClass( boxElement, "body");
+	if (!bodyElement) return false; // if not found, give up
+	
+	// expand or collapse body element
+	showOrHideElement(bodyElement,makeOpen);
+	
+	// update img to be an appropriate button
+	if (buttonElement.src) {
+		// if opening, make it the collapse button; if not opening, make it the expand button
+		buttonElement.src = makeOpen ? this.collapseButtonUrl : this.expandButtonUrl;
+	}
+}
+

static/Res/code/boxSettings.js

@@ -0,0 +1,11 @@
+// exported by program to supply initial settings for boxes
+
+var INITIAL_BOX_SETTINGS = [
+	{name:"partialMap",	state:true}, 
+	{name:"subTopics",	state:true}, 
+	{name:"callouts",	state:true}, 
+	{name:"comments",	state:false}, 
+	{name:"relationships",	state:true}, 
+	{name:"taskInformation",  state:true}, 
+	{name:"legend",		state:true}
+];

static/Res/code/mapController.js

@@ -0,0 +1,232 @@
+// MapController class
+// Scrollable, switchable (in amount of detail) map
+// Uses functions from shared.js
+// Requires html page with two imgs for each level of detail; one of which is style="display:none" at start
+// Requires mainFrame is scrollable (for Netscape/Mozilla to work
+
+// MapController class
+
+function MapController (frameObject, dragMultiplier) {
+	this.objectClass = "MapController";		// used as name for cookie
+	this.DRAG_THRESHOLD = 4;	// minimum distance before a drag can not be treated as a click; in pixels
+	this.DRAG_MAX_FIRST_STEP = 10;	// largest distance permitted within single mousemove; used to detect invalid drag on IE	
+	this.frameObject = frameObject;	// scrollable frame containing mapImages
+	this.mapImages = [];			// array storing each mapImage (2 images)
+	this.activeMapImage = 1;		// index of active/visible image; default to first map image
+	this.dragMultiplier = dragMultiplier ? dragMultiplier : 1;	// 1 = default; 2 = 2x speed dragging; can be any number
+	//this.temp = 0;
+	//this.systemInfo = new SystemInfo();
+}
+
+MapController.prototype.init = function(initialMap) {
+	// setup dragScrolling
+	this.dragScrolling = false;					// indicates that user is dragging image around
+	this.wasDraggedEnoughToNotBeAClick = false;
+	this.mouseJustPressed = false;
+	this.mouseDownX, this.mouseDownY = null;
+	this.oldScrollX, this.oldScrollY = null;
+	// Note: Changed following from document.onmousedown; fixes dragging on scroll bar triggering onmousedown in Mozilla/NS
+	var mapContentElement = this.frameObject.document.getElementById("mapContent");
+	if (!mapContentElement) mapContentElement = this.frameObject.document;
+	mapContentElement.onmousedown = this.onMouseDown;
+	//this.frameObject.document.onmousedown = this.onMouseDown;
+	this.frameObject.document.onmousemove = this.onMouseMove;
+	this.frameObject.document.onmouseup = this.onMouseUp;
+	this.frameObject.document.onclick = this.onClick;
+	this.frameObject.document.onscroll = this.onScroll;
+	//
+	var cookieValue = this.getCookieValue();
+	//window.status = cookieValue;
+	if (cookieValue==false) {
+		// there was no saved state, so the map is presumably loading for the first time
+		this.selectMapImage(initialMap); // select active map
+	}
+	else {
+		// the state is saved; use the cookieValue to figure out the state
+		this.initFromCookieValue(cookieValue);
+	}
+	//trace(this.systemInfo);
+}
+
+// Note: In following, e = event object passed in automatically 
+
+MapController.prototype.onMouseDown = function(e) {
+	// Note: Ends up running in context of the frame, so this = frameObject, not mapController
+	// Get a reference mapController object to be able to use it here.
+	var mc = parent.topFrame.mapController;	// HACK: Must be more elegant way to get reference.
+	if (!e) var e = mc.frameObject.event;
+	if (wasLeftButton(e)) {	 // TODO: Double-check wasLeftButton code; now only works for IE?
+		mc.mouseDownX = /* e.x ? e.x : */ e.screenX;
+		mc.mouseDownY = /* e.y ? e.y : */ e.screenY;
+		// Note: In Mozilla/NS, the mainFrame must be scrollable for the .scrollLeft and .scrollTop properties to be accessible
+		mc.oldScrollX = mc.frameObject.document.body.scrollLeft;
+		mc.oldScrollY = mc.frameObject.document.body.scrollTop;
+		//window.status = "mc.frameObject.document.body.scrollTop:"+mc.frameObject.document.body.scrollLeft;
+		mc.dragScrolling = true;
+		mc.mouseJustPressed = true;
+		mc.wasDraggedEnoughToNotBeAClick = false;
+		//window.status = "mouseDown: " + " | " + mc.mouseDownX + "," + mc.mouseDownY+ " | " + mc.oldScrollX + "," + mc.oldScrollY;
+	}
+	return false; // stops browser behavior of dragging image to copy it to the desktop (at least on Mac Safari)
+}
+
+MapController.prototype.onMouseMove = function(e) {
+	var mc = parent.topFrame.mapController;	// HACK: Must be more elegant way to get reference.
+	if (!e) var e = mc.frameObject.event;
+	//window.status = "MouseMove:" + mapController.temp++;
+	if (mc.dragScrolling) {
+		if (!e) var e = mc.frameObject.event;
+		var newMouseX = /* e.x ? e.x :*/ e.screenX;
+		var newMouseY = /* e.y ? e.y : */ e.screenY;
+		var newOffsetX = newMouseX - mc.mouseDownX;
+		var newOffsetY = newMouseY - mc.mouseDownY;
+		
+		// Test if move from old to new position is unreasonably large, as in the case when
+		// user drags scroll bar in IE -- then dragScrolling is true, but mouseUp is lost.
+		// So, this code stops dragScrolling in that case.
+		if (mc.mouseJustPressed) {
+			if (Math.abs(newOffsetX) > mc.DRAG_MAX_FIRST_STEP | Math.abs(newOffsetY) > mc.DRAG_MAX_FIRST_STEP) {
+				mc.dragScrolling = false;
+				return false;
+			}
+			mc.mouseJustPressed = false;
+		}
+		
+	
+		
+		//window.status = '(' + newOffsetX +',' + newOffsetY+')'
+		if (Math.abs(newOffsetX) > mc.DRAG_THRESHOLD | Math.abs(newOffsetY) > mc.DRAG_THRESHOLD) mc.wasDraggedEnoughToNotBeAClick = true;
+		var newScrollX = mc.oldScrollX - mc.dragMultiplier * newOffsetX;
+		var newScrollY = mc.oldScrollY - mc.dragMultiplier * newOffsetY;
+		mc.frameObject.scrollTo(newScrollX,newScrollY);
+		//window.status = "dragging: " + " | " + newMouseX + "," + newMouseY+ " | " + newScrollX + "," + newScrollY;
+		return false;
+	}
+	else {
+		//window.status = "not dragging "+ mapController.temp++;
+	}
+}
+
+MapController.prototype.onMouseUp = function(e) {
+	//window.status = "up";
+	var mc = parent.topFrame.mapController;	// HACK: Must be more elegant way to get reference.
+	mc.dragScrolling = false;
+	return false; // Doesn't seem to have any useful affect
+}
+
+MapController.prototype.onClick = function(e) {
+	var mc = parent.topFrame.mapController;	// HACK: Must be more elegant way to get reference.
+	//window.status = "onclick";
+	if (mc.wasDraggedEnoughToNotBeAClick) {
+		//window.status = "onclick return false";
+		return false; // cancels onClick event; if mouseUp was on hotshop, navigation can not happen
+	}
+	return true;	
+}
+
+MapController.prototype.onScroll = function(e) {
+	//window.status = "scroll";
+	// Opera: Triggered when mapContent dragged
+	// Mozilla/NS: Triggered when scroll bar dragged (but not mapContent dragged)
+	// IE: Never triggered
+	//var mc = parent.topFrame.mapController;	// HACK: Must be more elegant way to get reference.
+	//mc.dragScrolling = false;
+	//return false; // Doesn't seem to have any useful affect	
+}
+
+MapController.prototype.addMapImage = function(imgId, centerX, centerY) {
+	this.mapImages.push( new MapImage ( this.frameObject, imgId, centerX, centerY) );
+}
+
+MapController.prototype.selectMapImage = function(newActiveMapImage) {
+	// make mapImageToSelect active and make others inactive
+	var lastImage = this.mapImages.length - 1;
+	for (var i=0; i <= lastImage; i++ ) {
+		this.mapImages[i].makeActive( i==newActiveMapImage );
+	}
+	this.activeMapImage = newActiveMapImage;
+	this.saveStateToCookie(); 
+	this.scrollToCenter();
+}
+
+
+MapController.prototype.scrollToCenter = function() {
+	// scrolls to the center of active map image
+	var activeMapImage = this.mapImages[this.activeMapImage];
+	var frameObject = this.frameObject;
+	//trace(activeMapImage);
+	this.frameObject.scrollTo( activeMapImage.centerX - (getWindowWidth(frameObject)/2), activeMapImage.centerY - (getWindowHeight(frameObject)/2));
+}
+
+MapController.prototype.saveStateToCookie = function() {
+	// stores state of controller in cookie
+	var cookieName = this.objectClass;
+	var cookieValue = "";
+	// save which map is selected/active
+	cookieValue += "active:" + this.activeMapImage;
+	// TODO: save scroll position
+	// save cookie; will be only accessible to this html page
+	document.cookie = cookieName + "=" + cookieValue; 
+}
+
+/*
+MapController.prototype.savedStateExists = function() {
+	// returns true is saved state (cookie) exists
+}
+*/
+
+MapController.prototype.getCookieValue = function() {
+	// checks saved state of controller from cookie; returns string of values or false if desired cookie does not exist
+	var cookieName = this.objectClass;
+	var allCookies = document.cookie;
+	if (allCookies=="") return false;
+	
+	// extract the named cookie we want
+	var start = allCookies.indexOf(cookieName + "=");
+	if (start == -1) return false;
+	
+	start += cookieName.length + 1;  // skip over name and = sign
+	var end = allCookies.indexOf(";", start);
+	if (end==-1) end = allCookies.length;
+	var cookieValue = allCookies.substring(start,end);
+	return cookieValue;
+}
+
+MapController.prototype.initFromCookieValue = function(cookieValue) {
+	// parses cookieValue; initializes object accorded to saved values
+	/*
+	var a = cookieValue.split("&"); // create array from name/value pairs delimited by ampersand
+	for (var i=0; i < a.length; i++) {	// then break each pair into an array
+		a[i] = a[i].split(":");
+	}
+	*/
+	// TODO: Rewrite. Currently a hack.
+		if (cookieValue=="active:1") this.selectMapImage(1);
+		else this.selectMapImage(0);
+		// this.selectMapImage(initialMap);
+}
+
+/*
+MapController.prototype.moveTo = function(x,y) {
+	// move image (i.e. scroll window)
+	window.scrollTo(x,y);
+}
+*/
+
+// MapImage class - one for each img/view of the map
+
+function MapImage ( frameObject, imgId, centerX, centerY ) {
+	this.objectClass = "MapImage";
+	this.centerX = centerX;
+	this.centerY = centerY;
+	// get image reference
+	this.imgElement = getElement(frameObject,imgId);
+	this.imgStyle = getElementsStyleObject(frameObject,imgId);
+}
+
+MapImage.prototype.makeActive = function (newIsActiveState) {
+	//this.trace();
+	var newDisplayStyle = newIsActiveState ? "block" : "none";
+	this.imgStyle.display = newDisplayStyle;
+}
+

static/Res/code/shared.js

@@ -0,0 +1,169 @@
+// Shared routines
+
+function openPopup(url,windowName,features) {
+	window.open(url,windowName,features);
+}
+
+function preloadImage(Url) {
+	var i = new Image();
+	i.src = Url;
+}
+
+function showOrHideElement(element,show) {
+	element.style.display = show ? "block" : "none";
+}
+
+/* unused
+function getFirstAncestorOfClass (sourceElement, className) {
+	// recursively search for ancestor of sourceElement that matches className
+	var elementBeingTested = sourceElement.parentNode;
+	if (elementBeingTested.className == className) return elementBeingTested;
+	if (!elementBeingTested.className) return null;	// if run out of elements (like at document) stop
+	return getFirstAncestorOfClass(elementBeingTested, className);
+}
+*/
+
+function getFirstDescendentOrSelfOfClass (sourceElement, className) {
+	// recursively search for descendent of sourceElement that matches className
+	// test self
+	if (sourceElement.className == className) return sourceElement;
+	// test children
+	var child = sourceElement.firstChild;
+	if (child) {
+		while (child) {
+			var elementBeingTested = getFirstDescendentOrSelfOfClass (child, className);
+			if (elementBeingTested) return elementBeingTested;
+			child = child.nextSibling;
+		}
+	}
+	return null;
+}
+
+function getElement(frameObject,elementId) {
+	if (document.getElementById) return frameObject.document.getElementById(elementId);
+	if (document.all) return frameObject.document.all[elementId];
+	if (document.layers) return frameObject.document.layers[elementId];
+	return null;
+}
+
+function getElementsStyleObject(frameObject,elementId) {
+	if (document.getElementById) return frameObject.document.getElementById(elementId).style;
+	if (document.all) return frameObject.document.all[elementId].style;
+	if (document.layers) return frameObject.document.layers[elementId];
+	return null;
+}
+
+function getWindowHeight(frameObject) {
+	if (document.all) return frameObject.document.body.clientHeight; // IE on Mac and Windows
+	if (document.layers) return frameObject.document.clientHeight;
+}
+
+function getWindowWidth(frameObject) {
+	if (document.all) return frameObject.document.body.clientWidth; // IE on Mac and Windows
+	if (document.layers) return frameObject.document.clientWidth;
+}
+	
+function trace (anObject) {
+	alert(listObject(anObject));
+}
+
+function listObject(theObject) {
+	var m = '';
+	for (prop in theObject) {
+		m+= prop + ":" + theObject[prop] + "\n";
+		//* if theObject[prop] == 
+	}
+	return(m);
+}
+
+function wasLeftButton(e) {
+	// takes event object (e) and decides if left button was pressed (as opposed to middle wheel button)
+	var buttonPressed = /* (navigator.appName=="Netscape") ?  e.which : */ e.button;
+	if (buttonPressed == 1 | buttonPressed == 0 ) return true;
+	return false;
+}
+
+function appendToCookieString ( cookieString, property, value ) {
+	if (cookieString!="") cookieString += "&";
+	cookieString += property + ":" + escape(value);
+}
+
+function getValueFromCookieString ( cookieString, property) {
+	// extract value of given property from encoding like this: "property1:value1&property2:value2"
+	var pos = cookieString.indexOf(property); // at start of property label
+	if (pos==-1) return null;
+	pos += property.length + 1; // at start of value
+	var start = pos;
+	pos = cookieString.indexOf("&",pos+1);
+	// if "&" not found, must be last property:value pair -- end of value is end of cookieString
+	// else end of value is just before "&"
+	var end = (pos==-1) ? cookieString.length : pos;
+	var value = cookieString.substring(start,end);
+	return unescape(value);
+}
+	
+
+// SystemInfo Class
+// class to handle system check (browser, etc.)
+// Thanks to http://www.xs4all.nl/~ppk/js/detect.html for this code
+// TODO: Rewrite?
+/* 
+function SystemInfo() {
+	this.detect = navigator.userAgent.toLowerCase();
+	this.OS = null;
+	this.browser = null;
+	this.version = null;
+	//this.subVersion = null;
+	this.total = null;
+	this.thestring = null;
+	this.place = null;
+
+	if (this.checkIt('konqueror')) {
+		this.browser = "Konqueror";
+		this.OS = "Linux";
+	}
+	else if (this.checkIt('safari')) {
+		this.browser = "Safari"
+		//this.subVersion = this.detect.substring(8,12);
+	}
+	else if (this.checkIt('omniweb')) this.browser = "OmniWeb"
+	else if (this.checkIt('opera')) this.browser = "Opera"
+	else if (this.checkIt('webtv')) this.browser = "WebTV";
+	else if (this.checkIt('icab')) this.browser = "iCab"
+	else if (this.checkIt('msie')) this.browser = "Internet Explorer"
+	else if (!this.checkIt('compatible')) {
+		this.browser = "Netscape Navigator"
+		this.version = this.detect.charAt(8);
+	}
+	else this.browser = "An unknown browser";
+
+	if (!this.version) this.version = this.detect.charAt(this.place + this.thestring.length);
+	
+	if (!this.OS) {
+		if (this.checkIt('linux')) this.OS = "Linux";
+		else if (this.checkIt('x11')) this.OS = "Unix";
+		else if (this.checkIt('mac')) this.OS = "Mac"
+		else if (this.checkIt('win')) this.OS = "Windows"
+		else this.OS = "an unknown operating system";
+	}
+}
+
+SystemInfo.prototype.checkIt = function(string) {
+	this.place = this.detect.indexOf(string) + 1;
+	this.thestring = string;
+	return this.place; // HACK: Weird
+}
+
+*/
+
+// Saving state using cookies
+
+/*
+expires
+domain
+
+document.cookie = "version=" + escape(document.lastModified) + "; expires=" + 
+// cookie values may not include semicolons, commas, or whitespace
+
+
+*/

static/Res/styles/DynamicOutline.css

@@ -0,0 +1,69 @@
+/* Cascading Style Sheet for HTML export */
+/* MODULE: DYNAMIC OUTLINE */
+
+/* Dark Red style */
+
+/* This stylesheet expects the following HTML structure
+		  
+  left column in page body
+		  #pageBody .left
+		  
+		  td.outlineColumn
+		     div.dynamicOutline
+			     div.tree
+				     div.mout
+					  div.mover
+*/
+
+
+/* visual highlight the sidebar navigation */
+.outlineColumn {
+	vertical-align: top;	
+	border: 1px solid Silver;
+	background-color: #FAFAFA;
+	margin: 0px;
+	padding-top: 10px;
+	padding-bottom: 20px;
+}
+
+.dynamicOutline {
+}
+
+/* tree is the same as dynamicOutline, just nested */
+.tree {
+}
+
+.tree a:link {
+	color: Black;
+	text-decoration: none;
+}
+
+.tree a:active {
+	color: #FF3300;
+	text-decoration: none;
+}
+
+.tree a:visited {
+	color: Black;
+	text-decoration: none;
+}
+
+.tree a:hover {
+   color: #FF3300;
+	text-decoration: none;
+}
+
+.tree .mout {
+	text-decoration: none;
+	width: 100%;
+	padding: 0px;
+	font-size: 8pt;
+}
+
+.tree .mover {
+	text-decoration: none;
+	width: 100%;
+	padding: 0px;
+	color: #CC0000;
+	font-size: 8pt;
+}

static/Res/tree/tree_items.js

@@ -0,0 +1,79 @@
+var TREE_ITEMS = [
+	['Home','index.html',{'sb':' '},
+		['1. DISSERTATION', 'DISSERTATION.html',{'tt':'1. DISSERTATION','sb':'DISSERTATION.html'},],
+		['2. CERTIFICATE', 'CERTIFICATE.html',{'tt':'2. CERTIFICATE','sb':'CERTIFICATE.html'},],
+		['3. DEDICATION', 'DEDICATION.html',{'tt':'3. DEDICATION','sb':'DEDICATION.html'},],
+		['4. ACKNOWLEDGMENTS', 'ACKNOWLEDGMENTS.html',{'tt':'4. ACKNOWLEDGMENTS','sb':'ACKNOWLEDGMENTS.html'},],
+		['5. ABSTRACT', 'ABSTRACT.html',{'tt':'5. ABSTRACT','sb':'ABSTRACT.html'},],
+		['6. General Basics (Popular)', 'GeneralBasics(Popular).html',{'tt':'6. General Basics (Popular)','sb':'GeneralBasics(Popular).html'},
+			['6.1 Basic Emotions', 'BasicEmotions.html',{'tt':'6.1 Basic Emotions','sb':'BasicEmotions.html'},],
+			['6.2 Purpose of Emotions', 'PurposeofEmotions.html',{'tt':'6.2 Purpose of Emotions','sb':'PurposeofEmotions.html'},],
+			['6.3 Emotional Intelligence', 'EmotionalIntelligence.html',{'tt':'6.3 Emotional Intelligence','sb':'EmotionalIntelligence.html'},],
+			['6.4 Association', 'Association.html',{'tt':'6.4 Association','sb':'Association.html'},],
+			['6.5 Empathy', 'Empathy.html',{'tt':'6.5 Empathy','sb':'Empathy.html'},],
+			['6.6 Emotion and Decision', 'EmotionandDecision.html',{'tt':'6.6 Emotion and Decision','sb':'EmotionandDecision.html'},],
+			['6.7 Emotion and Rationality', 'EmotionandRationality.html',{'tt':'6.7 Emotion and Rationality','sb':'EmotionandRationality.html'},],
+			['6.8 Primary vs. Secondary Emot... ', 'Primaryvs.SecondaryEmotions.html',{'tt':'6.8 Primary vs. Secondary Emotions','sb':'Primaryvs.SecondaryEmotions.html'},],
+			['6.9 Emotions', 'Emotions.html',{'tt':'6.9 Emotions','sb':'Emotions.html'},
+				['6.9.1 Greed', 'Greed.html',{'tt':'6.9.1 Greed','sb':'Greed.html'},],
+				['6.9.2 Hope', 'Hope.html',{'tt':'6.9.2 Hope','sb':'Hope.html'},],
+				['6.9.3 Envy', 'Envy.html',{'tt':'6.9.3 Envy','sb':'Envy.html'},],
+				['6.9.4 Desire', 'Desire.html',{'tt':'6.9.4 Desire','sb':'Desire.html'},],
+				['6.9.5 Love', 'Love.html',{'tt':'6.9.5 Love','sb':'Love.html'},],
+				['6.9.6 Fear', 'Fear.html',{'tt':'6.9.6 Fear','sb':'Fear.html'},],
+				['6.9.7 Shame', 'Shame.html',{'tt':'6.9.7 Shame','sb':'Shame.html'},],
+				['6.9.8 Repulsion', 'Repulsion.html',{'tt':'6.9.8 Repulsion','sb':'Repulsion.html'},],
+				['6.9.9 Contentment', 'Contentment.html',{'tt':'6.9.9 Contentment','sb':'Contentment.html'},],
+				['6.9.10 Happiness', 'Happiness.html',{'tt':'6.9.10 Happiness','sb':'Happiness.html'},],
+				['6.9.11 Pride', 'Pride.html',{'tt':'6.9.11 Pride','sb':'Pride.html'},],
+				['6.9.12 Guilt', 'Guilt.html',{'tt':'6.9.12 Guilt','sb':'Guilt.html'},],
+				['6.9.13 Jealousy', 'Jealousy.html',{'tt':'6.9.13 Jealousy','sb':'Jealousy.html'},],
+				['6.9.14 Anger', 'Anger.html',{'tt':'6.9.14 Anger','sb':'Anger.html'},],
+				['6.9.15 Sadness', 'Sadness.html',{'tt':'6.9.15 Sadness','sb':'Sadness.html'},],
+],
+			['6.10 Cognitive Dissonance', 'CognitiveDissonance.html',{'tt':'6.10 Cognitive Dissonance','sb':'CognitiveDissonance.html'},],
+],
+		['7. HYPOTHESIS', 'HYPOTHESIS.html',{'tt':'7. HYPOTHESIS','sb':'HYPOTHESIS.html'},],
+		['8. LITERATURE REVIEW', 'LITERATUREREVIEW.html',{'tt':'8. LITERATURE REVIEW','sb':'LITERATUREREVIEW.html'},],
+		['9. METHODOLOGY', 'METHODOLOGY.html',{'tt':'9. METHODOLOGY','sb':'METHODOLOGY.html'},
+			['9.1 Phase 1', 'Phase1.html',{'tt':'9.1 Phase 1','sb':'Phase1.html'},],
+			['9.2 Phase 2', 'Phase2.html',{'tt':'9.2 Phase 2','sb':'Phase2.html'},],
+			['9.3 Phase 3', 'Phase3.html',{'tt':'9.3 Phase 3','sb':'Phase3.html'},],
+			['9.4 Phase 4', 'Phase4.html',{'tt':'9.4 Phase 4','sb':'Phase4.html'},],
+			['9.5 Phase 5', 'Phase5.html',{'tt':'9.5 Phase 5','sb':'Phase5.html'},],
+			['9.6 Phase 6', 'Phase6.html',{'tt':'9.6 Phase 6','sb':'Phase6.html'},],
+],
+		['10. The Harmelen Case', 'TheHarmelenCase.html',{'tt':'10. The Harmelen Case','sb':'TheHarmelenCase.html'},],
+		['11. DISCUSSION', 'DISCUSSION.html',{'tt':'11. DISCUSSION','sb':'DISCUSSION.html'},
+			['11.1 Definition Study', 'DefinitionStudy.html',{'tt':'11.1 Definition Study','sb':'DefinitionStudy.html'},
+				['11.1.1 EI History and Definiti... ', 'EIHistoryandDefinition.html',{'tt':'11.1.1 EI History and Definition','sb':'EIHistoryandDefinition.html'},],
+				['11.1.2 Learning', 'Learning.html',{'tt':'11.1.2 Learning','sb':'Learning.html'},],
+				['11.1.3 Leadership', 'Leadership.html',{'tt':'11.1.3 Leadership','sb':'Leadership.html'},],
+],
+			['11.2 First Principle of Behavi... ', 'FirstPrincipleofBehaviourMotivation.html',{'tt':'11.2 First Principle of Behaviour Motivation','sb':'FirstPrincipleofBehaviourMotivation.html'},],
+			['11.3 Facets of the First Princ... ', 'FacetsoftheFirstPrinciple.html',{'tt':'11.3 Facets of the First Principle','sb':'FacetsoftheFirstPrinciple.html'},],
+			['11.4 General Law of Behaviour ... ', 'GeneralLawofBehaviourMotivation.html',{'tt':'11.4 General Law of Behaviour Motivation','sb':'GeneralLawofBehaviourMotivation.html'},],
+			['11.5 Observing First Principle... ', 'ObservingFirstPrincipleinFlow.html',{'tt':'11.5 Observing First Principle in Flow','sb':'ObservingFirstPrincipleinFlow.html'},],
+			['11.6 Work versus Private', 'WorkversusPrivate.html',{'tt':'11.6 Work versus Private','sb':'WorkversusPrivate.html'},],
+			['11.7 Victim versus Perpetrator', 'VictimversusPerpetrator.html',{'tt':'11.7 Victim versus Perpetrator','sb':'VictimversusPerpetrator.html'},],
+			['11.8 Defining the Social Group... ', 'DefiningtheSocialGroupofWork.html',{'tt':'11.8 Defining the Social Group of Work','sb':'DefiningtheSocialGroupofWork.html'},],
+			['11.9 The Receiving End of the ... ', 'TheReceivingEndoftheStick.html',{'tt':'11.9 The Receiving End of the Stick','sb':'TheReceivingEndoftheStick.html'},],
+			['11.10 Emerging Insight for Rel... ', 'EmergingInsightforRelationship.html',{'tt':'11.10 Emerging Insight for Relationship','sb':'EmergingInsightforRelationship.html'},],
+			['11.11 Ratio as the Emotion-sla... ', 'RatioastheEmotion-slave.html',{'tt':'11.11 Ratio as the Emotion-slave','sb':'RatioastheEmotion-slave.html'},],
+			['11.12 Core-needs and Loyalty', 'Core-needsandLoyalty.html',{'tt':'11.12 Core-needs and Loyalty','sb':'Core-needsandLoyalty.html'},],
+			['11.13 The Means and the End', 'TheMeansandtheEnd.html',{'tt':'11.13 The Means and the End','sb':'TheMeansandtheEnd.html'},],
+],
+		['12. CONCLUSIONS', 'CONCLUSIONS.html',{'tt':'12. CONCLUSIONS','sb':'CONCLUSIONS.html'},
+			['12.1 The Truth about Humans in... ', 'TheTruthaboutHumansinthisstageofHumanEvo.html',{'tt':'12.1 The Truth about Humans in this stage of Human Evolution','sb':'TheTruthaboutHumansinthisstageofHumanEvo.html'},],
+			['12.2 The Twelve Principles of ... ', 'TheTwelvePrinciplesofBehaviourMotivation.html',{'tt':'12.2 The Twelve Principles of Behaviour Motivation','sb':'TheTwelvePrinciplesofBehaviourMotivation.html'},],
+			['12.3 Emotional Intelligence Co... ', 'EmotionalIntelligenceCompetences.html',{'tt':'12.3 Emotional Intelligence Competences','sb':'EmotionalIntelligenceCompetences.html'},],
+			['12.4 Power = Emotion', 'Power=Emotion.html',{'tt':'12.4 Power = Emotion','sb':'Power=Emotion.html'},],
+			['12.5 Understanding', 'Understanding.html',{'tt':'12.5 Understanding','sb':'Understanding.html'},],
+],
+		['13. Research references', 'Researchreferences.html',{'tt':'13. Research references','sb':'Researchreferences.html'},
+			['13.1 References', 'References.html',{'tt':'13.1 References','sb':'References.html'},],
+			['13.2 Changing Minds', 'ChangingMinds.html',{'tt':'13.2 Changing Minds','sb':'ChangingMinds.html'},],
+],
+
+]
+];

static/Res/tree/tree_tpl.js

@@ -0,0 +1,95 @@
+/*
+	Feel free to use your custom icons for the tree. Make sure they are all of the same size.
+	If you don't use some keys you can just remove them from this config
+*/
+
+var TREE_TPL = {
+
+	// general
+	'target':'_self',	// name of the frame links will be opened in
+						// other possible values are:
+						// _blank, _parent, _search, _self and _top
+
+	// icons - root	
+	'icon_48':'Res/tree/base.gif', // root icon normal
+	'icon_52':'Res/tree/base.gif', // root icon selected
+	'icon_56':'Res/tree/base.gif', // root icon opened
+	'icon_60':'Res/tree/base.gif', // root icon selected opened
+
+	// icons - node	
+	'icon_16':'Res/tree/folder.gif', // node icon normal
+	'icon_20':'Res/tree/folderopen.gif', // node icon selected
+	'icon_24':'Res/tree/folderopen.gif', // node icon opened
+	'icon_28':'Res/tree/folderopen.gif', // node icon selected opened
+	'icon_80':'Res/tree/folderopen.gif', // normaled node icon hover
+
+	// icons - leaf
+	'icon_0':'Res/tree/page.gif', // leaf icon normal
+	'icon_4':'Res/tree/page.gif', // leaf icon selected
+	'icon_64':'Res/tree/pagesel.gif', // leaf icon hover
+
+	// icons - junctions	
+	'icon_2':'Res/tree/empty.gif', // junction for leaf
+	'icon_3':'Res/tree/empty.gif', // junction for last leaf
+	'icon_18':'Res/tree/plus.gif', // junction for closed node
+	'icon_19':'Res/tree/plus.gif', // junctioin for last closed node
+	'icon_26':'Res/tree/minus.gif', // junction for opened node
+	'icon_27':'Res/tree/minus.gif', // junctioin for last opended node
+
+	// icons - misc
+	'icon_e':'Res/tree/empty.gif', // empty image
+	'icon_l':'Res/tree/empty.gif', // vertical line
+	
+	// styles - root
+	'style_48':'mout', // normal root caption style
+	'style_52':'mout', // selected root catption style
+	'style_56':'mout', // opened root catption style
+	'style_60':'mout', // selected opened root catption style
+	'style_112':'mover', // normaled normal root caption style
+	'style_116':'mover', // normaled selected root catption style
+	'style_120':'mover', // normaled opened root catption style
+	'style_124':'mover', // normaled selected opened root catption style
+	
+	// styles - node
+	'style_16':'mout', // normal node caption style
+	'style_20':'mout', // selected node catption style
+	'style_24':'mout', // opened node catption style
+	'style_28':'mout', // selected opened node catption style
+	'style_80':'mover', // normaled normal node caption style
+	'style_84':'mover', // normaled selected node catption style
+	'style_88':'mover', // normaled opened node catption style
+	'style_92':'mover', // normaled selected opened node catption style
+
+	// styles - leaf
+	'style_0':'mout', // normal leaf caption style
+	'style_4':'mout', // selected leaf catption style
+	'style_64':'mover', // normaled normal leaf caption style
+	'style_68':'mover', // normaled selected leaf catption style
+	
+	// styles - misc
+	'icon':'style_icons', // Class for tree icons images; JS added 2003-07-25
+
+	// event handlers - item
+	'onItemOpen':'open_handler',// on item open event handler
+	'onItemClose':'close_handler'// on item close event handler
+	// make sure there is no comma after the last key-value pair
+};
+
+function open_handler (o_item) {
+   onItemOpenHandler (o_item);
+	return true;
+}
+function close_handler (o_item) {
+	//alert("This is node close event handler.\nThe caption of the item being closed is: '"+o_item.a_config[0]+"'");
+	return true;
+}
+
+function onItemOpenHandler (o_item) {
+	// get current block
+	var a_curblock = o_item.o_parent.a_children;
+	// close all nodes except current
+	for (var i = 0; i < a_curblock.length; i++)
+		if (a_curblock[i].n_state & 48 && a_curblock[i] != o_item)
+			a_curblock[i].open(true);
+	return false;
+}