function add(ch) { 
	if (document.getElementById('output').style.display == 'none') { return; }
	var outputNode = document.getElementById( 'output' ); // points to the output textarea

	//IE support
	if (document.selection) {
		outputNode.focus();
	    range = document.selection.createRange();
		range.text = ch; 
	    range.select(); 
		outputNode.focus();
		}
	// Mozilla and Safari support
	else if (outputNode.selectionStart || outputNode.selectionStart == '0') {
		var startPos = outputNode.selectionStart;
		var endPos = outputNode.selectionEnd;
		var cursorPos = startPos;
		var scrollTop = outputNode.scrollTop;

		outputNode.value = outputNode.value.substring(0, startPos)
              + ch
              + outputNode.value.substring(endPos, outputNode.value.length);
		cursorPos += ch.length;

		outputNode.focus();
		outputNode.selectionStart = cursorPos;
		outputNode.selectionEnd = cursorPos;
		outputNode.scrollTop = scrollTop;
		}
	else {
		outputNode.value += ch;
		outputNode.focus();
		}
	}

	
function delchar () { // this is still tbd
	var outputNode = document.getElementById('output');

	//IE support
	if (document.selection) {
		outputNode.focus();
	    document.selection.createRange().text = ''; 
		outputNode.focus();
//		if (sel.text.length > 0) {
//			sel.text = ch;
//			}
//		else {
//			sel.text = ch;
//			}
		}
	//Mozilla and Safari support
	else if (outputNode.selectionStart || outputNode.selectionStart == '0') {
		var startPos = outputNode.selectionStart;
		var endPos = outputNode.selectionEnd;
		var cursorPos = startPos;
		var scrollTop = outputNode.scrollTop;

		outputNode.value = outputNode.value.substring(0, startPos)
            + outputNode.value.substring(endPos, outputNode.value.length);

		outputNode.focus();
		outputNode.selectionStart = cursorPos;
		outputNode.selectionEnd = cursorPos;
		outputNode.scrollTop = scrollTop;
		}
	else {
		if (newLength > 0) {
			outputNode.value = outputText.substring(0, outputText.length-1 );
			}
		else { deleteAll(); }
		outputNode.focus();
		}
	}
	
	
function deleteAll () {
	var outputNode = document.getElementById( 'output' );
	outputNode.value = "";
	}

function selectFont ( newFont ) {
	document.getElementById( 'output' ).style.fontFamily = newFont;
	document.getElementById('showall').style.fontFamily = newFont;
	document.getElementById('fontName').value="";
	}
	
function customFont ( newFont ) { 
	document.getElementById( 'output' ).style.fontFamily = newFont;
	document.getElementById('showall').style.fontFamily = newFont;
	document.getElementById('fontList').value='0';
	}
	
function changeFontSize ( newSize ) {
	document.getElementById( 'output' ).style.fontSize = newSize +
		'px';
	}
	

function searchFor ( str, scriptname ) {
	str = str.toLowerCase();
	var characters = document.getElementById('grid').getElementsByTagName( 'img' );
	for (var i = 0; i < characters.length; i++ ) {
		characters[i].style.border = '1px solid white';
		titletext = characters[i].title.toLowerCase();
		titletext = titletext.replace(scriptname, '');
		if (titletext.indexOf(str) > -1 ) {
			characters[i].style.border = '1px solid red';
			}
		}
	}
	

function changeHighlight ( key ) {
	if (key == 'none' || key == 'off' || key == 'Off' ) { _highlightOn = false; }
	if (key == 'shape' ) { _highlightOn = 'true'; }
	}
	
	
function h ( node ) {
	// remove any highlighting, eg. from search
	if (node.nodeName.toLowerCase() != 'td') {
		node.style.border = '1px solid white';
		}

	// display character information
	span = document.createElement( 'span' );
	span.setAttribute( 'id', 'charname' );
	charinfo = document.createTextNode( node.title );
	span.appendChild(charinfo);
	var chardata = document.getElementById('chardata');
	chardata.replaceChild( span, chardata.firstChild );
	
	// highlight similar characters
	var character = node.id; 
	for (var i=0; i<features.length; i++) { 
		if (features[i].indexOf('::'+character+':') > -1 && _highlightOn ) {
			var targets = features[i].split(':'); 
			for (var j=2; j<targets.length-1; j++) {
				document.getElementById( targets[j] ).style.border = '1px solid orange';
				}
			break;
			}
		}
	}
	
	
function u ( node ) {
	var character = node.id;
	for (var i=0; i<features.length; i++) { 
		if (features[i].indexOf('::'+character+':') > -1 && _highlightOn ) {
			var targets = features[i].split(':'); 
			for (var j=2; j<targets.length-1; j++) {
				document.getElementById( targets[j] ).style.border = '1px solid white';
				}
			break;
			}
		}
	}

	
	
function showAll () {
	document.getElementById('showall').style.display = 'block';
	document.getElementById('grid').style.display = 'none';
	document.getElementById('fontGrid').replaceChild(document.createTextNode('Picker'), document.getElementById('fontGrid').firstChild);
	//document.getElementById('output').style.display = 'none';
	//document.getElementById('buttons').style.display = 'none';
	}

	
function switchView () {
	if (document.getElementById('showall').style.display == 'block') {
		document.getElementById('showall').style.display = 'none';
		document.getElementById('grid').style.display = 'block';
		document.getElementById('buttons').style.display = 'block';
		document.getElementById('output').style.display = 'block'; 
		document.getElementById('fontGrid').replaceChild(document.createTextNode('Show font grid'), document.getElementById('fontGrid').firstChild);
		document.getElementById('showOutput').style.display = 'none';
		document.getElementById('output').focus();
		document.getElementById('showOutput').replaceChild(document.createTextNode('Enable output'), document.getElementById('showOutput').firstChild);
		}
	else {
		document.getElementById('showall').style.display = 'block';
		document.getElementById('grid').style.display = 'none';
		document.getElementById('buttons').style.display = 'none';
		document.getElementById('output').style.display = 'none'; 
		document.getElementById('fontGrid').replaceChild(document.createTextNode('Return to picker'), document.getElementById('fontGrid').firstChild);
		document.getElementById('showOutput').style.display = 'inline';
		document.getElementById('fontList').focus();
		}
	}

function hideOutput () {
	document.getElementById('output').style.height = '0px'; 
	document.getElementById('restoreOutput').style.display = 'block';
	document.getElementById('buttons').style.display = 'none';
	}
	
function unhideOutput () {
	if (document.getElementById('output').style.display == 'none') {
		//document.getElementById('output').style.height = (document.getElementById('rows').value*100)+'px';
		document.getElementById('output').style.display = 'block';
		document.getElementById('buttons').style.display = 'block';
		document.getElementById('showOutput').replaceChild(document.createTextNode('Disable output'), document.getElementById('showOutput').firstChild);
		}
	else {
		document.getElementById('output').style.display = 'none';
		document.getElementById('buttons').style.display = 'none';
		document.getElementById('showOutput').replaceChild(document.createTextNode('Enable output'), document.getElementById('showOutput').firstChild);
		}
	}
	
	
function closeShowAll () {
	document.getElementById('showall').style.display = 'none';
	document.getElementById('grid').style.display = 'block';
	//document.getElementById('output').style.display = 'block';
	//document.getElementById('buttons').style.display = 'block';
	}
	
	
	
	function transcribe (node) {
	var chstring = node.value;
	var output = '';document.createTextNode('Picker')
	for (var i=0; i<chstring.length; i++) {
		var ch = map[chstring.charCodeAt(i)].trans;
		if (ch) { output += ch; }
		else { output += chstring.charAt(i); }
		}
	document.getElementById('latin').value = output;
	}


function showcodepoints (node) {
	var chstring = node.value;
	list = '';
	for (var i=0; i<chstring.length-1; i++) {
		hexcode = chstring.charCodeAt(i).toString(16).toUpperCase();
		if (hexcode.length < 2) { hexcode = '000'+hexcode; }
		if (hexcode.length < 3) { hexcode = '00'+hexcode; }
		if (hexcode.length < 4) { hexcode = '0'+hexcode; }
		list += hexcode+' ';
		}
	hexcode = chstring.charCodeAt(chstring.length-1).toString(16).toUpperCase();
	list += hexcode;
	
	codepoints = window.open('/rishida/scripts/uniview/getName.php?graphics=yes&list='+list, 'codepoints'); codepoints.focus();
	}
	
function showdetail (node) {
	var chstring = node.value;
	list = '';
	for (var i=0; i<chstring.length-1; i++) {
		hexcode = chstring.charCodeAt(i).toString(16).toUpperCase();
		if (hexcode.length < 2) { hexcode = '000'+hexcode; }
		if (hexcode.length < 3) { hexcode = '00'+hexcode; }
		if (hexcode.length < 4) { hexcode = '0'+hexcode; }
		list += hexcode+' ';
		}
	hexcode = chstring.charCodeAt(chstring.length-1).toString(16).toUpperCase();
	list += hexcode;
	
	detail = window.open('/rishida/scripts/khmer/showChars.php?codepoints='+list, 'detail'); detail.focus();
	}
	
function oldshowcodepoints (node) {

	document.getElementById('codepoints').style.display = 'block';
	document.getElementById('grid').style.display = 'none';
	document.getElementById('chardata').style.display = 'none';
	document.getElementById('buttons').style.display = 'none';
	document.getElementById('latin').style.display = 'none';

	var chstring = node.value;
	var output = '';
	var container = document.getElementById('codepoints'); 
	var div = document.createElement('div');
	container.replaceChild( div, container.firstChild);

	for (var i=0; i<chstring.length; i++) {
		var p = div.appendChild( document.createElement( 'p' ));
		if (map[chstring.charCodeAt(i)]) {
			hexcode = chstring.charCodeAt(i).toString(16).toUpperCase();
			if (hexcode.length < 2) { hexcode = '000'+hexcode; }
			if (hexcode.length < 3) { hexcode = '00'+hexcode; }
			if (hexcode.length < 4) { hexcode = '0'+hexcode; }
			var img = document.createElement('img');
			img.src = 'images/'+hexcode+'.png';
			p.appendChild(document.createTextNode(hexcode+': '));
			p.appendChild(img);
			p.appendChild(document.createTextNode(' '+map[chstring.charCodeAt(i)].name));
			}
		else { 
			var text = document.createTextNode(chstring.charCodeAt(i).toString(16).toUpperCase()+': '+chstring.charAt(i) + ' Character not supported by this picker.');
			p.appendChild(text);
			}
		}
	// set the font from what's currently indicated in the font selection boxes
	customfont = document.getElementById('fontName').value;
	listfont = document.getElementById('fontList').value;
	if (customfont) { div.style.fontFamily = customfont; }
	else { div.style.fontFamily = listfont; }
	// add a close 'button'
	closeSA = document.createElement('div');
	closetext = document.createTextNode('Close');
	closeSA.appendChild(closetext);
	closeSA.onclick = function() { closeCodepoints() };
	closeSA.className = 'closeText';
	div.appendChild(closeSA);
	}
	
function closeCodepoints () {
	document.getElementById('codepoints').style.display = 'none';
	document.getElementById('grid').style.display = 'block';
	document.getElementById('chardata').style.display = 'block';
	document.getElementById('buttons').style.display = 'block';
	document.getElementById('latin').style.display = 'block';
	}

	

// INITIALISATION
function setMouseover ( node ) {
	node.onmouseover = function(){ h(node) };
	}
	
function setMouseout ( node ) {
	node.onmouseout = function(){ u(node) };
	}
	
function setOnclick ( node, ch ) {
	node.onclick = function(){ add(ch) };
	}
	
function titleSort (a, b) {
	return parseInt(a.title, 16)-parseInt(b.title, 16);
	}

	
function initialise() {
	// remove the javascript warning
	//deleteAll();

	// set mouseover/mouseout functions for highlighting
	var characters = document.getElementById('grid').getElementsByTagName( 'img' );
	for (var i = 0; i < characters.length; i++ ) {
		setMouseover(characters[i]);
		setMouseout(characters[i]);
		}
	if (document.all) {  // stop IE changing the focus when clicking on an img
		document.getElementById('grid').onselectstart = function () { return false };
		}
		
	// set up div to view all characters at once
	var container = document.getElementById('showall');
	var width = eval(container.title);
	var table = container.appendChild(document.createElement('table'));
	var tbody = table.appendChild(document.createElement('tbody'));
	var charNodes = document.getElementById('grid').getElementsByTagName( 'img' );
	var characters = new Array;
	for (i=0; i<charNodes.length; i++) {
		characters[i] = { title: charNodes[i].title, alt:charNodes[i].alt };
		}
	characters.sort(titleSort);
	
	var height = characters.length/width;

	for (i=0; i<height; i++) {
		tr = tbody.appendChild( document.createElement( 'tr' ));
		
		for (j=i*width; j<((i*width)+width); j++) {
			if (j<characters.length) {
				td = tr.appendChild( document.createElement( 'td' ));
				var text = document.createTextNode(characters[j].alt);
				td.title = characters[j].title;
				td.appendChild(text);
				setMouseover(td);
				setMouseout(td);
				td.className = 'add'+characters[j].alt;
				setOnclick(td, characters[j].alt);
				}
			}
		}
	// set the font from what's currently indicated in the font selection boxes
	customfont = document.getElementById('fontName').value; 
	listfont = document.getElementById('fontList').value; 
	if (customfont) { container.style.fontFamily = customfont; }
	else { container.style.fontFamily = listfont; }
	// add a close 'button'
	//closeSA = document.createElement('div');
	//closeSA.id = 'closeButton';
	//closetext = document.createTextNode('Back');
	//closeSA.appendChild(closetext);
	//closeSA.onclick = function() { closeShowAll() };
	//closeSA.className = 'closeText';
	//container.appendChild(closeSA);
	if (document.all) {  // stop IE changing the focus when clicking on an img
		document.getElementById('showall').onselectstart = function () { return false };
		}
	document.getElementById('output').focus();
		

	}

window.onload = function() { initialise(); };
var _highlightOn = true;