__SeoAutocomplete = new Array();
var strSelectedvalue="";
var blnSetCityValue = false;

isIE = document.all ? true : false;
isGecko = navigator.userAgent.toLowerCase().indexOf('gecko') != -1;
isOpera = navigator.userAgent.toLowerCase().indexOf('opera') != -1;

function SeoAutocomplete_Create (id, data)
{        
    __SeoAutocomplete[id] = {'data':data, 'isVisible':false, 'element':document.getElementById(id), 'dropdown':null, 'highlighted':null};

    __SeoAutocomplete[id]['element'].setAttribute('SeoAutocomplete', 'off');
    __SeoAutocomplete[id]['element'].onkeydown  = function(e) {return SeoAutocomplete_KeyDown(this.getAttribute('id'), e);}
    __SeoAutocomplete[id]['element'].onkeyup    = function(e) {return SeoAutocomplete_KeyUp(this.getAttribute('id'), e);}
    __SeoAutocomplete[id]['element'].onkeypress = function(e) {if (!e) e = window.event; if (e.keyCode == 13 || isOpera) return false;}
//    __SeoAutocomplete[id]['element'].ondblclick = function() {SeoAutocomplete_ShowDropdown(this.getAttribute('id'));}
    __SeoAutocomplete[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 __SeoAutocomplete) {
           SeoAutocomplete_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) {
        __SeoAutocomplete[id]['maxitems'] = arguments[2];
        __SeoAutocomplete[id]['firstItemShowing'] = 0;
        __SeoAutocomplete[id]['lastItemShowing']  = arguments[2] - 1;
    }
    
    SeoAutocomplete_CreateDropdown(id);
    
    // Prevent select dropdowns showing thru
    if (isIE) {
        __SeoAutocomplete[id]['iframe'] = document.createElement('iframe');
        __SeoAutocomplete[id]['iframe'].id = id +'_iframe';
        __SeoAutocomplete[id]['iframe'].style.position = 'absolute';
        __SeoAutocomplete[id]['iframe'].style.top = '0';
        __SeoAutocomplete[id]['iframe'].style.left = '0';
        __SeoAutocomplete[id]['iframe'].style.width = '0px';
        __SeoAutocomplete[id]['iframe'].style.height = '0px';
        __SeoAutocomplete[id]['iframe'].style.zIndex = '98';
        __SeoAutocomplete[id]['iframe'].style.visibility = 'hidden';
        __SeoAutocomplete[id]['element'].parentNode.insertBefore(__SeoAutocomplete[id]['iframe'], __SeoAutocomplete[id]['element']);
    }
}

function SeoAutocomplete_CreateDropdown(id)
{ 
    var left  = SeoAutocomplete_GetLeft(__SeoAutocomplete[id]['element']);
    var top   = SeoAutocomplete_GetTop(__SeoAutocomplete[id]['element']) + __SeoAutocomplete[id]['element'].offsetHeight;
    var width = __SeoAutocomplete[id]['element'].offsetWidth;
    __SeoAutocomplete[id]['dropdown'] = document.createElement('div');
    __SeoAutocomplete[id]['dropdown'].className = 'SeoAutocomplete'; // Don't use setAttribute()
    __SeoAutocomplete[id]['element'].parentNode.insertBefore(__SeoAutocomplete[id]['dropdown'], __SeoAutocomplete[id]['element']);   

    __SeoAutocomplete[id]['dropdown'].style.left       = (left-100) + 'px';
    __SeoAutocomplete[id]['dropdown'].style.top        = top + 'px'; 
    __SeoAutocomplete[id]['dropdown'].style.width      = 210 + 'px';//250 + 'px';
    __SeoAutocomplete[id]['dropdown'].style.zIndex     = '99';
    __SeoAutocomplete[id]['dropdown'].style.visibility = 'hidden';
}

function SeoAutocomplete_GetLeft(obj)
{
               var curleft = 0;
            if (obj.offsetParent)
            {
                        while (obj.offsetParent)
                        {
                                    curleft += obj.offsetLeft;
                                    obj = obj.offsetParent;
                        }
            }
            else if (obj.x)
                        curleft += obj.x;
            return curleft;

}

function SeoAutocomplete_GetTop(obj)
{
   var curtop = 0;
            if (obj.offsetParent)
            {
                        while (obj.offsetParent)
                        {
                                    curtop += obj.offsetTop;
                                    obj = obj.offsetParent;
                        }
            }
            else if (obj.y)
                        curtop += obj.y;
            return curtop;

}

function SeoAutocomplete_ShowDropdown(id)
{
    SeoAutocomplete_HideAll();

    var value = __SeoAutocomplete[id]['element'].value;
    var toDisplay = new Array();
    var toDisplayCityCode = new Array();
    var newDiv    = null;
    var text      = null;
    var numItems  = __SeoAutocomplete[id]['dropdown'].childNodes.length;

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

    // Go thru data searching for matches
    for (i=0; i<__SeoAutocomplete[id]['data'].length; ++i) {
//        if (__SeoAutocomplete[id]['data'][i].substr(0, value.length) == value) {
            var Listvalue  = __SeoAutocomplete[id]['data'][i];
            var arrValue = Listvalue.split("--");
            toDisplay[toDisplay.length] = arrValue[0];
            toDisplayCityCode[toDisplayCityCode.length] = arrValue[1];
//        }
    }
    
    // No matches?
    if (toDisplay.length == 0) {
        SeoAutocomplete_HideDropdown(id);
        return;
    }

    // Add data to the dropdown layer
  
    for (i=0; i<toDisplay.length; ++i) {
        newDiv = document.createElement('div');
        newDiv.className = 'SeoAutocomplete_item'; // Don't use setAttribute()
        newDiv.setAttribute('id', 'SeoAutocomplete_item_' + i);
        newDiv.setAttribute('index', i);
        newDiv.style.zIndex = '99';
        
         // Scrollbars are on display ?
        if (toDisplay.length > __SeoAutocomplete[id]['maxitems'] && navigator.userAgent.indexOf('MSIE') == -1) {
            //newDiv.style.width = __SeoAutocomplete[id]['element'].offsetWidth - 22 + 'px';
             newDiv.style.width = 210 + 'px';
        }

        newDiv.onmouseover = function() {SeoAutocomplete_HighlightItem(__SeoAutocomplete[id]['element'].getAttribute('id'), this.getAttribute('index'));};
        newDiv.onclick     = function() {SeoAutocomplete_SetValue(__SeoAutocomplete[id]['element'].getAttribute('id')); SeoAutocomplete_HideDropdown(__SeoAutocomplete[id]['element'].getAttribute('id'));}
        
        text   = document.createTextNode(toDisplay[i] + '<span style="display:none;">'+ toDisplayCityCode[i] +'</span>');
        //var valueCityCode = document.createTextNode(toDisplayCityCode[i] + '<span>'+ toDisplayCityCode +'</span>');
        
        
        //newDiv.appendChild(text);
        newDiv.innerHTML = toDisplay[i] + '<span style="display:none;">'+ toDisplayCityCode[i] +'</span>';

        __SeoAutocomplete[id]['dropdown'].appendChild(newDiv);
    }
    
    // Too many items?
   
    if (toDisplay.length > __SeoAutocomplete[id]['maxitems']) {
        __SeoAutocomplete[id]['dropdown'].style.height = (__SeoAutocomplete[id]['maxitems'] * 12) + 2 + 'px';
    
    } else {
        __SeoAutocomplete[id]['dropdown'].style.height = '';
    }

    __SeoAutocomplete[id]['dropdown'].style.left = SeoAutocomplete_GetLeft(__SeoAutocomplete[id]['element']);
    __SeoAutocomplete[id]['dropdown'].style.top  = SeoAutocomplete_GetTop(__SeoAutocomplete[id]['element']) + __SeoAutocomplete[id]['element'].offsetHeight;
   
    
    // Show the iframe for IE
    if (isIE) {
        __SeoAutocomplete[id]['iframe'].style.top    = __SeoAutocomplete[id]['dropdown'].style.top;
        __SeoAutocomplete[id]['iframe'].style.left   = __SeoAutocomplete[id]['dropdown'].style.left;
        __SeoAutocomplete[id]['iframe'].style.width  = __SeoAutocomplete[id]['dropdown'].offsetWidth;
        __SeoAutocomplete[id]['iframe'].style.height = __SeoAutocomplete[id]['dropdown'].offsetHeight;
        __SeoAutocomplete[id]['iframe'].style.visibility = 'visible';
    }
    // Adjust location
    var left  = SeoAutocomplete_GetLeft(__SeoAutocomplete[id]['element']);
    var top   = SeoAutocomplete_GetTop(__SeoAutocomplete[id]['element']) + __SeoAutocomplete[id]['element'].offsetHeight;
    __SeoAutocomplete[id]['dropdown'].style.left = (left-70) + 'px';
    __SeoAutocomplete[id]['dropdown'].style.top = top + 'px';
    
    // Show dropdown
    if (!__SeoAutocomplete[id]['isVisible']) {
        __SeoAutocomplete[id]['dropdown'].style.visibility = 'visible';
        __SeoAutocomplete[id]['isVisible'] = true;
    }
    
    // If now showing less items than before, reset the highlighted value
    if (__SeoAutocomplete[id]['dropdown'].childNodes.length != numItems) {
        __SeoAutocomplete[id]['highlighted'] = null;
    }
}

function SeoAutocomplete_HideDropdown(id)
{     
    if (__SeoAutocomplete[id]['iframe']) {
        __SeoAutocomplete[id]['iframe'].style.visibility = 'hidden';
    }
    __SeoAutocomplete[id]['dropdown'].style.visibility = 'hidden';
    __SeoAutocomplete[id]['highlighted'] = null;
    __SeoAutocomplete[id]['isVisible']   = false;
}

function SeoAutocomplete_HideAll()
{
    for (id in __SeoAutocomplete) {
        SeoAutocomplete_HideDropdown(id);
    }
}

function SeoAutocomplete_HighlightItem(id, index)
{
    if (__SeoAutocomplete[id]['dropdown'].childNodes[index]) {
        for (var i=0; i<__SeoAutocomplete[id]['dropdown'].childNodes.length; ++i) {
            if (__SeoAutocomplete[id]['dropdown'].childNodes[i].className == 'SeoAutocomplete_item_highlighted') {
                __SeoAutocomplete[id]['dropdown'].childNodes[i].className = 'SeoAutocomplete_item';
            }
        }
        
        __SeoAutocomplete[id]['dropdown'].childNodes[index].className = 'SeoAutocomplete_item_highlighted';
        __SeoAutocomplete[id]['highlighted'] = index;
    }
}

function SeoAutocomplete_Highlight(id, index)
{
    // Out of bounds checking
    if (index == 1 && __SeoAutocomplete[id]['highlighted'] == __SeoAutocomplete[id]['dropdown'].childNodes.length - 1) {
        __SeoAutocomplete[id]['dropdown'].childNodes[__SeoAutocomplete[id]['highlighted']].className = 'SeoAutocomplete_item';
        __SeoAutocomplete[id]['highlighted'] = null;
    
    } else if (index == -1 && __SeoAutocomplete[id]['highlighted'] == 0) {
        __SeoAutocomplete[id]['dropdown'].childNodes[0].className = 'SeoAutocomplete_item';
        __SeoAutocomplete[id]['highlighted'] = __SeoAutocomplete[id]['dropdown'].childNodes.length;
    }

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

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

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

        if (__SeoAutocomplete[id]['dropdown'].childNodes[newIndex]) {
            __SeoAutocomplete[id]['dropdown'].childNodes[newIndex].className = 'SeoAutocomplete_item_highlighted';
            
            __SeoAutocomplete[id]['highlighted'] = newIndex;
        }
    }
}

function SeoAutocomplete_SetValue(id)
{
    //alert(__SeoAutocomplete[id]['element']);

    var totalValue =  __SeoAutocomplete[id]['dropdown'].childNodes[__SeoAutocomplete[id]['highlighted']].innerHTML;
    
    var arrayValueTotal = totalValue.split('<span');
    //alert(arrayValueTotal.length);
    if(arrayValueTotal.length <= 1)
    {
    //alert('here');
        arrayValueTotal = totalValue.split('<SPAN');
    }
    //alert(arrayValueTotal);
        
    __SeoAutocomplete[id]['element'].value = arrayValueTotal[0];
    
     var hiddenCityCodeValue = document.getElementById(hiddenCityCodeRef);
     var cityCodeHidden = arrayValueTotal[1];     
     cityCodeHidden = cityCodeHidden.replace("</span>","");
     cityCodeHidden = cityCodeHidden.replace("</SPAN>","");
     var cityValueMidResult = cityCodeHidden.split('>');
    if(hiddenCityCodeValue != null)
    {       
        hiddenCityCodeValue.value = cityValueMidResult[1];       
    }  
}

function SeoAutocomplete_ScrollCheck(id)
{
    // Scroll down, or wrapping around from scroll up
    if (__SeoAutocomplete[id]['highlighted'] > __SeoAutocomplete[id]['lastItemShowing']) {
        __SeoAutocomplete[id]['firstItemShowing'] = __SeoAutocomplete[id]['highlighted'] - (__SeoAutocomplete[id]['maxitems'] - 1);
        __SeoAutocomplete[id]['lastItemShowing']  = __SeoAutocomplete[id]['highlighted'];
    }
    
    // Scroll up, or wrapping around from scroll down
    if (__SeoAutocomplete[id]['highlighted'] < __SeoAutocomplete[id]['firstItemShowing']) {
        __SeoAutocomplete[id]['firstItemShowing'] = __SeoAutocomplete[id]['highlighted'];
        __SeoAutocomplete[id]['lastItemShowing']  = __SeoAutocomplete[id]['highlighted'] + (__SeoAutocomplete[id]['maxitems'] - 1);
    }
    
    __SeoAutocomplete[id]['dropdown'].scrollTop = __SeoAutocomplete[id]['firstItemShowing'] * 12;
}

function SeoAutocomplete_KeyDown(id)
{
    // Mozilla
    if (arguments[1] != null) {
        event = arguments[1];
    }

    var keyCode = event.keyCode;

    switch (keyCode) {

        // Return/Enter
        case 13:
            if (__SeoAutocomplete[id]['highlighted'] != null) {
                SeoAutocomplete_SetValue(id);
                SeoAutocomplete_HideDropdown(id);
            }
            
            event.returnValue = false;
            event.cancelBubble = true;
            break;

        // Escape
        case 27:
            SeoAutocomplete_HideDropdown(id);
            event.returnValue = false;
            event.cancelBubble = true;
            break;
        
        // Up arrow
        case 38:
//            if (!__SeoAutocomplete[id]['isVisible']) {
//                SeoAutocomplete_ShowDropdown(id);
//            }
            
            if (__SeoAutocomplete[id]['isVisible'])
            {
                SeoAutocomplete_Highlight(id, -1);
                SeoAutocomplete_ScrollCheck(id, -1);
            }
            return false;
            break;
        
        // Tab
        case 9:
            if (__SeoAutocomplete[id]['highlighted'] != null) {
                SeoAutocomplete_SetValue(id);
                SeoAutocomplete_HideDropdown(id);
            }
            else if (__SeoAutocomplete[id]['isVisible']) {
                SeoAutocomplete_HideDropdown(id);
            }
            return;
        
        // Down arrow
        case 40:
//            if (!__SeoAutocomplete[id]['isVisible']) {
//                SeoAutocomplete_ShowDropdown(id);
//            }
            if (__SeoAutocomplete[id]['isVisible'])
            {
                SeoAutocomplete_Highlight(id, 1);
                SeoAutocomplete_ScrollCheck(id, 1);
            }
            return false;
            break;
    }
}

function SeoAutocomplete_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:
            SeoAutocomplete_HideDropdown(id);
            event.returnValue = false;
            event.cancelBubble = true;
            break;
        
        case 38:
        case 40:            
            return false;
            break;

        default:
       //SeoAutocomplete_ShowDropdown(id);
            if (__SeoAutocomplete[id]['element'].value.length >= 1)
                MakeCallBack();
            else
                SeoAutocomplete_HideAll();
            break;
    }
}

function SeoAutocomplete_isVisible(id)
{
    return __SeoAutocomplete[id]['dropdown'].style.visibility == 'visible';
}

function checkListInList()
{
    var ValueStatus = false;
    var CityClientIdRef = document.getElementById(CityClientId);
    if(CityClientIdRef != null && __SeoAutocomplete[CityClientId]['data'] != null)
    {
        for (i=0; i<__SeoAutocomplete[CityClientId]['data'].length; ++i) {
            var Listvalue  = __SeoAutocomplete[id]['data'][i];
            var inputValue = Listvalue.split('--');
        
            if(CityClientIdRef.value == inputValue[0])
                ValueStatus = true;          
        }
    }
    if(ValueStatus == false)
    {
        CityClientIdRef.value = '';      
    }
}