﻿var autoCompleteInstance = null;
var OnReady = new Array();
var autoCompleteDefaultString = 'Skriv län, kommun eller ort';

function Callbacks() 
{
    for (var i = 0; i < OnReady.length; i++)
        OnReady[i]();
}

function SetButtonEnabled(button, enabled) {
    button.disabled = !enabled;
    button.style.color = enabled ? "#fff" : "#fff";
}

function AutoCompleteBox(textBox, button, maxRows, destPage) 
{
    this.autoCompleteGeoSearchDivName = "autoCompleteGeoSearchDiv";
    this.currentElement = null;
    this.data = null;
    this.maxRows = maxRows;
    this.textBox = textBox;
    this.button = button;

    this.textBox.value = autoCompleteDefaultString;
    this.textBox.setAttribute("autocomplete", "off"); 

    this.textBox.onfocus = function() 
    {
        if (this.value == autoCompleteDefaultString) 
        {
            this.value = ''; 
        }
    }
    this.textBox.onblur = function()
    {
        if (this.value == '')
        {
            this.value = autoCompleteDefaultString;
        }
    }
    this.button.onclick = function() {
        var text = autoCompleteInstance.GetText();
        var data = autoCompleteInstance.data;
        var query = null;
        if (data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].Caption == text) {
                    query = Bv.Str2Query(data[i].Query).value;
                }
            }
            if (!query) {
                query = Bv.Str2Query(data[0].Query).value;
            }
        }
        if (!query)
            query = Bv.Str2Query("t=0&ea=ci:752").value;
        window.location = destPage + '?' + Bv.QueryToString(query).value;
    }

    this.GetText = function() {
        return this.textBox.value;
    }
    this.isVisible = function()
    {
       return  $(this.autoCompleteGeoSearchDivName).style.visibility == 'visible';
    }
    this.setVisibility = function(flag)
    {
        $(this.autoCompleteGeoSearchDivName).style.visibility = (flag ? 'visible' :  'hidden');
    }
    var t = null;
    var func = function() { Bv.GetGeoSuggestions(this.textBox.value, this.callBack.bind(this)); t = null; };
    
    this.keyHandler = function(ev) {

        if (this.textBox.value == "") {
            this.currentElement = null;
            return e.returnValue = false;
        }
        //SetButtonEnabled(this.button, false);
        e = ev || window.event;
        if (e.keyCode == 40 || e.keyCode == 38) {
            scrollSelectedElement(e.keyCode == 40);
            return e.returnValue = false;
        }
        if (e.keyCode == 13) {
            if (this.isVisible()) {
                this.setTextAndHide();
            }
            else {
                this.button.onclick();
            }

            return e.returnValue = false;
        }
        $j(textBox).addClass("loading");
        
        if (t) { clearTimeout(t); }
        t = setTimeout(func, 230);
        //Bv.GetGeoSuggestions(this.textBox.value, this.callBack.bind(this));
    }
    this.textBox.onkeyup = this.keyHandler.bind(this);

    this.enterHandler = function(ev) 
    {
        e = ev || window.event;            
        if (e.keyCode == 13) {
            if (e.preventDefault) e.preventDefault();
            if (e.stopPropagation) e.stopPropagation();
            e.cancelBubble = true;
            e.returnValue = false;
        }                           
    }
    this.textBox.onkeydown = this.enterHandler;
    this.setTextAndHide = function() {
        
        if (this.currentElement && this.currentElement.noClick == undefined)
        {
            this.textBox.value = this.currentElement.innerHTML;
            //SetButtonEnabled(this.button, true);
            $j(textBox).css({ "color": "#555" });
        }
        this.setVisibility(false);            
    }
    
    this.autoCompleteGeoGetChildDivs = function() {
        var div = $(this.autoCompleteGeoSearchDivName);
        if (div)
            return div.getElementsByTagName("div");
    }

    this.scrollSelectedElement = function(up) 
    {
        var arr = this.autoCompleteGeoGetChildDivs();
        if (arr && arr.length) 
        {
            if (up && !this.currentElement)
                this.highLight(arr[0], true);
            else
                for (var i = 0; i < arr.length; i++) 
                {
                    if (arr[i].innerHTML == this.currentElement.innerHTML) 
                    {
                        var wantedIndex = i + (up ? 1 : -1);
                        if (wantedIndex >= 0 && wantedIndex < arr.length)
                            this.highLight(arr[wantedIndex], true);
                        break;
                    }
                }
        }
    }

    this.highLight = function(element, on) {
       
        if (on && this.currentElement && this.currentElement != element)
            highLight(currentElement, false);
        element.className = on && element.noClick == undefined ? "HighLight" : "";
        this.currentElement = on ? element : null;
    }

   this.scaleAndPlaceBelow = function scaleAndPlaceBelow(newElem, baseElem) {
        var baseElemPos = getPosition(baseElem);

        newElem.style.left = baseElemPos.x + "px";
        newElem.style.top = (baseElemPos.y + baseElem.offsetHeight) + "px"; ;
        newElem.style.width = baseElem.offsetWidth + "px";
    }

    this.createDiv = function(id) {
        div = document.createElement('div');
        div.setAttribute("id", id);
        scaleAndPlaceBelow(div, this.textBox);
        div.style.zIndex = '99';
        this.textBox.parentNode.appendChild(div);
        return div;
    }

    this.callBack = function(ret) {
        $j(textBox).removeClass("loading");
        var h = 20;
        this.data = ret.value;
        var div = $(this.autoCompleteGeoSearchDivName) ? $(this.autoCompleteGeoSearchDivName) : this.createDiv(this.autoCompleteGeoSearchDivName, this.textBox);
        if (div.childNodes)
            for (var i = div.childNodes.length - 1; i >= 0; i--)
            div.removeChild(div.childNodes[i]);

        for (var i = 0; this.data && i < this.data.length && i < this.maxRows; i++) {
            var d = document.createElement("div");
            d.innerHTML = this.data[i].Caption;
            d.style.height = h;
            d.style.top = i * h + d.style.top;
            d.style.zIndex = '99';
            this.scaleAndPlaceBelow(d, div);
            d.onmouseover = function() { highLight(this, true); }
            d.onclick = function() { setTextAndHide() };
            div.appendChild(d);
        }

        if (this.data != null && this.data.length == 0) {
            var d = document.createElement("div");
            d.innerHTML = "Ingen träff. Området saknas hos oss.";
            d.noClick = true;
            div.appendChild(d);
            Bv.Log("GeoSuggestion", $('quicksearchinput').value);
        }

        var arr = autoCompleteGeoGetChildDivs();
        if (currentElement && arr)
            for (var i = 0; i < arr.length; i++)
            if (arr[i].innerHTML == currentElement.innerHTML) {
            highLight(arr[i], true);
            break;
        }
        this.setVisibility(true);
    }
    return this;
}

