// key codes
var enter     = 13;
var backspace = 8;
var up        = 38;
var down      = 40;

// "state" variables
var max   = 10;
var show  = true;
var index = -1;
var oldIndex;
var options;
var n;

// name of input and div
var inputName = "trefwoord_and";
var divName   = "ac-options";

var words = new Array(
"aanbestedingen", "account manager", "accountmanager", "administrateur", "administratie", "administratief", "administratief limburg", "administratief medewerker", "administratief medewerkster", "administratief salarisadministratie personeelszaken", "adviseur", "adviseur klimaat", "aftermarket automotive automobiel", "alkmaar", "alle", "almelo enschede hengelo oldenzaal", "almere", "alphen aan den rijn", "amersfoort", "amsterdam", "analist", "analist laboratorium qa regulatory validation validatie", "apeldoorn", "arbo", "architectuur", "arnhem", "art director", "assen", "assistent", "assistent accountant voor het vrije beroep gezocht!", "assistent controller", "assistent makelaar", "astma copd allergie respiratory longfunctie", "auto", "auto magazijn onderdelen", "auto van de zaak", "autocad", "axapta", "baliemedewerker", "baliemedewerkster", "bedrijfskunde", "bedrijfsleider", "begeleider", "belegging vermogensbeheer", "bergen op zoom", "beveiliging", "bij tsjechoreizen", "binnendienst", "bodyguarding", "boeken", "bouw", "brandweer", "breda", "buitendienst", "business development manager", "business objects", "calculator", "callcenter", "campingmedewerker", "carrosserie", "casemanager", "catering", "chauffeur", "chemie chemisch laboratorium research", "china chinese", "chinees", "chinese", "civiel", "clinical", "cnc", "coach", "cognos", "collections", "collector", "commercieel", "commercieel medewerker binnendienst", "communicatie", "communicatie adviseur", "communicatie, public, blad", "communicatieadviseur", "consultant", "controller", "coordinator", "culemborg", "customer service manager", "den haag", "den helder", "departementen", "designer", "deurwaarder", "dieren", "directeur", "directeur, adj directeur, regiomanager", "directiesecretaresse", "director marketing", "director sales", "docent", "docent engels", "document controller", "dordrecht", "drukker", "dsi", "dtp", "dtp framemaker", "duits", "east european", "effecten", "eindhoven", "e-learning", "elektr of electr", "elektron electron fysic physic natuurkunde optic", "elektron of electron of natuurkunde of fysic", "engels", "engineer", "exact", "excel specialist", "export", "export manager", "facilitair", "facilitair facility", "facilitair medewerker", "facilitaire", "facility", "facility manager", "famas", "financial analyst - dynamische omgeving", "financieel", "financieel administratief", "financieel directeur", "financieel planner", "fiscalist", "food", "food fmcg export", "foto", "fotografie", "frans", "frans french france", "franse taal", "gastheer", "gastvrouw", "general manager", "gis", "grafisch", "graphic", "groepsleerkracht", "groepsleider", "grondstewardess", "groningen", "gz psycholoog", "haarlem", "hbo", "heftruck", "heftruckchauffeur", "hilversum", "hlo", "hoofd", "hoofd administratie", "hoofd administratie - veranderingsgezind", "hoofd technische dienst", "hoofd verkoop binnendienst", "horeca", "hotels", "hr", "hr manager", "huis", "huismeester", "hypotheekacceptant", "hypotheekadviseur", "ict manager", "in tsjechie", "inkoop", "inkoop frans", "inkoop purchase procurement", "inkoper", "intercedent", "interieur", "interim", "it", "it manager", "junior", "junior accountmanager", "juridisch", "juridisch secretaresse", "kamermeisje", "kapper", "kapster", "kinderen", "kinderopvang", "kleding", "kleurmaker verf", "koerier", "kok", "kraanmachinist", "kwaliteit", "laborant", "laboratorium,manager,verkoop,commercieel,analist,technisch", "lasser", "leerkracht", "leiden", "lelystad", "linux", "logistiek", "logistiek manager", "maatschappelijk werk", "maatschappelijk werker", "magazijn", "magazijnmedewerker", "makelaar", "makelaardij", "management", "management assistent", "management assistente", "management trainee", "manager", "manager hoofd leider director directeur", "manager leider leader", "manager marketing", "manager operations", "manager;hoofd;project", "managing director sales en marketing", "marketing", "marketing communicatie", "marketing manager", "marketing sales director commercial commercieel business", "marktonderzoek", "mbo", "medewerker", "media", "meet", "meppel", "migratie", "mlo", "mlo of hlo'", "montage", "monteur", "natuurkunde", "natuurvoeding", "nieuwegein", "nieuwegein utrecht", "nijkerk", "nijmegen", "office", "office manager", "officemanager", "offsetdrukker", "onderwijs", "onderwijsassistent", "onderwijskundige", "operationeel manager", "operations manager", "oracle en (dba of administrator)", "orthodontist", "oss", "ouderen", "overheid", "p", "part time", "partime", "parttime", "part-time", "parttime deeltijd", "passagiers", "pensioenadviseur", "personal assistant", "personato", "personeel", "personeelszaken", "piping", "planner", "plant manager", "plasterer", "plc besturing elektro", "plc scada", "pmw", "pomp", "pools", "pools nederlands", "pools sprekend", "post", "private banker", "private banking", "procesoperator", "process engineer", "product manager", "productie", "productiemedewerker", "produktie", "program manager", "programmeur", "project", "project controller", "project engineer", "project manager", "projectleider", "projectleider civiel", "projectmanager", "psycholoog", "quality", "quality engineer", "quality manager", "receptie", "receptionist", "receptioniste", "receptioniste telefoniste", "receptioniste/telefoniste", "redacteur", "regiomanager", "reintegratie", "reisadviseur", "roosendaal", "rotterdam", "rusland", "russia, rusland, russian, russisch", "russisch", "russisch, russian, ukrainian, oekraiens", "salarisadministrateur", "salarisadministratie", "sales director", "sales manager", "sales representative", "sales traineeship", "salesmanager", "sap", "sap fico", "schade", "schiphol", "schoonheidsspecialist", "schoonmaak", "schoonmaker", "secretaresse", "service", "service engineer", "service manager", "software project controller quality teamleader teamleider", "spaans", "sport", "sql en server", "startende heao-ers be en ba gezocht!", "starter", "steenwijk", "supply chain", "supply chain logistics logistiek operations", "support", "tandarts", "tandartsassistent", "tandtechniek", "taxi", "teamleider", "technicus adviesbureau werktuigkundig", "techniek", "technisch manager", "technische bedrijfskunde", "technische dienst", "tekenaar", "telec", "telefonist", "telefoniste", "telefoniste receptioniste", "telefoniste/receptioniste", "telemarketeer", "thuiswerk", "tiel", "tilburg", "trainee", "trainer", "treasury", "vakantie", "vakantiewerk", "valkenswaard", "vastgoed", "veiligheid", "veiligheidskundige", "veldhoven", "verkeer", "verkoop", "verkoop binnendienst", "verkoopmedewerker", "verkoopster", "verkoper", "verpleegkundige", "vertaler", "vertegenwoordiger", "verzekeringen", "verzorgende", "verzuim", "vestigingsmanager", "vianen", "visual merchandiser", "vlees", "voeding", "vve", "water", "waterbouw geodesie bagger oever", "watersport", "webdesign", "webdevelop", "werkvoorbereider", "winkel", "wwb", "zaandam", "zaandam amsterdam", "zevenbergen or moerdijk or klundert or breda or roosendaal or bergen op zoom", "zoetermeer", "zwem", "zwolle"
);

function handleKey(e) {
    var key   = getKey(e);
    var input = document.getElementById(inputName);

    show = true;

    oldIndex = index;

    switch(key) {
    case(enter):
        show = false;

        if (index >= 0)
            input.value = words[options[index]];
      
        index    = -1;
        oldIndex = null;
        break;

    case(up):
        index--;
        if (index == -1) index = 0;
        break;

    case(down):
        index++;
        if (index == n) index--;
        break;

    case(backspace):
        index = -1;
        // fall through

    default:
        updateOptions();
    } 

    // highlight item
    highlight();

    // hide or show options
    updateDisplay();
}

function updateOptions() {
    var div   = document.getElementById(divName);
    var input = document.getElementById(inputName);
    var html  = "";

    n = 0;

    if (input.value) {
        var re  = new RegExp("^" + input.value, "i");
        options = new Array();

        for (var i = 0; i < words.length; i++) {
            if (words[i].search(re) == 0) {
                html += '<div class="ac_normal" onmouseover="oldIndex = index; index = ' + n + '; highlight();" onclick="handleClick(' + n + ')" id="ac_' + n + '">' + words[i]  + "</div>";
                options[options.length] = i;            
                n++;
            }

            if (n == max)
                break;
        }

        div.innerHTML = html;         
    }
}

function highlight() {
    if (oldIndex >= 0 && index != oldIndex) {
        var element = document.getElementById("ac_" + oldIndex);

        if (element) {
            element.style.color = "#0d2b88";
            element.style.backgroundColor = "#ffffff";
        }
    }

    if (index >= 0) {
        var input = document.getElementById(inputName);

        var element = document.getElementById("ac_" + index);

        if (element) {
            document.getElementById("ac_" + index).style.color = "#ffffff";
            document.getElementById("ac_" + index).style.backgroundColor = "#0d2b88";
        }
    }
}

function updateDisplay() {
    var div   = document.getElementById(divName);

    if (n && show) {
        div.style.display = "block";
        fixIE();
    }
    else {
        div.style.display = "none";
        fixIE();
    }
}

function fixIE() {
    var pattern = /msie 6.0/i;
    
    if (pattern.test(navigator.userAgent)) {
        if (n && show) {
            document.getElementById("functiegroep").style.visibility = "hidden";

            if (n > 2)
                document.getElementById("opl_niveau").style.visibility  = "hidden";
            else
                document.getElementById("opl_niveau").style.visibility  = "visible";
          
            if (n > 4)
                document.getElementById("postcode_radius").style.visibility = "hidden";
            else
                document.getElementById("postcode_radius").style.visibility = "visible";
        }
        else {
            document.getElementById("functiegroep").style.visibility  = "visible";
            document.getElementById("opl_niveau").style.visibility  = "visible";
            document.getElementById("postcode_radius").style.visibility = "visible";
        }
    }
}

function getKey(e) {
    if (window.event)
        return window.event.keyCode;
    else if (e)
        return e.which;
    else
        return null;
}

function handleClick(i) {
    var input   = document.getElementById(inputName);
    input.value = words[options[i]];

    index     = -1;
    show      = false;
    oldIndex  = null;
    options   = null;

    updateDisplay();
}