function itemDropDown(name,values,placeholder,fields,config)
{
    itemDropDown[name]=this;
    this.name=name;
    this.config=config || {};
    this.indexedValues={};
    for (var i=0;i<values.length;i++)
    {
        this.indexedValues[values[i].id]=values[i];
    }
    this.placeholder=placeholder;
    this.values=values;
    this.id="dd_"+this.name;
    this.fields=fields;
    this.queryvalue="";
    this.queryresult=[];
    this.query=function(value)
    {
        this.queryvalue = value = value.toLowerCase()
	    var result=[];
	    var values=this.values;
    	
	    if (value.length>=this.selectLength)
	    {
	        var l=value.length;
		    for (var i=0;i<values.length;i++)
		    {
			    if (values[i].name.toLowerCase().indexOf(value)>=0 ||!l)
			    {

				    result.push(values[i]
				    );
			    }
		    }
	    }
	    this.queryresult=result;
        this.renderPage(0,true);
        if (value.length>=this.selectLength)
            this.show();
        else
            this.hide();
            
    }
    this.pagesize=100;
    this.selectLength=1;
    this.init=function()
    {
        var html=[];
        if (this.config.beforeText)
        {
            html.push(this.config.beforeText);
        }
        html.push("<input id=\"" + this.id + "\" type=\"textbox\" />");
        html.push("<div id=\"" + this.placeholder + "Inner\" style=\"position:absolute;background:#fff;border:1px solid black;z-index:22;height:13em;overflow-y:scroll;\"></div>");
        document.getElementById(this.placeholder).innerHTML=html.join("");   
        
        this.hide();
        var context=this;
        var timer = false;
        $(document.body).click(
        function() {
              context.hide();
            }
         );
        $("#" + this.id)
        .focus(
        function() {
            context.hideother();
            context.query(document.getElementById(context.id).value);
        })
        .keyup( function(e) {
          // Prevent lots of calls if it's a fast typer
          if(timer !== false) {
            clearTimeout(timer);
            timer = false;
          };
          timer = setTimeout(
            function() {
              context.query(context.inputValue());
            },
            200
          );
        })
        .keydown(
        // Capture key events so the user can navigate through the list
        function(e) {
          switch(e.keyCode) {
            // Down
            /*    case 40:
             if(!context.listIsVisible()) {
                context.showList();
                context.highlightSelected();
              } else {
                e.preventDefault();
                context.selectNewListItem('down');
              };
              break;
            // Up
            case 38:
              e.preventDefault();
              context.selectNewListItem('up');
              break;
              */
            // Tab
            case 9:
              context.hide();
              break;
            // Esc
            case 27:
              context.hide();
              break;
            // Enter, prevent form submission
            case 13:
              e.preventDefault();
              context.selectCurrentValue();
          };
        })
        .click(function(e){e.stopPropagation();});
        $("#" + this.placeholder + "Inner").click(function(e){e.stopPropagation();});
    }
    
    this.show=function()
    {
        $("#" + this.placeholder + "Inner").css("display","");
    }
    this.getPage=function(page)
    {
        var html=[];
        var queryresult=this.queryresult;
        if(queryresult.length==0 )
        {
            return (this.queryvalue) ? "niets gevonden": "";
        }
    	html.push("<table><tr>")
	    for (var i in this.fields)
	    {
	        html.push("<th>"+this.fields[i]+"</th>");	    
	    }
	    html.push("</tr>");
	    
	    for (var i=page*this.pagesize;i<(page+1)*this.pagesize && i<this.queryresult.length;i++)
	    {
	        n=queryresult[i].name.split('\t');
	        if(queryresult[i].id == this.value)
	        {
	            html.push("<tr class=\"value active select\"  value=\""+queryresult[i].id+"\">");
	        } else
	        html.push("<tr value=\""+queryresult[i].id+"\">");
	        for (var j=0;j<n.length;j++)
	        {
	            html.push("<td>"+htmlEncode(n[j])+"</td>");
	        }
	        html.push("</tr>");
	    }
	    html.push("</table>");
	    html.push("gevonden " + queryresult.length);
	    return html.join("")+"";
    }
this.inputValue=function()
{          
    return document.getElementById(this.id).value;
}

this.selectCurrentValue=function()
{   
    var val = $("#" + this.placeholder + "Inner tr.select").attr("value");
    if(val) 
    {
        this.selectValue(val);
        return;
    }
    if(this.queryresult && this.queryresult.length >0)
    {
        this.selectValue(this.queryresult[0].id);
    }
    
    
}
this.selectValue=function(value)
{
    this.value = value;
    var ob=this.indexedValues[value];
    var result=[];
	result.push(this.indexedValues[value]);
	this.queryresult=result;
    this.renderPage(0,true);
    document.getElementById(this.id).value = ob.name.split('\t')[0];
    this.hide();
};

    
this.clear=function()
{
    this.queryresult=[];
}

this.renderPage = function(page)
{
	html=[];
	var queryresult=this.queryresult;
	html.push(this.getPage(page));
	$("#" + this.placeholder + "Inner td").unbind("click");
	$("#" + this.placeholder + "Inner tr").unbind("mouseover");
    document.getElementById(this.placeholder+"Inner").innerHTML=html.join("");	   
    var context = this;
    $("#" + this.placeholder + "Inner tr:gt(0)").mouseover(
        function(){
            $("#" + context.placeholder + "Inner tr.select").removeClass("select")
            $(this).addClass("select")
            }
    ).bind("click",function(e)
    {
        context.selectCurrentValue() 
    });   
    
}
this.hide = function()
{
    $("#" + this.placeholder+"Inner").css("display","none");
    
}

this.hideother = function()
{
    for(var i in itemDropDown)
    {
        if(itemDropDown[i].placeholder != this.placeholder)
        {
            itemDropDown[i].hide();
        }
    }
    return this;
}
}

function htmlEncode(s)
{
    s=String(s || "")
    var lookup=htmlEncode.lookup;
    if (!lookup)  
    {
        lookup=htmlEncode.lookup={"<":"&lt;",">":"&gt;","&":"&amp;"}
    }
    return s.replace(/[<>&]/ig,function($1)
    {
        return lookup[$1];
    });
}