// JavaScript Document

<!-- Copyright © 2009 ExIdeas, Inc.*
// version 1.80
/****************************************************************************************************************/	
//		Variables specific to the display using HTML
/****************************************************************************************************************/	
	var WinHeight, WinWidth;		// Window height and width
	var ul 				="_"
	var	cursor 			= ul;
	var tx 				= cursor;		// text shown on the display div

	
	var initialMessage 	= "Tap or drag on buttons to enter letters and symbols!";
	var init_message_flag = true;
	var debugDivStyleOn = false;
	
	var ME_Display_Array = [];			// this is the array that holds the screen
	var ME_Display_Array_Index = 0;		// next element to be filled
	
	
/****************************************************************************************************************/	
	var displayObject = new Array();	

function DisplayElem(divName, left, top,  width, height, leftAdjust){		// An object that has a div and can have things in them
	this.divName 			= 	divName;					
	this.top				=	top;
	this.left				=	left;
	this.width				=	width;
	this.height				=	height;
	this.leftAdjust			= leftAdjust;
	document.getElementById(divName).style.width = width
	document.getElementById(divName).style.height = height
	document.getElementById(divName).style.top = top
	return this;
}
/****************************************************************************************************************/	
//	 calculates the new window width and adjust the left of all divs to place the board in the center.
/****************************************************************************************************************/
function CenterBoard() {	
	hide_all();
	GetWindowDimensions()			
 
	var lf = Math.floor((WinWidth - displayObject["infoLeft"].width)/2) + displayObject["infoLeft"].leftAdjust;
	var tooLeftFlag = (lf <= 0)
				// calculates WidnWidth
	for (var elem in displayObject){
		displayObject[elem].left =  Math.floor((WinWidth - displayObject[elem].width)/2) + displayObject[elem].leftAdjust;
		document.getElementById(displayObject[elem].divName).style.left = displayObject[elem].left;
	}
	
	show_all();
}
/**************************************************************************************************************************/
function hide_all(){
		for (var elem in displayObject)
			hideDiv(displayObject[elem].divName);
}
/**************************************************************************************************************************/
function show_all(){
	for (var elem in displayObject)
			showDiv(displayObject[elem].divName);
}
/**********************************************************function hideDiv(divName) **************************************************/
function hideDiv(divName){
	document.getElementById(divName).style.visibility="hidden";
}
/**********************************************************function hideDiv(divName) **************************************************/
function showDiv(divName){
	document.getElementById(divName).style.visibility="visible";
}
/****************************************************************************************************************/
function ToggleLanguage(T){
	KeyboardName = {"English": "English", "Katakana": "&#12459;&#12479;&#12459;&#12490;"};
	if (T){
		var temp = ME_Language_Name;
		ME_Language_Name = ME_other_language;
		ME_other_language = temp;
	}
	change_keyboard_language(ME_Language_Name);
	document.getElementById("languageChangeInsideDiv").innerHTML = KeyboardName[ME_other_language];
}
/****************************************************************************************************************/
function GetWindowDimensions(){									//	Get the width and height of the displaying window 
	if (document.all){
    	WinHeight = document.body.offsetHeight; 
		WinWidth = document.body.offsetWidth;
	}
	else{ 
			WinHeight = window.innerHeight;
			WinWidth = window.innerWidth;
	}
}	//GetWindowDimensions()
/****************************************************************************************************************/
function initPictures(){
										 //DisplayElem(divName, left, top,  width, height, leftAdjust
	displayObject["base"] 			= new DisplayElem ('baseDiv', 0, 0, 408, 722,0);			// create and object with width and height attach to div name	
	displayObject["display"] 		= new DisplayElem ('displayDiv', 0, 165, 300, 110, -4);		// create and object with width and height attach to div name	
	displayObject["keyboard"] 		= new DisplayElem ('keyboardDiv', 0, 288, 320, 320, -3);	// create and object with width and height attach to div name	
	displayObject["langChange"] 	= new DisplayElem ('langChangeDiv', 0, 288, 80, 80, 117);	// create and object with width and height attach to div name	
	displayObject["infoLeft"] 		= new DisplayElem ('infoLeftDiv', 0, 10, 160, 580, -290);	// create and object with width and height attach to div name	
	displayObject["infoRight"] 		= new DisplayElem ('infoRightDiv', 0, 10, 160, 580, 265);	// create and object with width and height attach to div name	
	disableImageDrag();
}
/**************************************************************************************************************/
function disableImageDrag(){
	var isIEFlag = isIE();
	for (var elem in displayObject)
		if (isIEFlag)
			document.getElementById(displayObject[elem].divName).attachEvent('onmousedown', preventDef);
		else
			document.getElementById(displayObject[elem].divName).addEventListener("mousedown", preventDef, false);
}
/**************************************************************************************************************/
 function isIE(){
      return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}
/**************************************************************************************************************/
function preventDef(event) {
  event.preventDefault();
}
/**************************************************************************************************************/
// HTML function wrappers. These call ME functions  ME_MouseDown(P), ME_MouseUp(P), and ME_MouseMove(P)
/*********************************************************************************************************************/
function HTML_MouseDown(event) {						// HTML mouse down service 
	var P = Get_Keyboard_Div_XY(event);
	 ME_MouseDown(P);									// Call MessagEase's mouse down routine
}
/*********************************************************************************************************************/
function Get_Keyboard_Div_XY(event){					// returns the xy coordinates rel to the Keyboard
	var p = new Object();
	if (isIE()){
		p.x = event.offsetX;
		p.y = event.offsetY;
	}
	else{
		p.x = event.layerX;
		p.y = event.layerY;
	}
	return p;
}
/*********************************************************************************************************************/
function HTML_MouseUp(event){
 	var P = Get_Body_XY_Displaced(event,displayObject['keyboard'].left, displayObject['keyboard'].top);
	ME_MouseUp(P)
}
/*********************************************************************************************************************/
function HTML_MouseMove(event){
 	var P = Get_Body_XY_Displaced(event,displayObject['keyboard'].left, displayObject['keyboard'].top);
	ME_MouseMove(P)
}
/*********************************************************************************************************************/
function Get_Body_XY_Displaced(e, offset_x, offset_y) {
	var p = new Object();
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		p.x = e.pageX;
		p.y = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		p.x = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		p.y = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	p.x -= offset_x; 
	p.y -=offset_y;
	return p;
}
/*********************************************************************************************************************/
function Initialize(){
	initPictures();				// initialize the display divs
	ME_initilize();				// initialize the keyboard characters
	CenterBoard();
	ToggleLanguage(false);		// causes the language name to be displayed
}


/****************************************************************************************************************************/
function removeThenAddChars(NoOfCharsRemoved, charAdded){			// this function is used by combine()  or do_autocombine() to combine one or two chars into a new one
	ME_Display_Array_Index -= NoOfCharsRemoved;
	appendtext(charAdded);
}
/*********************************************************************************************************************/
function showKeyboardImage(imageURL){						// show the keyboard image on the approrpiate area.
	//document.getElementById("keyboardDiv").style.backgroundImage = 'url(' + imageURL +')' ; // update image
	blendimage("keyboardDiv", "keyboardImg", imageURL, 400);
}
/****************************************************************************************************************************/
function wipe() {				// cleans the whole screen when a cirlce on the edit button is done
	ME_Display_Array_Index = 0;
	init_message_flag = false;
	render_display();
}
/************************************************************************************************************************/
function getCharBehindCursor(n){					// get a single char behind the cursor 0 means immediately behind, 1 means the one before it.
	if (ME_Display_Array_Index-n-1 >=0){
		var c = "&#" +  ME_Display_Array[ME_Display_Array_Index-n-1];
		return(getCharUnicode(c));
	}
	else
		return ("");
}
/*****************************************************************************************************************/
function putInDiv(DivName, String){
	document.getElementById(DivName).innerHTML = String ; 
}
/************************************************************************************************************************/
function getCharUnicode(x){				// trick html and get the unicode char
	var cr = "\n"
	if (x == "&amp;") return("&");
	else if (x == "&lt;") return("<");
	else if (x == "&gt;") return(">");
	else if (x==" ") return(' ');
	else if (x=="\n") return('\n');
	document.getElementById("dummydiv").innerHTML =x 				// put it somewhere to create the char
	return  (document.getElementById("dummydiv").innerHTML);
}
/************************************************************************************************************************/
function appendtext(y){	
	var x = getCharUnicode(y)
	for (var i=0; i <x.length; i++)
		ME_Display_Array[ME_Display_Array_Index++] = x.charCodeAt(i)
		
	render_display();
}
/***********************************************************************************************************************/
function render_display(){					// uses the array E_Display_Array to show what's on the screen, taking care of carriage returns
	var buffer_str = "";
	var cr = "\n";
	
	for (var i=0; i <ME_Display_Array_Index; i++)
		if (ME_Display_Array[i] == cr.charCodeAt(0))
			buffer_str += '<br>';
		else
			buffer_str += "&#" + ME_Display_Array[i]; 
	
	buffer_str += cursor; 
	document.getElementById("displayDiv").innerHTML=buffer_str; 
}
/*************************************************************************************************************************/
function bspace() {
		if (ME_Display_Array_Index>0)
			ME_Display_Array_Index--;
		render_display()
}
/*************************************************************************************************************************/
function display_initial_message(initialMessage){
	document.getElementById("displayDiv").innerHTML=initialMessage;
}
/*********************************************************************************************************************/
function openNewWindow(w,h,name) { 
  popupWin = window.open('', name, 'width='+ w+', height='+h+', left=100, top=100, menubar=no, toolbar=no,location=no ,directories=no ,status=no ,scrollbars=no ,resizable=no, marginwidth=0 marginheight=0')
}
/*********************************************************************************************************************/