var qwerty = {'name':'Base QWERTY',
	'ls':
{'k0':"`",'k1':"1",'k2':"2",'k3':"3",'k4':"4",'k5':"5",'k6':"6",'k7':"7",'k8':"8",'k9':"9",'k10':"0",'k11':"-",'k12':"=",'k13':"⌫",
	'k14':"⇥",'k15':"q",'k16':"w",'k17':"e",'k18':"r",'k19':"t",'k20':"y",'k21':"u",'k22':"i",'k23':"o",'k24':"p",'k25':"[",'k26':"]",'k27':"\\",
	'k28':"⇪",'k29':"a",'k30':"s",'k31':"d",'k32':"f",'k33':"g",'k34':"h",'k35':"j",'k36':"k",'k37':"l",'k38':";",'k39':"'",'k40':"↵",
	'k41':"⇧",'k42':"z",'k43':"x",'k44':"c",'k45':"v",'k46':"b",'k47':"n",'k48':"m",'k49':",",'k50':".",'k51':"/",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"},
	
	'us':
{'k0':"~",'k1':"!",'k2':"@",'k3':"#",'k4':"$",'k5':"%",'k6':"^",'k7':"&",'k8':"*",'k9':"(",'k10':")",'k11':"_",'k12':"+",'k13':"⌫",
	'k14':"⇥",'k15':"Q",'k16':"W",'k17':"E",'k18':"R",'k19':"T",'k20':"Y",'k21':"U",'k22':"I",'k23':"O",'k24':"P",'k25':"{",'k26':"}",'k27':"|",
	'k28':"⇪",'k29':"A",'k30':"S",'k31':"D",'k32':"F",'k33':"G",'k34':"H",'k35':"J",'k36':"K",'k37':"L",'k38':":",'k39':""",'k40':"↵",
	'k41':"⇧",'k42':"Z",'k43':"X",'k44':"C",'k45':"V",'k46':"B",'k47':"N",'k48':"M",'k49':"<",'k50':">",'k51':"?",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"},
	
	'lo':
{'k0':"`",'k1':"¡",'k2':"™",'k3':"£",'k4':"¢",'k5':"§",'k6':"ˆ",'k7':"¶",'k8':"•",'k9':"ª",'k10':"º",'k11':"–",'k12':"≠",'k13':"⌫",
	'k14':"⇥",'k15':"œ",'k16':"˙",'k17':"´",'k18':"®",'k19':"þ",'k20':"¥",'k21':"¨",'k22':"ʼ",'k23':"ø",'k24':",",'k25':"“",'k26':"‘",'k27':"«",
	'k28':"⇪",'k29':"¯",'k30':"ß",'k31':"ð",'k32':"ƒ",'k33':"©",'k34':"ˍ",'k35':"˝",'k36':"˚",'k37':"-",'k38':"…",'k39':"æ",'k40':"↵",
	'k41':"⇧",'k42':"ˀ",'k43':".",'k44':"¸",'k45':"ˇ",'k46':"˘",'k47':"˜",'k48':"˛",'k49':"≤",'k50':"≥",'k51':"÷",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"},
	
	'uo':
{'k0':"◌̀",'k1':"⁄",'k2':"€",'k3':"‹",'k4':"›",'k5':"†",'k6':"◌̂",'k7':"‡",'k8':"°",'k9':"·",'k10':"‚",'k11':"—",'k12':"±",'k13':"⌫",
	'k14':"⇥",'k15':"Œ",'k16':"◌̇",'k17':"◌́",'k18':"‰",'k19':"Þ",'k20':" ̏",'k21':"◌̈",'k22':"◌̛",'k23':"Ø",'k24':"◌̦",'k25':"”",'k26':"’",'k27':"»",
	'k28':"⇪",'k29':"◌̄",'k30':" ̑",'k31':"Ð",'k32':" ̰",'k33':"‸",'k34':"◌̱",'k35':"◌̋",'k36':"◌̊",'k37':"◌̵",'k38':"№",'k39':"Æ",'k40':"↵",
	'k41':"⇧",'k42':"◌̉",'k43':"◌̣",'k44':"◌̧",'k45':"◌̌",'k46':"◌̆",'k47':"◌̃",'k48':"◌̨",'k49':"„",'k50':"ʔ",'k51':"¿",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"}}

var dvorak = {'name':'Base Dvorak',
	'ls':
{'k0':"`",'k1':"1",'k2':"2",'k3':"3",'k4':"4",'k5':"5",'k6':"6",'k7':"7",'k8':"8",'k9':"9",'k10':"0",'k11':"[",'k12':"]",'k13':"⌫",
	'k14':"⇥",'k15':"ʼ",'k16':",",'k17':".",'k18':"p",'k19':"y",'k20':"f",'k21':"g",'k22':"c",'k23':"r",'k24':"l",'k25':"/",'k26':"=",'k27':"\\",
	'k28':"⇪",'k29':"a",'k30':"o",'k31':"e",'k32':"u",'k33':"i",'k34':"d",'k35':"h",'k36':"t",'k37':"n",'k38':"s",'k39':"-",'k40':"↵",
	'k41':"⇧",'k42':";",'k43':"q",'k44':"j",'k45':"k",'k46':"x",'k47':"b",'k48':"m",'k49':"w",'k50':"v",'k51':"z",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"},
	
	'us':
{'k0':"~",'k1':"!",'k2':"@",'k3':"#",'k4':"$",'k5':"%",'k6':"^",'k7':"&",'k8':"*",'k9':"(",'k10':")",'k11':"_",'k12':"+",'k13':"⌫",
	'k14':"⇥",'k15':""",'k16':"<",'k17':">",'k18':"P",'k19':"Y",'k20':"F",'k21':"G",'k22':"C",'k23':"R",'k24':"L",'k25':"?",'k26':"+",'k27':"|",
	'k28':"⇪",'k29':"A",'k30':"O",'k31':"E",'k32':"U",'k33':"I",'k34':"D",'k35':"H",'k36':"T",'k37':"N",'k38':"S",'k39':"_",'k40':"↵",
	'k41':"⇧",'k42':":",'k43':"Q",'k44':"J",'k45':"K",'k46':"X",'k47':"B",'k48':"M",'k49':"W",'k50':"V",'k51':"Z",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"},
	
	'lo':
{'k0':"`",'k1':"¡",'k2':"™",'k3':"£",'k4':"¢",'k5':"§",'k6':"ˆ",'k7':"¶",'k8':"•",'k9':"ª",'k10':"º",'k11':"–",'k12':"≠",'k13':"⌫",
	'k14':"⇥",'k15':"œ",'k16':"˙",'k17':"´",'k18':"®",'k19':"þ",'k20':"¥",'k21':"¨",'k22':"ʼ",'k23':"ø",'k24':",",'k25':"“",'k26':"‘",'k27':"«",
	'k28':"⇪",'k29':"¯",'k30':"ß",'k31':"ð",'k32':"ƒ",'k33':"©",'k34':"ˍ",'k35':"˝",'k36':"˚",'k37':"-",'k38':"…",'k39':"æ",'k40':"↵",
	'k41':"⇧",'k42':"ˀ",'k43':".",'k44':"¸",'k45':"ˇ",'k46':"˘",'k47':"˜",'k48':"˛",'k49':"≤",'k50':"≥",'k51':"÷",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"},
	
	'uo':
{'k0':"◌̀",'k1':"⁄",'k2':"€",'k3':"‹",'k4':"›",'k5':"†",'k6':"◌̂",'k7':"‡",'k8':"°",'k9':"·",'k10':"‚",'k11':"—",'k12':"±",'k13':"⌫",
	'k14':"⇥",'k15':"Œ",'k16':"◌̇",'k17':"◌́",'k18':"‰",'k19':"Þ",'k20':" ̏",'k21':"◌̈",'k22':"◌̛",'k23':"Ø",'k24':"◌̦",'k25':"”",'k26':"’",'k27':"»",
	'k28':"⇪",'k29':"◌̄",'k30':" ̑",'k31':"Ð",'k32':" ̰",'k33':"‸",'k34':"◌̱",'k35':"◌̋",'k36':"◌̊",'k37':"◌̵",'k38':"№",'k39':"Æ",'k40':"↵",
	'k41':"⇧",'k42':"◌̉",'k43':"◌̣",'k44':"◌̧",'k45':"◌̌",'k46':"◌̆",'k47':"◌̃",'k48':"◌̨",'k49':"„",'k50':"ʔ",'k51':"¿",'k52':"⇧",
	'k53':"ctrl",'k54':"opt",'k55':"⌘",'k56':" ",'k57':"⌘",'k58':"opt",'k59':"ctrl"}}

var keyLayouts = {
	'espo-dv':{'def':dvorak,'name':'Esperanto Dvorak',
	'ls':{'k41':["⇧",0],'k52':["⇧",0],'k54':["opt",0],'k58':["opt",0],'k29':['a',1],'k31':['e',1],'k44':['j',1],'k21':['g',1],'k35':['h',1],'k38':['s',1],'k22':['c',1]},
	'us':{'k41':["⇧",2],'k52':["⇧",2],'k54':["opt",0],'k58':["opt",0],'k29':['A',1],'k31':['E',1],'k44':['J',1],'k21':['G',1],'k35':['H',1],'k38':['S',1],'k22':['C',1]},
	'lo':{'k41':["⇧",0],'k52':["⇧",0],'k54':["opt",2],'k58':["opt",2]},
	'uo':{'k41':["⇧",2],'k52':["⇧",2],'k54':["opt",2],'k58':["opt",2]},	
	'desc':'<p class="small">tajpu x post c g j h s kaj u por ĉapelitaj literoj</p>\n<p class="small"><span style="color:#FF0000">ŭ</span> aŭtomate post a kaj e, alifoje u</p>'},
	
	'espo-qx':{'def':qwerty,'name':'Esperanto QWERTY X',
	'ls':{'k41':["⇧",0],'k52':["⇧",0],'k54':["opt",0],'k58':["opt",0],'k29':['a',1],'k17':['e',1],'k21':['u',1],'k35':['j',1],'k33':['g',1],'k34':['h',1],'k30':['s',1],'k44':['c',1]},
	'us':{'k41':["⇧",2],'k52':["⇧",2],'k54':["opt",0],'k58':["opt",0],'k29':['A',1],'k17':['E',1],'k21':['U',1],'k35':['J',1],'k33':['G',1],'k34':['H',1],'k30':['S',1],'k44':['C',1]},
	'lo':{'k41':["⇧",0],'k52':["⇧",0],'k54':["opt",2],'k58':["opt",2]},
	'uo':{'k41':["⇧",2],'k52':["⇧",2],'k54':["opt",2],'k58':["opt",2]},
	'lsk17':{'k21':['ŭ',0]},'lsk21':{'k43':['ŭ',0]},'lsk29':{'k21':['ŭ',0]},'lsk35':{'k43':['ĵ',0]},'lsk33':{'k43':['ĝ',0]},'lsk34':{'k43':['ĥ',0]},'lsk30':{'k43':['ŝ',0]},'lsk44':{'k43':['ĉ',0]},'usk17':{'k21':['Ŭ',0]},'usk21':{'k43':['Ŭ',0]},'usk29':{'k21':['Ŭ',0]},'usk35':{'k43':['Ĵ',0]},'usk33':{'k43':['Ĝ',0]},'usk34':{'k43':['Ĥ',0]},'usk30':{'k43':['Ŝ',0]},'usk44':{'k43':['Ĉ',0]},
	'desc':'<p class="small">tajpu x post c g j h s kaj u por ĉapelitaj literoj</p>\n<p class="small"><span style="color:#FF0000">ŭ</span> aŭtomate post a kaj e, alifoje u</p>'},
	
	'univ-dv':{'def':dvorak,'name':'Universal Dvorak',
	'ls':{'k41':["⇧",0],'k52':["⇧",0],'k54':["opt",0],'k58':["opt",0],'k0':["‒",0],'k15':["ʼ",0],'k39':["◌̂",0],'k25':["◌́",0],'k26':["◌̈",0],'k27':["◌̆",0]},
	'us':{'k41':["⇧",2],'k52':["⇧",2],'k54':["opt",0],'k58':["opt",0],'k0':["|",0],'k16':["—",0],'k17':["–",0],'k39':["-",0],'k26':["«",0],'k27':["»",0]},
	'lo':{'k0':["\\",0],'k1':["¡",0],'k2':["¿",0],'k3':["#",0],'k4':["$",0],'k5':["◌͘",0],'k6':["◌̮",0],'k7':["◌̤",0],'k8':["◌̰",0],'k9':["◌̥",0],'k10':["◌̬",0],'k11':["◌̱",0],'k12':["◌̯",0],'k15':["'",0],'k16':["ʻ",0],'k17':["·",0],'k18':["=",0],'k19':["+",0],'k20':["◌̭",0],'k21':["◌̨",0],'k22':["◌̧",0],'k23':["◌̊",0],'k24':["◌̩",0],'k25':["◌̋",0],'k26':["‹",0],'k27':["›",0],'k29':["af",1],'k30':["am",1],'k31':["cy",1],'k32':["",0],'k33':["◌",0],'k34':["◌̉",0],'k35':["◌̌",0],'k36':["◌̛",0],'k37':["◌̃",0],'k38':["◌̀",0],'k39':["‐",0],'k42':["ː",0],'k43':["◌̎",0],'k44':["◌̍",0],'k45':["◌̏",0],'k46':["◌̑",0],'k47':[";",0],'k48':["◌̄",0],'k49':["◌̦",0],'k50':["◌̣",0],'k51':["◌̇",0],'k41':["⇧",0],'k52':["⇧",0],'k54':["opt",2],'k58':["opt",2]},
	'uo':{'k41':["⇧",2],'k52':["⇧",2],'k54':["opt",2],'k58':["opt",2],'k0':["ǀ",0],'k1':["ǃ",0],'k2':["ǂ",0],'k3':["ǁ",0],'k4':["ʘ",0],'k5':["ʄ",0],'k6':["ʛ",0],'k7':["ɥ",0],'k8':["ʜ",0],'k9':["ɕ",0],'k10':["ʑ",0],'k11':["ɺ",0],'k12':["ɧ",0],'k15':["ˈ",0],'k16':["ˌ",0],'k17':["ʁ",0],'k18':["ʏ",0],'k19':["ʎ",0],'k20':["ʏ",0],'k21':["ɸ",0],'k22':["ɢ",0],'k23':["ʕ",0],'k24':["ɾ",0],'k25':["ɜ",0],'k26':["ɞ",0],'k27':["ɴ",0],'k29':["ɐ",0],'k30':["ɶ",0],'k31':["ɘ",0],'k32':["ɤ",0],'k33':["ɪ",0],'k34':["ɹ",0],'k35':["ɦ",0],'k36':["ɭ",0],'k37':["ɳ",0],'k38':["ʝ",0],'k39':["‧",0],'k42':["ɻ",0],'k43':["ʔ",0],'k44':["ɟ",0],'k45':["ʟ",0],'k46':["ɡ",0],'k47':["ʙ",0],'k48':["ɰ",0],'k49':["ʍ",0],'k50':["",0],'k51':["ɮ",0]},
	'desc':'<p class="small">kombinaj kromsignoj indikitaj per ◌</p>\n<p class="small"><span style="color:#FF0000">ŭ</span> aŭtomate post a kaj e, alifoje u</p>'}
}
	
	
var layout, keyStates, defKeyStates;
var layoutState = "ls";
var hclasses = ['', ' ht', ' bg'];

function cl(e) {
	//if (!e) {alert("no e")}
	keyClick = e.target.id;
	layoutState = layoutState.slice(0,2);
	if (keyLayouts[layout][layoutState][keyClick]) {updateLayout(keyClick);}
	else if (keyLayouts[layout][keyClick]) {updateLayout(keyClick);}
	else {x=document.getElementById(keyClick).innerHTML;x=x.replace("◌","");document.getElementById("test").innerHTML = document.getElementById("test").innerHTML+x;layoutState = 'ls';}
}

function updateLayout(keyClick) {
	keyState = keyStates[keyClick];
	if (keyClick == 'k41'||keyClick == 'k52'){
		if (layoutState.indexOf('u')>-1) {layoutState = layoutState.replace('u','l');} else {layoutState = layoutState.replace('l','u');}
	}
	else if (keyClick == 'k54'||keyClick == 'k58'){
		if (layoutState.indexOf('o')>-1) {layoutState = layoutState.replace('o','s');} else {layoutState = layoutState.replace('s','o');}
	}
	else if (keyClick == 'k56') {layoutState = 'ls';}
	else {layoutState = 'ls'+keyClick;}
	//how to deal with dead key updates, ls plus keyclick doesnt work.

	//document.getElementById("test").innerHTML = layoutState;
	
	defLayout = keyLayouts[layout]['def'];
	for (kt in defLayout[layoutState.slice(0,2)]) {
		ht = 0
		if (keyLayouts[layout][layoutState][kt]) {
			key = keyLayouts[layout][layoutState][kt][0];
			ht = keyLayouts[layout][layoutState][kt][1];
		}
		else {key = defLayout[layoutState.slice(0,2)][kt];ht=0;}
		document.getElementById(kt).innerHTML = key;
		kyClass = document.getElementById(kt).className;
		if (ht) {document.getElementById(kt).className = kyClass + hclasses[ht]}
		else {document.getElementById(kt).className = defKeyStates[kt];}
	}
}

function loadDesc(lyt) {
	layout = lyt;
	keyStates = defKeyStates;
	updateLayout('k56');
	document.getElementById("kybd").innerHTML= keyLayouts[layout]['desc'];
	
}

function buildMenu() {
	selectHTML = document.getElementById('kybdSelect').innerHTML
	for (menuItem in keyLayouts) {
		selectHTML = selectHTML + '<option value="' + menuItem + '">' +  keyLayouts[menuItem]['name']+ '</option>'+'\n'
	}
	defKeyStates = {};
	for (i=0;i<60;i++) {
		t = "k" + String(i);
		defKeyStates[t] = document.getElementById(t).className;
		//document.getElementById("test").innerHTML = t;
	}
	menu = document.getElementById('kybdSelect');
	menu.innerHTML = selectHTML;
	menu.options[1].selected = true;
	loadDesc('espo-qx');
}

	//if (keyClick == 'k52'||keyClick == 'k41') {keyClick = 'k41'; updateLayout(keyClick);}
	//else if (keyClick == 'k58'||keyClick == 'k54') {keyClick = 'k54'; updateLayout(keyClick);}
	//var shiftKeys = {'k41':['k41','k52'],'k54':['k54','k58']};