var details;
var store_dls, notes_dls;
var section_dds;
var property_elts = new Array();
var selected_section = -1;
var selected_property = -1;
var selected_property_count = 0;
var selected_note = -1;
var current_note_as = null; // keyboard access to notes
var focus = -1; // 0 = Sections, 1 = Properties, 2 = Details
var sticky_note = false;

function init() {
	/* Define section behavior */
	section_dds = document.getElementById("sections").getElementsByTagName("dd");
	for(var k = 0; k < section_dds.length; k++) {
		var dd = section_dds[k];
		if( dd.id == "instr_dd" ) {
			dd.onclick = new Function("","show_instructions();");
			/*dd.setAttribute("onclick", "show_instructions(); return false;");*/
		} else {
			dd.onclick = new Function("","select_section("+k+");");
			/*dd.setAttribute("onclick", "select_section("+k+"); return false;");*/
		}
	}

	var store = document.getElementById("store");
	store_dls = store.getElementsByTagName("dl");
	/*var notes_as = store.getElementsByTagName("a");
	for(k = 0; k < notes_as.length; k++) {
		var a = notes_as[k];
		a.onmouseover = new Function("", "show_note('"+a.firstChild.nodeValue+"'); return false;");
		a.onmouseout = new Function("", "hide_note(); return false;");
	}*/
	notes_dls = document.getElementById("notes").getElementsByTagName("dl");
	
	details = document.getElementById("details");
	var hint = details.getElementsByTagName("p")[0];
	details.removeChild(hint);
	
	/*var body = document.getElementsByTagName("body")[0];
	body.addEventListener("keypress", function(e) {keyPress(e)});*/
	
	/* Dev Support 
	select_section(8);
	setDetails(document.getElementById("dev"));*/
}

function show_instructions() {
	select_section(selected_section);
	document.getElementById("instr_dd").className = "selected";

	var details_old = document.getElementById("details");
	details_old.parentNode.replaceChild(details.cloneNode(true), details_old);
}

function select_section(index) {
	document.getElementById("instr_dd").className = null;
	
	/* Highlight selection */
	var dd;
	if( selected_section >= 0 ) {
		dd = section_dds[selected_section];
		dd.className = null;
	}
	dd = section_dds[index];
	dd.className = "selected";
	selected_section = index;
	
	/* Display property names */
	var dl = store_dls[index].cloneNode(true);
	dl.id = "props_dl";
	var props = document.getElementById("props");
	var props_dl = props.getElementsByTagName("dl")[0];
	props.replaceChild(dl, props_dl);

	/* Set column heading*/
	var props_h3 = props.getElementsByTagName("h3")[0];
	var section_title = dd.childNodes[0].cloneNode(false);
	props_h3.replaceChild(section_title, props_h3.childNodes[0]);
	
	/* Define property behavior */
	var n = 0;
	var properties = dl.childNodes;
	for(var k = 0; k < properties.length; k++) {
		var child = properties[k];
		if(child.nodeName == "DT" || child.nodeName == "DD") {
			property_elts[n] = child;
			child.onclick = new Function("", "select_property("+n+");");
			/*child.setAttribute("onclick", "select_property("+n+"); return false;");*/
			n = n + 1;
		}
	}
	selected_property_count = n;

	focus = 0;
	current_note_as = null;
	selected_property = -1;
	setDetails(null);
	sticky_note = false;
	hide_note();
}

function select_property(index) {
	document.getElementById("instr_dd").className = null;
	focus = 1;
	selected_note = -1;
	sticky_note = false;

	// Highlight selection
	var elt;
	if( selected_property >= 0 ) {
		elt = property_elts[selected_property];
		elt.className = null;
	}
	elt = property_elts[index];
	elt.className = "selected";
	selected_property = index;
	
	setDetails(elt);
	sticky_note = false;
	hide_note();
}

function setDetails(elt) {
	var details = document.createElement("div");
	details.id = "details";
	var temp = document.createElement("h2");
	temp.appendChild(document.createTextNode("Details"));
	details.appendChild(temp);
	
	if( elt ) {
		var data = elt.lastChild;
		if( data.nodeType == 3 ) { // IE
			data = data.previousSibling;
		}
		data = data.childNodes;
		temp = document.createElement("h3");
		temp.appendChild(data[0].firstChild.cloneNode(false));
		details.appendChild(temp);
		
		temp = document.createElement("div");
		temp.className = "desc";
		temp.appendChild(data[1].firstChild.cloneNode(false));
		details.appendChild(temp);
		
		var dl = document.createElement("dl");
		appendDefinition(dl, "Value:", "value", data[2]);
		appendDefinition(dl, "Initial:", "", data[3]);
		appendDefinition(dl, "Inherited:", "", data[4]);
		appendDefinition(dl, "Applies to:", "", data[5]);
		appendDefinition(dl, "Supported by:", "supported", data[6]);
		details.appendChild(dl);
	}

	var details_old = document.getElementById("details");
	details_old.parentNode.replaceChild(details, details_old);
	
	current_note_as = details.getElementsByTagName("a");
	for(var k = 0; k < current_note_as.length; k++) {
		var a = current_note_as[k];
		a.onclick = function() {
			toggle_sticky(this);
			return false;
		}
		a.onmouseover = new Function("", "show_note('"+a.firstChild.nodeValue+"'); return false;");
		a.onmouseout = new Function("", "hide_note(); return false;");
	}
}

function appendDefinition(list, title, className, data) {
	if( data == null ) return;
	var temp = document.createElement("dt");
	temp.appendChild(document.createTextNode(title));
	list.appendChild(temp);
	temp = document.createElement("dd");
	if( className != "" ) {
		temp.className = className;
	}
	appendChildren(temp, data);
	list.appendChild(temp);
}

function appendChildren(parent, elt) {
	var children = elt.childNodes;
	for(k = 0; k < children.length; k++) {
		parent.appendChild(children[k].cloneNode(true));
	}
}

function show_note(title) {
	if( sticky_note ) return;
	for(var k = 0; k < notes_dls.length; k++ ) {
		var dl = notes_dls[k];
		var st_title = dl.getElementsByTagName("dt")[0].firstChild.nodeValue;
		if( strip_s(st_title) == strip_s(title) ) {
			var old_dl = document.getElementById("note");
			var new_dl = dl.cloneNode(true);
			new_dl.id = "note";
			old_dl.parentNode.replaceChild(new_dl, old_dl);
		}
	}
}

function strip_s(str) {
	return str.replace(/^\s+/,"").replace(/\s+$/,"");
}

function hide_note() {
	if( sticky_note == false ) {
		var old_dl = document.getElementById("note");
		old_dl.style.display = "none";
	}
}

function toggle_sticky(event_a) {
	if( current_note_as ) {
		for(var k=0; k<current_note_as.length; k++) {
			if( event_a==current_note_as[k] ) {
				select_note(k);
			}
		}
	}
}

function select_note(index) {
	var a = current_note_as[index];
	if( sticky_note && index == selected_note ) {
		a.className = null;
		sticky_note = false;
		selected_note = -1;
		focus = 1;
		property_elts[selected_property].className = "selected";
		return;
	}
	if( selected_note != -1 ) {
		current_note_as[selected_note].className = null;
	}
	sticky_note = false;
	show_note(a.firstChild.nodeValue);
	a.className = "stick";
	sticky_note = true;
	selected_note = index;
	focus = 2;
	property_elts[selected_property].className = "nofocus";
}

function keyPress(e) {
	if(e) {
	} else { // IE
		e = window.event;
	}
	var key = e.keyCode;
	if( e.metaKey || e.altKey || e.ctrlKey ) return true;
	if( focus==-1 && ((key>=37 && key<=40) || (key>=63232 && key<=63235) || key==119 || key==97 || key==121 || key==115) ) {
		select_section(0);
		return false;
	}
	if( key==63232 || key==38 || key==119 ) { // up
		if( focus == 0 ) {
			if( selected_section > 0 ) select_section(selected_section-1);
		} else {
			if( selected_property > 0 ) select_property(selected_property-1);
		}
	} else if( key==63233 || key==40 || key==121 ) { // down
		if( focus == 0 ) {
			if( selected_section < 9 ) select_section(selected_section+1);
		} else {
			if( selected_property < selected_property_count-1 ) select_property(selected_property+1);
		}
	} else if( key==63234 || key==37 || key==97 ) { // left
		if( focus == 1 ) {
			focus = 0;
			select_section(selected_section);
			section_dds[selected_section].className = "selected";
		} else if( focus == 2 ) {
			if( selected_note > 0 ) {
				select_note(selected_note-1);
			} else if( selected_note == 0 ) {
				select_note(0);
				hide_note();
			}
		}
	} else if( key==63235 || key==39 || key==115 ) { // right
		if( focus == 0 ) {
			focus = 1;
			section_dds[selected_section].className = "nofocus";
			select_property(0);
		} else if( focus == 1 ) {
			if( current_note_as && current_note_as.length > 0 ) {
				select_note(0);
			}
		} else if( focus == 2 ) {
			if( selected_note < current_note_as.length-1 ) {
				select_note(selected_note+1);
			}
		}
	} else {
		/*alert(key);*/
		return true;
	}
	return false;
}