var _examplesNode;
var _panelNode;
// the calling html file must include a js file that includes a clist array (listing character names)

function initialise () {
	_examplesNode = document.getElementById('textexpansions');
	_panelNode = document.getElementById('panel');

	// look for all span with class='ex' and derive exploded versions of the text and add a footnote marker
	var examples = document.getElementsByTagName('span'); 
	var count = 0;
	total = examples.length;
	for (i=0;i<total;i++) { 
		if (examples[i].className == 'ex') {
			count++; 
			// assign an id and event controls to the span
			examples[i].id = 'ex'+count;
			setMouseover(examples[i]);
			setMouseout(examples[i]);
			var lang = examples[i].lang;
			
			chars = examples[i].firstChild.data;
			
			// create a footnote pointer
			anchor = document.createElement('a');
			anchor.href = '#eex'+count;
			sup = anchor.appendChild(document.createElement('sup'));
			sup.className = 'fnote';
			sup.appendChild(document.createTextNode('\u00A0'+count));
			
			// do some convoluted stuff in order to add footnote pointer after the example
			thisexample = examples[i].parentNode.replaceChild(anchor, examples[i]);
			anchor.parentNode.insertBefore(thisexample, anchor);

			// create the footnote
			maindiv = document.createElement('div');
			maindiv.id = 'eex'+count; maindiv.name = 'eex'+count;
			maindiv.className = 'expandedtext';
			
			textdiv = maindiv.appendChild(document.createElement('div'));
			
			number = textdiv.appendChild(document.createElement('sup'));
			number.appendChild(document.createTextNode('Example '+count+': '));
			number.className = 'exNum';
			
			text = textdiv.appendChild(document.createElement('span'));
			text.className = 'eex';
			text.lang = lang; 
			text.appendChild(document.createTextNode(chars));
			
			// generate the list of characters
			for (var j=0;j<chars.length;j++) {
				code = chars.charCodeAt(j); 
				hexnum = code.toString(16).toUpperCase();
				if (hexnum.length < 3) { hexnum = '00'+hexnum; } // doesn't cope with surrogates!
				else if (hexnum.length < 4) { hexnum = '0'+hexnum; }
				chardiv = maindiv.appendChild(document.createElement('div'));
				chardiv.appendChild(document.createTextNode(hexnum+': '));
				img = chardiv.appendChild(document.createElement('img'));
				img.src = '/rishida/scripts/images/'+hexnum+'.png';
				img.alt = hexnum;
				chardiv.appendChild(document.createTextNode(' '+clist[code]));
				}
			_examplesNode.appendChild(maindiv);
			}
		}
	}

function setMouseover ( node ) {
	node.onmouseover = function(){ showdetails(node) };
	}
	
function setMouseout ( node ) {
	node.onmouseout = function(){ hidedetails() };
	}
	



function showdetails (node) { 
	id = 'e'+node.id;
	div = document.getElementById(id); 
	//panel = document.insertBefore(div.cloneNode(true), node);
	cloneddata = div.cloneNode(true); 
	_panelNode.appendChild(cloneddata);
	_panelNode.style.display = 'block';
	}

function hidedetails () {
	_panelNode.removeChild(_panelNode.firstChild);
	}


window.onload = function() { initialise(); };