function add (character) {
	var title = character.title.split( ' ' );
	var hexCode = title[0];
	var outputNode = document.getElementById( 'output' );
	outputNode.value = outputNode.value + String.fromCharCode( parseInt( hexCode, 16 ));
	}

function addControl (character) {
	var title = character.split( ' ' );
	var hexCode = title[0];
	var outputNode = document.getElementById( 'output' );
	outputNode.value = outputNode.value + String.fromCharCode( parseInt( hexCode, 16 ));
	}

function deleteAll () {
	var outputNode = document.getElementById( 'output' );
	outputNode.value = "";
	}
	
function delchar () {
	var outputNode = document.getElementById('output');
	var outputText = outputNode.value;
	var newLength = outputText.length-1;
	if (newLength > 0) {
		outputNode.value = outputText.substring(0, newLength );
		}
	else { deleteAll(); }
	}
	
function addString ( str ) {
	var outputDiv = document.getElementById( 'output' );
	var outputText = outputDiv.firstChild;
	var currentText = outputText.nodeValue;
	var newText = document.createTextNode( outputText.nodeValue + str );
	var removedText = outputDiv.replaceChild(newText, outputText);
	}

function changeFont ( newFont ) {
	document.getElementById( 'grid' ).style.fontFamily = newFont;
	document.getElementById( 'output' ).style.fontFamily = newFont;
	document.getElementById( 'fontName' ).value = newFont;
	}
	
function changeGFontSize ( newSize ) {
	document.getElementById( 'grid' ).style.fontSize = newSize;
	}
	
function changeOFontSize ( newSize ) {
	document.getElementById( 'output' ).style.fontSize = newSize;
	}
	
function setOnclick ( codepoint, node ) {
	//sets the event functions for node, used by toChar and toImg
	node.onclick = function(){ printProperties(codepoint) };
	}

function toChar () {
	var imgs = document.getElementsByTagName( 'img' );
	for (i = 0; i < imgs.length; i++ ) {
		filler = '';
		var img = imgs[i];
		uname = img.title;
		imgid = img.id;
		span = document.createElement( 'span' );
		span.setAttribute( 'id', imgid );
		span.setAttribute( 'title', uname );
		span.onclick = function(){ add(this) };
		span.onmouseover = function(){ highlight(this) };
		span.onmouseout = function(){ unhighlight(this) };
		if (img.className == 'cc') {
			span.setAttribute( 'class', 'cc' );
			filler = '\xA0';
			}
		var decCode = parseInt( uname.slice(0,4), 16 );
		character = document.createTextNode( String.fromCharCode( decCode) + filler );
		span.appendChild(character);
		imgs[i].parentNode.replaceChild( span, imgs[i] );
		i--;
		}
	}
	
function toImg () {
	spans = document.getElementsByTagName( 'span' );
	for (i = 0; i < spans.length; i++ ) {
		span = spans[i];
		if (span.title) {
			uname = span.title;
			spanid = span.id;
			img = document.createElement( 'img' );
			img.setAttribute( 'id', spanid );
			img.setAttribute( 'title', uname );
			img.setAttribute( 'alt', uname );
			img.onclick = function(){ add(this) };
			img.onmouseover = function(){ highlight(this) };
			img.onmouseout = function(){ unhighlight(this) };
			if (span.className == 'cc') {
				img.setAttribute( 'class', 'cc' );
				}
			img.setAttribute( 'src', 'images/'+uname.slice(0,4)+'.GIF' );
			span.parentNode.replaceChild( img, spans[i] );
			i--;
			}
		}
	}
	
	
function toImgPng () { // only one line different from previous
	spans = document.getElementsByTagName( 'span' );
	for (i = 0; i < spans.length; i++ ) {
		span = spans[i];
		if (span.title) {
			uname = span.title;
			spanid = span.id;
			img = document.createElement( 'img' );
			img.setAttribute( 'id', spanid );
			img.setAttribute( 'title', uname );
			img.setAttribute( 'alt', uname );
			img.onclick = function(){ add(this) };
			img.onmouseover = function(){ highlight(this) };
			img.onmouseout = function(){ unhighlight(this) };
			if (span.className == 'cc') {
				img.setAttribute( 'class', 'cc' );
				}
			img.setAttribute( 'src', 'images/'+uname.slice(0,4)+'.png' );
			span.parentNode.replaceChild( img, spans[i] );
			i--;
			}
		}
	}
	
	
function changeHighlight ( key ) {
	if (key == 'none') { _highlightOn = false; }
	if (key == 'shape' ) { _highlightOn = 'true'; }
	}
	
	
function highlight ( node ) {
	var character = node.id;
	if (features[character] && _highlightOn ) {
		var fields = features[character].split(';');
		var targets = fields[0].split(',');
		for (var i=0; i<targets.length; i++) {
			document.getElementById( targets[i] ).style.border = '1px solid orange';
			}
		}
	}
	
function unhighlight ( node ) {
	var character = node.id;
	if (features[character] ) {
		var fields = features[character].split(';');
		var targets = fields[0].split(',');
		for (var i=0; i<targets.length; i++) {
			document.getElementById( targets[i] ).style.border = '1px solid white';
			}
		}
	}

// INITIALISATION
var _highlightOn = true;

// set up hash array on ids
for (var i=0; i<features.length; i++) {
	fields = features[i].split(';');
	features[fields[0]] = fields[1];
	}