var filterHtml;
var optionList = {};
var target = {};

function select2autocomplete(id)
{
    var element = $('select[id="'+id+'"]');
    if (element.length != 0) {
        var data = [];
        element.find('>option').each(function(i, option) {
            if (option.value != 0 && option.value != -1) {
                data.push(option.text);
                optionList[option.text] = option.value;
            } 
        });
        var autcompleteInput = '<input type="text" class="text" value="" id="'+element.attr('id')+'" name="'+element.attr('name')+'"'+(element.attr('disabled')?' disabled="disabled"':'')+' />';
        
        element.replaceWith(autcompleteInput);
        $('input[id="'+id+'"]').autocomplete(data, {
            'autoFill': true,
            'selectFirst': false
        });
    }
} //function select2autocomplete

function rebuildButton(filter, idButton, idSource, idTarget)
{
    var buttonElement = $('input[id="'+idButton+'"]');
    if (filter == 'cities') {
        var sourceElement = $('input[id="'+idSource+'"]');
    } else if (filter == 'maingroups') {
        var sourceElement = $('select[id="'+idSource+'"]');
    }
    var targetElement = $('input[id="'+idTarget+'"]');
    var filterElement = $('div#'+filter+'holder');
    
    if (buttonElement.length != 0 
        && sourceElement.length != 0 
        && targetElement.length != 0 
        && filterElement.length != 0
    ) {
        //Reset filter and fill target array
        targetElement.attr('value', '-');
        filterElement.find('div')
            .click(function(e) {
                removeFilter(e, this)
            })
            .each( function(i, filter) {
                var id = $(filter).attr('id').split('_');
                id = id.pop();
                var tmp = targetElement.attr('value');
                targetElement.attr('value', tmp+'|'+id);
            });
        target[filter] = targetElement;
        
        //Set filter button click
        buttonElement.click(function (e) {
            //disable href value 
            e.preventDefault();
            
            //Get filterName and Id
            if (filter == 'cities') {
                var filterName = sourceElement.attr('value');
                var filterId = optionList[filterName];
            } else if (filter == 'maingroups') {
                var filterName = sourceElement.find('>option:selected').text();
                var filterId = sourceElement.find('>option:selected').attr('value');
            }
            
            //Set filter if filter was found
            var tmp = $('div[id="'+filter+'_'+filterId+'"]');
            if (filterId != undefined 
                && tmp.length == 0
            ) {
                if (filter == 'maingroups' && filterId == 0) {
                    //all maingroups, reset filter
                    filterElement.find('div.selected').remove();
                    targetElement.attr('value', '');
                    sourceElement.find('>option[value="-1"]').remove();
                } else {
                    //Add id to hidden inputfield
                    tmp = targetElement.attr('value');
                    targetElement.attr('value', tmp+'|'+filterId);
                    
                    //Show filter
                    var newFilter = filterHtml;
                    newFilter = newFilter.replace('-FILTER-', filter);
                    newFilter = newFilter.replace('-ID-', filterId);
                    newFilter = newFilter.replace('-NAME-', filterName);
                    filterElement.append(newFilter);
                    $('div[id="'+filter+'_'+filterId+'"]').click(function(e) {removeFilter(e, this)});
                    //Disable source if max elements selected
                    if (filterElement.find('div').size() == 3) {
                        sourceElement.attr('disabled', 'disabled');
                    } 
                    //reset sourcefield
                    if (filter == 'cities') {
                        sourceElement.blur();
                        sourceElement.attr('value', '');
                        sourceElement.focus();
                    } else if (filter == 'maingroups'
                        && sourceElement.find('>option:first').attr('value') != -1
                    ) {
                        var newSource = '<option value="-1">-- Kies actiepunt --</option>'+sourceElement.html();
                        sourceElement.html(newSource);
                    } else if (filter == 'maingroups') {
                        sourceElement.find('>option:selected').removeAttr('selected');
                    }
                }
            } else if (tmp.length != 0) {
                //foutmelding al toegevoegd
            } else if (filterId == undefined) {
                //foutmelding filter niet gevonden
            } 
        });
        sourceElement.keyup(function(e) {
            $(this).parents('form:first').bind("keypress", function(e) {
                if (e.keyCode == 13) {
                    return false;
                }
            });
            if(e.keyCode == 13) {
                e.preventDefault();
                buttonElement.trigger('click');
            }
        });
    }    
} //function rebuildButton

function removeFilter(e, element)
{
    //disable href value 
    e.preventDefault();
    
    //Remove value from hidden target field
    var id = $(element).attr('id').split('_');
    var filter = id.shift();
    id = id.pop();
    
    target[filter].attr('value', target[filter].attr('value').replace('|'+id, ''));

    //Delete last filter, remove first select from maingroups
    if ($(element).parent().find('div').size() == 1) {
        $(element).parent().find('select').find('>option[value="-1"]').remove();
    }
    
    //Remove element from filter and enable filterfield
    $(element).parent().find('input.text').removeAttr('disabled')
    $(element).parent().find('select').removeAttr('disabled');
    $(element).remove();
} //function removeFilter