function RectangleScreen(TopX, TopY, Width, Height) { 
	//Esta clase va a definir la region donde aparecerá
	//el teclado y por donde se puede mover.
	this.topx = TopX;
	this.topy = TopY;
	this.width = Width;
	this.height = Height;
}

function TecladoSeguro() {
	this.salida = null;
	this.tecladodiv = null;
	this.tecladoimg = null;
	this.mayus = false;
	this.caps = false;
	this.acento = false;
	this.dieresis = false;
	this.toggle = Toggle;
	this.press = Press;
	this.pressspecial = PressSpecial;
	this.isvisible = IsVisible;
	this.setsalida = SetSalida;
	this.setmayus = SetMayus;
	this.setcaps = SetCaps;
	//this.maxleftrandom = 201;
	//this.maxtoprandom = 201;
	this.color = 'white';
	this.hlcolor = '#e2e8ef';
	this.close = null;
	this.dragStartTeclado = dragStartTeclado;
	this.dragGoTeclado = dragGoTeclado;
	this.dragStopTeclado = dragStopTeclado;
	//this.regionteclado = new RectangleScreen(0, 0, screen.width/2, screen.height/2);
	this.regionteclado = new RectangleScreen(200, 425, screen.width/3, 35);
	
	this.hittestobj = null;
	this.restoreHitColor = restoreHitColor;
	this.playSound = playSound;
	this.sonido = true;
	
	var dragObjTeclado = new Object();
	dragObjTeclado.zIndex = 0;
	
	var tecladodir = '../libraries/Teclado/';
	var tecladogif = tecladodir+'/Images/teclado.gif';
	var tecladogifmayus = tecladodir+'/Images/teclado_mayus.gif';
	var tecladogifacento = tecladodir+'/Images/teclado_acento.gif';
	var tecladogifcapsacento = tecladodir+'/Images/teclado_caps_acento.gif';
	var tecladogifcaps = tecladodir+'/Images/teclado_caps.gif';
	var tecladogifcapsmayus = tecladodir+'/Images/teclado_caps_mayus.gif';
	
	function IsVisible() {
	return this.tecladodiv.style.display == '';
}

function SetSalida(obj) {
	if ( this.salida != null ) {
		this.salida.style.backgroundColor = this.color; 
		this.salida.readOnly = false;
	}
	if ( obj != null ) {
		if ( this.isvisible() ) {
			obj.style.backgroundColor = this.hlcolor; 
			obj.blur();
			obj.readOnly = true;
		} else {
			obj.style.backgroundColor = this.color; 
			obj.readOnly = false;
		}
	}
	this.salida = obj;
	if ( this.isvisible() ) {
		obj.readOnly = true;
		obj.blur();
	}
}

function PressSpecial(tecla) {
	switch(tecla) {
		case '[mayus]':
			this.mayus = SetMayus(!this.mayus, this.caps, this.tecladoimg);
			break;
		case '[acento]':
			if ( this.mayus ) {
				this.dieresis = SetAcento(!this.dieresis, this.caps, this.tecladoimg);
				this.mayus = false;
			}
			else {
				this.acento = SetAcento(!this.acento, this.caps, this.tecladoimg);
			}
			break;
		case '[caps]':
			this.caps = SetCaps(!this.caps, this.tecladoimg);
			this.mayus = SetMayus(false, this.caps, this.tecladoimg);
			this.acento = SetAcento(false, this.caps, this.tecladoimg);
			this.dieresis = false;
			break;
		case '[clear]':
			this.salida.value = '';
			this.mayus = SetMayus(false, this.caps, this.tecladoimg);
			this.acento = SetAcento(false, this.caps, this.tecladoimg);
			this.dieresis = false;
			break;
		case '[backspace]':
			if ( this.salida.value.length > 0 ) {
				this.salida.value = this.salida.value.substr(0, this.salida.value.length-1);
			}
			this.mayus = SetMayus(false, this.caps, this.tecladoimg);
			break;
	}
}

function SetMayus(estado, caps, tecladoimg) {
	if ( estado ) {
		if ( caps )
			tecladoimg.src = tecladogifcapsmayus;
		else
			tecladoimg.src = tecladogifmayus;
	} else {
		if ( caps )
			tecladoimg.src = tecladogifcaps;
		else
			tecladoimg.src = tecladogif;
	}
	return estado;
}

function SetAcento(estado, caps, tecladoimg) {
	if ( estado ) {
		if ( caps )
			tecladoimg.src = tecladogifcapsacento;
		else
			tecladoimg.src = tecladogifacento;
	} else {
		if ( caps )
			tecladoimg.src = tecladogifcaps;
		else
			tecladoimg.src = tecladogif;
	}
	return estado;
}

function SetCaps(estado, tecladoimg) {
	if ( estado ) {
		tecladoimg.src = tecladogifcaps;
	} else {
		tecladoimg.src = tecladogif;
	}
	return estado;
}

function Toggle() {
	var leftrnd = 0;
	var toprnd = 0;

	if ( ( this.regionteclado.height > 0 ) && ( this.regionteclado.width > 0 ) ) {
		leftrnd = this.regionteclado.topx + Math.floor(Math.random() * this.regionteclado.width );
		toprnd = this.regionteclado.topy + Math.floor(Math.random() * this.regionteclado.height );
		if ( this.tecladodiv != null ) {
			if ( this.tecladodiv.style.display == '' ) {
				this.tecladodiv.style.display = 'none';
				if ( this.salida != null ) {
					//this.salida.style.backgroundColor = this.color; 
					//this.salida.readOnly = false;
				}
				if ( this.close != null ) {
					this.close();
				}
			} else {
				this.tecladodiv.style.display = '';
				this.tecladodiv.style.left = leftrnd;
				this.tecladodiv.style.top = toprnd;
				if ( this.salida != null ) {
					//this.salida.style.backgroundColor = this.hlcolor; 
					//this.salida.readOnly = true;
				}
			}
		}
	} else {
		if ( this.tecladodiv != null ) {
			if ( this.tecladodiv.style.display == '' ) {
				this.tecladodiv.style.display = 'none';
				if ( this.salida != null ) {
					//this.salida.style.backgroundColor = this.color; 
					//this.salida.readOnly = false;
				}
				if ( this.close != null ) {
					this.close();
				}
			} else {
				this.tecladodiv.style.display = '';
				if ( this.salida != null ) {
					//this.salida.style.backgroundColor = this.hlcolor; 
					//this.salida.readOnly = true;
				}
			}
		}
	}
}

function Press(tecla) {
	var valor = '';
	var charcode = '';
	var isnumber = false;
	
	if( typeof(tecla) == 'number' ) {
		isnumber = true;
		valor = '' + tecla;
		charcode = valor.charCodeAt(0);
	} else {
		charcode = tecla.charCodeAt(0);
		valor = tecla;
	}
	
	if ( ( charcode >= 48 ) && ( charcode <= 57 ) ) { //numeros
		if ( !isnumber ) {
			if ( this.mayus ) {
				valor = (valor=='1')?'!':valor;
				valor = (valor=='2')?'"':valor;
				valor = (valor=='3')?'#':valor;
				valor = (valor=='4')?'$':valor;
				valor = (valor=='5')?'%':valor;
				valor = (valor=='6')?'&':valor;
				valor = (valor=='7')?'/':valor;
				valor = (valor=='8')?'(':valor;
				valor = (valor=='9')?')':valor;
				valor = (valor=='0')?'=':valor;
			}
		}
	} else {
		if ( ( ( charcode >= 97 ) && ( charcode <= 122 ) ) || ( charcode == 221 ) || ( charcode == 241 ) ) { //letras
			if ( this.acento ) {
				valor = (valor=='a')?String.fromCharCode(225):valor;
				valor = (valor=='e')?String.fromCharCode(233):valor;
				valor = (valor=='i')?String.fromCharCode(237):valor;
				valor = (valor=='o')?String.fromCharCode(243):valor;
				valor = (valor=='u')?String.fromCharCode(250):valor;
			}
			
			if ( this.dieresis ) {
				valor = (valor=='a')?String.fromCharCode(228):valor;
				valor = (valor=='e')?String.fromCharCode(235):valor;
				valor = (valor=='i')?String.fromCharCode(239):valor;
				valor = (valor=='o')?String.fromCharCode(246):valor;
				valor = (valor=='u')?String.fromCharCode(252):valor;
			}
			
			if ( this.caps ) {
				if ( !this.mayus )
				valor = valor.toUpperCase();
			} else {
				if ( this.mayus )
				valor = valor.toUpperCase();
			}
		} else {
			if ( this.mayus ) {
			valor = (valor==',')?';':valor;
			valor = (valor=='.')?':':valor;
			valor = (valor=='-')?'_':valor;
			valor = (valor=='[')?'{':valor;
			valor = (valor==']')?'}':valor;
			valor = (valor=='|')?'°':valor;
			valor = (valor=='/')?'/':valor;
			valor = (valor=='*')?'*':valor;
			valor = (valor=='-')?'-':valor;
			valor = (valor=='+')?'+':valor;
			valor = (valor==' ')?' ':valor;
			valor = (valor=='<')?'>':valor;
			valor = (valor=='\'')?'?':valor;
			valor = (valor=='¿')?'¡':valor;
			}
		}
	}
	
	if ( this.hittestobj != null ) {
		this.hittestobj.style.backgroundColor = 'lightgreen';
		window.setTimeout('Teclado.restoreHitColor()', 150);
	}
	
	if ( this.sonido ) {
		try {
			this.playSound("chattype");
		} catch(e) {
		}
	}
	
	this.salida.value += valor; 
	this.mayus = SetMayus(false, this.caps, this.tecladoimg);
	this.acento = SetAcento(false, this.caps, this.tecladoimg);
	this.dieresis = false;
}

function restoreHitColor() {
	this.hittestobj.style.backgroundColor = '#005d94';
}

function playSound(soundname) {
	var sound = eval("document." + soundname);
	sound.Play();
}

function dragStartTeclado(event, id) {
	var el;
	var x, y;
	//alert( this.color );
	// If an element id was given, find it. Otherwise use the element being
	// clicked on.
	if (id)
		dragObjTeclado.elNode = document.getElementById(id);
	else {
		if ( document.all != null )
			dragObjTeclado.elNode = window.event.srcElement;
		else
			dragObjTeclado.elNode = event.target;
		// If this is a text node, use its parent element.
		if (dragObjTeclado.elNode.nodeType == 3)
			dragObjTeclado.elNode = dragObjTeclado.elNode.parentNode;
	}
	// Get cursor position with respect to the page.
	if ( document.all != null ) {
		x = window.event.clientX + document.documentElement.scrollLeft
		+ document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop
		+ document.body.scrollTop;
	} else {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}
	// Save starting positions of cursor and element.
	dragObjTeclado.cursorStartX = x;
	dragObjTeclado.cursorStartY = y;
	dragObjTeclado.elStartLeft  = parseInt(dragObjTeclado.elNode.style.left, 10);
	dragObjTeclado.elStartTop   = parseInt(dragObjTeclado.elNode.style.top,  10);
	if (isNaN(dragObjTeclado.elStartLeft)) dragObjTeclado.elStartLeft = 0;
	if (isNaN(dragObjTeclado.elStartTop))  dragObjTeclado.elStartTop  = 0;
	// Update element's z-index.
	dragObjTeclado.elNode.style.zIndex = ++dragObjTeclado.zIndex;
	// Capture mousemove and mouseup events on the page.
	if ( document.all != null ) {
		document.attachEvent("onmousemove", this.dragGoTeclado);
		document.attachEvent("onmouseup",   this.dragStopTeclado);
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	} else {
		document.addEventListener("mousemove", this.dragGoTeclado,   true);
		document.addEventListener("mouseup",   this.dragStopTeclado, true);
		event.preventDefault();
	}
}

function dragGoTeclado(event) {
	var x, y;
	//alert( this.regionteclado );
	// Get cursor position with respect to the page.
	if ( document.all != null ) {
		x = window.event.clientX + document.documentElement.scrollLeft
		+ document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop
		+ document.body.scrollTop;
	} else {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}
	// Move drag element by the same amount the cursor has moved.
	if ( ( (dragObjTeclado.elStartTop  + y - dragObjTeclado.cursorStartY) > 0 ) && 
	( (dragObjTeclado.elStartLeft + x - dragObjTeclado.cursorStartX) > 0 ) ) {
		if ( ( (dragObjTeclado.elStartTop  + y - dragObjTeclado.cursorStartY) < 350 ) && 
		( (dragObjTeclado.elStartLeft + x - dragObjTeclado.cursorStartX) < 450 ) ) {
			dragObjTeclado.elNode.style.left = (dragObjTeclado.elStartLeft + x - dragObjTeclado.cursorStartX) + "px";
			dragObjTeclado.elNode.style.top  = (dragObjTeclado.elStartTop  + y - dragObjTeclado.cursorStartY) + "px";
		}
	}
	if ( document.all != null ) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	} else {
		event.preventDefault();
	}
}

function dragStopTeclado(event) {
	// Clear the drag element global.
	dragObjTeclado.elNode = null;
	// Stop capturing mousemove and mouseup events.
	if ( document.all != null ) {
		document.detachEvent("onmousemove", dragGoTeclado);
		document.detachEvent("onmouseup",   dragStopTeclado);
	} else {
		document.removeEventListener("mousemove", dragGoTeclado,   true);
		document.removeEventListener("mouseup",   dragStopTeclado, true);
	}

}

}