function buildModellCriteriaPanel(modcrit, fn) {
    var onChangeHandler = function() { }; // erst mal nichts machen, wird nach dem Setup auf fn gesetzt!

    var onChangeFn = function() {
        onChangeHandler();
    };

    var onStartFn = function() {
        if (state.ansicht == 'liste' || state.ansicht == 'modell')
            showWaitDiv();
    };

    var onStopFn = function() {
        if (state.ansicht == 'liste' || state.ansicht == 'modell')
            hideWaitDiv();
    };

    var onSlideFn = function() {
        if (state.ansicht == 'bild')
            onChangeHandler();
    };

    for (var i in modcrit) {
        var crit = modcrit[i];

        switch (crit.type) {
        	case 'select':
				generateSelect(crit);
				break;
            case 'slider':
            	// spezielle Handhabung fuer Radio-Button zum Umschalten der Slider
            	if (crit.name == 'imokw') {
            		for (var j in modcrit) {
            			if (modcrit[j].name == 'imops') {
            				var crit_ps = modcrit[j];
            				break;
            			}
            		}
            		generateSlider(crit, onStartFn, onStopFn, onChangeFn, onSlideFn, crit_ps);
            		break;
            	}
            	else {
                	generateSlider(crit, onStartFn, onStopFn, onChangeFn, onSlideFn);
                	break;
            	}
            case 'checkbox':
                generateCheckbox(crit);
                break;
            case 'filter':
                generateFilter(crit);
                break;
        }
    }
	
	$('#id_slider_imokw').parent().hide();
	$('#id_slider_imokw').parent().next().hide();
	$('#id_slider_imokw').parent().next().next().hide();
	
	$("input[name='LEISTUNG']").click (function () {
		changeMultiSlider(this);
	});
	
    $('#criteria .criteria-input input').click(fn);
    $('#criteria .criteria-input label').click(fn);
    // DropDown Change Event anhaengen
    $('#criteria .criteria-input select').change(fn);
    onChangeHandler = fn;
  
    if (fabrikat == 'L')
    {	
    	fixLNFcriteria();
    }
}

// generiert ids fuer automatisch erzeugte Tags
var autoIdCnt = 1;
function Id() {
	return 'auto_id_' + autoIdCnt++;
}
function reinitialiseId() {
	autoIdCnt = 1;
}

// in dieser Liste werden die sliderDataObject-Objekte gemerkt (vereinfacht das Auslesen)
var sliders = new Object();
// in dieser Liste werden die checkbox-Objekte gemerkt (vereinfacht das Auslesen)
var checkboxes = [];
// in dieser Liste werden die dropdown-Objekte gemerkt (vereinfacht das Auslesen)
var dropdowns = [];

function generateSelect(crit) {
	var html = '<div class="criteria-input" id="crit_' + crit.name + '"><select id="' + crit.name + '" name="' + crit.name +  '" size="1" style="width:100%;">';
	html += '<option selected value="nothing">' + crit.title  + '</option>';
	var values = [];
	for (var j in crit.options) {
		html += '<option value="' + crit.options[j].value + '">' + crit.options[j].content  + '</option>';
		values.push({option: crit.options[j].value, content: crit.options[j].content});
	}
	dropdowns.push({ critName: crit.name, value:  values});
	html += '</select></div>';
	
	$('#criteria').append(html);
}

function generateSlider(crit, onStartFn, onStopFn, onChangeFn, onSlideFn, crit_ps) {
    var html = '';
    if (crit.name == 'imokw') {
	    // Umschalt-Radio Button fuer Leistung erstellen
	    html = '<div class="criteria-input criteria-input-with-sliders" id="crit_' + crit.name + '">';
	    html += '<div id="text_leistung">' + ml.cc3AltLeistung + '</div>';
	    html += '<div id="radio_leistung"><input type="radio" id="imops" name="LEISTUNG" value="imops" checked="checked"><label id="lbl_' + crit_ps.name + '" for="imops">' + crit_ps.title + '</label>';
	    html += '<input type="radio" id="imokw" name="LEISTUNG" value="imokw"><label id="lbl_' + crit.name + '" for="imokw">' + crit.title + '</label></div>';
	    html += '<div class="placeholder_slider">';
	    html += '<div id="id_slider_' + crit.name + '" class="ui-slider ui-slider-3">';
	    html += '<div id="' + crit.name + '_handle1" class="ui-slider-handle ui-slider-handle1"><img class="handle1" src="' + svc.stat_images + 'handle-left.gif"/></div>';
	    html += '<div id="' + crit.name + '_handle2" class="ui-slider-handle ui-slider-handle2"><img class="handle2" src="' + svc.stat_images + 'handle-right.gif"/></div>';
	    html += '</div>';
	    html += '</div><div class="min-value-display">' + crit.fmtString.replace("%%", numberToLocaleString(crit.minValue)) + '</div>';
	    html += '<div class="max-value-display">' + crit.fmtString.replace("%%", numberToLocaleString(crit.maxValue)) + '</div>';
	    
	    html += '<div class="placeholder_slider">';
	    html += '<div id="id_slider_' + crit_ps.name + '" class="ui-slider ui-slider-3">';
	    html += '<div id="' + crit_ps.name + '_handle1" class="ui-slider-handle ui-slider-handle1"><img class="handle1" src="' + svc.stat_images + 'handle-left.gif"/></div>';
	    html += '<div id="' + crit_ps.name + '_handle2" class="ui-slider-handle ui-slider-handle2"><img class="handle2" src="' + svc.stat_images + 'handle-right.gif"/></div>';
	    html += '</div>';
	    html += '</div><div class="min-value-display">' + crit_ps.fmtString.replace("%%", numberToLocaleString(crit_ps.minValue)) + '</div>';
	    html += '<div class="max-value-display">' + crit_ps.fmtString.replace("%%", numberToLocaleString(crit_ps.maxValue)) + '</div>&nbsp;</div>';
    }
    else if (crit.name == 'imops') {
    	null;
    }
    else {
	    html += '<div class="criteria-input criteria-input-with-sliders" id="crit_' + crit.name + '">';
	    html += '<span>' + crit.title + '</span>';
	    html += '<div class="placeholder_slider">';
	    html += '<div id="id_slider_' + crit.name + '" class="ui-slider ui-slider-3">';
	    html += '<div id="' + crit.name + '_handle1" class="ui-slider-handle ui-slider-handle1"><img class="handle1" src="' + svc.stat_images + 'handle-left.gif"/></div>';
	    html += '<div id="' + crit.name + '_handle2" class="ui-slider-handle ui-slider-handle2"><img class="handle2" src="' + svc.stat_images + 'handle-right.gif"/></div>';
	    html += '</div>';
	    html += '</div><div class="min-value-display">' + crit.fmtString.replace("%%", numberToLocaleString(crit.minValue)) + '</div>';
	    html += '<div class="max-value-display">' + crit.fmtString.replace("%%", numberToLocaleString(crit.maxValue)) + '</div>&nbsp;</div>';
    }
    
    $('#criteria').append(html);
    
    var dataObject = {
        name: crit.name,
        step: crit.stepping,
        minValue: crit.minValue, 
        maxValue: crit.maxValue,
        selector: '#id_slider_' + crit.name,
        fmtString: crit.fmtString,
        prec: (crit.stepping < 1) ? 1 : 0
    };  
    
    sliders[crit.name] = dataObject;
   
    $(dataObject.selector).slider({
        min: crit.minValue,
        max: crit.maxValue-crit.stepping,
        values: [crit.minValue, crit.maxValue-crit.stepping],
        step: crit.stepping,        
        range: true,
        slide: function(e, ui) {    		 		
    		var index = $(ui.handle).hasClass('ui-slider-handle1') ? 0 : 1; 
    		updateSliderText(index, dataObject, ui.value);  
            onSlideFn();            
        },
        start: onStartFn,
        stop: onStopFn,
        change: onChangeFn
    });

}

function fixLNFcriteria() {
	$('div.criteria-input select').each(function() {$(this).parent().css('margin-bottom', '0px').css('padding', '1px 10px');});
	if (!browser_ie6 && !app.isGA)	// IE6: background-width is too small if the padding is set to 0px below
	{	$('.auto_id_5').parent().css('padding-right', '0px');
	}
	
	// "Allrad" ganz links anzeigen
	$('.auto_id_6').parent().prepend($('.auto_id_6'));
}

function generateCheckbox(crit) {
    // Spezielle Sortierung der Checkboxes linke Spalte <-> rechte Spalte
    // wegen Layout-Problemen bei langen Bezeichnern
    //   -> nur bei Audi oder in Ungarn
    //   -> nur 2-Spalten Eintraege
    //   -> nur Getriebe und Antrieb (nicht aber z.B. Tueren)
    // Das heisst:
    //   - 'Schaltgetriebe' immer links ('Automatik' immer rechts)
    //   - 'Frontantrieb' immer links ('Allrad' immer rechts)
    var twoColumnSort = crit.options.length == 2  
                     && (crit.name == 'imogetkz' || crit.name == 'imoantrb')
                     && (style.isAudi || country == 'hu');
    var twoColumnSortFixClasses = false;
    var boxes = [];

    var html = '<div class="criteria-input" id="crit_' + crit.name + '">';
    
    for (var j in crit.options) {
        var id = Id();
        var checkboxHtml = '<span class="criteria-fixwidth ' + id + '"><input class="criteria-checkbox" id="' + id + '" type="checkbox" name="' + crit.name + '" value="' + crit.options[j].value + '"';
        if (crit.options[j].checked)
        {    checkboxHtml += ' checked="checked"';
        }
        checkboxHtml += ' /><label for="' + id + '">' + crit.options[j].title + '</label></span>';
        checkboxes.push({ critName: crit.name, value: crit.options[j].value });
        boxes.push({ id: id, title: crit.options[j].title, html: checkboxHtml });
    }
    
    if (twoColumnSort  &&  boxes[1].title.length > boxes[0].title.length)
    {	// spezielle Sortierung fuer manche 2-Spalten-Eintraege
    	html += boxes[1].html;
    	html += boxes[0].html;
    	twoColumnSortFixClasses = true;
    }
    else
    {	// keine Umsortierung notwendig / gewuenscht - einfach dranhaengen!
    	for (var j in boxes) {
    		html += boxes[j].html;
    	}
    }
    html += '&nbsp;</div>';
    $('#criteria').append(html);
    
    if (twoColumnSortFixClasses) {
    	// Klassen beim <span> tauschen, z.B.:  'auto_id_3'  <-->  'auto_id_4'
    	var $_leftEl = $("#" + boxes[1].id).parent();
    	$_leftEl.removeClass(boxes[1].id).addClass(boxes[0].id);
    	var $_rightEl = $("#" + boxes[0].id).parent();
    	$_rightEl.removeClass(boxes[0].id).addClass(boxes[1].id);
    }
}

function generateFilter(crit) {
    var html = '<div class="criteria-input" id="crit_' + crit.name + '">';
    var id = Id();
    html += '<span class="criteria-fixwidth-big ' + id + '"><input id="' + id + '" class="criteria-boolean" type="checkbox" name="' + crit.name + '" value="' + crit.value + '"';
    if (crit.checked)
    {	html += ' checked="checked"';
    }
    html += ' /><label for="' + id + '">' + crit.title + '</label></span>';
    html += '&nbsp;</div>';

    $('#criteria').append(html);
}


// Eintraege herausnehmen die bei der Modellgruppe nicht zur Verfuegung stehen
function updateDropDown(modellgruppe)
{
	for (var k = 0; k < dropdowns.length; k++) {
		var actName = dropdowns[k].critName;
		var choose = '.criteria-input > select[name=' + actName + ']';
		
		// alle Optionen entfernen und vorher erstes speichern
		var text = $(choose)[0].options[0].text;
		// selected option speichern
		var selected_one = $(choose).selectedValues();
		$(choose).html('');
		var values = dropdowns[k].value;
		
		// erstes wieder ergaenzen
		$(choose).addOption('nothing',text);
		// einzelne Optionen die zur Modellgruppe gehoeren ergaenzen
		for (var x = 0; x < values.length; x++) {
			for (var t = 0; t < modellgruppe[actName].length; t++) {
				if (modellgruppe[actName][t] == values[x].option) {
					$(choose).addOption(values[x].option,values[x].content,false);
				}
			}
		}
		// selected option wieder auswaehlen
		$(choose).selectOptions(selected_one, true);
	}
}

// Checkboxen deaktivieren, die bei der Modellgruppe nicht vorhanden sind
function updateCheckboxes(modellgruppe) {
    $('.criteria-input > span > input[type=checkbox]').attr('disabled', 'disabled');
    $('.criteria-input > span > input[type=checkbox]').next().addClass('disabled-label');

    for (var k = 0; k < checkboxes.length; k++) {
        var actName = checkboxes[k].critName;
        var choose = '.criteria-input > span > input[name=' + actName + '][value=' + checkboxes[k].value + ']';
        for (var t = 0; t < modellgruppe[actName].length; t++) {
            if (modellgruppe[actName][t] == checkboxes[k].value) {
                $(choose).removeAttr('disabled');
                $(choose).next().removeClass('disabled-label');
            }
        }
    }
    if (modellgruppe.imovsab) {
	    for (var t = 0; t < modellgruppe.imovsab.length; t++) {
			if (modellgruppe.imovsab[t] == true) {
				var choose = ".criteria-input > span > input[name=imovsab]";
	    		$(choose).removeAttr('disabled');
	    		$(choose).next().removeClass('disabled-label');
			}
	    }
	}
}

// Checkboxen unchecken
function resetCheckboxes() {
    $('.criteria-input > span > input[type=checkbox]').attr('checked', '');
}

// liest die Kriterien aus und liefert diese in einem Objekt zurueck
function extractModellCriteria() {
    var crit = {};

    for (var critName in sliders) {
    	var dataObject = sliders[critName];
    	var elm = $(dataObject.selector);
        crit[dataObject.name] = { type: "slider", value: [elm.slider('values', 0), elm.slider('values', 1) + dataObject.step]};        
    }

    $('#criteria div.criteria-input').each(function(i, n) {
        $(n).children('span').children('input[type=checkbox]').each(function(i, n) {
            if ($(n).hasClass("criteria-boolean")) {
                if (n.checked) {
                    crit[n.name] = { type: "filter", value: true };
                }
                else {
                    crit[n.name] = { type: "filter", value: false };
                }
            }
            else {
                if (crit[n.name]) {
                    if (n.checked) {
                        crit[n.name].value.push(n.value);
                    }
                }
                else {
                    if (n.checked) {
                        crit[n.name] = { type: "checkbox", value: [n.value] };
                    }
                    else {
                        crit[n.name] = { type: "checkbox", value: [] };
                    }
                }
            }
        });

        $(n).children('div').children('input[type=checkbox]').each(function(i, n) {
            if ($(n).hasClass("boolean")) {
                if (n.checked) {
                    crit[n.name] = { type: "filter", value: true };
                }
                else {
                    crit[n.name] = { type: "filter", value: false };
                }
            }
            else {
                if (crit[n.name]) {
                    if (n.checked) {
                        crit[n.name].value.push(n.value);
                    }
                }
                else {
                    if (n.checked) {
                        crit[n.name] = { type: "checkbox", value: [n.value] };
                    }
                    else {
                        crit[n.name] = { type: "checkbox", value: [] };
                    }
                }
            }
        });
		$(n).children('select').each(function(i, n) {
			crit[n.name] = { type: "select", value: n.value };
        });
    });
    return crit;
}

function updateSliderText(index, dataObject, value, highlight)
{
	var elm = (index == 0) ? $(dataObject.selector).parent().next() : $(dataObject.selector).parent().next().next();
	var highlight = $(dataObject.selector).slider('option', (index == 0) ? 'min' : 'max') != value;
	if(index == 1)
		value += dataObject.step;
    elm.html(dataObject.fmtString.replace("%%", numberToLocaleString(value, dataObject.prec)));    
	elm.toggleClass('active-value', highlight);
}

//Slider nach Auswahl der Modellgruppe aktualisieren (min, max und aktuelle Werte)
function sliderReconfigure(sliderOptions) {
    for (var j in sliderOptions) {
        var options = sliderOptions[j];

		if (options.minValue != options.maxValue)
		{
			var dataObject = sliders[options.name];
			dataObject.minValue = options.minValue;
			dataObject.maxValue = options.maxValue;
			dataObject.step = options.step;
			dataObject.prec = (options.step < 1) ? 1 : 0;
			
			var elm = $(dataObject.selector);	
			var minValue = options.minValue;
			var maxValue = options.maxValue - options.step;
			var value0 = options.min;
			var value1 = options.max - options.step;
			
			elm.slider('option', 'step', options.step);
			
			elm.slider('option', 'min', minValue);
			elm.slider('option', 'max', maxValue);
			elm.slider("values", 0, value0);
			elm.slider("values", 1, value1);
	        
	        updateSliderText(0, dataObject, value0);
	        updateSliderText(1, dataObject, value1);
		}
    }
}

function changeMultiSlider(element)
{
	var sliderName = element.value;
	
	// alle Slider-Elemente ausblenden
	var slider_elm = $('#id_slider_imokw').parent();
	slider_elm.hide();
	slider_elm.next().hide();
	slider_elm.next().next().hide();
	slider_elm = $('#id_slider_imops').parent();
	slider_elm.hide();
	slider_elm.next().hide();
	slider_elm.next().next().hide();
	// benoetigte Slider-Elemente wieder einblenden
	slider_elm = $('#id_slider_'+ sliderName).parent();
	slider_elm.show();
	slider_elm.next().show();
	slider_elm.next().next().show();
	
   	if (sliderName == 'imokw') {
		// ps in kw umrechnen und aktualisieren des kW-Slider
   		var kw0 = PS2KW($('#id_slider_imops').slider("values", 0));
   		var kw1 = PS2KW($('#id_slider_imops').slider("values", 1));
   		$('#id_slider_imokw').slider("values", 0, kw0);
   		$('#id_slider_imokw').slider("values", 1, kw1);
   		
   		var dataObject = sliders[sliderName];
   		updateSliderText(0, dataObject, kw0);
   		updateSliderText(1, dataObject, kw1);
	}
	else if (sliderName == 'imops') {
		// kw in ps umrechnen und aktualisieren des PS-Slider 
		var ps0 = KW2PS($('#id_slider_imokw').slider("values", 0));
		var ps1 = KW2PS($('#id_slider_imokw').slider("values", 1));
   		$('#id_slider_imops').slider("values", 0, ps0);
   		$('#id_slider_imops').slider("values", 1, ps1);
   		
   		var dataObject = sliders[sliderName];
   		updateSliderText(0, dataObject, ps0);
   		updateSliderText(1, dataObject, ps1);
	}
}

function PS2KW(ps){ return Math.round(ps * 0.735499 / 10) * 10; }
function KW2PS(kw){ return Math.round(kw / 0.735499 / 10) * 10; }