/* Show via: onclick="showCharBox();" */
 
var lastTextElementFocus = null;
var currentTextElementFocus = null;
var keyControlIsDown = false;
var keyAltIsDown = false;
var keyShiftIsDown = false;

///////////////////////////////////////////////////////////////////////
// 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;
            }
        }
    }
}
///////////////////////////////////////////////////////////////////////
// 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;
    }
}
/////////////////////////////////////////////////////////////////////////////////////////
// SPECIAL KEYS (CTL, ALT) ON/OFF
function specialKeysDown(e) {
    var evt = getBrowserEventObject(e); 
    switch (evt.keyCode) {
        case 16: keyShiftIsDown   = true; break;
        case 17: keyControlIsDown = true; break;
        case 18: keyAltIsDown     = true; break;
    }
}
attachEventHandlerFunction('keydown', document, specialKeysDown );
function specialKeysUp(e) {
    var evt = getBrowserEventObject(e); 
    switch (evt.keyCode) {
        case 16: keyShiftIsDown   = false; break;
        case 17: keyControlIsDown = false; break;
        case 18: keyAltIsDown     = false; break;
    }
}
attachEventHandlerFunction('keyup', document, specialKeysUp );
/////////////////////////////////////////////////////////////////////////////////////////
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);
    //}
}