Ext.namespace("grafProducts");

grafProducts = {
	init: function(){
		
		
		
		var niederschlagsmengen = {
			"01":"630",
			"02":"650",
			"03":"560",
			"04":"560",
			"06":"510",
			"07":"770",
			"08":"1000",
			"09":"1000",
			"10":"550",
			"12":"590",
			"13":"550",
			"14":"540",
			"15":"530",
			"16":"470",
			"17":"550",
			"18":"660",
			"19":"650",
			"20":"800",
			"21":"770",
			"22":"740",
			"23":"660",
			"24":"820",
			"25":"1000",
			"26":"740",
			"27":"780",
			"28":"710",
			"29":"780",
			"30":"650",
			"31":"800",
			"32":"800",
			"33":"850",
			"34":"790",
			"35":"730",
			"36":"900",
			"37":"640",
			"38":"930",
			"39":"530",
			"40":"1100",
			"41":"800",
			"42":"1290",
			"44":"1000",
			"45":"880",
			"46":"1000",
			"47":"740",
			"48":"730",
			"49":"810",
			"50":"1250",
			"51":"1300",
			"52":"810",
			"53":"740",
			"54":"750",
			"55":"510",
			"56":"1130",
			"57":"1150",
			"58":"1220",
			"59":"1460",
			"60":"630",
			"61":"960",
			"63":"710",
			"64":"860",
			"65":"530",
			"66":"1250",
			"67":"650",
			"68":"640",
			"69":"770",
			"70":"680",
			"71":"1040",
			"72":"1590",
			"73":"940",
			"74":"790",
			"75":"790",
			"76":"740",
			"77":"1200",
			"78":"920",
			"79":"1020",
			"80":"1000",
			"81":"950",
			"82":"1200",
			"83":"1660",
			"84":"850",
			"85":"1000",
			"86":"1000",
			"87":"1300",
			"88":"1200",
			"89":"850",
			"90":"850",
			"91":"650",
			"92":"850",
			"93":"950",
			"94":"1250",
			"95":"1100",
			"96":"750",
			"97":"630",
			"98":"910",
			"99":"590"
		}
		
		var dachbeiwert = {
			"1":0.9,	// Ton/glasiert
			"2":0.8,	// Schiefer
			"3":0.8,	// Beton
			"4":0.95,	// Blech
			"5":0.4,	// Begrünt
			"6":0.6,	// Kiesschüttung
			"7":0.95,	// Kunststoff
			"8":0.95	// Bitumen
		}

// Produktberater einblenden
		Ext.get('pb_back').setStyle('display','block');

// Helfer	
		var setSelect = function(e,val) {
			for(i=0;i<document.getElementById(e).length;i++) {
				if(document.getElementById(e).options[i].value==val)	{
					document.getElementById(e).selectedIndex=i
				}
			}
		}		

// Cookie konfigurieren		
		Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
			//path: "/produktberater/",
			expires: new Date(new Date().getTime()+(1000*60*60*24*30)) //30 days
			//domain: "graf-online.info"
		}));
	
// Actions

		var tmpTarget;
		if (sys_language_uid == 0) tmpTarget = 148;
		if (sys_language_uid == 1) tmpTarget = 259;
		if (sys_language_uid == 2) tmpTarget = 589;
		if (sys_language_uid == 3) tmpTarget = 358;

	    // Data Store erzeugen
	    var produkteStore = new Ext.data.JsonStore({
	        root: 'contents',
	        totalProperty: 'totalCount',
	        idProperty: 'id',
	        //remoteSort: true,

	        fields: [
	            'content'
	        ],
			//proxy: new Ext.data.ScriptTagProxy({
	        proxy: new Ext.data.HttpProxy({
	            url: 'index.php?id='+tmpTarget
	        })
	    });
			
		// aktualisiert Produkte
		var getProdukte = function(){
			updateBelastbarkeit();
			if (einbauTooltip) einbauTooltip.hide();
			
			if (dachtyp.getValue()==5) {
				Ext.get('pb_produkte').setStyle('display','none');
				Ext.get('pb_dtbegruent').setStyle('display','block');
				return;
			} else {
				Ext.get('pb_dtbegruent').setStyle('display','none');
			}				
			
			var tmpTankgroesse = 0;
			if (Ext.state.Manager.get('groessenberechnungeingeblendet')==1) tmpTankgroesse = berechneteTankgroesse;
			
			// Parameter an Store übergeben => diese entsprechen den GET-Parametern des AJAX-Calls
			produkteStore.baseParams = {
				einsatzort:Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value'),
				einbau:Ext.DomQuery.selectValue('input[name=einbau]:checked/@value'),
				belastbarkeit:Ext.DomQuery.selectValue('input[name=belastbarkeit]:checked/@value'),
				berechnetetankgroesse:tmpTankgroesse,
				lang:sys_language_uid
			};
		
			// alte Werte mit neuen vergleichen, erster Aufruf?
			var tmpRefresh = false;
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')!=Ext.state.Manager.get('einsatzort')) tmpRefresh = true;
			if (Ext.DomQuery.selectValue('input[name=einbau]:checked/@value')!=Ext.state.Manager.get('einbau')) tmpRefresh = true;
			if (Ext.DomQuery.selectValue('input[name=belastbarkeit]:checked/@value')!=Ext.state.Manager.get('belastbarkeit')) tmpRefresh = true;
			if (tmpTankgroesse!=Ext.state.Manager.get('berechnetetankgroesse')) tmpRefresh = true;
			if (initialLoad) tmpRefresh = true;
			initialLoad = false;

			// Refresh erforderlich?
			if (!tmpRefresh) return;
			
			// Werte in Cookie speichern
			Ext.state.Manager.set('einsatzort',Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value'));
			Ext.state.Manager.set('einbau',Ext.DomQuery.selectValue('input[name=einbau]:checked/@value'));
			Ext.state.Manager.set('belastbarkeit',Ext.DomQuery.selectValue('input[name=belastbarkeit]:checked/@value'));
			Ext.state.Manager.set('berechnetetankgroesse',tmpTankgroesse);
			
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')!=undefined && Ext.DomQuery.selectValue('input[name=einbau]:checked/@value')!=undefined && (Ext.DomQuery.selectValue('input[name=belastbarkeit]:checked/@value')!=undefined || Ext.DomQuery.selectValue('input[name=einbau]:checked/@value')==1)) {
				// Produkte einblenden
				Ext.get('pb_produkte').setStyle('display','block');
				// Store aktualisieren
				produkteStore.load({
					params:{
						start:0, 	// Ergebnis "zurückspulen" auf den ersten DS
						limit:6		// DS pro Seite
					}
				});
				// Tracking-Cookie setzen
				Ext.state.Manager.set('trackingstate',1);
			} else Ext.get('pb_produkte').setStyle('display','none');	
		}
		
		// aktualisiert Berechnung
		var berechneteTankgroesse = 0;
		var tankgroesseTooltip;
		var regenwasserertragTooltip;
		var getErsparnis = function(){
			if(sys_language_uid == 0){
				
				
				var bedarfHausGartenTpl = new Ext.Template(
					'<div class="regenwasserbedarf_back">',
						'<table cellspacing="0" cellpadding="0">',
							'<tbody>',
								'<tr>',
									'<td width="120">WC-Spülung</td>',
									'<td width="200">pro Person und Jahr 8,5 m³</td>',
									'<td width="80">× {personen} Personen</td>',
									'<td width="15">=</td>',
									'<td width="90" class="result">{wc} Liter</td>',
								'</tr>',
								'<tr>',
									'<td>Waschmaschine</td>',
									'<td>pro Person und Jahr 3,5 m³</td>',
									'<td>× {personen} Personen</td>',
									'<td>=</td>',
									'<td class="result">{waschmaschine} Liter</td>',
								'</tr>',
								'<tr>',
									'<td>Putzen/Reinigung</td>',
									'<td>pro Person und Jahr 1,1 m³</td>',
									'<td>× {personen} Personen</td>',
									'<td>=</td>',
									'<td class="result">{reinigung} Liter</td>',
								'</tr>',
								'<tr>',
									'<td>Gartenbewässerung</td>',
									'<td>100 l/m²</td>',
									'<td>× {gartengroesse} m²</td>',
									'<td>=</td>',
									'<td class="result">{gartenliter} Liter</td>',
								'</tr>',
							'</tbody>',
						'</table>',
					'</div>',
					'<table cellspacing="0" cellpadding="0" class="pb_summe">',
						'<tbody>',						
							'<tr>',
								'<th colspan="3" width="342">Regenwasserbedarf</th>',
								'<td width="15">=</td>',
								'<td width="90" class="result bedarf">{bedarf} Liter</td>',
							'</tr>',
						'</tbody>',
					'</table>'
				);
	
				var bedarfHausTpl = new Ext.Template(
					'<div class="regenwasserbedarf_back">',
						'<table cellspacing="0" cellpadding="0">',
							'<tbody>',
								'<tr>',
									'<td width="120">WC-Spülung</td>',
									'<td width="200">pro Person und Jahr 8,5 m³</td>',
									'<td width="80">× {personen} Personen</td>',
									'<td width="15">=</td>',
									'<td width="90" class="result">{wc} Liter</td>',
								'</tr>',
								'<tr>',
									'<td>Waschmaschine</td>',
									'<td>pro Person und Jahr 3,5 m³</td>',
									'<td>× {personen} Personen</td>',
									'<td>=</td>',
									'<td class="result">{waschmaschine} Liter</td>',
								'</tr>',
								'<tr>',
									'<td>Putzen/Reinigung</td>',
									'<td>pro Person und Jahr 1,1 m³</td>',
									'<td>× {personen} Personen</td>',
									'<td>=</td>',
									'<td class="result">{reinigung} Liter</td>',
								'</tr>',
							'</tbody>',
						'</table>',
					'</div>',
					'<table cellspacing="0" cellpadding="0" class="pb_summe">',
						'<tbody>',
							'<tr>',
								'<th colspan="3" width="342">Regenwasserbedarf</th>',
								'<td width="15">=</td>',
								'<td width="90" class="result bedarf">{bedarf} Liter</td>',
							'</tr>',
						'</tbody>',
					'</table>'
				);
	
				var bedarfGartenTpl = new Ext.Template(
					'<div class="regenwasserbedarf_back">',
						'<table cellspacing="0" cellpadding="0">',
							'<tbody>',
								'<tr>',
									'<td width="120">Gartenbewässerung</td>',
									'<td width="200">100 l/m²</td>',
									'<td width="80">× {gartengroesse} m²</td>',
									'<td width="15">=</td>',
									'<td width="90" class="result">{gartenliter} Liter</td>',
								'</tr>',
							'</tbody>',
						'</table>',
					'</div>',
					'<table cellspacing="0" cellpadding="0" class="pb_summe">',
						'<tbody>',
							'<tr>',
								'<th colspan="3" width="342">Regenwasserbedarf</th>',
								'<td width="15">=</td>',
								'<td width="90" class="result bedarf">{bedarf} Liter</td>',
							'</tr>',
						'</tbody>',
					'</table>'
				);
			}else if(sys_language_uid == 1){
				
				var bedarfHausGartenTpl = new Ext.Template(
					'<div class="regenwasserbedarf_back">',
						'<table cellspacing="0" cellpadding="0">',
							'<tbody>',
								'<tr>',
									'<td width="120">Toilet flush</td>',
									'<td width="200">per person and year 8,5 m³</td>',
									'<td width="80">× {personen} persons</td>',
									'<td width="15">=</td>',
									'<td width="90" class="result">{wc} liter</td>',
								'</tr>',
								'<tr>',
									'<td>Washing machine</td>',
									'<td>per person and year 3,5 m³</td>',
									'<td>× {personen} persons</td>',
									'<td>=</td>',
									'<td class="result">{waschmaschine} liter</td>',
								'</tr>',
								'<tr>',
									'<td>Cleaning</td>',
									'<td>per person and year 1,1 m³</td>',
									'<td>× {personen} persons</td>',
									'<td>=</td>',
									'<td class="result">{reinigung} liter</td>',
								'</tr>',
								'<tr>',
									'<td>Garden water usage</td>',
									'<td>100 l/m²</td>',
									'<td>× {gartengroesse} m²</td>',
									'<td>=</td>',
									'<td class="result">{gartenliter} liter</td>',
								'</tr>',
							'</tbody>',
						'</table>',
					'</div>',
					'<table cellspacing="0" cellpadding="0" class="pb_summe">',
						'<tbody>',						
							'<tr>',
								'<th colspan="3" width="342">Rainwater demand</th>',
								'<td width="15">=</td>',
								'<td width="90" class="result bedarf">{bedarf} liter</td>',
							'</tr>',
						'</tbody>',
					'</table>'
				);
	
				var bedarfHausTpl = new Ext.Template(
					'<div class="regenwasserbedarf_back">',
						'<table cellspacing="0" cellpadding="0">',
							'<tbody>',
								'<tr>',
									'<td width="120">Toilet flush</td>',
									'<td width="200">per person and year 8,5 m³</td>',
									'<td width="80">× {personen} persons</td>',
									'<td width="15">=</td>',
									'<td width="90" class="result">{wc} liter</td>',
								'</tr>',
								'<tr>',
									'<td>Washing machine</td>',
									'<td>per person and year 3,5 m³</td>',
									'<td>× {personen} persons</td>',
									'<td>=</td>',
									'<td class="result">{waschmaschine} liter</td>',
								'</tr>',
								'<tr>',
									'<td>Cleaning</td>',
									'<td>per person and year 1,1 m³</td>',
									'<td>× {personen} persons</td>',
									'<td>=</td>',
									'<td class="result">{reinigung} liter</td>',
								'</tr>',
							'</tbody>',
						'</table>',
					'</div>',
					'<table cellspacing="0" cellpadding="0" class="pb_summe">',
						'<tbody>',
							'<tr>',
								'<th colspan="3" width="342">Rainwater demand</th>',
								'<td width="15">=</td>',
								'<td width="90" class="result bedarf">{bedarf} liter</td>',
							'</tr>',
						'</tbody>',
					'</table>'
				); 
	
				var bedarfGartenTpl = new Ext.Template(
					'<div class="regenwasserbedarf_back">',
						'<table cellspacing="0" cellpadding="0">',
							'<tbody>',
								'<tr>',
									'<td width="120">Garden water usage</td>',
									'<td width="200">100 l/m²</td>',
									'<td width="80">× {gartengroesse} m²</td>',
									'<td width="15">=</td>',
									'<td width="90" class="result">{gartenliter} liter</td>',
								'</tr>',
							'</tbody>',
						'</table>',
					'</div>',
					'<table cellspacing="0" cellpadding="0" class="pb_summe">',
						'<tbody>',
							'<tr>',
								'<th colspan="3" width="342">Rainwater demand</th>',
								'<td width="15">=</td>',
								'<td width="90" class="result bedarf">{bedarf} liter</td>',
							'</tr>',
						'</tbody>',
					'</table>'
				);
				
				
			}

			var tmpBedarf = 0;
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')=='haus') {
				if (anzpersonen.getValue()>0) {
					tmpBedarf = Math.round(anzpersonen.getValue()*(8.5+3.5+1.1)*1000);
					bedarfHausTpl.overwrite('regenwasserbedarf', {
						personen:anzpersonen.getValue(),
						wc:Math.round(anzpersonen.getValue()*8.5*1000),
						waschmaschine:Math.round(anzpersonen.getValue()*3.5*1000),
						reinigung:Math.round(anzpersonen.getValue()*1.1*1000),
						bedarf: tmpBedarf
					});
				} else Ext.DomHelper.overwrite('regenwasserbedarf','');
			}
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')=='garten') {
				if (gartengroesse.getValue()>0) {
					tmpBedarf = Math.round(gartengroesse.getValue()*100);
					bedarfGartenTpl.overwrite('regenwasserbedarf', {
						gartengroesse:gartengroesse.getValue(),
						gartenliter:gartengroesse.getValue()*100,
						bedarf: tmpBedarf
					});
				} else Ext.DomHelper.overwrite('regenwasserbedarf','');
			}
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')=='hausgarten') {
				if (gartengroesse.getValue()>0 && anzpersonen.getValue()>0) {
					tmpBedarf = Math.round(anzpersonen.getValue()*(8.5+3.5+1.1)*1000+gartengroesse.getValue()*100);
					bedarfHausGartenTpl.overwrite('regenwasserbedarf', {
						personen:anzpersonen.getValue(),
						wc:Math.round(anzpersonen.getValue()*8.5*1000),
						waschmaschine:Math.round(anzpersonen.getValue()*3.5*1000),
						reinigung:Math.round(anzpersonen.getValue()*1.1*1000),
						gartengroesse:gartengroesse.getValue(),
						gartenliter:gartengroesse.getValue()*100,
						bedarf: tmpBedarf
					});
				} else Ext.DomHelper.overwrite('regenwasserbedarf','');
			}
			
			if(sys_language_uid == 0){
				var tankgroesseTpl = new Ext.Template(
				'<table cellspacing="0" cellpadding="0"><tbody>'+
				'<tr><th width="342">Regenwasserertrag</th><td width="15">=</td><td width="90" class="result">{regenwasserertrag} liter</td><td><a href="javascript:;" id="regenwasserertraginfo"><img src="fileadmin/templates/img/info_icon.gif" /></a></td></tr>'+
				'<tr><th width="342">Tankgröße</th><td width="15">=</td><td width="90" class="result">{tankgroesse} Liter</td><td><a href="javascript:;" id="tankgroesseinfo"><img src="fileadmin/templates/img/info_icon.gif" /></a></td></tr>'+
				'</tbody></table>'
				);	
			}
			if(sys_language_uid == 1){
				var tankgroesseTpl = new Ext.Template(
				'<table cellspacing="0" cellpadding="0"><tbody>'+
				'<tr><th width="342">Rainwater available</th><td width="15">=</td><td width="90" class="result">{regenwasserertrag} liter</td><td></td></tr>'+
				'<tr><th width="342">Tank size</th><td width="15">=</td><td width="90" class="result">{tankgroesse} liter</td><td><a href="javascript:;" id="tankgroesseinfo"><img src="fileadmin/templates/img/info_icon.gif" /></a></td></tr>'+
				'</tbody></table>'
				);	
			}
			
			if ( ( (sys_language_uid == 0 && plz.getValue()>0) || (sys_language_uid > 0 && niederschlagsmenge.getValue()>0) ) && dachtyp.getValue()>0 && tmpBedarf>0 ) {
				// alten Tooltip ausblenden
				//if (Ext.get('tankgroesseinfoTooltip')) Ext.get('tankgroesseinfoTooltip').hide();

				// Berechnung
				if(sys_language_uid == 0){
					var tmpErtrag = (niederschlagsmengen[plz.getValue()] * dachflaeche.getValue() * dachbeiwert[dachtyp.getValue()]);	
				}else{
					var tmpErtrag = (niederschlagsmenge.getValue() * dachflaeche.getValue() * dachbeiwert[dachtyp.getValue()]);	
				}
				
				
				
				var tankgroessealt = berechneteTankgroesse;
				berechneteTankgroesse = Math.round(((tmpErtrag+tmpBedarf)/2)*(21/365));
				if (tankgroessealt != berechneteTankgroesse) getProdukte();
				tankgroesseTpl.overwrite('tankgroesse', {
					tankgroesse: berechneteTankgroesse,
					regenwasserertrag: tmpErtrag
				});
				var tankgroesseBerechnung = 
				'Als Bemessungsfaktor wird der durchschnittliche Wert aus Regenertrag und Regenbedarf verwendet:<br />' +
				'<table cellspacing="1" cellpadding="1" border="0">' +
				'<tbody><tr>' +
					'<td>'+tmpErtrag+' Liter + '+tmpBedarf+' Liter</td>'+
					'<td rowspan="2"> × </td>'+
					'<td>21 Tage (Sicherheitsreserve)</td>'+
					'<td rowspan="2">= '+berechneteTankgroesse+' Liter</td>'+
				'</tr>'+
				'<tr>'+
					'<td style="border-top: 1px solid black; text-align: center;">2</td>'+
					'<td style="border-top: 1px solid black; text-align: center;">365 Tage</td>'+
				'</tr>'+
				'</tbody></table>';
				
				var tankgroesseBerechnungEn = 
				'The tank size is determined by calculating average rainwater demand and availability in the following formula<br />' +
				'<table cellspacing="1" cellpadding="1" border="0">' +
				'<tbody><tr>' +
					'<td>'+tmpErtrag+' liter + '+tmpBedarf+' liter</td>'+
					'<td rowspan="2"> × </td>'+
					'<td>21 days (Buffer)</td>'+
					'<td rowspan="2">= '+berechneteTankgroesse+' liter</td>'+
				'</tr>'+
				'<tr>'+
					'<td style="border-top: 1px solid black; text-align: center;">2</td>'+
					'<td style="border-top: 1px solid black; text-align: center;">365 days</td>'+
				'</tr>'+
				'</tbody></table>';
				
				if (tankgroesseTooltip) tankgroesseTooltip.hide();
				
				if(sys_language_uid == 0){
					tankgroesseTooltip = new Ext.ToolTip({
						target: 'tankgroesseinfo',
						html: tankgroesseBerechnung,
						title: 'Wie wird die Tankgröße berechnet?',
						autoHide: false,
						width: 425,
						closable: true,
						draggable: true,
						hideDelay: 1000,
						dismissDelay: 8000
					});
				}
				if(sys_language_uid == 1){
					tankgroesseTooltip = new Ext.ToolTip({
						target: 'tankgroesseinfo',
						html: tankgroesseBerechnungEn,
						title: 'How the Tank size is calculated',
						autoHide: false,
						width: 425,
						closable: true,
						draggable: true,
						hideDelay: 1000,
						dismissDelay: 8000
					});
				}

				
				if(sys_language_uid == 0){
					if (regenwasserertragTooltip)
						regenwasserertragTooltip.hide();
						
					regenwasserertragTooltip = new Ext.ToolTip({
						target: 'regenwasserertraginfo',
						html: 'Dieser Wert wird anhand des Niederschlagswertes, welcher für ihre PLZ gilt ermittelt.',
						autoHide: true,
						closable: false,
						draggable: false,
						hideDelay: 1000,
						dismissDelay: 8000
					});	
				}
				

			} else {
				Ext.DomHelper.overwrite('tankgroesse','');
				berechneteTankgroesse = 0;
				getProdukte();
			}
			
			if(sys_language_uid == 0){
				var ersparnisTpl = new Ext.Template(
				'<table cellspacing="0" cellpadding="0"><tbody><tr><th width="342">Jährliche Ersparnis</th><td width="15">=</td><td width="90" class="result">€ {ersparnis},00</td></tr></tbody></table>'
				);	
			}
			
			if(sys_language_uid == 1){
				var ersparnisTpl = new Ext.Template(
				'<table cellspacing="0" cellpadding="0"><tbody><tr><th width="342">Annual savings</th><td width="15">=</td><td width="90" class="result">€ {ersparnis},00</td></tr></tbody></table>'
				);	
			}
			
			
			if (tmpBedarf > 0 && tmpErtrag > 0) {
				var tmpErsparnis;
				if (tmpErtrag < tmpBedarf) tmpErsparnis = Math.round(tmpErtrag * wasserpreis.getValue()/1000/1000);
				else tmpErsparnis = Math.round(tmpBedarf * wasserpreis.getValue()/1000/1000);
				ersparnisTpl.overwrite('ersparnis', {
					ersparnis: tmpErsparnis
				});
			} else Ext.DomHelper.overwrite('ersparnis','');
		
			// Werte in Cookie speichern
			if(sys_language_uid == 0){
				Ext.state.Manager.set('plz',plz.getValue());	
			}else{
				Ext.state.Manager.set('niederschlagsmenge',niederschlagsmenge.getValue());	
			}
			
			Ext.state.Manager.set('dachflaeche',dachflaeche.getValue());
			Ext.state.Manager.set('dachtyp',dachtyp.getValue());
			Ext.state.Manager.set('anzpersonen',anzpersonen.getValue());
			Ext.state.Manager.set('gartengroesse',gartengroesse.getValue());
			Ext.state.Manager.set('wasserpreis',wasserpreis.getValue());			
		}
		
		// aktualisiert Einbau
		var updateEinbau = function(){
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')=='garten' || Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')=='') {
				document.getElementById('labeleinbau1').disabled=false;
				document.getElementById('einbau1').disabled=false;
				Ext.get('einbauinfo').setStyle('display','none');
				Ext.get('labeleinbau1').setStyle('color','#646567');
			} else {
				// oberirdisch ausgewählt? wähle unterirdisch aus
				if (Ext.DomQuery.selectValue('input[name=einbau]:checked/@value')==1) {
					document.getElementById('einbau2').checked = true;
					Ext.get('pb_belastbarkeit').setStyle('display','block');
				}
				Ext.get('labeleinbau1').set({disabled:'disabled'});
				Ext.get('labeleinbau1').setStyle('color','#A0A0A0');
				Ext.get('einbauinfo').setStyle('display','inline');
				//Ext.get('einbauinfo').frame();
			}
		}

		// aktualisiert Anz. Personen
		var updateAnzPersonen = function(){
			if (Ext.DomQuery.selectValue('input[name=einsatzort]:checked/@value')=='garten') {
				Ext.get('pb_anzpersonen').setStyle('display','none');
			} else {
				Ext.get('pb_anzpersonen').setStyle('display','block');
			}
		}
		
		// aktualisiert Belastbarkeit
		var updateBelastbarkeit = function(){
			// oberirdisch ausgewählt? blende Belastbarkeit aus
			if (Ext.DomQuery.selectValue('input[name=einbau]:checked/@value')==1) {
				Ext.get('pb_belastbarkeit').setStyle('display','none');
			} else {
				Ext.get('pb_belastbarkeit').setStyle('display','block');
			}
		}
						
// Formular

// einsatzort Begin
		if (Ext.state.Manager.get('einsatzort')) {
			if (Ext.state.Manager.get('einsatzort')=='haus') Ext.get('einsatzort1').set({checked:'checked'});
			if (Ext.state.Manager.get('einsatzort')=='garten') Ext.get('einsatzort2').set({checked:'checked'});		
			if (Ext.state.Manager.get('einsatzort')=='hausgarten') Ext.get('einsatzort3').set({checked:'checked'});		
		}
		Ext.get('einsatzort1').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('labeleinsatzort1').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('einsatzort1').addListener('click',getErsparnis,this,{buffer: 500});
		Ext.get('labeleinsatzort1').addListener('click',getErsparnis,this,{buffer: 500});
		Ext.get('einsatzort1').addListener('click',updateEinbau,this,{buffer: 500});
		Ext.get('labeleinsatzort1').addListener('click',updateEinbau,this,{buffer: 500});
		Ext.get('einsatzort1').addListener('click',updateAnzPersonen,this,{buffer: 500});
		Ext.get('labeleinsatzort1').addListener('click',updateAnzPersonen,this,{buffer: 500});

		Ext.get('einsatzort2').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('labeleinsatzort2').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('einsatzort2').addListener('click',getErsparnis,this,{buffer: 500});
		Ext.get('labeleinsatzort2').addListener('click',getErsparnis,this,{buffer: 500});
		Ext.get('einsatzort2').addListener('click',updateEinbau,this,{buffer: 500});
		Ext.get('labeleinsatzort2').addListener('click',updateEinbau,this,{buffer: 500});
		Ext.get('einsatzort2').addListener('click',updateAnzPersonen,this,{buffer: 500});
		Ext.get('labeleinsatzort2').addListener('click',updateAnzPersonen,this,{buffer: 500});
		
		Ext.get('einsatzort3').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('labeleinsatzort3').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('einsatzort3').addListener('click',getErsparnis,this,{buffer: 500});
		Ext.get('labeleinsatzort3').addListener('click',getErsparnis,this,{buffer: 500});
		Ext.get('einsatzort3').addListener('click',updateEinbau,this,{buffer: 500});
		Ext.get('labeleinsatzort3').addListener('click',updateEinbau,this,{buffer: 500});
		Ext.get('einsatzort3').addListener('click',updateAnzPersonen,this,{buffer: 500});
		Ext.get('labeleinsatzort3').addListener('click',updateAnzPersonen,this,{buffer: 500});

		var tmpHtml;
		
		if (sys_language_uid == 0) tmpHtml = 'Wo möchten Sie Regewasser nutzen?';
		if (sys_language_uid == 1) tmpHtml = 'Where do you want to use the rainwater?';
		if (sys_language_uid == 2) tmpHtml = 'A quelle utilisation sera destinée l?eau de pluie ?';
		if (sys_language_uid == 3) tmpHtml = '¿Cómo quiere usar este producto?';		

		var einsatzortTooltip = new Ext.ToolTip({
			target: 'einsatzortinfo',
			html: tmpHtml,
			autoHide: true,
			closable: false,
			draggable: false,
			hideDelay: 1000,
			dismissDelay: 8000
		});

		
// einsatzort Ende
	
// einbau Begin
		if (Ext.state.Manager.get('einbau')) {
			if (Ext.state.Manager.get('einbau')==1) Ext.get('einbau1').set({checked:'checked'});
			if (Ext.state.Manager.get('einbau')==2) Ext.get('einbau2').set({checked:'checked'});		
		}
		Ext.get('einbau1').addListener('click',getProdukte,this,{
		    buffer: 500
		});
		Ext.get('labeleinbau1').addListener('click',getProdukte,this,{
		    buffer: 500
		});
		Ext.get('einbau2').addListener('click',getProdukte,this,{
		    buffer: 500
		});
		Ext.get('labeleinbau2').addListener('click',getProdukte,this,{
		    buffer: 500
		});
	
		Ext.get('einbau1').set({disabled:'disabled'});

		if (sys_language_uid == 0) tmpHtml = 'Die Option "oberirdisch" ist nur auswählbar, wenn "Garten" als Einsatzort gewählt wurde.';
		if (sys_language_uid == 1) tmpHtml = 'The "above ground" option can only be selected if the rainwater system is used for garden irrigation';
		if (sys_language_uid == 2) tmpHtml = 'Die Option "oberirdisch" ist nur auswählbar, wenn "Garten" als Einsatzort gewählt wurde.';
		if (sys_language_uid == 3) tmpHtml = 'Die Option "oberirdisch" ist nur auswählbar, wenn "Garten" als Einsatzort gewählt wurde.';		
		
		var tmpHtml2;
		if (sys_language_uid == 0) tmpHtml2 = 'Option nicht auswählbar';
		if (sys_language_uid == 1) tmpHtml2 = 'Option not available';
		if (sys_language_uid == 2) tmpHtml2 = 'Option non disponible';
		if (sys_language_uid == 3) tmpHtml2 = 'Opción no disponible';		
		
		var einbauTooltip = new Ext.ToolTip({
			target: 'einbauinfo',
			html: tmpHtml,
			title: tmpHtml2,
			autoHide: false,
			closable: true,
			draggable: true,
			hideDelay: 1000,
			dismissDelay: 8000
		});
// einbau Ende
	
// belastbarkeit Begin

		if (Ext.state.Manager.get('belastbarkeit')) {
			if (Ext.state.Manager.get('belastbarkeit')=='begehbar') Ext.get('belastbarkeit1').set({checked:'checked'});
			if (Ext.state.Manager.get('belastbarkeit')=='pkwbefahrbar') Ext.get('belastbarkeit2').set({checked:'checked'});		
			//if (Ext.state.Manager.get('belastbarkeit')=='lkwbefahrbar') Ext.get('belastbarkeit3').set({checked:'checked'});		
		}
		Ext.get('belastbarkeit1').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('labelbelastbarkeit1').addListener('click',getProdukte,this,{buffer: 500});
		
		Ext.get('belastbarkeit2').addListener('click',getProdukte,this,{buffer: 500});
		Ext.get('labelbelastbarkeit2').addListener('click',getProdukte,this,{buffer: 500});
		
		//Ext.get('belastbarkeit3').addListener('click',getProdukte,this,{buffer: 500});
		//Ext.get('labelbelastbarkeit3').addListener('click',getProdukte,this,{buffer: 500});

// belastbarkeit Ende

// Link zum Aufundzuklappen von Größenberechnung
		var groessenberechnungEinblenden = function() {
			//einblenden, falls vorhanden
			Ext.get('ersparnisundgroessenberechnung').set({checked:'checked'});
			if (Ext.get('pb_groessenberechnung')) {
				Ext.get('pb_groessenberechnung').setStyle('display','block');
				// Slider aktualisieren (wird vom IE benötigt)
				if (dachflaeche) dachflaeche.syncThumb();
				if (wasserpreis) wasserpreis.syncThumb();
				if (gartengroesse) gartengroesse.syncThumb();
				// Zustand speichern
				Ext.state.Manager.set('groessenberechnungeingeblendet',1);
			} else Ext.state.Manager.set('groessenberechnungeingeblendet',0);
		}
		var groessenberechnungAusblenden = function () {
			//ausblenden
			Ext.get('ersparnisundgroessenberechnung').set({checked:''});
			Ext.get('pb_groessenberechnung').setStyle('display','none');
			// Zustand speichern
			Ext.state.Manager.set('groessenberechnungeingeblendet',0);
			if (tankgroesseTooltip) tankgroesseTooltip.hide();
		}
					
		Ext.get('ersparnisundgroessenberechnung').addListener('change',function(){
			if (Ext.DomQuery.select('input[name=ersparnisundgroessenberechnung]:checked')!='') {
				groessenberechnungEinblenden();
				getProdukte();
			} else {
				groessenberechnungAusblenden();				
				getProdukte();
			}
		},this,{buffer:300});
		
		Ext.get('ersparnisundgroessenberechnung').addListener('click',function(){
			Ext.get('ersparnisundgroessenberechnung').blur(); // IE-Fix
		},this,{buffer:400});
		
		// alten Zustand wieder herstellen
		//if (sys_language_uid == 0) {
			if (Ext.state.Manager.get('groessenberechnungeingeblendet')) {
				if (Ext.state.Manager.get('groessenberechnungeingeblendet')==1) {
					Ext.get('ersparnisundgroessenberechnung').set({checked:'checked'});
					groessenberechnungEinblenden();
				}
				else Ext.get('ersparnisundgroessenberechnung').set({checked:''});
			} else {
				// default: Berechnung einblenden
				Ext.get('ersparnisundgroessenberechnung').set({checked:'checked'});
				groessenberechnungEinblenden();		
			}
		//} else {
			//groessenberechnungAusblenden();
			//Ext.get('ersparnisundgroessenberechnungfeld').setStyle('display','none');
		//}
	
	
// plz Begin
	if(sys_language_uid == 0){
		
		var plz = Ext.get('plz');
		if (Ext.state.Manager.get('plz')) {
			setSelect('plz',Ext.state.Manager.get('plz'));
		}
		plz.addListener('change',getErsparnis,this,{
		    buffer: 500
		});
	}
// plz Ende
	
// dachflaeche Begin
		var dachflaeche = new Ext.Slider({
			renderTo: 'dachflaeche',
			width: 150,
			height: 20,
			increment: 10,
			minValue: 10,
			maxValue: 500
		});
		
		dachflaeche.addListener('change',getErsparnis,this,{
		    buffer: 500
		});

		// Wert einstellen
		if (Ext.state.Manager.get('dachflaeche')) {
			// Wert aus Cookie wiederherstellen
			dachflaeche.setValue(Ext.state.Manager.get('dachflaeche'));
		} else {
			// Default-Wert einstellen
			dachflaeche.setValue(40);		
		}
		
		// Wert mit Einheit ausgeben
		var dachflaechevalue = new Ext.Template(
			'{value}'
		);
		dachflaechevalue.overwrite('dachflaecheval', {value: dachflaeche.getValue()});
		
		dachflaeche.addListener('change',function(){
			dachflaechevalue.overwrite('dachflaecheval', {value: dachflaeche.getValue()});
		});
		
		if(sys_language_uid == 0) {
			var dachflaecheTooltip = new Ext.ToolTip({
				target: 'dachflaecheinfo',
				html: '<table width="100%" border="0" cellpadding="3"> <tr>Projizierte Dachfläche<br /><td><img src="typo3conf/ext/nl_graf_produkte/res/images/projezierte-Dachflaeche.gif" alt="Ermitteln der projizierten Dachfläche" width="120" height="176" /></td><td>Die projizierte Dachfläche ist unabhängig von Dachform und Dachneigung. Bitte nur Dachflächen berücksichtigen, die an die Anlage angeschlossen werden.</td>  </tr></table>',
				autoHide: true,
				closable: false,
				draggable: false,
				hideDelay: 1000,
				dismissDelay: 8000
			});
		}
		if(sys_language_uid == 1) {
			var dachflaecheTooltip = new Ext.ToolTip({
				target: 'dachflaecheinfo',
				html: '<table width="100%" border="0" cellpadding="3"> <tr>Projected roof area<br /><td><img src="typo3conf/ext/nl_graf_produkte/res/images/projezierte-Dachflaeche.gif" alt="projected roof area" width="120" height="176" /></td><td>The projected roof area depends on the style of roof and roof pitch. Please only consider roof areas which are connected to the system.</td>  </tr></table>',
				autoHide: true,
				closable: false,
				draggable: false,
				hideDelay: 1000,
				dismissDelay: 8000
			});
		}

// dachflaeche Ende		

// dachtyp Begin
		var dachtyp = Ext.get('dachtyp');
		if (Ext.state.Manager.get('dachtyp')) {
			setSelect('dachtyp',Ext.state.Manager.get('dachtyp'));
		}
		dachtyp.addListener('change',getErsparnis,this,{
		    buffer: 500
		});
// dachtyp Ende
		
// gartengroesse Begin		
		
		var tipgartengroesse = new Ext.ux.SliderTip({
			getText: function(slider){
				return String.format('<b>{0}m²</b>', slider.getValue());
			}
		});

		var gartengroesse = new Ext.Slider({
			stateId: 'gartengroesse',
			renderTo: 'gartengroesse',
			width: 150,
			height: 20,
			increment: 25,
			minValue: 0,
			maxValue: 1000
			//plugins: tipgartengroesse
		});
		
		
		
		gartengroesse.addListener('change',getErsparnis,this,{
		    buffer: 500
		});
		
		// Wert einstellen
		if (Ext.state.Manager.get('gartengroesse')) {
			// Wert aus Cookie wiederherstellen
			gartengroesse.setValue(Ext.state.Manager.get('gartengroesse'));
		} else {
			// Default-Wert einstellen
			gartengroesse.setValue(200);
		}

		// Wert mit Einheit ausgeben
		var gartengroessevalue = new Ext.Template(
			'{value}'
		);
		gartengroessevalue.overwrite('gartengroesseval', {value: gartengroesse.getValue()});
		
		gartengroesse.addListener('change',function(){
			gartengroessevalue.overwrite('gartengroesseval', {value: gartengroesse.getValue()});				
		});
		
// gartengroesse Ende		
		if(sys_language_uid > 0){

			
	
			var niederschlagsmenge = new Ext.Slider({
				stateId: 'niederschlagsmenge',
				renderTo: 'niederschlagsmenge',
				width: 150,
				height: 20,
				increment:20,
				minValue: 300,
				maxValue: 2000
				//plugins: tipgartengroesse
			});	
			
			
			
			niederschlagsmenge.addListener('change',getErsparnis,this,{
			    buffer: 500
			});
			
			// Wert einstellen
			if (Ext.state.Manager.get('niederschlagsmenge')) {
				// Wert aus Cookie wiederherstellen
				niederschlagsmenge.setValue(Ext.state.Manager.get('niederschlagsmenge'));
			} else {
				// Default-Wert einstellen
				niederschlagsmenge.setValue(200);
			}
	
			// Wert mit Einheit ausgeben
			var niederschlagsmengevalue = new Ext.Template(
				'{value}'
			);
			niederschlagsmengevalue.overwrite('niederschlagsmengeeval', {value: niederschlagsmenge.getValue()});
			
			niederschlagsmenge.addListener('change',function(){
				niederschlagsmengevalue.overwrite('niederschlagsmengeeval', {value: niederschlagsmenge.getValue()});				
			});
	
	
			
				
		}



// anzpersonen Begin
		var anzpersonen = Ext.get('anzpersonen');
		if (Ext.state.Manager.get('anzpersonen')) {
			setSelect('anzpersonen',Ext.state.Manager.get('anzpersonen'));
		}
		anzpersonen.addListener('change',getErsparnis,this,{
		    buffer: 500
		});
// anzpersonen Ende

// wasserpreis Begin		
		
		var tipwasserpreis = new Ext.ux.SliderTip({
			getText: function(slider){
				return String.format('<b>{0}?/m³</b>', (slider.getValue()/1000));
			}
		});

		var wasserpreis = new Ext.Slider({
			stateId: 'wasserpreis',
			renderTo: 'wasserpreis',
			width: 150,
			height: 20,
			increment: 100,
			minValue: 2000,
			maxValue: 8000
			//plugins: tipwasserpreis
		});
		
		wasserpreis.addListener('change',getErsparnis,this,{
		    buffer: 500
		});
		
		// Wert einstellen
		if (Ext.state.Manager.get('wasserpreis')) {
			// Wert aus Cookie wiederherstellen
			wasserpreis.setValue(Ext.state.Manager.get('wasserpreis'));
		} else {
			// Default-Wert einstellen
			wasserpreis.setValue(3700);
		}

		// Wert mit Einheit ausgeben
		var wasserpreisvalue = new Ext.Template(
			'{value}'
		);
		wasserpreisvalue.overwrite('wasserpreisval', {value: (wasserpreis.getValue()/1000).toFixed(2).replace('.',',')});
		
		wasserpreis.addListener('change',function(){
			gartengroessevalue.overwrite('wasserpreisval', {value: (wasserpreis.getValue()/1000).toFixed(2).replace('.',',')});				
		});
		if(sys_language_uid == 0){
			var wasserpreisTooltip = new Ext.ToolTip({
			target: 'wasserpreisinfo',
			html: 'Bei einer reinen Gartenbewässerung kann der Abwasserpreis zum Trinkwasserpreis addiert werden. Bei einer Hausnutzung (WC/ Waschmaschine) ist dies von der Satzung des örtlichen Wasserversorgers abhängig.',
			autoHide: true,
			closable: false,
			draggable: false,
			hideDelay: 1000,
			dismissDelay: 8000
			});	
		}
		if(sys_language_uid == 1){
			var wasserpreisTooltip = new Ext.ToolTip({
			target: 'wasserpreisinfo',
			html: 'In Germany you can add the wastewater price to the drinking water price if you are exclusively using the rainwater for garden irrigation. For a use in the house (toilets/washing machine) it depends on the local water supplier. Check in your country the prices you can add to determine your total water price.',
			autoHide: true,
			closable: false,
			draggable: false,
			hideDelay: 1000,
			dismissDelay: 8000
			});	
		}
		
// wasserpreis Ende		
		
// Produkt-Ausgabe Start

		
		if (sys_language_uid == 0) {
			var tmpbeforePageText = "Seite";
			var tmpafterPageText = "von {0}";
			var tmplastText = "letzte Seite";
			var tmpnextText = "nächste Seite";
			var tmpprevText = "vorherige Seite";
			var tmpfirstText = "erste Seite";
		}
		if (sys_language_uid == 1) {
			var tmpbeforePageText = "Page";
			var tmpafterPageText = "of {0}";
			var tmplastText = "last page";
			var tmpnextText = "next page";
			var tmpprevText = "previous page";
			var tmpfirstText = "first page";
		}
		if (sys_language_uid == 2) {
			var tmpbeforePageText = "Page";
			var tmpafterPageText = "/ {0}";
			var tmplastText = "dernière page";
			var tmpnextText = "page suivante";
			var tmpprevText = "page précédente";
			var tmpfirstText = "première page";
		}
		if (sys_language_uid == 3) {
			var tmpbeforePageText = "Página";
			var tmpafterPageText = "/ {0}";
			var tmplastText = "ultima página";
			var tmpnextText = "página siguiente";
			var tmpprevText = "página anterior";
			var tmpfirstText = "primera página";
		}

	    var pagingBarTop = new Ext.PagingToolbar({
	        pageSize: 6,
	        store: produkteStore,
	        displayInfo: false,
	        //displayMsg: 'Displaying entries {0} - {1} of {2}',
	        emptyMsg: "",
			refreshText: "",
			beforePageText : tmpbeforePageText,
			afterPageText : tmpafterPageText,
			lastText: tmplastText,
			nextText: tmpnextText,
			prevText: tmpprevText,
			firstText: tmpfirstText
	    });
	    var pagingBarBottom = new Ext.PagingToolbar({
	        pageSize: 6,
	        store: produkteStore,
	        displayInfo: false,
	        //displayMsg: 'Displaying entries {0} - {1} of {2}',
	        emptyMsg: "",
			refreshText: "",
			beforePageText : tmpbeforePageText,
			afterPageText : tmpafterPageText,
			lastText: tmplastText,
			nextText: tmpnextText,
			prevText: tmpprevText,
			firstText: tmpfirstText
	    });

	    var grid = new Ext.grid.GridPanel({
	        el:'pb_produkte',
	        //width:508,
	        //height:550,
			autoHeight: true,
	        store: produkteStore,
			border: false,
			disableSelection: true,
			enableHdMenu: false,
			hideHeaders: true,
	        trackMouseOver:false,

	        // grid columns
	        columns:[{
	            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
	            dataIndex: 'content',
	            width: 636,
	            sortable: false
	        }],

	        // paging bar on the bottom
	        bbar: pagingBarBottom,
			tbar: pagingBarTop
	    });

	    // render it
	    grid.render();		
// Produkt-Ausgabe Ende

		// Quicktips initialisieren
		Ext.QuickTips.init();
		
		// initiale Aufrufe
		updateEinbau();
		updateAnzPersonen();
		getErsparnis();
		var initialLoad=true;
		getProdukte();
	}
}

Ext.onReady(grafProducts.init);