Xooxia Development

// First, instantiate the object
this.xoomapper = function(action){
	// get the full sitemap by id
	var sitemap = document.getElementById("xoomapper")
	// get the argument, if any - or set it to 'close'
	var action = action || 'close';
	//make sure we have the xoomapper id available
	if(sitemap){
		// check to see if there is an id of openlink within the document
		// if not, create one
		if (!document.getElementById('openlink')){
			// create an 'a' element
			var openanchor = document.createElement('a');
			// set the href attribute to call the object with argument of 'open'
			openanchor.href = 'javascript:xoomapper(\'open\')';
			// set the id of the 'a' element
			openanchor.id = 'openlink';
			// set the text of the 'a' element
			var linkText = document.createTextNode('Expand All');
			// add the text to the 'a' element
			openanchor.appendChild(linkText);
			// add margin to separate the expand/collapse links
			openanchor.style.marginRight = '5px';
			// now add the 'a' element just before the sitemap
			document.getElementsByTagName('body')[0].insertBefore(openanchor,sitemap);
		}
		// check to see if there is an id of close link within the document
		// if not, create one
		if (!document.getElementById('closelink')){
			// create an 'a' element
			var closeanchor = document.createElement('a');
			// set the href attribute to call the object with argument of 'close'
			closeanchor.href = 'javascript:xoomapper(\'close\')';
			// set the id of the 'a' element
			closeanchor.id = 'closelink';
			// set the text of the 'a' element
			var linkText = document.createTextNode('Collapse All');
			// add the text to the 'a' element
			closeanchor.appendChild(linkText);
			// add margin to separate the expand/collapse links
			closeanchor.style.marginLeft = '5px';
			// now add the 'a' element just before the sitemap
			document.getElementsByTagName('body')[0].insertBefore(closeanchor,sitemap);
		}
		// now we set a function to call for each li item in sitemap
		this.listItem = function(li){
			// get all 'ul' child elements of the list item
			if(li.getElementsByTagName("ul").length > 0){
				// get current 'ul'
				var ul = li.getElementsByTagName("ul")[0];
				// set the display to 'block' if we want to open or 'none' if we want to close
				ul.style.display = (action=='open') ? "block" : "none";
				// create a 'span' element
				var span = document.createElement("span");
				// set the icon by class name: expanded for open and collapsed for close
				// this will display the plus or minus icons
				span.className = (action=='open') ? "expanded" : "collapsed";
				// set an onclick function for the span to display the 'ul' and change the icon
				span.onclick = function(){
					ul.style.display = (ul.style.display == "none") ? "block" : "none";
					this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
				};
				// set the key press event handler to a function
				li.onkeydown = function(e){
					var KeyID = (window.event) ? event.keyCode : e.keyCode;
					switch(KeyID){
						case 37: // left arrow key press will close the ul
							ul.style.display = "none";
							span.className = "collapsed";
						break;
						case 39: // right arrow key press will open the ul
							ul.style.display = "block";
							span.className = "expanded";
						break;
					}
				};
				// add the 'span' element to the list item
				li.appendChild(span);
			};
		};
		// now we'll list out the elements one by one
		var items = sitemap.getElementsByTagName("li");
		for(var i=0;i<items.length;i++){>
</items.length;i++){>			listItem(items[i]);
		};
	};
};
// finally set the object to the onload event
window.onload = xoomapper;