// before uploading this file, remember to change the commenting in showDetail
// this is so that it calls the database query page on www.w3.org rather than on people

var accentedchars = { 	
						'a':['à', 'á', 'ã', 'ả', 'ạ'],
						'ă':['ằ', 'ắ', 'ẵ', 'ẳ', 'ặ'],
						'â':['ầ', 'ấ', 'ẫ', 'ẩ', 'ậ'],
						'e':['è', 'é', 'ẽ', 'ẻ', 'ẹ'],
						'ê':['ề', 'ế', 'ễ', 'ể', 'ệ'],
						'i':['ì', 'í', 'ĩ', 'ỉ', 'ị'],
						'o':['ò', 'ó', 'õ', 'ỏ', 'ọ'],
						'ô':['ồ', 'ố', 'ỗ', 'ổ', 'ộ'],
						'ơ':['ờ', 'ớ', 'ỡ', 'ở', 'ợ'],
						'u':['ù', 'ú', 'ũ', 'ủ', 'ụ'],
						'ư':['ừ', 'ứ', 'ữ', 'ử', 'ự'],
						'y':['ỳ', 'ý', 'ỹ', 'ỷ', 'ỵ'],
						'A':['À', 'Á', 'Ã', 'Ả', 'Ạ'],
						'Ă':['Ằ', 'Ắ', 'Ẵ', 'Ẳ', 'Ặ'],
						'Â':['Ằ', 'Ấ', 'Ẫ', 'Ẩ', 'Ậ'],
						'E':['È', 'É', 'Ẽ', 'Ẻ', 'Ẹ'],
						'Ê':['Ề', 'Ế', 'Ễ', 'Ể', 'Ệ'],
						'I':['Ì', 'Í', 'Ĩ', 'Ỉ', 'Ị'],
						'O':['Ò', 'Ó', 'Õ', 'Ỏ', 'Ọ'],
						'Ô':['Ồ', 'Ố', 'Ỗ', 'Ổ', 'Ộ'],
						'Ơ':['Ờ', 'Ớ', 'Ỡ', 'Ở', 'Ợ'],
						'U':['Ù', 'Ú', 'Ũ', 'Ủ', 'Ụ'],
						'Ư':['Ừ', 'Ứ', 'Ữ', 'Ử', 'Ự'],
						'Y':['Ỳ', 'Ý', 'Ỹ', 'Ỷ', 'Ỵ']
						};


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

	// determine whether the character to add is an accent
	var accent = -1;
	switch (ch) {
		case '\u0300': accent = 0; break;
		case '\u0301': accent = 1; break;
		case '\u0303': accent = 2; break;
		case '\u0309': accent = 3; break;
		case '\u0323': accent = 4; break;
		}

			//IE support
	if (document.selection) { 
		outputNode.focus();
	    range = document.selection.createRange();
		
		if (accent > -1) {
			range.moveStart('character', -1);  // need  to figure out how to prevent this if at beginning of the text area
			if (range.text != ''  && accentedchars[range.text]) { ch = accentedchars[range.text][accent]; }
			else if (range.text == '') { range.moveStart('character', 1); ch = 'hello'; }
			else { ch = range.text+ch; }
			}
		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;
		
		if (accent > -1 && outputNode.selectionStart > 0 && accentedchars[outputNode.value.substr(startPos-1, 1)]) {
			startPos--; cursorPos--;
			var prevchar = outputNode.value.substr(startPos, 1);
			ch = accentedchars[prevchar][accent];
			}

		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();
		}
		
	//var chstring = outputNode.value;
	//for (var i=0;i<chstring.length; i++) {
	//	chstring = chstring.replace(/ể/g, 'ể');
	//	chstring = chstring.replace(/ắ/g, 'ắ');
	//	}
	//outputNode.value = chstring;
	}

	
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('combinations').style.fontFamily = newFont;
	document.getElementById('fontName').value="";
	}
	
function customFont ( newFont ) { 
	document.getElementById( 'output' ).style.fontFamily = newFont;
	document.getElementById('showall').style.fontFamily = newFont;
	document.getElementById('combinations').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; 
	if (document.getElementById('combinations').style.display == 'none') {
		characters = document.getElementById('grid').getElementsByTagName( 'img' );
		}
	else {
		characters = document.getElementById('combinations').getElementsByTagName( 'span' );
		}
	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 (toView) {
	if (toView != 'picker') {
		document.getElementById('grid').style.display = 'none';
		document.getElementById('showPicker').style.display = 'inline';
		}
	if (toView != 'fontgrid') {
		document.getElementById('showall').style.display = 'none';
		document.getElementById('showFontgrid').style.display = 'inline';
		document.getElementById('buttons').style.display = 'block';
		document.getElementById('output').style.display = 'block'; 
		document.getElementById('showOutput').style.display = 'none';
		document.getElementById('showOutput').replaceChild(document.createTextNode('Enable output'), document.getElementById('showOutput').firstChild);
		}
	if (document.getElementById('combinations') && toView != 'combinations') {
		document.getElementById('combinations').style.display = 'none';
		if (document.getElementById('showCombinations')) { document.getElementById('showCombinations').style.display = 'inline'; }
		document.getElementById('showOutput').style.display = 'none';
		}
	
	if (toView == 'picker') {
		document.getElementById('grid').style.display = 'block';
		document.getElementById('showPicker').style.display = 'none';
		document.getElementById('output').focus();
		}
	else if (toView == 'fontgrid') {
		document.getElementById('showall').style.display = 'block';
		document.getElementById('showFontgrid').style.display = 'none';
		document.getElementById('buttons').style.display = 'none';
		document.getElementById('output').style.display = 'none'; 
		document.getElementById('showOutput').style.display = 'inline';
		document.getElementById('fontList').focus();
		}
	else if (document.getElementById('combinations') && toView == 'combinations') {
		document.getElementById('combinations').style.display = 'block';
		if (document.getElementById('showCombinations')) { document.getElementById('showCombinations').style.display = 'none'; }
		document.getElementById('output').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/showChars.php?codepoints='+list, 'detail'); detail.focus();
	//detail = window.open('http://www.w3.org/People/Ishida/php/showchars/index.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();
	if (document.getElementById('combinations')) {
		document.getElementById('combinations').style.display = 'none'; }

	// 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();
		
	// set the font for combinations to whatever is indicated in the font selection boxes
	if (document.getElementById('combinations')) {
		if (customfont) { document.getElementById('combinations').style.fontFamily = customfont; }
		else { document.getElementById('combinations').style.fontFamily = listfont; }

		// set mouseover/mouseout functions for highlighting in combinations
		var characters = document.getElementById('combinations').getElementsByTagName( 'span' );
		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('combinations').onselectstart = function () { return false };
			}
		}
	}

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