// AutomComplete script

var oBrowser = DetectBrowser();
var oBrowserV = DetectBrowserVersion();

function CityComplete_Create(id, city) {
    
    __CityComplete[id] = { 'city': city,
        'isVisible': false,
        'element': document.getElementById(id),
        'dropdown': null,
        'highlighted': null,
        'group': group
    };

    __CityComplete[id]['element'].setAttribute('citycomplete', 'off');
    __CityComplete[id]['element'].onkeydown = function(e) { return CityComplete_KeyDown(this.getAttribute('id'), e); }
    __CityComplete[id]['element'].onkeyup = function(e) { return CityComplete_KeyUp(this.getAttribute('id'), e); }
    __CityComplete[id]['element'].onkeypress = function(e) { if (!e) e = window.event; if (e.keyCode == 13 || isOpera) return false; }
    __CityComplete[id]['element'].ondblclick = function() { CityComplete_ShowDropdown(this.getAttribute('id')); }
    __CityComplete[id]['element'].onclick = function(e) { if (!e) e = window.event; e.cancelBubble = true; e.returnValue = false; }

    // Hides the dropdowns when document clicked
    var docClick = function() {

        for (id in __CityComplete) {
            CityComplete_HideDropdown(id);
        }
    }

    if (document.addEventListener) {
        document.addEventListener('click', docClick, false);
    }
    else if (document.attachEvent) {
        document.attachEvent('onclick', docClick, false);
    }


    // Max number of items shown at once
    if (arguments[2] != null) {
        __CityComplete[id]['maxitems'] = arguments[2];
        __CityComplete[id]['firstItemShowing'] = 0;
        __CityComplete[id]['lastItemShowing'] = arguments[2] - 1;
    }

    CityComplete_CreateDropdown(id);

    // Prevent select dropdowns showing thru
    if (isIE) {
        __CityComplete[id]['iframe'] = document.createElement('iframe');
        __CityComplete[id]['iframe'].id = id + '_iframe';
        __CityComplete[id]['iframe'].style.position = 'absolute';
        __CityComplete[id]['iframe'].style.top = '0';
        __CityComplete[id]['iframe'].style.left = '0';
        __CityComplete[id]['iframe'].style.width = '0px';
        __CityComplete[id]['iframe'].style.height = '0px';
        __CityComplete[id]['iframe'].style.zIndex = '98';
        __CityComplete[id]['iframe'].style.visibility = 'hidden';

        __CityComplete[id]['element'].parentNode.insertBefore(__CityComplete[id]['iframe'], __CityComplete[id]['element']);
    }
}

/**
* Creates the dropdown layer
* 
* @param string id The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_CreateDropdown(id) {
    //debugger;
    var left = CityComplete_GetLeft(__CityComplete[id]['element']);
    var top = CityComplete_GetTop(__CityComplete[id]['element']) + __CityComplete[id]['element'].offsetHeight;

    var width = __CityComplete[id]['element'].offsetWidth;
    var height = 260;

    if (oBrowserV.indexOf("MSIE 7.0") > -1) {
        left = left - 22;
        top = top + 17;
    }
    else if (oBrowserV.indexOf("MSIE 8.0") > -1) {
        left = 50;
    }
    else if (oBrowserV.indexOf("MSIE 6.0") > -1) {
        left = left - 11;
        top = top - 7;
    }

    __CityComplete[id]['dropdown'] = document.createElement('div');
    __CityComplete[id]['dropdown'].className = 'citycomplete'; // Don't use setAttribute()
    __CityComplete[id]['element'].parentNode.insertBefore(__CityComplete[id]['dropdown'], __CityComplete[id]['element']);
    __CityComplete[id]['dropdown'].style.left = left + 'px';
    __CityComplete[id]['dropdown'].style.top = top + 'px';
    __CityComplete[id]['dropdown'].style.width = width + 'px';
    __CityComplete[id]['dropdown'].style.height = height + 'px';
    __CityComplete[id]['dropdown'].style.zIndex = '99';
    __CityComplete[id]['dropdown'].style.visibility = 'hidden';
}


/**
* Gets left coord of given element
* 
* @param object element The element to get the left coord for
*/
function CityComplete_GetLeft(element) {
    var curNode = element;
    var left = 0;

    do {
        if (curNode.offsetParent != null) {
            left += curNode.offsetLeft;
            curNode = curNode.offsetParent;
        }
        else {
            if (oBrowser == "Microsoft Internet Explorer")
                return left - 10;
            else
                return 614;
        }

    } while (curNode.tagName.toLowerCase() != 'body');
    if (oBrowser == "Microsoft Internet Explorer")
        return left - 75;
    else
        return 614;
}


/**
* Gets top coord of given element
* 
* @param object element The element to get the top coord for
*/
function CityComplete_GetTop(element) {
    var curNode = element;
    var top = 0;
    //alert(oBrowserV + ": " );
    var sBver = oBrowserV.toString();
    do {
        if (curNode.parentNode != null) {
            top += curNode.offsetTop;
            curNode = curNode.parentNode;
        }
        else {
            if (oBrowser == "Microsoft Internet Explorer" && sBver.indexOf("MSIE 7.0") >=0)
                return top + 5;
            else
                return 572;
        }
    } while (curNode.tagName.toLowerCase() != 'body');

    if (oBrowser == "Microsoft Internet Explorer" && sBver.indexOf("MSIE 7.0") >= 0)
        return top + 3;
    else
        return 572;
}


/**
* Shows the dropdown layer
* 
* @param string id The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_ShowDropdown(id) {
    CityComplete_HideAll();

    var value = __CityComplete[id]['element'].value;

    var toDisplay = new Array();
    var newDiv = null;
    var text = null;
    var numItems;

    numItems = __CityComplete[id]['dropdown'].childNodes.length;

    // Remove all child nodes from dropdown
    while (__CityComplete[id]['dropdown'].childNodes.length > 0) {
        __CityComplete[id]['dropdown'].removeChild(__CityComplete[id]['dropdown'].childNodes[0]);
    }

    var oDobject = __CityComplete[id]['city'];

    var oText = document.getElementById(id);
    var sText = oText.value;
    
    
    //BUG 15174
    for (i = 0; i < oDobject.length; ++i) {
        if (oDobject[i].indexOf("<b>") > -1) {
            oDobject[i] = oDobject[i].replace("<b>", "");
        }
        if (oDobject[i].indexOf("</b>") > -1) {
            oDobject[i] = oDobject[i].replace("</b>", "");
        }

        var iLength = sText.length;

        if (oDobject[i].substring(0, iLength).indexOf(value) > -1) {
            var iStart = oDobject[i].indexOf(value);
            var iStop = oDobject[i].indexOf(value) + value.length;
            if (value != "") {
                //
                oDobject[i] = oDobject[i].substring(0, iStart) + "<b>" + value + "</b>" + oDobject[i].substring(iStop, oDobject[i].length)
            }
            toDisplay[toDisplay.length] = oDobject[i];
        }
        
    }
    
    
    /*
    // Go thru city searching for matches
    for (i = 0; i < __CityComplete[id]['city'].length; ++i) {
        if (__CityComplete[id]['city'][i].indexOf("<b>") > -1) {
            __CityComplete[id]['city'][i] = __CityComplete[id]['city'][i].replace("<b>", "");
        }
        if (__CityComplete[id]['city'][i].indexOf("</b>") > -1) {
            __CityComplete[id]['city'][i] = __CityComplete[id]['city'][i].replace("</b>", "");
        }

        if (__CityComplete[id]['city'][i].indexOf(value) > -1) {
            var iStart = __CityComplete[id]['city'][i].indexOf(value);
            var iStop = __CityComplete[id]['city'][i].indexOf(value) + value.length;
            if (value != "") {
                //
                __CityComplete[id]['city'][i] = __CityComplete[id]['city'][i].substring(0, iStart) + "<b>" + value + "</b>" + __CityComplete[id]['city'][i].substring(iStop, __CityComplete[id]['city'][i].length)
            }
            toDisplay[toDisplay.length] = __CityComplete[id]['city'][i];
        }
    }
    */

    // No matches?
    if (toDisplay.length == 0) {
        CityComplete_HideDropdown(id);
        return;
    }

    // Add city to the dropdown layer

    for (i = 0; i < toDisplay.length; ++i) {
        var divItems = document.createElement('div');
        if (oBrowser == "Microsoft Internet Explorer")
            divItems.style.width = " 120px";
        divItems.setAttribute('id', 'divItem_' + i);
        divItems.style.paddingTop = "1px";

        divItems.style.direction = "rtl";

        newDiv = document.createElement('div');
        newDiv.className = 'citycomplete_item'; // Don't use setAttribute()
        newDiv.setAttribute('id', 'citycomplete_item_' + i);
        newDiv.setAttribute('index', i);
        newDiv.style.zIndex = '99';

        newDiv.style.textAlign = "right";
        newDiv.style.direction = "rtl";
        __CityComplete[id]['dropdown'].style.textAlign = "right";

        // Scrollbars are on display ?
        if (toDisplay.length > __CityComplete[id]['maxitems'] && navigator.userAgent.indexOf('MSIE') == -1) {
            newDiv.style.width = __CityComplete[id]['element'].offsetWidth - 22 + 'px';
        }

        newDiv.onmouseover = function() {
            CityComplete_HighlightItem(__CityComplete[id]['element'].getAttribute('id'), this.getAttribute('index'));
        };
        newDiv.onclick = function() {
            CityComplete_SetValue(__CityComplete[id]['element'].getAttribute('id')); CityComplete_HideDropdown(__CityComplete[id]['element'].getAttribute('id'));
        };
        newDiv.innerHTML = toDisplay[i];

        divItems.appendChild(newDiv);
        __CityComplete[id]['dropdown'].appendChild(divItems);
    }


    // Too many items?
    if (toDisplay.length > __CityComplete[id]['maxitems']) {
        __CityComplete[id]['dropdown'].style.height = (__CityComplete[id]['maxitems'] * 15) + 2 + 'px';

    } else {
        __CityComplete[id]['dropdown'].style.height = '';
    }


    /**
    * Set left/top in case of document movement/scroll/window resize etc
    */
    __CityComplete[id]['dropdown'].style.left = CityComplete_GetLeft(__CityComplete[id]['element']);
    __CityComplete[id]['dropdown'].style.top = CityComplete_GetTop(__CityComplete[id]['element']) + __CityComplete[id]['element'].offsetHeight;


    // Show the iframe for IE
    if (isIE) {
        __CityComplete[id]['iframe'].style.top = __CityComplete[id]['dropdown'].style.top;
        __CityComplete[id]['iframe'].style.left = __CityComplete[id]['dropdown'].style.left;
        __CityComplete[id]['iframe'].style.width = __CityComplete[id]['dropdown'].offsetWidth;
        __CityComplete[id]['iframe'].style.height = __CityComplete[id]['dropdown'].offsetHeight;

        __CityComplete[id]['iframe'].style.visibility = 'visible';
    }

    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
        var ieversion = new Number(RegExp.$1)
        __CityComplete[id]['dropdown'].style.width = "145px";
        __CityComplete[id]['dropdown'].style.marginRight = "-8px";
        __CityComplete[id]['iframe'].style.marginRight = "-8px";
        __CityComplete[id]['iframe'].style.width = "145px";
    }
    else {
        __CityComplete[id]['dropdown'].style.width = "155px";
        __CityComplete[id]['dropdown'].style.marginLeft = "6px";
    }

    // Show dropdown
    if (!__CityComplete[id]['isVisible']) {
        __CityComplete[id]['dropdown'].style.visibility = 'visible';
        __CityComplete[id]['isVisible'] = true;
    }

    // If now showing less items than before, reset the highlighted value
    if (__CityComplete[id]['dropdown'].childNodes.length != numItems) {
        __CityComplete[id]['highlighted'] = null;
    }
}


/**
* Hides the dropdown layer
* 
* @param string id The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_HideDropdown(id) {
    if (id.indexOf("bookInput") > -1) {
        if (__CityComplete[id]['iframe']) {
            __CityComplete[id]['iframe'].style.visibility = 'hidden';
        }
        __CityComplete[id]['dropdown'].style.visibility = 'hidden';
        __CityComplete[id]['highlighted'] = null;
        __CityComplete[id]['isVisible'] = false;
    }
}


/**
* Hides all dropdowns
*/
function CityComplete_HideAll() {
    for (id in __CityComplete) {
        CityComplete_HideDropdown(id);
    }
}

/**
* Highlights a specific item
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
* @param int    index The index of the element in the dropdown to highlight
*/
function CityComplete_HighlightItem(id, index) {
    if (__CityComplete[id]['dropdown'].childNodes[index]) {
        for (var i = 0; i < __CityComplete[id]['dropdown'].childNodes.length; ++i) {
            if (document.getElementById('citycomplete_item_' + i) != null) {
                if (document.getElementById('citycomplete_item_' + i).className == 'citycomplete_item_highlighted') {
                    document.getElementById('citycomplete_item_' + i).className = 'citycomplete_item';
                }
            }
        }
        if (document.getElementById('citycomplete_item_' + index) != null) {
            document.getElementById('citycomplete_item_' + index).className = 'citycomplete_item_highlighted'
            __CityComplete[id]['highlighted'] = index;
        }
    }
}


/**
* Highlights the menu item with the given index
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
* @param int    index The index of the element in the dropdown to highlight
*/
function CityComplete_Highlight(id, index) {
    // Out of bounds checking
    if (index == 1 && __CityComplete[id]['highlighted'] == __CityComplete[id]['dropdown'].childNodes.length - 1) {
        __CityComplete[id]['dropdown'].childNodes[__CityComplete[id]['highlighted']].className = 'citycomplete_item';
        __CityComplete[id]['highlighted'] = null;

    } else if (index == -1 && __CityComplete[id]['highlighted'] == 0) {
        __CityComplete[id]['dropdown'].childNodes[0].className = 'citycomplete_item';
        __CityComplete[id]['highlighted'] = __CityComplete[id]['dropdown'].childNodes.length;
    }

    // Nothing highlighted at the moment
    if (__CityComplete[id]['highlighted'] == null) {
        __CityComplete[id]['dropdown'].childNodes[0].className = 'citycomplete_item_highlighted';
        __CityComplete[id]['highlighted'] = 0;

    } else {
        if (__CityComplete[id]['dropdown'].childNodes[__CityComplete[id]['highlighted']]) {
            __CityComplete[id]['dropdown'].childNodes[__CityComplete[id]['highlighted']].className = 'citycomplete_item';
        }

        var newIndex = __CityComplete[id]['highlighted'] + index;

        if (__CityComplete[id]['dropdown'].childNodes[newIndex]) {
            __CityComplete[id]['dropdown'].childNodes[newIndex].className = 'citycomplete_item_highlighted';

            __CityComplete[id]['highlighted'] = newIndex;
        }
    }
}


/**
* Sets the input to a given value
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_SetValue(id) {
    if (oBrowser != "Microsoft Internet Explorer") {
        __CityComplete[id]['element'].value = __CityComplete[id]['dropdown'].childNodes[__CityComplete[id]['highlighted']].textContent;
    }
    else {
        __CityComplete[id]['element'].value = __CityComplete[id]['dropdown'].childNodes[__CityComplete[id]['highlighted']].innerText;
    }
}


/**
* Checks if the dropdown needs scrolling
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_ScrollCheck(id) {
    // Scroll down, or wrapping around from scroll up
    if (__CityComplete[id]['highlighted'] > __CityComplete[id]['lastItemShowing']) {
        __CityComplete[id]['firstItemShowing'] = __CityComplete[id]['highlighted'] - (__CityComplete[id]['maxitems'] - 1);
        __CityComplete[id]['lastItemShowing'] = __CityComplete[id]['highlighted'];
    }

    // Scroll up, or wrapping around from scroll down
    if (__CityComplete[id]['highlighted'] < __CityComplete[id]['firstItemShowing']) {
        __CityComplete[id]['firstItemShowing'] = __CityComplete[id]['highlighted'];
        __CityComplete[id]['lastItemShowing'] = __CityComplete[id]['highlighted'] + (__CityComplete[id]['maxitems'] - 1);
    }

    __CityComplete[id]['dropdown'].scrollTop = __CityComplete[id]['firstItemShowing'] * 15;
}


/**
* Function which handles the keypress event
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_KeyDown(id) {
    // Mozilla
    if (arguments[1] != null) {
        event = arguments[1];
    }

    var keyCode = event.keyCode;

    switch (keyCode) {

        // Return/Enter  
        case 13:
            if (__CityComplete[id]['highlighted'] != null) {
                CityComplete_SetValue(id);
                CityComplete_HideDropdown(id);
            }

            event.returnValue = false;
            event.cancelBubble = true;
            break;

        // Escape  
        case 27:
            CityComplete_HideDropdown(id);
            event.returnValue = false;
            event.cancelBubble = true;
            break;

        // Up arrow  
        case 38:
            if (!__CityComplete[id]['isVisible']) {
                CityComplete_ShowDropdown(id);
            }

            CityComplete_Highlight(id, -1);
            CityComplete_ScrollCheck(id, -1);
            return false;
            break;

        // Tab  
        case 9:
            if (__CityComplete[id]['isVisible']) {
                CityComplete_HideDropdown(id);
            }
            return;

            // Down arrow
        case 40:
            if (!__CityComplete[id]['isVisible']) {
                CityComplete_ShowDropdown(id);
            }

            CityComplete_Highlight(id, 1);
            CityComplete_ScrollCheck(id, 1);
            return false;
            break;
    }
}


/**
* Function which handles the keyup event
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_KeyUp(id) {
    // Mozilla
    if (arguments[1] != null) {
        event = arguments[1];
    }

    var keyCode = event.keyCode;

    switch (keyCode) {
        case 13:
            event.returnValue = false;
            event.cancelBubble = true;
            break;

        case 27:
            CityComplete_HideDropdown(id);
            event.returnValue = false;
            event.cancelBubble = true;
            break;

        case 38:
        case 40:
            return false;
            break;

        default:
            CityComplete_ShowDropdown(id);
            break;
    }
}

/**
* Returns whether the dropdown is visible
* 
* @param string id    The form elements id. Used to identify the correct dropdown.
*/
function CityComplete_isVisible(id) {
    return __CityComplete[id]['dropdown'].style.visibility == 'visible';
}

//detect user browser
function DetectBrowser() {
    var bName = navigator.appName;
    //var bVersion = navigator.appVersion;
    return bName;
}

//detect user browser
function DetectBrowserVersion() {
    var bVersion = navigator.appVersion;
    return bVersion;
}