Ext.onReady(function(){
	Ext.QuickTips.init();
    var search_div = Ext.get('search_container');
	if (search_div) {
		if (Ext.isDefined(search_values.c_init)) {
			if (Ext.isDefined(search_values.root)) {
				var exp = new RegExp(search_values.root+"-;*");
				search_values.c_init = search_values.c_init.replace(exp, "");		
			}
			search_values.c_init = search_values.c_init.replace(/;/g, ",");
			search_values.c_init = search_values.c_init.replace(/-/g, "");
		}
		
		this.getCParams = function(cb, delimiter) {
			var c = [];
			var snapshot;
			for (var i=0; i < cb.length; i++) {
				snapshot = cb[i].store.snapshot || cb[i].store.data;
				snapshot.each(function(r) {
					if(r.get(cb[i].checkField)) {
						c.push(r.get(cb[i].valueField) + '-');
					}
				}, this);
			}
			if (c.length) {
				return new Array(c.join(delimiter));
			} else {
				return new Array();
			}
		};
		
	    this.searchField = new Ext.ux.ClearableSearchField({
	    	fieldLabel: 'Ihr Suchbegriff',
	    	labelStyle: '',
	    	minChars: 2,
	        anchor: '80%',
	        hideLabel: false,
	        bodyStyle: 'padding-left: 5px;',
			value: (Ext.isDefined(search_values.text)? search_values.text : ''),
			scope: this,
			hideTrigger2: true,
			searchCallback: function(field, value) {
				//Themekreise und Fachrichtungen ermitteln
				var c = [];
				if (Ext.isDefined(search_values.root)) {
					c.push(search_values.root + '-');
				}
				
				c  = c.concat(this.getCParams([this.cbThema], ','));
				c  = c.concat(this.getCParams([this.cbZielgrp], ','));

				//Gegebenenfalls einen * an den Suchbegriff anhängen
				// if ((value.length > 0) && (!value.match(/.*\*$/))) {
				// 	value += "*";
				//}
				
				//Suchformular befüllen und abschicken
				document.forms['predictivesearch'].qu.value = value;
				document.forms['predictivesearch'].c.value = c.join(';');
				document.forms['predictivesearch'].submit();
			}
	    });
		
		this.cbZielgrp = new Ext.ux.form.LovCombo({
			fieldLabel: 'auf den Servern',
	    	labelStyle: '',
	        hideOnSelect:true,
			maxHeight:200,
			//listWidth: Ext.isIE?null:'auto',
			anchor: '99%',
			hideLabel: false,
			iValue: (Ext.isDefined(search_values.c_init)? search_values.c_init : ''),
	        store: new Ext.data.JsonStore({
	            url: '/cms/json/',
				baseParams: {
					key: 'server'
				},
				autoLoad: true,
	            fields: ['code', 'andruck', 'level', 'title'],
				listeners: {
					scope: this,
					load: function() {
						if (this.cbZielgrp.iValue) {
							this.cbZielgrp.setValue(this.cbZielgrp.iValue);
						}
					}
				}
	        }),
			name: 'cbZielgrp',
	        triggerAction:'all',
		    valueField:'code',
			mode: 'local',
			emptyText: 'Server',
	        displayField:'andruck',
			tpl: new Ext.XTemplate(
				'<tpl for=".">',
					'<div class="x-combo-list-item" style="padding-left: {level:this.getPadding}px;" ext:qtip="{title}">',
						'<div class="foobar"><img src="' + Ext.BLANK_IMAGE_URL + '" ',
							'class="ux-lovcombo-icon ux-lovcombo-icon-',
							'{[values.checked?"checked":"unchecked"' + ']}"></div>',
						'<div class="ux-lovcombo-item-text">{andruck}</div><div style="display: inline; clear:both; background-color: blue;"></div>',
					'</div>',
				'</tpl>', {
	            getPadding: function(value){
					var result = value * 20
					if (result === 0)
						result = 2;
	                return result;
	            }
	        })
	    });  
		
		this.cbThema = new Ext.ux.form.LovCombo({
			fieldLabel: 'zu diesen Themen',
	    	labelStyle: '',
	        hideOnSelect:true,
			maxHeight:200,
			anchor: '99%',
			hideLabel: false,
			iValue: (Ext.isDefined(search_values.c_init)? search_values.c_init : ''),
	        store: new Ext.data.JsonStore({
	            url: '/cms/json/',
				baseParams: {
					key: 'kategorien'
				},
				autoLoad: true,
	            fields: ['code', 'andruck', 'level', 'title'],
				listeners: {
					scope: this,
					load: function() {
						if (this.cbThema.iValue) {
							this.cbThema.setValue(this.cbThema.iValue);
						}
					}
				}
	        }),
	        triggerAction:'all',
		    valueField:'code',
			mode: 'local',
			emptyText: 'Themen',
	        displayField:'andruck',
			tpl: new Ext.XTemplate(
				'<tpl for=".">'
				+'<div class="x-combo-list-item" style="padding-left: {level:this.getPadding}px; font-size: {level:this.getFontSize};" ext:qtip="{title}">'
				+'<div class="foobar"><img src="' + Ext.BLANK_IMAGE_URL + '" '
				+'class="ux-lovcombo-icon ux-lovcombo-icon-'
				+'{[values.checked?"checked":"unchecked"' + ']}"/></div>'
				+'<div class="ux-lovcombo-item-text">{andruck}</div><div style="display: inline; clear:both; background-color: blue;"></div>'
				+'</div>'
				+'</tpl>', {
	            getPadding: function(value){
					var result = value * 20
					if (result === 0)
						result = 2;
	                return result;
	            },
	            getFontSize: function(value){
	            	if (value == '1') {
	            		return '11px';
	            	}
	            	return '12px';
	            }
	        })
	    });
		
	    
	    var searchPanel = new Ext.FormPanel({
			border: false,
			id: 'ext-search-form',
	        layout: 'column',
	        labelAlign: 'top',
	        items: [{
	            columnWidth: .3,
	            layout: 'form',
	            border: false,
	            items: [this.searchField]
	        }, {
	            columnWidth: .3,
	            layout: 'form',
	            border: false,
	            items: [this.cbZielgrp]
	        }, {
	            columnWidth: .3,
	            layout: 'form',
	            border: false,
	            items: [this.cbThema]
	        }, {
				columnWidth: .1,
				layout: 'form',
				border: false,
				style: 'padding-top: 18px; padding-left: 10px',
				items: [new Ext.Button({
					iconCls: 'IconSearch',
					scope: this,
					tooltip: 'Suche starten',
					handler: function() {
						this.searchField.onTrigger2Click();
					}
				})]
			}]
	    });
	    searchPanel.render(search_div);
	}
});