var keys =
[
	['`','1','2','3','4','5','6','7','8','9','-','=','Backspace'],
	['Q','W','E','R','T','Y','U','I','O','P','[',']'],
	['A','S','D','F','G','H','J','K','L',';','"','Enter'],
	['Shift','Z','X','C','V','B','N','M',',','.','/','Shift'],
	['Ctrl','Alt','Space','Alt','Ctrl']
];

function Keyboard()
{
	var display = null;
	var keyPress = function(e) {
		var key = e.target.textContent;
		switch(key) {
			case 'Space':
			 key = ' ';
			 break;
			 case 'Backspace':
			 display.textContent = display.textContent.slice(0,-1);
			  key = '';
			 break;
			 case 'Enter':
			 key = '\n';
			 break;
		}
		display.textContent += key;
		console.log(e);
	};
	this.init = function()
	{
		var row, key;
		main = document.getElementById('klaw');
		display = document.createElement('div');
		display.setAttribute('class', 'text');
		main.appendChild(display);
		for(var r = 0; r < 5; ++r)
		{
			row = document.createElement('div');
			//row.setAttribute('class','klaw')
			for (var i = 0;i < keys[r].length; ++i)
			{
				key = document.createElement('div');
				key.textContent = keys[r][i];
				if(keys[r][i].length > 1)
				{
						key.setAttribute('class',keys[r][i] === 'Space' ? 'space' : 'wide');
				}
				key.addEventListener('click', keyPress);
				row.appendChild(key);
			}
			main.appendChild(row);
		}
	};
}

var ob = new Keyboard();
console.log("Js code started");
window.addEventListener('load', function(){
	ob.init();
});