﻿/// <reference path="../K2046.js" />
K2046.AutoComplete = {
    Instance: []
    , Auto: function(element, requestUrl) {
        this.ID = K2046.AutoComplete.Instance.length;
        K2046.AutoComplete.Instance.push(this);
        this.InputBox = K2046.$(element);
        this.RequestUrl = requestUrl;
        this.List = [];
        this.DisplayElement = this.GetDisplayElement();
        this.InitXmlhttp();
        var self = this;
        this.Value = "";
        this.InputBox.onkeydown = function(e) {
            self.InputBox_OnKeyDown(e);
        }
        this.InputBox.onkeyup = function(e)/*onpropertychange*/
        {
            var keycode = e ? e.which : event.keyCode;
            if (keycode < 37 || keycode > 40) {
                if (self.Value != self.InputBox.value) {
                    self.Value = self.InputBox.value;
                    self.DoRequest();
                }
            }
        }
        this.SelectedIndex = -1;
        K2046.On(document, "click", function() { self.RemoveDisplay(); });
        K2046.On(window, "resize", function() { self.WindowResize(); });
    }
    , Attach: function(options) {
        return new K2046.AutoComplete.Auto(options.el, options.url);
    }
}

K2046.AutoComplete.Auto.prototype = {
    ReadyStateChange: function() {
        if (this.XmlHttp.readyState == 4 && this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK") {
            this.List = eval(this.XmlHttp.responseText);
            this.ShowList();
        }
    }
    , DoRequest: function(requestType, requestUrl) {
        var self = this;
        if (this.InputBox.value == "" || this.InputBox.value.replace(" ", "") == "" || (!requestUrl && !this.RequestUrl)) {
            this.RemoveDisplay();
            return;
        }
        this.XmlHttp.abort();
        this.XmlHttp.open((requestType ? requestType : "POST"), (requestUrl ? requestUrl : this.RequestUrl), true);
        this.XmlHttp.onreadystatechange = function() { self.ReadyStateChange(); };
        this.XmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        this.XmlHttp.send("Type=" + K2046.GetValue("SearchType") + "&Key=" + escape(this.InputBox.value));
    }
    , ShowList: function() {
        var self = this;
        this.RemoveDisplay();
        if (!this.List || this.List.length < 1) {
            return;
        }
        for (var x = 0; x < this.List.length; x++) {
            var anchor = document.createElement("a");
            anchor.innerHTML = this.List[x];
            var num = x;
            anchor.onmouseover = function(num) { return function() { self.AnchorOnMouseOver(num); } } (x);
            anchor.onmouseout = function(num) { return function() { self.AnchorOnMouseOut(num); } } (x);
            anchor.onclick = function() { self.AnchorOnClick(this); };
            this.DisplayElement.appendChild(anchor);
        }
        this.DisplayElement.style.display = "block";
    }
    , InputBox_OnKeyDown: function(e) {
        var key = e ? e.which : event.keyCode;
        if (this.DisplayElement.style.display == 'block') {
            if (key == 27) {
                this.RemoveDisplay();
                return;
            }
            var key_old = this.SelectedIndex;
            var key_new = this.SelectedIndex;
            if (key == 40) {
                key_new++;
                if (key_new >= this.List.length) {
                    key_new = -1;
                }
            }
            if (key == 38) {
                key_new--;
                if (key_new < -1) {
                    key_new = this.List.length - 1;
                }
            }
            if (key == 40 || key == 38) {
                this.AnchorOnMouseOut(key_old);
                if (key_new >= 0 && key_new < this.List.length) {
                    this.AnchorOnMouseOver(key_new);
                    this.InputBox.value = this.DisplayElement.childNodes[this.SelectedIndex].innerHTML;
                    this.Value = this.InputBox.value;
                }
            }
        }
    }

    , AnchorOnMouseOver: function(index) {
        if (index != this.SelectedIndex) {
            this.AnchorOnMouseOut(this.SelectedIndex);
        }
        this.SelectedIndex = index;
        if (this.SelectedIndex >= 0 && this.SelectedIndex < this.List.length) {
            this.DisplayElement.childNodes[index].className = "mouseover";
        }
    }
    , AnchorOnMouseOut: function(index) {
        if (index >= 0 && this.SelectedIndex < this.List.length) {
            this.DisplayElement.childNodes[index].className = "mouseout";
            this.SelectedIndex = -1;
        }
    }
    , AnchorOnClick: function(anchor) {
        this.InputBox.value = anchor.innerHTML;
        this.RemoveDisplay();
        this.OnSelected(this.InputBox.value);
    }
    , RemoveDisplay: function() {
        for (var x = 0; x < K2046.AutoComplete.Instance.length; x++) {
            K2046.AutoComplete.Instance[x].SelectedIndex = -1;
            K2046.AutoComplete.Instance[x].DisplayElement.innerHTML = "";
            K2046.AutoComplete.Instance[x].DisplayElement.style.display = "none";
        }
    }
    , GetPosition: function(element) {
        var pos = new Array();
        pos[0] = element.offsetLeft;
        pos[1] = element.offsetTop;
        while (element = element.offsetParent) {
            pos[1] += element.offsetTop;
            pos[0] += element.offsetLeft;
        }
        return pos;
    }
    , GetDisplayElement: function() {
        var _div = K2046.$("k2046_autocomplete_element_" + this.ID);
        if (!_div) {
            _div = document.createElement("div");
            _div.className = "ac";
            _div.id = "k2046_autocomplete_element_" + this.ID;
            _div.style.width = this.InputBox.offsetWidth - 2 + "px";
            _div.style.position = "absolute";
            _div.style.backgroundColor = "#FFFFFF";
            var pos = this.GetPosition(this.InputBox);
            _div.style.left = pos[0] + "px"; ;
            _div.style.top = (pos[1] + this.InputBox.offsetHeight) + "px";
            _div.style.display = "none";
            K2046.$("SearchForm").appendChild(_div);
        }
        return _div;
    }
    , WindowResize: function() {
        var el = this.GetDisplayElement();
        var pos = this.GetPosition(this.InputBox);
        el.style.left = pos[0] + "px"; ;
        el.style.top = (pos[1] + this.InputBox.offsetHeight) + "px";
    }

    , OnSelected: function(value) {
    }
    , InitXmlhttp: function() {
        /*@cc_on
        @if (@_jscript_version >= 5)
        try {
            this.XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                this.XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (E) {
                this.XmlHttp = false;
            }
        }
        @else
        this.XmlHttp = false;
        @end
        @*/
        if (!this.XmlHttp && typeof XMLHttpRequest != 'undefined') {
            try {
                this.XmlHttp = new XMLHttpRequest();
            }
            catch (e) {
                this.XmlHttp = false;
            }
        }
    }
};
