// suggest widget functionaliteit voor brand_models

// server side script
var scriptURL = '/brand_model.php';
var timer;
var delay = 700;
var KEYUP = 38;
var KEYDN = 40;
var hasSuggests= false;
var highlight = -1;
var brand_models;
var acBase;

// set up the editor when the HTML has loaded
addEvent(window, 'load', init, false);

// initialize
function init()
{
    var brand_model = document.getElementById('brand_model');
    // assign key handler
    if (brand_model) {
        addEvent(brand_model, 'keydown', keyHandler, false);
        addEvent(brand_model, 'blur', hideSuggest, false);
        // don't let browser interfere
        brand_model.setAttribute("autocomplete", "off");
        brand_model.focus();

        // position suggest div below brand_model input
        var suggest = document.getElementById('suggest');
        suggest.style.left = findPosX(brand_model) + 'px';
        suggest.style.top = findPosY(brand_model) + brand_model.offsetHeight 
            + brand_model.style.borderBottomWidth + 'px';
    }
}

//
// event handlers
//

// main keystroke event handler
function keyHandler(e)
{
    e = e || window.event;
    var key = e.keyCode;

    switch(key) {
        case KEYUP:
            processUp();
            break;

        case KEYDN:
            processDown();
            break;

        default:
            hideSuggest();
            // clear the current timeout
            clearTimeout(timer);
            // set up a timeout to load suggestions
            timer = setTimeout(getSuggests, delay);
    }
}

// get suggestions from server
function getSuggests()
{
    var brand_model = document.getElementById('brand_model');
    if (brand_model.value.length) { // only if there's content
        var querystring = 'suggest=' + escape(brand_model.value);
        xmlhttpPost(scriptURL, querystring);
    }
}

// hide suggest layer
function hideSuggest(e)
{
    var suggest = document.getElementById('suggest');
    suggest.style.display = 'none';
    hasSuggests = false;
    highlight = -1;
}

// handle up event
function processUp()
{
    if (hasSuggests) {
        var suggest = document.getElementById('suggest');
        var list = suggest.firstChild;
        opts = list.childNodes;
        if (highlight > 0) {
            opts[highlight].className = '';
            highlight--;
            opts[highlight].className = 'active';
            var brand_model = document.getElementById('brand_model');
            autoComplete(brand_model, brand_models[highlight]);
        }
    }
}

// handle down event
function processDown()
{
    if (hasSuggests) {
        var suggest = document.getElementById('suggest');
        var list = suggest.firstChild;
        opts = list.childNodes;
        if (highlight < opts.length - 1) {
            if (highlight >= 0)
                opts[highlight].className = '';
            highlight++;
            opts[highlight].className = 'active';
            var brand_model = document.getElementById('brand_model');
            autoComplete(brand_model, brand_models[highlight]);
        }
    }
}

// do autocomplete to str in input elm
function autoComplete(elm, str)
{
    var len = acBase.length;
    add = str.substr(len);
    elm.value = acBase + add;
    if (elm.setSelectionRange) {
        elm.setSelectionRange(len, str.length);
    }
    else { // IE
        var oRange = elm.createTextRange();
        oRange.moveStart("character", len);
        oRange.moveEnd("character", add.length);
        oRange.select();
        elm.caretPos = len;
    }
}

//
// AJAX request handling
//

// process a response from the server
function handleResponse(response)
{
    brand_models = response.split(';');
    // display returned brand_models in suggest list
    if (brand_models.length > 1) {
        var list = document.getElementById('suggest');
        // delete child ul
        while (list.childNodes.length)
            list.removeChild(list.firstChild);
        // create new list
        var ul = document.createElement('ul');
        for (var s in brand_models) {
            var li = document.createElement('li');
            var tn = document.createTextNode(brand_models[s]);
            li.appendChild(tn);
            ul.appendChild(li);
        }
        list.appendChild(ul);
        list.style.display = 'block';
        hasSuggests = true;
    }
    else
        hideSuggest();

    // if at least one suggestion is present, do autocomplete
    var brand_model = document.getElementById('brand_model');
    if (brand_models[0].length) {
        var brand_model = document.getElementById('brand_model');
        acBase = brand_model.value;
        autoComplete(brand_model, brand_models[0]);
    }
}

// after http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html
function xmlhttpPost(url, querystring) 
{
    var xmlHttpReq = false;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpReq.open('POST', url, true);
    xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttpReq.onreadystatechange = function() {
        if (xmlHttpReq.readyState == 4) {
            handleResponse(xmlHttpReq.responseText);
        }
    }
    xmlHttpReq.send(querystring);
}

//
// platform independent event utility functions
// http://www.scottandrew.com/weblog/articles/cbs-events
//
function addEvent(obj, evType, fn, useCapture)
{
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, useCapture);
        return true;
    } 
    else if (obj.attachEvent) {
        var r = obj.attachEvent("on"+evType, fn);
        return r;
    } 
    else {
        alert("Handler could not be attached");
    }
}

function removeEvent(obj, evType, fn, useCapture)
{
    if (obj.removeEventListener) {
        obj.removeEventListener(evType, fn, useCapture);
        return true;
    } 
    else if (obj.detachEvent) {
        var r = obj.detachEvent("on"+evType, fn);
        return r;
    } 
    else {
        alert("Handler could not be removed");
    }
}

// http://www.quirksmode.org/js/findpos.html
function findPosX(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 findPosY(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;
}