window.addEvent('domready', function(){
 
	//////////////////////////////////////////////////////////////////////////////////////////////////
	// AutoCpl Class																				//
	//	Felix Kosmalla - kosmalla@raum3.de		           											//
	// 																								//	
	// Eine Autocompleter Klasse für Mootools														//
	// Zeigt nach Eingabe einer Zeichenkette eine Liste mit Einträgen an                            //
	// Es wird ein JSON Objekt zurück gegeben                                                       //
	//                                                                                              //
	// Parameter:                                                                                   //
	// inputField		Eingabefeld (als Objekt)                                                    //
	// lstClass			Styleklasse für die Liste mit Einträgen                                     //
	// url				URL für die Rückgabe                                                        //
	// autoCplForm		Formular in dem sich das Eingabefeld befindet (als Objekt)                  //
	// options			Optionen                                                                    //
	//                                                                                              //
	//                                                                                              //
	// Optionen:                                                                                    //
	// requestDelay		Verzögerung bis zur Anfrage (in Millisekunden, INT) Standard ist 1000       //
	// opacity			Transparenz der Liste (0-1, STR) Standard ist 0.8                           //
	// zIndex			z-index der Liste, Standard ist 100                                         //
	// duration			Effektdauer, (in Millisekunden, INT) Standard ist 1000                      //
	// minLength		Mindestzeichenanzahl bis zur Anfrage (INT), Standard ist 3					//
	// onQueryStart		Funktion, die beim Starten der Anfrage ausgeführt wird                      //
	// onQueryComplete	Funktion, die beim Beenden der Anfrage ausgeführt wird                      //
	//																								//
	// Funktionen: 																					//
	// hideAutoCplLst	Versteckt die Liste															//
	//																								//
	//////////////////////////////////////////////////////////////////////////////////////////////////
	
 	AutoCpl = new Class({
		initialize:function(inputField,lstClass,url,autoCplForm,options){
			this.inputField=inputField;			
			this.url=url;
			this.autoCplForm=autoCplForm;
			this.lstClass=lstClass;
			
			this.opacity=0.8;
			this.delay=1000;
			this.zIndex=100;
			this.duration=1000;
			this.minLength=3;
			this.onQueryStart=function(){};
			this.onQueryComplete=function(){};
			
			if($defined(options.opacity)){
				this.opacity=options.opacity;
			}
			
			if($defined(options.delay)){
				this.delay=options.delay;
			}
			
			if($defined(options.zIndex)){
				this.zIndex=options.zIndex;
			}
			
			if($defined(options.duration)){
				this.duration=options.duration;
			}		
			
			if($defined(options.onQueryStart)){
				this.onQueryStart=options.onQueryStart;
			}

			if($defined(options.onQueryStart)){
				this.onQueryStart=options.onQueryStart;
			}
		
			if($defined(options.onQueryComplete)){
				this.onQueryComplete=options.onQueryComplete;
			}

			if($defined(options.minLength)){
				this.minLength=options.minLength;
			}
			
			//Hängt die Ergebnisliste an das Ende des Dokuments
			this.resultLst=new Element('div',{'class':lstClass, 'id':inputField.getProperty('id')+'_lst'});

			this.resultLst.injectInside(document.body);			
			this.Animation=new Fx.Style(this.resultLst,'opacity',{wait:false,duration:this.duration});
			this.Animation.set(0);			
			this.setDimensions();
			this.setBinds();
		},
		
		
		//Setzt Breite und Position der Ergebnisliste abhängig von 'inputField
		setDimensions:function(){
			var inputFieldDimensions=this.inputField.getCoordinates();
			var LstWidth=inputFieldDimensions.width;
			var LstTop=inputFieldDimensions.top+inputFieldDimensions.height;
			var LstLeft=inputFieldDimensions.left;
			this.resultLst.setStyles({
				top: LstTop, 
				left:LstLeft, 
				position:'absolute'
				});
			this.resultLst.setStyle('z-index',this.zIndex);
		},
		
		
		//Führt Delay ein
		initQuery:function(){
			if ($type(this.delayQuery)==false){
				this.delayQuery=this.sendQuery.delay(this.delay,this);
			}else{
				$clear(this.delayQuery);
				this.delayQuery=this.sendQuery.delay(this.delay,this);
			}
			
		},		
		
		
		//Sendet Ajax Query
		sendQuery:function(){
			this.onQueryStart();
			this.hideAutoCplLst();
			var AjaxRequest = new Ajax(this.url, {
					method: 'post',
					data:this.autoCplForm, 
					onSuccess:function(response){this.handleRequest(response); this.onQueryComplete();}.bind(this)
				});
			AjaxRequest.request();
		},
		
		//Zeigt AutoCplLst
		showAutoCplLst:function(){
			this.Animation.start(this.opacity);
		},
		
		//Versteckt AutoCplLst
		hideAutoCplLst:function(){
			this.Animation.start(0);
		},
		
		

		
		//Verarbeitet Antwort von Ajax Request
		handleRequest:function(response){
			// console.log(response);
			this.setDimensions();
			this.responseObject=Json.evaluate(response);
			// console.log('this.responseObject',this.responseObject);
			this.resultLst.empty();
			
			/////////////////////////////////////////////////////////////////////////////////Ab hier muss angepasst werden ;-)
			
			
		
			var tmpResultLst=this.resultLst;
			
			
			
			this.responseObject.searchResults.each(function(cat){
				var name=cat.cat.name;
				var category=new Element('div',{'class':'category_title'});
				category.injectInside(tmpResultLst);
				category.setHTML(name);
				
				cat.cat.items.each(function(produkt){
						var image=produkt.image;
						var type=produkt.type;
						var pn=produkt.pn;
						var desc=produkt.desc;
						
						var link= new Element('a',{'href':produkt.link});
						link.injectInside(tmpResultLst);
						
						
						var produkt_div=new Element('div',{'class':'produkt'});
						produkt_div.injectInside(link);
						
						
						
						
						produkt_div.addEvent('mouseenter',function(){
							produkt_div.addClass('highlite');							
						});
						
						produkt_div.addEvent('mouseleave',function(){
							produkt_div.removeClass('highlite');							
						});
						
						
							var image=new Element('img',{'class':'produkt_image','src':image,'border':0});
							image.injectInside(produkt_div);
							
							var produkt_details=new Element('div',{'class':'produkt_details'});
							produkt_details.injectInside(produkt_div);
							
							var produkt_pn=new Element('div',{'class':'produkt_pn'});
							produkt_pn.injectInside(produkt_details);
							produkt_pn.setHTML('PN: '+pn);
							
							var produkt_type=new Element('div',{'class':'produkt_type'});
							produkt_type.injectInside(produkt_details);
							produkt_type.setHTML('Typ: '+type);
							
							
							var produkt_desc=new Element('div',{'class':'produkt_desc'});
							produkt_desc.injectInside(produkt_details);
							produkt_desc.setHTML(desc);							
							
							

							
							var clear_div=new Element('div',{'class':'clear'});
							clear_div.injectInside(produkt_div);
										
				});

			});
			if(this.responseObject.searchResults.length==0){			
				var no_results= new Element('div',{'class':'no_results'});
				no_results.injectInside(tmpResultLst);
				no_results.setHTML(this.responseObject.responseString+"<br/><br/><b><a href='index.php?id=11&user_search="+this.inputField.value+"'>"+this.responseObject.responseString2+"</a></b>");
			}else{
				var no_results= new Element('div',{'class':'no_results'});
				no_results.injectInside(tmpResultLst);
				no_results.setHTML('<b><a href="index.php?id=11&user_search='+this.inputField.value+'">'+this.responseObject.responseString+'</a></b>');	

			}
			
			///////////////////////////////////////////////
			this.showAutoCplLst();
			
		},
		
		
		//Setzt Binds
		setBinds:function(){
				function fc_sendQuery(key){
					if(((key.keyCode>=65 && key.keyCode<=90)||(key.keyCode>=48 && key.keyCode<=57)||(key.keyCode==8)) && this.inputField.value!='' && this.inputField.value.length >=this.minLength){
						this.initQuery();
					}
					if(this.inputField.value==''){
						this.hideAutoCplLst();
					}
				}
				this.inputField.onkeyup= fc_sendQuery.bindAsEventListener(this);	
				
				
					var tempAutoCpl=this;

					function hideIt(){
						this.hideAutoCplLst();
					}

						$E('body').onclick=hideIt.bindAsEventListener(this);
						
		}
		
	});
	



	
	
});