// v03 - 2010.07.26
/* Show via: onclick="showCharBox();" */

var lastTextElementFocus = null;
var currentTextElementFocus = null;
var keyControlIsDown = false;
var keyAltIsDown = false;
var keyShiftIsDown = false;

/////////////////////////////////////////////////////////////////////////////////////////
// SPECIAL KEYS (CTL, ALT) ON/OFF - must be hit in event chain before any resulting procs
function specialKeysDown(e) {
    var evt = getBrowserEventObject(e);
    if (evt.keyCode >= 16 && evt.keyCode <= 18) {
        keyShiftIsDown   = (evt.keyCode == 16);
        keyControlIsDown = (evt.keyCode == 17);
        keyAltIsDown     = (evt.keyCode == 18);
    //} else {
    //    alert( (keyShiftIsDown ? 'Shift' : '') + (keyAltIsDown ? 'Alt' : '') + (keyControlIsDown ? 'Ctrl' : '') + '-' + evt.keyCode);
    }
}
attachEventHandlerFunction('keydown', document, specialKeysDown );
function specialKeysUp(e) {
    keyControlIsDown = false;
    keyAltIsDown = false;
    keyShiftIsDown = false;
}
attachEventHandlerFunction('keyup', document, specialKeysUp );
///////////////////////////////////////////////////////////////////////
// INITIAL FOCUS
attachEventHandlerFunction('load', window, pageSetFocus );
function pageSetFocus(e) {
    var cursorFocus = document.getElementById('cursor_focus');
    if(cursorFocus != null) {
        for (i=0; i<cursorFocus.childNodes.length; i++) {
            var node = cursorFocus.childNodes[i];
            if (node.nodeType == 1 && node.style.display != 'none') {
                node.focus();
                if ( (node.nodeName.toLowerCase() == 'input' && node.type.toLowerCase() == 'text') ||
                     (node.nodeName.toLowerCase() == 'textarea')
                ) {
                    lastTextElementFocus = node;
                    currentTextElementFocus = node;
                }
                break;
            }
        }
    }
}
function ajaxSetFocus(elmtID) {
    var el = document.getElementById(elmtID);
    if (el) el.focus();
}
attachEventHandlerFunction('keydown', document, keydownSetFocus );
function keydownSetFocus(e) {
    var evt = getBrowserEventObject(e);
    if (!keyShiftIsDown && !keyAltIsDown && keyControlIsDown ) {
        if (evt.keyCode == 70) { //F
            preventDefaultEvent(e);
            pageSetFocus();
        }
    }
}
///////////////////////////////////////////////////////////////////////
// TRACK FOCUS
attachEventHandlerFunction('load', window, pageInitFocusTextElement );
function pageInitFocusTextElement(e, specificElementId) {
    var allElements;
    if (typeof specificElementId == 'undefined') {
        if (!document.all) {
            document.all = document.getElementsByTagName("*");}
        allElements = document.all;
    } else {
        allElements = document.getElementById(specificElementId).getElementsByTagName("*");
    }
    if (allElements && allElements.length > 0) {
        for (i=0; i<allElements.length; i++) {
            if ( (allElements[i].nodeName.toLowerCase() == 'input' && allElements[i].type.toLowerCase() == 'text') ||
                 (allElements[i].nodeName.toLowerCase() == 'textarea')
            ) {
                attachEventHandlerFunction('focus',allElements[i], registerTextElementFocus );
                attachEventHandlerFunction('blur',allElements[i], unregisterTextElementFocus );
              }
        }
    }
}
function registerTextElementFocus(e){
    e = getBrowserEventObject(e);
    var src =  e.srcElement || e.target;
    if(src != null) {
        lastTextElementFocus = src;
        currentTextElementFocus = src;
    }
}
function unregisterTextElementFocus(e){
    e = getBrowserEventObject(e);
    var src =  e.srcElement || e.target;
    if(src != null && src == currentTextElementFocus) {
        currentTextElementFocus = null;
    }
}
/////////////////////////////////////////////////////////////////////////////////////////
function showCharBox() {
    _specialChars = keyboardSpecialCharacters;
    if (!browserIsIE()) document.captureEvents(Event.MOUSEMOVE) //set up for mouse capture

    lyr = document.createElement('div');
	lyr.style.backgroundColor = 'black';
	//lyr.style.border = '1px solid black';
    lyr.style.cursor = 'pointer';
    lyr.style.zIndex = '999'; //topmost level
    perRow = parseInt(Math.sqrt(_specialChars.length))+1;
	numRows = parseInt(_specialChars.length/perRow)+1;
	lyr.style.height = (16+21*numRows)+'px';
    titleBar = document.createElement('div');
        titleBar.id = '_charbox_titlebar';
        titleBar.style.cursor = 'default';
        titleBar.style.width = (perRow*21-1)+'px';
        titleBar.style.height = '14px';
        titleBar.style.border = '1px solid black';
        titleBar.style.backgroundColor = '#C0FFFF';
        titleBar.style.fontSize = '12px';
        titleBar.style.textAlign = 'right';
        titleBar._dragging = false;
        imgX = document.createElement('img');
            imgX.src = 'http://www.wordbuddy.com/images/closebox10.gif';
            imgX.width = '10';
            imgX.height = '10';
            imgX.style.position = 'absolute';
            imgX.style.top = '3px';
            imgX.style.right = '3px';
            imgX.onclick = function() {this.parentNode.parentNode.removeChild(this.parentNode);};
            lyr.appendChild(imgX);
		titleBar.onmousedown = function(e) {
                this._dragging = true;
                this._mouseStartX = browserIsIE() ? window.event.clientX : e.pageX ;
                this._mouseStartY = browserIsIE() ? window.event.clientY : e.pageY ;
                this._layerStartX = this.parentNode.x;
                this._layerStartY = this.parentNode.y;
            };
        attachEventHandlerFunction('mousemove', document, function(e) {
                elementTitleBar = document.getElementById('_charbox_titlebar');
                if (elementTitleBar && elementTitleBar._dragging) {
                    elementTitleBar.parentNode.x = elementTitleBar._layerStartX + ( (browserIsIE() ? window.event.clientX : e.pageX) - elementTitleBar._mouseStartX ) ;
                    elementTitleBar.parentNode.y = elementTitleBar._layerStartY + ( (browserIsIE() ? window.event.clientY : e.pageY) - elementTitleBar._mouseStartY ) ;
                    if (elementTitleBar.parentNode.x<0) elementTitleBar.parentNode.x = 0;
                    if (elementTitleBar.parentNode.y<0) elementTitleBar.parentNode.y = 0;
                    elementTitleBar.parentNode.style.left = elementTitleBar.parentNode.x+'px';
                    elementTitleBar.parentNode.style.top = elementTitleBar.parentNode.y+'px';
                }
            });
        attachEventHandlerFunction('mouseup', document, function(e) {
                elementTitleBar = document.getElementById('_charbox_titlebar');
                if (elementTitleBar) {
                    document.getElementById('_charbox_titlebar')._dragging = false;
                    }
            });
        lyr.appendChild(titleBar);
    for (i=0; i<_specialChars.length; i++) {
        row = parseInt(i/perRow);
        col = i % perRow;

        ch = document.createElement('div');
        ch.style.position = 'absolute';
        ch.style.left = (21*col)+'px';
        ch.style.top = (15+21*row)+'px';
        ch.style.border = '1px solid black';
        ch.style.width = '16px';
        ch.style.height = '16px';
        ch.style.textAlign = 'center';
        ch.style.verticalAlign = 'middle';
        ch.style.padding = '2px';
        ch.style.backgroundColor = 'white';
		ch.style.fontSize = '1.2em';
        ch.className = 'ipa';
		/*ch.style.fontFamily = 'arial';*/
        ch.onmouseover = function(e) {this.style.backgroundColor = "green";};
        ch.onmouseout = function(e) {this.style.backgroundColor = "white";};
        ch.onclick = function(e) {
				if (lastTextElementFocus) {
				    lastTextElementFocus.value = lastTextElementFocus.value + this.firstChild.data;
					/*
					if (lastTextElementFocus.nodeName.toLowerCase() == 'textarea') {
                        if (browserIsIE()) {
                            lastTextElementFocus.innerHTML = lastTextElementFocus.innerText + this.firstChild.data;  //innerHTML - Bad on IE6;   innerText bad in FF
                        } else {
                            lastTextElementFocus.value = lastTextElementFocus.value + this.firstChild.data;  // this works on FF
                        }
					} else {
					    lastTextElementFocus.value = lastTextElementFocus.value + this.firstChild.data;
					}*/
				}
			};
        nTxt = document.createTextNode(_specialChars.substr(i,1));
        ch.appendChild(nTxt);
        lyr.appendChild(ch);
    }
    lyr.style.position = 'absolute';
	/*
    if (lastTextElementFocus) {
        if (navigator.userAgent.indexOf('MSIE') == -1) {
            lyr.x = (lastTextElementFocus.offsetLeft + 50);
            lyr.y = (lastTextElementFocus.offsetTop + lastTextElementFocus.offsetHeight + 30);
            lyr.style.left = lyr.x + 'px';
            lyr.style.top  = lyr.y + 'px';
            lastTextElementFocus.offsetParent.appendChild(lyr);
        } else {
            lyr.x = (lastTextElementFocus.offsetLeft + lastTextElementFocus.clientLeft + 50);
            lyr.y = (lastTextElementFocus.offsetTop + lastTextElementFocus.offsetHeight + lastTextElementFocus.clientTop + lastTextElementFocus.clientHeight + 30);
            lyr.style.left = lyr.x + 'px';
            lyr.style.top = lyr.y + 'px';
            lastTextElementFocus.offsetParent.appendChild(lyr);
        }
    } else {
    */
        lyr.x = 300;
        lyr.y = 50;
        lyr.style.left = lyr.x+'px';
        lyr.style.top  = lyr.y+'px';
        document.body.appendChild(lyr);
    //}
}