diff --git a/static/Res/code/boxController.js b/static/Res/code/boxController.js
new file mode 100644
index 0000000..4c9965c
--- /dev/null
+++ b/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;
+	}
+}
+
diff --git a/static/Res/code/boxSettings.js b/static/Res/code/boxSettings.js
new file mode 100644
index 0000000..13db168
--- /dev/null
+++ b/static/Res/code/boxSettings.js
@@ -0,0 +1,13 @@
+// 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:"textMarkers",  state:true},
+	{name:"dataContainer",  state:true}, 
+	{name:"legend",		state:true}
+];
\ No newline at end of file
diff --git a/static/Res/code/mapController.js b/static/Res/code/mapController.js
new file mode 100644
index 0000000..d544ce2
--- /dev/null
+++ b/static/Res/code/mapController.js
@@ -0,0 +1,247 @@
+// 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
+		
+		if (navigator.appName == "Microsoft Internet Explorer")
+		{
+		    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;
+		}
+		else
+		{
+		    mc.oldScrollX = mc.frameObject.window.scrollX;
+		    mc.oldScrollY = mc.frameObject.window.scrollY;
+		    //parent.document.title = "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 + "old scroll: " + mc.oldScrollX + "," + mc.oldScrollY;
+		return false;
+	}
+	else {
+		//window.status = "not dragging "+ mapController.temp++ + navigator.appName;
+	}
+}
+
+MapController.prototype.onMouseUp = function(e) {
+	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.
+	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
+	// Mozilla/NS on Macintosh: Triggered when scrollbar dragged and mapContent dragged
+	
+    var agt = navigator.userAgent.toLowerCase();
+    if (agt.indexOf("macintosh") == -1 && navigator.appName != "Microsoft Internet Explorer")
+    {
+	    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;
+}
+
diff --git a/static/Res/code/shared.js b/static/Res/code/shared.js
new file mode 100644
index 0000000..3fee651
--- /dev/null
+++ b/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
+
+
+*/
diff --git a/static/Res/images/arrow.gif b/static/Res/images/arrow.gif
new file mode 100644
index 0000000..dd687e5
Binary files /dev/null and b/static/Res/images/arrow.gif differ
diff --git a/static/Res/images/box_collapse_button.gif b/static/Res/images/box_collapse_button.gif
new file mode 100644
index 0000000..602b4ed
Binary files /dev/null and b/static/Res/images/box_collapse_button.gif differ
diff --git a/static/Res/images/box_expand_button.gif b/static/Res/images/box_expand_button.gif
new file mode 100644
index 0000000..9acebac
Binary files /dev/null and b/static/Res/images/box_expand_button.gif differ
diff --git a/static/Res/images/bullet_blue.gif b/static/Res/images/bullet_blue.gif
new file mode 100644
index 0000000..08decd0
Binary files /dev/null and b/static/Res/images/bullet_blue.gif differ
diff --git a/static/Res/images/empty.gif b/static/Res/images/empty.gif
new file mode 100644
index 0000000..e9cbc72
Binary files /dev/null and b/static/Res/images/empty.gif differ
diff --git a/static/Res/images/header_background.gif b/static/Res/images/header_background.gif
new file mode 100644
index 0000000..2f07e39
Binary files /dev/null and b/static/Res/images/header_background.gif differ
diff --git a/static/Res/images/logo.gif b/static/Res/images/logo.gif
new file mode 100644
index 0000000..09ebbdc
Binary files /dev/null and b/static/Res/images/logo.gif differ
diff --git a/static/Res/images/next_button.gif b/static/Res/images/next_button.gif
new file mode 100644
index 0000000..cb9a12a
Binary files /dev/null and b/static/Res/images/next_button.gif differ
diff --git a/static/Res/images/previous_button.gif b/static/Res/images/previous_button.gif
new file mode 100644
index 0000000..127f97c
Binary files /dev/null and b/static/Res/images/previous_button.gif differ
diff --git a/static/Res/images/spacer.gif b/static/Res/images/spacer.gif
new file mode 100644
index 0000000..46a2cf0
Binary files /dev/null and b/static/Res/images/spacer.gif differ
diff --git a/static/Res/images/top_button.gif b/static/Res/images/top_button.gif
new file mode 100644
index 0000000..4c57861
Binary files /dev/null and b/static/Res/images/top_button.gif differ
diff --git a/static/Res/styles/DynamicOutline.css b/static/Res/styles/DynamicOutline.css
new file mode 100644
index 0000000..262e53e
--- /dev/null
+++ b/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;
+}
diff --git a/static/Res/styles/StaticOutline.css b/static/Res/styles/StaticOutline.css
new file mode 100644
index 0000000..597790b
--- /dev/null
+++ b/static/Res/styles/StaticOutline.css
@@ -0,0 +1,127 @@
+/* Cascading Style Sheet for HTML export */
+/* MODULE: STATIC OUTLINE */
+
+/* Light Blue style */
+
+/* This stylesheet expects the following HTML structure
+		  
+  left column in page body
+		  #pageBody .left
+		  
+		  td.outlineColumn
+		     div.staticOutline
+			     div.maintopic
+				     span.select or splan.unselect
+			     div.subtopic
+				     span.select or splan.unselect
+					  
+*/
+
+
+/* visual highlight the sidebar navigation */
+.outlineColumn {
+	vertical-align: top;	
+	border-right: 1px dashed Silver;		/* STYLE */
+	background-color: #FAFAFA;					/* STYLE */
+	margin: 0px;
+	padding-bottom: 20px; 
+}
+
+.staticOutline {
+	white-space: nowrap; 		
+	vertical-align: top;
+}
+
+.staticOutline a:link {
+	color: #2F4F4F;								/* STYLE */
+	text-decoration: none;
+}
+
+.staticOutline a:active {
+	color: #FF3300;							/* STYLE */
+	text-decoration: none;
+}
+
+.staticOutline a:visited {
+	color: #2F4F4F;								/* STYLE */
+	text-decoration: none;
+}
+
+.staticOutline a:hover {
+   color: #CC0000;							/* STYLE */
+	text-decoration: none;
+}
+
+.staticOutline .hometopic a:link {
+	color: #CC0000;								/* STYLE */
+}
+
+.staticOutline .hometopic a:visited {
+	color: #CC0000;								/* STYLE */
+}
+
+.staticOutline .hometopic a:hover {
+   color: #FF3300;							/* STYLE */
+	text-decoration: none;
+}
+
+.staticOutline .hometopic img {
+	display: none;								/* STYLE */   /* show/hide image */
+}
+
+.staticOutline .hometopic {
+	/*background : #0062BF; 	*/			/* STYLE */
+   margin-left:  4px;
+   margin-right:  4px;
+	margin-top:   0em;						/* STYLE */
+	margin-bottom: 1em;					/* STYLE */
+	font-size: 8pt;
+	font-weight: bold;						/* STYLE */
+   /*padding-top: 5px;*/					/* STYLE */
+}
+
+.staticOutline .maintopic a:link {
+	color: #CC0000;								/* STYLE */
+}
+
+.staticOutline .maintopic a:visited {
+	color: #CC0000;								/* STYLE */
+}
+
+.staticOutline .maintopic a:hover {
+   color: #FF3300;							/* STYLE */
+	text-decoration: none;
+}
+
+.staticOutline .maintopic img {
+	display: none;								/* STYLE */   /* show/hide image */
+}
+
+.staticOutline .maintopic {
+   margin-left:  4px;
+   margin-right:  4px;
+	margin-top:   0.8em;						/* STYLE */
+	margin-bottom: 0.2em;					/* STYLE */
+	font-size: 8pt;
+	font-weight: bold;						/* STYLE */
+	border:  1px solid Silver;
+}
+
+.staticOutline .subtopic img {
+	display: none;							/* STYLE */   /* show/hide image */
+}
+
+.staticOutline .subtopic {
+   text-indent: 0px;
+   margin-left:  4px;			/* use same margin as in .maintopic*/			/* STYLE */
+   margin-right:  4px;
+	margin-bottom: 0.2em;					/* STYLE */
+	font-size: 8pt;
+}
+
+.staticOutline .select {
+	background-color: #FFCC66;
+}
+
+.staticOutline .unselect {
+}
\ No newline at end of file
diff --git a/static/Res/styles/shared.css b/static/Res/styles/shared.css
new file mode 100644
index 0000000..d3d7a5e
--- /dev/null
+++ b/static/Res/styles/shared.css
@@ -0,0 +1,1091 @@
+/* Cascading Style Sheet for HTML export */
+
+/* Dark Red style */
+/* All properties that are style specific are marked as "STYLE" */
+
+/* Compatibility notes:
+ * 
+ * Names starting with "#" are ID selectors meaning they point to one specific single object/element
+ */
+
+/* This stylesheet expects the following HTML structure
+body#page
+	table#pageHeader
+		tr
+			td.left  (rowspan 3)
+			td.right
+				div.utilities
+					span.command (0+)
+						a
+							img
+							span.label
+		tr
+		   td.right
+				div.mapName
+		tr
+		   td.right
+				div.contactInformation
+				
+	col left is optional sidebar navigation
+		col.main
+		col.right
+		
+		tr#breadcrumbsAndPageNavigation
+			td.left (0-1: include if sideNav)
+				div.box (0+)
+					... (see div.box contents below)
+					
+			Optional Breadcrumb and pageNavigation		
+				td.breadcrumbs
+				td.pageNavigation
+				
+			td.right
+			
+   <BODY MAIN CONTENT>
+
+	<TOPIC>
+			
+	<TOP COMMAND>
+	
+	table#pageFooter
+		tr
+			td.left      (rowspan = 2, could be used for image)
+			td.center    (rowspan = 2)
+    			div.footerText
+			td.right		
+			   div.hyperlink
+		tr
+		   td.right
+			   div.lastUpdated
+ */
+ 
+
+
+/* GLOBAL SYTLE global styling, sets overall style of page */
+
+body {
+	font-family: Verdana;
+	margin: 0px; /* increase to have page float on background */
+	padding: 0px; 
+	font-size: 8pt;
+}
+
+li {
+	margin-bottom: .3em; /* make list items more compact than default */
+}
+
+img {
+	border: 0; /* by default, images should not have a border */
+}
+
+.emptyImage {						/* used for special effects */
+	float:left;
+	margin: 0px;			/* distance to outline */
+}
+	
+
+/* all headers in boxes */
+.header {
+	clear: both;    /* floating element below */
+}
+
+/* link styles */ 
+a {
+	text-decoration: underline; /* set to "none" to hide underlines on links */
+}
+
+a img {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+/* remove link underline from some special elements: Header and Overview Map */
+#mapPageHeader a, {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+a:link {
+	color: #CC0000;		/* STYLE */
+}
+
+a:visited {
+	color: #CC0000;		/* STYLE */
+}
+
+/* Note: hover selector should be last in order to take precedence in :visited AND :hover situation */
+a:hover {
+	color: #FF3300;		/* STYLE */
+}
+
+/* special link styles */
+a.noHover:hover {
+	background-color:transparent;	/* If you don't want images wrapped in <a> to have hover effect, make it <a class="noHover"> */
+}
+
+a:active {
+	color: #FF3300;		/* STYLE */
+}
+
+
+/*********************************************************************************/
+/*** Styles of specific modules **************************************************/
+/*********************************************************************************/
+
+/* MODULE:  HEADER --------------------------------------------*/
+#pageHeader {
+	width: 100%;
+	border-bottom: 3px solid #FFCC66;	/* STYLE */
+	background-image: url(../images/header_background.gif);		/* STYLE */
+	background-repeat: repeat-y;				/* STYLE */
+	background-color: #CC0000; 					/* STYLE */	/* same color as on right side in backgound image */
+}
+
+
+#pageHeader td {
+	padding-left: 6px;
+	padding-right: 6px;
+}	
+
+#pageHeader div {
+	/*margin-bottom: .2em;	*/ 
+}
+
+/* logo image on left side of header */	
+#pageHeader .left {
+	width: auto;
+	margin-right: 8px;
+	vertical-align: middle;
+}
+
+/* header information */
+#pageHeader .right {
+	margin-left: 8px;
+	width: 100%;					/* helps to left align text */
+	color: White;					/* STYLE */
+}
+
+#pageHeader .right .utilities  {
+	text-align: right;
+	font-size: 8pt;
+	vertical-align: top;
+}
+
+.utilities_toc {
+	display: show;					/* show table of content link */
+}
+
+/* link style in header */
+/* note: Order is important. If ambiguous, last has precedence. */ 
+#pageHeader a:link {
+	color: White;							/* STYLE */
+}
+
+#pageHeader a:visited {
+	color: White;							/* STYLE */
+}
+
+#pageHeader a:hover {
+   color: White;						/* STYLE */
+}
+
+#pageHeader a:active {
+	color: White;						/* STYLE */
+}
+
+/* note: Order is important. If ambiguous, last has precedence. */ 
+#pageHeader .right .utilities  a:link {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+#pageHeader .right .utilities  a:visited {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+#pageHeader .right .utilities  a:hover {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+#pageHeader .right .utilities  a:active {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+#pageHeader .right .mapName {
+	text-align: left;
+	font-family: Arial;
+	font-size: 15pt;
+	vertical-align: middle;
+}
+
+#pageHeader .right .contactInformation{
+	text-align: right;
+	font-size: 7pt;
+	vertical-align: bottom;
+	/*margin-right: 4px;			*/	/* to right align with commands in utilities */
+}
+
+
+/* MODULE:  BODY (main content) ------------------------------------------ */
+table#pageBody {
+	width: 100%;
+}
+
+.bodyColumn {
+	padding: 0px;
+	vertical-align: top;
+	text-align: left;
+	width: 100%;
+}
+
+
+/* width of second body column: liquid width for content */
+#pageBody col.main {
+	width:auto;
+}
+
+#pageBody col.right {
+	width: auto;						
+}
+
+/* some padding values for the core table in used page body */
+table#pageBody tr td {
+	padding-left: 0px;
+	padding-right: 0px;
+}
+
+table#pageBody td.main {
+	padding-left: 10px;			/* indent main topic content */
+	padding-right: 20px;       /* and leave some space on the right */
+}
+
+table#pageBody td.breadcrumbs {
+	vertical-align: top;
+	padding-left: 10px;			/* indent main topic content */
+}
+
+table#pageBody td.pageNavigation {
+	padding-right: 20px; /* and leave some space on the right */
+}
+
+.topicDivider {
+	border-top: 1px solid #FFCC66;				/* STYLE */
+	height: 0.1em;
+	font-size: 2pt;				/* I need a very narrow divider */
+}
+
+
+/* MODULE: FOOTER  ------------------------------------------------------------*/
+#pageFooter {
+	width: 100%;
+	background-color: #FFCC66;					/* STYLE */
+	border-top: 2px solid #CC0000;	         	/* STYLE */
+	border-bottom: 2px solid #CC0000;	         	/* STYLE */
+	font-size: 8pt;
+	color: Black;									/* STYLE */
+	margin-left: 2px;
+}
+
+
+#pageFooter td {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+#pageFooter div {
+/*	margin-bottom: .2em;	*/
+}
+
+/* link style in footer */
+
+#pageFooter a:link {
+	color: Black;								/* STYLE */
+}
+
+#pageFooter a:visited {
+	color: Black;								/* STYLE */
+}
+
+#pageFooter a:hover {
+   color: #CC0000;							/* STYLE */
+}
+
+#pageFooter a:active {
+	color: #CC0000;							/* STYLE */
+}
+
+/* reserved for image */
+#pageFooter .left {
+	width: 0px;
+	margin-right: 0px;
+}
+
+#pageFooter .center {
+	width: 65%;					/* helps to left align text */
+	text-align: left;
+	vertical-align: top;
+}
+
+#pageFooter .center .footerText {
+}
+
+/* Last update and hyperlink */
+#pageFooter .right {
+	width: 35%;
+	text-align: right;
+}
+
+#pageFooter .right .hyperlink {
+	vertical-align: top;
+}
+
+#pageFooter .right .lastUpdated {
+	vertical-align: bottom;
+}
+
+/* MODULE BREADCRUMBS AND PREV / NEXT NAVIGATION --------------------------------------------------*/
+.breadcrumbs {
+	font-size: 7pt;						/* STYLE */
+	text-align: left;
+	width: 70%;
+	vertical-align: top;
+	color: #CC0000;						/* STYLE */
+	padding-top: 4px;
+	padding-bottom: 2px;
+}
+
+.breadcrumbs a:visited {
+	color: #CC0000;						/* STYLE */ /* don't show visited colors for breadcrumbs */
+}
+	
+.breadcrumbs .breadcrumb {
+	white-space: nowrap; /* set to "nowrap" to stop breadcrumbs from breaking in the middle */
+}
+	
+/* move the previous / next links to the right side */
+.pageNavigation {
+	text-align: right;
+	font-size: 7pt;
+	width: 30%;
+	vertical-align: middle;
+}
+
+.pageNavigation a:visited {
+	color: #CC0000;					/* STYLE */	/* don't show visited colors for prev/next navigation */
+}
+
+
+/*----------------------------------------------------------------------------------*/	
+/* MODULE: TOPIC ------------------------------------------------------------------ */
+/*----------------------------------------------------------------------------------*/	
+/*
+		tr.topic (0+)
+			td.main (colspan = 2)
+				tr.topicHeader
+					td.topicImageColumn
+					   img.topicImage
+					td.topicLineColumn
+						span.outlineNumber
+						span.topicLine
+						span.topicIcons
+							img.topicIcon
+				div.body
+				<partial map>
+					div.topicTextNotes
+					   div Notes
+				<callouts>
+				<task planning>
+				<data container>
+				<review comments>
+				<related>
+			td.right	
+*/
+
+.topic .main .body {
+	clear: both;
+}
+
+.topicHeader {
+	vertical-align: middle;	
+	clear:both;      
+}
+
+.topicImageColumn {
+}
+
+.topicImage {
+	margin-right: 6px;			/* distance to outline */
+}
+
+.topicTopicLineColumn {
+}
+
+.outlineNumberFirst {			/* first topic on page */
+	display: visible;         	/* set to none or visible to hide/show outlineNumbers   */
+	font-size:  11pt;
+	font-weight: bold;
+}
+
+.outlineNumber {					/* other topics on page */
+	display: visible;         	/* set to none or visible to hide/show outlineNumbers   */
+	font-size:  10pt;
+	font-weight: bold;
+}
+	
+.topicLineFirst {					/* first topic on page */
+	font-size:  11pt;
+	font-weight: bold;
+}	
+	
+.topicLine {						/* other topics on page */
+	font-size:  10pt;
+	font-weight: bold;
+}	
+
+/* group of icons */
+.topicIcons {
+	margin-left: 4px;				/* distance to topic text */
+	vertical-align: middle;	   /* center icons around text (important for single line callouts) */
+}
+
+/* single icons */
+.topicIcon {
+	margin-right: 3px;			/* distance between icons */
+}
+
+
+/* <div> around whole text notes */
+.topicTextNotes {
+	font-size: 9pt;	
+	margin-left: 0.3em;							
+	margin-top: 0.5em;
+}
+
+.topicTextNotes div {
+	margin-bottom: 0.8em;						/* distance between paragraphs */	
+}
+
+.topicTextNotes table {
+	margin-bottom: 0.7em;						/* some space below tables and before next paragraph starts */	
+}
+
+.topicTextNotes table div {
+	margin-left: 0.3em;							/* some left and right cell padding */
+	margin-right: 0.3em;
+}
+
+.topicTextNotes .lastTableNotesDiv {
+	margin-bottom: 0em;						  /* no bottom margin for last paragraph in Notes */		
+}
+
+
+/* <div> around whole text notes in callouts */
+.callouts .topicTextNotes {
+	font-size: 8pt;	
+	margin-left: 0px;							
+}
+
+/* single link, so far used in callout section */
+.topicHyperlink {
+	font-size: 8pt;	
+}
+
+/* the icon behind the link */
+.topicHyperlinkIcon {
+	vertical-align: bottom;
+}
+
+
+
+/* commands: active buttons / hot spots or links */
+.command {
+	white-space: nowrap;
+}
+
+.command img {
+	display: inline; /* set to none or inline to hide or show command icons */
+	vertical-align: bottom;
+	margin-left: 2px;
+}
+
+.command .label {
+	display: inline;  /* set to none or inline to hide or show command text labels */
+	vertical-align: middle;
+}
+
+
+
+/* MODULE: BOX - MAP GRAPHICS SNIPPET ---------------------------------------------------*/
+/*
+		div.partialMapArea
+		   table.partialMapTable
+				div.SubTopicItems
+				  div.subtopicitem
+				     img
+					  a
+				div.partialMap
+					img
+*/
+
+.partialMapArea {
+	vertical-align: top;
+	margin-bottom: 10px;    /* some distance below this block */
+}
+
+table#partialMapTable tr td {
+	padding: 0px; 
+}
+
+.subTopicItems {
+	clear: both;
+	font-size: 8pt;				
+	font-weight: normal;
+	margin-left:  10px;
+	margin-right:  50px;
+}
+
+.subtopicitem {
+	margin-top: 3px;
+	margin-bottom: 2px;
+}
+
+.partialMap {
+	margin-top: 5px;
+	margin-bottom: 5px;
+   	display: none;           /* this value will be set during the export depending on user setting in property inspector */
+}
+	
+
+/* MODULE: CALLOUT -SECTION---------------------------------------------------------------------*/
+/*
+		div.callouts
+			div.callout
+				div.calloutHeader
+				   span topicIcons 
+					   img.topicIcon
+				tr.calloutBody
+					div.calloutImage
+					   img.topicImage
+					div.topicTextNotes 
+					   div Notes
+					   span a.topicGyperlink a.topicHyperlinkIcon
+*/
+
+/* all callouts */
+.callouts {
+	background-color: #FAFAFA;			/* STYLE */
+	width: 360px;	
+	margin-left: 30px;
+	margin-bottom: 8px;
+	border: 1px solid #CC0000;		/* STYLE */
+	border-top: 5px solid #CC0000;		/* STYLE */
+}
+
+/* single callout */
+.callout {
+	margin-left: 8px;
+	margin-right: 8px;
+	margin-top: 0px;
+	margin-bottom: 3px;
+}
+
+/* topic text and icons */
+.calloutHeader {
+	font-size: 8pt;
+	font-weight: bold;
+	color: #2F4F4F;					/* STYLE */
+	padding-left: 4px;			/* align with text notes */
+}
+
+.calloutBody {
+	vertical-align: top;
+	text-align: left;
+}
+
+.calloutImage {
+	padding-left: 4px;  			/* align with text notes */
+}
+
+
+/* -----------------------------------------------------*/
+/* COLLAPSIBLE BOXES
+/*-------------------------------------------------------*/
+/*
+	div.<special box name>Area     (need "Area" string for collapse button script)		
+	  div.collapsiblebox (1+) 
+	    div.header
+			 span.title
+			img.expandOrCollapseButton
+		 div.body
+			(varies)
+*/
+
+/* the body class is important for the collapse script. It follows the initial .collapsiblebox statement */
+.body {
+	clear: both;
+}
+
+.clearFloat {
+	clear: both;	/* needed to hold down bottom border sometimes */
+}
+
+
+.collapsiblebox {
+	clear: both;
+	width: 360px;
+	padding-bottom: 0px;
+	background-color: #D3D3D3;				/* STYLE */
+	border: 1px solid #CC0000;				/* STYLE */
+	margin-bottom: 8px;
+	margin-left: 30px;
+}
+
+.legend .collapsiblebox {
+	margin-left: 0px;						/* overide for the legend box */
+}
+
+.collapsiblebox .title {
+	padding: 3px;
+	padding-left: 6px;
+	font-size: 8pt;
+	text-align: left;
+	font-weight: bold;
+	color: Black;							/* STYLE */
+	float: left;
+}
+
+.collapsiblebox .expandOrCollapseButton {
+	float: right;
+	text-align: right;
+	margin-top: 2px;
+	margin-left: 8px;
+	margin-right: 4px;
+	vertical-align: middle;
+	display: inline; /* set to none to hide button(s); set to inline to show */
+}
+
+.collapsiblebox .body {
+	clear: both;
+	padding-bottom: 1px;
+	padding-left: 0px;
+	padding-right: 0px;
+	background-color: #FAFAFA;						/* STYLE */
+}
+
+/* generic style for lists in boxes e.g. task information or about box */
+.property {
+	clear: both;
+	height: 1em;				/* since I'm using spans, I need some more line spacing */
+}
+
+.property .label {
+	width: 15 em;
+	font-size: 7pt;
+	color: gray;								/* STYLE */
+	text-indent: 6px;
+}
+
+.property .value {
+	width: auto;
+	font-size: 8pt;
+	color: #2F4F4F;				/* STYLE */
+}
+
+
+/* MODULES:  BOX - TASK INFORMATION ---------------------------------------------------------- */
+.taskInformationArea .body {
+		display: none;				/* collapse when first shown */
+}
+
+
+/* MODULES:  BOX - DATA CONTAINER ---------------------------------------------------------- */
+
+.dataContainerArea .body {
+		display: none;				/* collapse when first shown */
+}
+
+.textMarkersArea .body {
+		display: none;				/* collapse when first shown */
+}
+
+.dataContainerTable {
+   table-layout: fixed;
+   width: 100%;
+   clear: both;
+	height: 1em;				/* since I'm using spans, I need some more line spacing */
+}
+
+.dataContainerTableColumnHeader {
+	width: 15 em;
+	font-size: 7pt;
+	color: gray;								/* STYLE */
+	text-indent: 6px;
+}
+
+.dataContainerTableRowHeader {
+	width: 15 em;
+	font-size: 7pt;
+	color: gray;								/* STYLE */
+	text-indent: 6px;
+}
+
+.dataContainerTableCell {
+	width: auto;
+	font-size: 8pt;
+	color: #2F4F4F;				/* STYLE */
+}
+
+.dataContainerCustomProperties {
+   width: 100%;
+   clear: both;
+	height: 1em;				/* since I'm using spans, I need some more line spacing */
+}
+
+.dataContainerCustomPropertyGroup {
+	width: 15 em;
+	font-size: 7pt;
+	color: white;                        
+	background-color: gray;
+	text-indent: 6px;
+}
+
+.dataContainerCustomPropertyName{
+	width: 15 em;
+	font-size: 7pt;
+	color: gray;								/* STYLE */
+	text-indent: 6px;
+}
+
+.dataContainerCustomPropertyNameInGroup{
+	width: 15 em;
+	font-size: 7pt;
+	color: gray;								/* STYLE */
+	text-indent: 12px;
+}
+
+
+.dataContainerCustomPropertyValue{
+	width: auto;
+	font-size: 8pt;
+	color: #669999;				/* STYLE */
+}
+
+.dataContainerImage {
+	margin-right: 1px;			/* distance to outline */
+}
+
+
+/* MODULES:  BOX - REVIEW COMMMENT ---------------------------------------------------------- */
+.comment {
+	clear: both;
+}
+
+.commentsArea .body {
+	display: none;				/* collapse when first shown */
+	font-size: 8pt;
+	color: #2F4F4F;			/* STYLE */
+}
+
+.comment .userName {
+	font-weight: bold;
+	float: left;
+	margin-bottom: 0px;
+	padding-left: 6px;
+}
+
+.comment .date {
+	font-weight: bold;
+	float: right;
+	margin-bottom: 0px;
+	padding-right: 6px;
+}
+
+.comment .text {
+	clear: both;
+	padding-bottom: 4px;			/* makes bottom 'border' bigger on opera */
+	padding-right: 6px;
+	padding-left: 6px;
+}
+
+
+/* MODULE: RELATED SECTION  ----------------------------------------------------------------------*/
+/*
+		div.relatedSection
+			div.oneRelatedSection
+				a topicHyperlink
+			div.relatedSectionBody
+				div.relatedItem
+					span relatedItemBullet
+					a topicHyperlink
+					a topicHyperlink    (optional callout link)
+					img topicHyperlinkIcon 
+*/
+
+.relatedSection {
+}
+
+.oneRelatedSection {
+	margin-top: 16px;
+	margin-bottom: 8px;	
+}
+
+.relatedSectionHeader {
+	font-size: 8pt;
+	font-weight: bold;
+	padding-left: 4px;			/* align with text notes */
+}
+
+.relatedItem {
+	font-size: 8pt;
+	margin-top: 1px;
+	margin-bottom: 2px;
+}
+
+.relatedItemBullet {
+	padding-left: 4px;			/* align with text notes */
+}
+
+/* the icon behind the link */
+.relatedItem .topicHyperlinkIcon {
+	vertical-align: middle;
+}
+
+/* MODULE: TOP COMMAND ----------------------------------------------------------*/
+.topCommand {
+   vertical-align: bottom;
+	font-size: 7pt;
+	margin-top: 10mm;
+	margin-bottom: 2mm;
+}
+
+.topCommand  a:link {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+.topCommand  a:visited {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+	color: #CC0000;					/* STYLE */	/* don't show visited colors for prev/next navigation */
+}
+
+.topCommand  a:hover {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+.topCommand  a:active {
+	text-decoration: none; /* set to "none" to hide underlines on links */
+}
+
+
+
+					
+/**********************************************************************************************/
+/******** OTHER WINDOW LAYOUTS ****************************************************************/
+/**********************************************************************************************/
+/* WINDOW: LEGEND ------------------------------------------------------------- */
+/*
+	.div legend
+	   .div collapsiblebox
+		   .div body
+				.div legendGroup
+				.div legendItem
+					.div item
+					.div label
+*/
+
+.legend {
+	margin-left: 6px;
+	margin-top: 6px;
+	font-size: 8pt;
+	color: Gray;				/* STYLE */
+	width: 200px;
+}
+
+/* set with of both divs to avoid right border if text wraps */
+.legend .collapsiblebox  {
+	width: 200px;
+}
+
+.legend .collapsiblebox .body {
+	width: 200px;
+	border: 1px solid #999999;
+}
+	
+.legendGroup
+{
+	clear: both;
+	font-weight: bold;
+	float: left;
+	margin-top:  5px;
+	margin-bottom:  4px;
+	margin-left: 5px;
+}
+
+.legendItem
+{
+	clear: both;
+	margin-left: 5px;
+}
+
+.legendItem .item {
+	float: left;
+	margin-right: 6px;
+}
+
+.legendItem .label {
+	float: left;
+	margin-right: 2px;
+}
+
+
+/* WINDOW: CONTENT ------------------------------------------------------------- */
+/* 
+	div.Page
+		table.pageBody
+			col.TOCContents
+				div.body
+					div.contentItem1[1-9]
+						div.outlineNumber
+						div.topicLine
+							a topicHyperlink
+			col.TOCAbout
+				div.collapsiblebox
+					div.header
+					div.body
+						div.mapPreview
+							img
+						div.property
+							div.label
+							div.value
+
+*/
+
+.TOCContents {
+	text-align: left;		
+	vertical-align: top;
+	width: 90%;
+}
+
+.TOCContents .body {
+	margin: 15px;		
+	margin-right: 5px;	
+	color: #CC0000;				/* STYLE */
+	font-size: 8pt;
+	font-weight: normal;
+}
+
+.TOCAbout {
+	text-align: right;		
+	vertical-align: top;
+	width: 10%;
+}
+
+.TOCAbout .collapsiblebox {
+	margin: 15px;			
+	margin-right: 5px;	
+}
+
+.TOCAbout .property {
+	margin-top: 5px;			
+}
+
+.TOCAbout .property .label {
+	float: left;
+	text-align: left;
+	width: 7.5em;			
+}
+
+.TOCAbout .property .value {
+	float: left;
+	text-align: left;
+	margin-left: 1.0em;				
+}
+
+.mapPreview {
+	padding-top: 10px;
+	padding-bottom: 16px;
+	text-align: center;
+	border-bottom: 1px solid #CC0000;
+}
+
+.contentItem1 {
+	margin-top: 5px;
+	clear: both;
+}
+	
+.contentItem2 {
+	margin-top: 3px;
+	margin-left: 2em;
+	clear: both;
+}
+
+.contentItem3 {
+	margin-left: 4em;
+	clear: both;
+}
+
+.contentItem4 {
+	margin-left: 6em;
+	clear: both;
+}
+
+.contentItem5 {
+	margin-left: 8em;
+	clear: both;
+}
+
+.contentItem6 {
+	margin-left: 10em;
+	clear: both;
+}
+
+.contentItem7 {
+	margin-left: 12em;
+	clear: both;
+}
+
+.contentItem8 {
+	margin-left: 14em;
+	clear: both;
+}
+
+.contentItem9 {
+	margin-left: 16em;
+	clear: both;
+}
+
+.contentItemX {
+	margin-left: 18em;
+	clear: both;
+}
+
+
+/* WINDOW: OVERVIEW MAP ------------------------------------------------------------- */
+/*
+		body overviewMapBody 
+			.div overviewDiv
+			   img mapOverview
+				img mapDetailed
+*/
+
+.overviewMapBody {
+	background-color: Gray;				/* STYLE */
+}
+
+.overviewDiv {
+	cursor: hand;
+	text-align: center;
+	margin-top: 10px;				/* remove once we can center horizontally */
+}
+
+img#mapOverview, img#mapDetailed {
+	margin: 0px;
+}
+
+body#mapPageFooter {
+	font-family: Verdana;
+	font-size: 8pt;
+	text-align: center;
+	padding-top: 3px;
+	vertical-align: middle;
+	color: white;								/* STYLE */
+	background-color: #CC0000; 			/* STYLE */
+	border-top: 2px solid #FFCC66;
+}
+
+
+
diff --git a/static/Res/tree/base.gif b/static/Res/tree/base.gif
new file mode 100644
index 0000000..25a0c02
Binary files /dev/null and b/static/Res/tree/base.gif differ
diff --git a/static/Res/tree/empty.gif b/static/Res/tree/empty.gif
new file mode 100644
index 0000000..e9cbc72
Binary files /dev/null and b/static/Res/tree/empty.gif differ
diff --git a/static/Res/tree/folder.gif b/static/Res/tree/folder.gif
new file mode 100644
index 0000000..cc04e0e
Binary files /dev/null and b/static/Res/tree/folder.gif differ
diff --git a/static/Res/tree/folderopen.gif b/static/Res/tree/folderopen.gif
new file mode 100644
index 0000000..f58479b
Binary files /dev/null and b/static/Res/tree/folderopen.gif differ
diff --git a/static/Res/tree/join.gif b/static/Res/tree/join.gif
new file mode 100644
index 0000000..29f21fd
Binary files /dev/null and b/static/Res/tree/join.gif differ
diff --git a/static/Res/tree/joinbottom.gif b/static/Res/tree/joinbottom.gif
new file mode 100644
index 0000000..9e02eb2
Binary files /dev/null and b/static/Res/tree/joinbottom.gif differ
diff --git a/static/Res/tree/leaf.gif b/static/Res/tree/leaf.gif
new file mode 100644
index 0000000..a172981
Binary files /dev/null and b/static/Res/tree/leaf.gif differ
diff --git a/static/Res/tree/line.gif b/static/Res/tree/line.gif
new file mode 100644
index 0000000..f9b3f27
Binary files /dev/null and b/static/Res/tree/line.gif differ
diff --git a/static/Res/tree/minus.gif b/static/Res/tree/minus.gif
new file mode 100644
index 0000000..48a0d68
Binary files /dev/null and b/static/Res/tree/minus.gif differ
diff --git a/static/Res/tree/minusbottom.gif b/static/Res/tree/minusbottom.gif
new file mode 100644
index 0000000..3f19194
Binary files /dev/null and b/static/Res/tree/minusbottom.gif differ
diff --git a/static/Res/tree/null.gif b/static/Res/tree/null.gif
new file mode 100644
index 0000000..141153e
Binary files /dev/null and b/static/Res/tree/null.gif differ
diff --git a/static/Res/tree/page.gif b/static/Res/tree/page.gif
new file mode 100644
index 0000000..0606575
Binary files /dev/null and b/static/Res/tree/page.gif differ
diff --git a/static/Res/tree/pagesel.gif b/static/Res/tree/pagesel.gif
new file mode 100644
index 0000000..6c28a21
Binary files /dev/null and b/static/Res/tree/pagesel.gif differ
diff --git a/static/Res/tree/plus.gif b/static/Res/tree/plus.gif
new file mode 100644
index 0000000..acd5b81
Binary files /dev/null and b/static/Res/tree/plus.gif differ
diff --git a/static/Res/tree/plusbottom.gif b/static/Res/tree/plusbottom.gif
new file mode 100644
index 0000000..7a7af25
Binary files /dev/null and b/static/Res/tree/plusbottom.gif differ
diff --git a/static/Res/tree/topic.gif b/static/Res/tree/topic.gif
new file mode 100644
index 0000000..0982609
Binary files /dev/null and b/static/Res/tree/topic.gif differ
diff --git a/static/Res/tree/tree.js b/static/Res/tree/tree.js
new file mode 100644
index 0000000..7ac7016
--- /dev/null
+++ b/static/Res/tree/tree.js
@@ -0,0 +1,9 @@
+// Title: Tigra Tree Menu PRO
+// URL: http://www.softcomplex.com/products/tigra_menu_tree_pro/
+// Version: 1.1
+// Date: 04-30-2003 (mm-dd-yyyy)
+// Technical Support: support@softcomplex.com (specify product title and order ID)
+// Notes: Registration needed to use this script legally.
+// Visit official site for details.
+
+function tree(ttmpA,ttmpB){this.a_tpl=ttmpB;this.a_config=ttmpA;this.o_root=this;this.a_index=[];this.a_nodes=[];this.o_selected=null;this.n_depth=-1;var ttmpC=new Image(),ttmpD=new Image();ttmpC.src=ttmpB['icon_e'];ttmpD.src=ttmpB['icon_l'];ttmpB['im_e']=ttmpC;ttmpB['im_l']=ttmpD;for(var i=0;i<128;i++)if(ttmpB['icon_'+i]){var ttmpE=new Image();ttmpB['im_'+i]=ttmpE;ttmpE.src=ttmpB['icon_'+i]}this.toggle=function(n_id){var ttmpF=this.a_index[n_id];ttmpF.open(ttmpF.n_state&8)};this.select=function(n_id){return this.a_index[n_id].select()};this.mover=function(n_id){var ttmpF=this.a_index[n_id];ttmpF.ttmpG();ttmpF.mover(true)};this.mout=function(n_id){var ttmpF=this.a_index[n_id];ttmpF.ttmpG(true);ttmpF.mout(true)};this.find_item=function(ttmpH){for(var i=0;i<this.a_index.length;i++)if(this.a_index[i].a_config[0]==ttmpH){return(this.a_index[i]);break}};this.ttmpI=false;this.ndom_refresh=function(){if(!B_DOM&&this.ttmpI)window.location=window.location};this.reset_state=function(){document.cookie='tree_'+this.o_root.n_id+'_state=';this.a_states=[]};this.a_children=[];for(var i=0;i<ttmpA.length;i++)this.a_children[this.a_children.length]=new ttmpJ(this,i);B_DOM=Boolean(document.body&&document.body.innerHTML);this.n_id=TREES.length;TREES[this.n_id]=this;this.a_states=[];var ttmpK=/^\s*(\S+)\s*=\s*(\S*)\s*$/,ttmpL=document.cookie.split(';'),ttmpM,ttmpN,ttmpM='tree_'+this.o_root.n_id+'_state';for(var i=0;i<ttmpL.length;i++){if(!ttmpK.exec(ttmpL[i])||RegExp.$1!=ttmpM)continue;ttmpN=RegExp.$2;this.a_states=ttmpN.split('_');break}if(ttmpB['beforeInit']){eval('var ttmpO='+ttmpB['beforeInit']+'(this);');if(!ttmpO)return}for(var i=0;i<this.a_children.length;i++){this.a_children[i].ttmpP=ttmpQ;document.write(this.a_children[i].ttmpP())}if(ttmpB['afterInit'])eval(ttmpB['afterInit']+'(this);')}function ttmpJ(o_parent,n_order){this.o_root=o_parent.o_root;this.n_depth=o_parent.n_depth+1;this.a_config=o_parent.a_config[n_order+(this.n_depth?3:0)];while(!this.a_config[this.a_config.length-1])this.a_config.length=this.a_config.length-1;this.n_id=this.o_root.a_index.length;this.o_root.a_index[this.n_id]=this;if(this.a_config.length<4)return;this.n_node_id=this.o_root.a_nodes.length;this.o_root.a_nodes[this.n_node_id]=this;for(var i=3;i<this.a_config.length;i++)new ttmpJ(this,i-3)}function ttmpR(ttmpS,ttmpT){if(Boolean(this.n_state&8)!=Boolean(ttmpS))return;var ttmpU=(this.a_config[2]?this.a_config[2][ttmpS?'hc':'ho']:null);ttmpU=(ttmpU?ttmpU:this.o_root.a_tpl[ttmpS?'onItemClose':'onItemOpen']);if(ttmpU){eval('var ttmpO='+ttmpU+'(this);');if(!ttmpO)return}this.n_state^=8;this.o_root.ttmpI=true;this.state_lookup();this.ttmpG();this.save();if(B_DOM){var ttmpV=ttmpW('c'+this.o_root.n_id+'_'+this.n_id);if(!ttmpV.innerHTML)ttmpV.innerHTML=this.ttmpX();ttmpV.style.display=(ttmpS?'none':'block')}else if(!ttmpT)window.location=window.location}function ttmpY(ttmpZ){var ttmpU=(this.a_config[2]?this.a_config[2][ttmpZ?'hd':'hs']:null);ttmpU=(ttmpU?ttmpU:this.o_root.a_tpl[ttmpZ?'onItemDeselect':'onItemSelect']);if(ttmpU){eval('var ttmpO='+ttmpU+'(this);');if(!ttmpO)return}if(ttmpZ){this.n_state&=~4}else{var ttmpa=this.o_root.o_selected;this.o_root.o_selected=this;if(ttmpa)ttmpa.select(true);this.n_state|=4}this.state_lookup();this.ttmpG();return Boolean(this.a_config[1])}function ttmpb(){var ttmpU=(this.a_config[2]?this.a_config[2]['hv']:null);ttmpU=(ttmpU?ttmpU:this.o_root.a_tpl['onItemMover']);if(ttmpU){eval('var ttmpO='+ttmpU+'(this);');if(!ttmpO)return}this.n_state|=64;this.state_lookup()}function ttmpc(){var ttmpU=(this.a_config[2]?this.a_config[2]['hu']:null);ttmpU=(ttmpU?ttmpU:this.o_root.a_tpl['onItemMout']);if(ttmpU){eval('var ttmpO='+ttmpU+'(this);');if(!ttmpO)return}this.n_state&=~64;this.state_lookup()}function ttmpd(ttmpe){window.setTimeout("window.status=unescape('"+(ttmpe?'':(this.a_config[2]&&this.a_config[2]['sb']?escape(this.a_config[2]['sb']):escape(this.a_config[0])+(this.a_config[1]?' ('+escape(this.a_config[1])+')':'')))+"')",10)}function ttmpQ(){var a_index=this.o_root.a_index,n_order=0,n_id=this.n_id,o_parent;while(true){n_id--;if(n_id<0)break;if(a_index[n_id].n_depth<this.n_depth){o_parent=a_index[n_id];break}if(a_index[n_id].n_depth==this.n_depth)n_order++}this.o_parent=o_parent?o_parent:this.o_root;this.n_order=n_order;this.state_lookup=ttmpf;this.mover=ttmpb;this.mout=ttmpc;this.select=ttmpY;this.ttmpG=ttmpd;if(this.a_config.length>3){n_id=this.n_id;this.a_children=[];while(true){n_id++;if(n_id==a_index.length)break;if(a_index[n_id].n_depth<=this.n_depth)break;if(a_index[n_id].n_depth==this.n_depth+1){a_index[n_id].ttmpP=ttmpQ;this.a_children[this.a_children.length]=a_index[n_id]}}this.open=ttmpR;this.save=ttmpg;this.load=ttmph;this.ttmpX=ttmpi}else{this.open=function(){alert("Only nodes can be opened. id="+this.n_id)};this.load=function(){return}}this.n_state=(this.n_depth?0:32)+(this.a_children?16:0)+(this.n_order==this.o_parent.a_children.length-1?1:0);var ttmpj=(this.o_root.a_tpl['style_icons']?' class="'+this.o_root.a_tpl['style_icons']+'"':''),ttmpk=[],ttmpl=this.o_parent,ttmpm=this.a_config[2];for(var i=this.n_depth;i>1;i--){ttmpk[i]='<img src="'+this.o_root.a_tpl[ttmpl.n_state&1?'icon_e':'icon_l']+'"'+ttmpj+' border="0">';ttmpl=ttmpl.o_parent}this.load();var ttmpn=this.state_lookup(true);return '<table cellpadding="0" cellspacing="0" border="0"><tr onmouseover="TREES['+this.o_root.n_id+'].mover('+this.n_id+')" onmouseout="TREES['+this.o_root.n_id+'].mout('+this.n_id+')"><td nowrap>'+ttmpk.join('')+(ttmpn[1]?(this.a_children?'<a href="javascript: TREES['+this.o_root.n_id+'].toggle('+this.n_id+')" onmouseover="TREES['+this.o_root.n_id+'].mover('+this.n_id+')" onmouseout="TREES['+this.o_root.n_id+'].mout('+this.n_id+')"><img src="'+ttmpn[1]+'" border="0" name="j'+this.o_root.n_id+'_'+this.n_id+'"'+ttmpj+'></a>':'<img src="'+ttmpn[1]+'" border="0"'+ttmpj+'>'):'')+(ttmpn[0]?'<a href="'+this.a_config[1]+'" target="'+(ttmpm&&ttmpm['tw']?ttmpm['tw']:this.o_root.a_tpl['target'])+'" title="'+(ttmpm&&ttmpm['tt']?ttmpm['tt']:'')+'" onclick="return TREES['+this.o_root.n_id+'].select('+this.n_id+')" ondblclick="TREES['+this.o_root.n_id+'].'+(this.a_children?'toggle(':'select(')+this.n_id+')"><img src="'+ttmpn[0]+'" border="0" name="i'+this.o_root.n_id+'_'+this.n_id+'"'+ttmpj+'></a>':'')+'</td><td nowrap'+(ttmpn[2]?' class="'+ttmpn[2]+'"':'')+' id="t'+this.o_root.n_id+'_'+this.n_id+'"><a href="'+this.a_config[1]+'" target="'+(ttmpm&&ttmpm['tw']?ttmpm['tw']:this.o_root.a_tpl['target'])+'" title="'+(ttmpm&&ttmpm['tt']?ttmpm['tt']:'')+'" onclick="return TREES['+this.o_root.n_id+'].select('+this.n_id+')" ondblclick="TREES['+this.o_root.n_id+'].'+(this.a_children?'toggle(':'select(')+this.n_id+')">'+this.a_config[0]+'</a></td></tr></table>'+(this.a_children?'<div id="c'+this.o_root.n_id+'_'+this.n_id+'" style="display:'+(this.n_state&8?'block">'+this.ttmpX():'none">')+'</div>':'')}function ttmpi(){var ttmpo=[];for(var i=0;i<this.a_children.length;i++)ttmpo[i]=this.a_children[i].ttmpP();return ttmpo.join('')}function ttmpg(){var ttmpp=Math.floor(this.n_node_id/31);this.o_root.a_states[ttmpp]=(this.n_state&8?this.o_root.a_states[ttmpp]|(1<<(this.n_node_id%31)):this.o_root.a_states[ttmpp]&~(1<<(this.n_node_id%31)));document.cookie='tree_'+this.o_root.n_id+'_state='+this.o_root.a_states.join('_')}function ttmph(){var ttmpU=(ttmpU?ttmpU:this.o_root.a_tpl['onItemLoad']);if(ttmpU){eval('var ttmpO='+ttmpU+'(this);');if(!ttmpO)return}if(this.a_config[2]&&typeof(this.a_config[2]['st'])=='number'){if(Boolean(this.a_config[2]['st']))this.n_state|=8;else this.n_state&=~8;return}if(!this.o_root.a_states.length){var ttmpq=this.o_root.a_children;for(var i=0;i<ttmpq.length;i++){ttmpq[i].n_state|=8;if(ttmpq[i].save)ttmpq[i].save()}return}var ttmpp=Math.floor(this.n_node_id/31);if(Boolean(this.o_root.a_states[ttmpp]&(1<<(this.n_node_id%31))))this.n_state|=8;else this.n_state&=~8}function ttmpf(ttmpr){var ttmps=this.n_state&~3;var ttmpt=this.n_state&~68|2;var ttmpu=this.a_config[2]?this.a_config[2]['i'+(ttmps&~48)]:0;if(!ttmpu)ttmpu=this.o_root.a_tpl['icon_'+ttmps];if(!ttmpu)ttmpu=this.o_root.a_tpl['icon_'+(ttmps&~64)];var ttmpv=this.o_root.a_tpl['icon_'+ttmpt];var ttmpw=this.a_config[2]?this.a_config[2]['s'+(ttmps&~48)]:0;if(!ttmpw)ttmpw=this.o_root.a_tpl['style_'+ttmps];if(!ttmpw)ttmpw=this.o_root.a_tpl['style_'+(ttmps&~64)];if(ttmpr)return[ttmpu,ttmpv,ttmpw];var ttmpx=document.images['j'+this.o_root.n_id+'_'+this.n_id];if(ttmpx)ttmpx.src=ttmpv;ttmpx=document.images['i'+this.o_root.n_id+'_'+this.n_id];if(ttmpx)ttmpx.src=ttmpu;ttmpx=ttmpW('t'+this.o_root.n_id+'_'+this.n_id);if(ttmpx)ttmpx.className=ttmpw}var TREES=[],B_DOM;ttmpW=document.all?function(ttmpy){return document.all[ttmpy]}:(document.getElementById?function(ttmpy){return document.getElementById(ttmpy)}:function(ttmpy){return null});
\ No newline at end of file
diff --git a/static/Res/tree/tree_items.js b/static/Res/tree/tree_items.js
new file mode 100644
index 0000000..f08d1f7
--- /dev/null
+++ b/static/Res/tree/tree_items.js
@@ -0,0 +1,83 @@
+var TREE_ITEMS = [
+	['Home','index.html',{'sb':' '},
+		['1. Omslag', 'Omslag.html',{'tt':'1. Omslag','sb':'Omslag.html'},
+			['1.1 Over', 'Over.html',{'tt':'1.1 Over','sb':'Over.html'},],
+],
+		['2. Voorwoord', 'Voorwoord.html',{'tt':'2. Voorwoord','sb':'Voorwoord.html'},
+			['2.1 Introductie', 'Introductie.html',{'tt':'2.1 Introductie','sb':'Introductie.html'},],
+			['2.2 Bijsluiter', 'Bijsluiter.html',{'tt':'2.2 Bijsluiter','sb':'Bijsluiter.html'},],
+			['2.3 Geschiedenis van het Hart', 'GeschiedenisvanhetHart.html',{'tt':'2.3 Geschiedenis van het Hart','sb':'GeschiedenisvanhetHart.html'},],
+			['2.4 Het Hart: de Feiten', 'HetHart.deFeiten.html',{'tt':'2.4 Het Hart: de Feiten','sb':'HetHart.deFeiten.html'},],
+],
+		['3. Over het brein', 'Overhetbrein.html',{'tt':'3. Over het brein','sb':'Overhetbrein.html'},
+			['3.1 Extern geschreven programm... ', 'Externgeschrevenprogramma\'s.html',{'tt':'3.1 Extern geschreven programma\'s','sb':'Externgeschrevenprogramma\'s.html'},],
+			['3.2 Natuur versus Opvoeding', 'NatuurversusOpvoeding.html',{'tt':'3.2 Natuur versus Opvoeding','sb':'NatuurversusOpvoeding.html'},],
+],
+		['4. Zintuigen: een tipje van de... ', 'Zintuigen.eentipjevandesluier.html',{'tt':'4. Zintuigen: een tipje van de sluier','sb':'Zintuigen.eentipjevandesluier.html'},
+			['4.1 Ogen: Zien', 'Ogen.Zien.html',{'tt':'4.1 Ogen: Zien','sb':'Ogen.Zien.html'},],
+			['4.2 Oren: horen', 'Oren.horen.html',{'tt':'4.2 Oren: horen','sb':'Oren.horen.html'},],
+			['4.3 Tast: voelen', 'Tast.voelen.html',{'tt':'4.3 Tast: voelen','sb':'Tast.voelen.html'},],
+			['4.4 Ruiken en Proeven', 'RuikenenProeven.html',{'tt':'4.4 Ruiken en Proeven','sb':'RuikenenProeven.html'},],
+			['4.5 Het 6de Zintuig', 'Het6deZintuig.html',{'tt':'4.5 Het 6de Zintuig','sb':'Het6deZintuig.html'},],
+			['4.6 Relativering', 'Relativering.html',{'tt':'4.6 Relativering','sb':'Relativering.html'},],
+],
+		['5. Mens: méér dan je denkt.', 'Mens.mrdanjedenkt..html',{'tt':'5. Mens: méér dan je denkt.','sb':'Mens.mrdanjedenkt..html'},
+			['5.1 Perceptueel en Conceptueel', 'PerceptueelenConceptueel.html',{'tt':'5.1 Perceptueel en Conceptueel','sb':'PerceptueelenConceptueel.html'},],
+],
+		['6. Het Midden: Het Hart', 'HetMidden.HetHart.html',{'tt':'6. Het Midden: Het Hart','sb':'HetMidden.HetHart.html'},
+			['6.1 Metafysica / God', 'Metafysica.God.html',{'tt':'6.1 Metafysica / God','sb':'Metafysica.God.html'},],
+			['6.2 Het \'Hartbrein\'', 'Het\'Hartbrein\'.html',{'tt':'6.2 Het \'Hartbrein\'','sb':'Het\'Hartbrein\'.html'},],
+			['6.3 Integrale Psychologie', 'IntegralePsychologie.html',{'tt':'6.3 Integrale Psychologie','sb':'IntegralePsychologie.html'},],
+],
+		['7. Vier Niveaus van Mens', 'VierNiveausvanMens.html',{'tt':'7. Vier Niveaus van Mens','sb':'VierNiveausvanMens.html'},
+			['7.1 Niveau 1 Fysiek', 'Niveau1Fysiek.html',{'tt':'7.1 Niveau 1 Fysiek','sb':'Niveau1Fysiek.html'},],
+			['7.2 Niveau 2 Emotioneel', 'Niveau2Emotioneel.html',{'tt':'7.2 Niveau 2 Emotioneel','sb':'Niveau2Emotioneel.html'},],
+			['7.3 Niveau 3 Rationeel', 'Niveau3Rationeel.html',{'tt':'7.3 Niveau 3 Rationeel','sb':'Niveau3Rationeel.html'},],
+			['7.4 Niveau 4 Spiritueel', 'Niveau4Spiritueel.html',{'tt':'7.4 Niveau 4 Spiritueel','sb':'Niveau4Spiritueel.html'},],
+			['7.5 Het Hele Plaatje', 'HetHelePlaatje.html',{'tt':'7.5 Het Hele Plaatje','sb':'HetHelePlaatje.html'},],
+			['7.6 Aandacht Push &amp; Pull', 'AandachtPush&Pull.html',{'tt':'7.6 Aandacht Push &amp; Pull','sb':'AandachtPush&Pull.html'},],
+			['7.7 Hart\, Hoofd\, Handen', 'Hart\,Hoofd\,Handen.html',{'tt':'7.7 Hart\, Hoofd\, Handen','sb':'Hart\,Hoofd\,Handen.html'},],
+			['7.8 Perspectieven', 'Perspectieven.html',{'tt':'7.8 Perspectieven','sb':'Perspectieven.html'},
+				['7.8.1 Maslow', 'Maslow.html',{'tt':'7.8.1 Maslow','sb':'Maslow.html'},],
+				['7.8.2 Neurolink', 'Neurolink.html',{'tt':'7.8.2 Neurolink','sb':'Neurolink.html'},],
+				['7.8.3 Ken Wilber', 'KenWilber.html',{'tt':'7.8.3 Ken Wilber','sb':'KenWilber.html'},],
+				['7.8.4 Architectuur', 'Architectuur.html',{'tt':'7.8.4 Architectuur','sb':'Architectuur.html'},],
+				['7.8.5 Cynefin', 'Cynefin.html',{'tt':'7.8.5 Cynefin','sb':'Cynefin.html'},],
+				['7.8.6 Overig en Overzicht', 'OverigenOverzicht.html',{'tt':'7.8.6 Overig en Overzicht','sb':'OverigenOverzicht.html'},],
+],
+			['7.9 Gewoonte of Verslaving', 'GewoonteofVerslaving.html',{'tt':'7.9 Gewoonte of Verslaving','sb':'GewoonteofVerslaving.html'},],
+],
+		['8. De Hart-Hoofd Keuzes', 'DeHart-HoofdKeuzes.html',{'tt':'8. De Hart-Hoofd Keuzes','sb':'DeHart-HoofdKeuzes.html'},
+			['8.1 Hartmensen', 'Hartmensen.html',{'tt':'8.1 Hartmensen','sb':'Hartmensen.html'},
+				['8.1.1 Liefde', 'Liefde.html',{'tt':'8.1.1 Liefde','sb':'Liefde.html'},],
+				['8.1.2 Mind - 正念', 'Mind-.html',{'tt':'8.1.2 Mind - 正念','sb':'Mind-.html'},],
+				['8.1.3 Religie', 'Religie.html',{'tt':'8.1.3 Religie','sb':'Religie.html'},],
+],
+			['8.2 Hoofdmensen', 'Hoofdmensen.html',{'tt':'8.2 Hoofdmensen','sb':'Hoofdmensen.html'},
+				['8.2.1 Angst', 'Angst.html',{'tt':'8.2.1 Angst','sb':'Angst.html'},],
+				['8.2.2 STRESS', 'STRESS.html',{'tt':'8.2.2 STRESS','sb':'STRESS.html'},],
+				['8.2.3 Emoties', 'Emoties.html',{'tt':'8.2.3 Emoties','sb':'Emoties.html'},],
+				['8.2.4 Religie', 'Religie(2).html',{'tt':'8.2.4 Religie','sb':'Religie(2).html'},],
+],
+],
+		['9. Aandacht', 'Aandacht.html',{'tt':'9. Aandacht','sb':'Aandacht.html'},],
+		['10. Ziel', 'Ziel.html',{'tt':'10. Ziel','sb':'Ziel.html'},],
+		['11. Dementie', 'Dementie.html',{'tt':'11. Dementie','sb':'Dementie.html'},],
+		['12. Empathie', 'Empathie.html',{'tt':'12. Empathie','sb':'Empathie.html'},],
+		['13. Wetenschap 3.0', 'Wetenschap3.0.html',{'tt':'13. Wetenschap 3.0','sb':'Wetenschap3.0.html'},],
+		['14. Praktisch', 'Praktisch.html',{'tt':'14. Praktisch','sb':'Praktisch.html'},
+			['14.1 Mindfulness', 'Mindfulness.html',{'tt':'14.1 Mindfulness','sb':'Mindfulness.html'},],
+			['14.2 Harmonie\, Balans', 'Harmonie\,Balans.html',{'tt':'14.2 Harmonie\, Balans','sb':'Harmonie\,Balans.html'},],
+			['14.3 Hart Oefening', 'HartOefening.html',{'tt':'14.3 Hart Oefening','sb':'HartOefening.html'},
+				['14.3.1 Coherentie', 'Coherentie.html',{'tt':'14.3.1 Coherentie','sb':'Coherentie.html'},],
+],
+			['14.4 EQ', 'EQ.html',{'tt':'14.4 EQ','sb':'EQ.html'},],
+			['14.5 Meditatie', 'Meditatie.html',{'tt':'14.5 Meditatie','sb':'Meditatie.html'},],
+			['14.6 Overgave', 'Overgave.html',{'tt':'14.6 Overgave','sb':'Overgave.html'},],
+],
+		['15. Conclusies', 'Conclusies.html',{'tt':'15. Conclusies','sb':'Conclusies.html'},],
+		['16. Toevoeging', 'Toevoeging.html',{'tt':'16. Toevoeging','sb':'Toevoeging.html'},],
+		['17. Tot slot', 'Totslot.html',{'tt':'17. Tot slot','sb':'Totslot.html'},],
+
+]
+];
\ No newline at end of file
diff --git a/static/Res/tree/tree_tpl.js b/static/Res/tree/tree_tpl.js
new file mode 100644
index 0000000..5d029a6
--- /dev/null
+++ b/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;
+}