var offerte = '';
var transactiekosten = 'false';
var pakkettenWindow = '';
var wizard = '';
 
Ext.onReady(function(){
	Ext.QuickTips.init();
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	var adres;
	var provincie;
	var plaats;
	var land;
	var houderwijziging = 'false';
	var domeinnaam;
	var pakket;
		
	var aanmeldButton = Ext.get('aanmeld_btn');
    var loginButton = Ext.get('login_btn');
	var bestelButton = Ext.get('bestel_btn');
	    


    
																							    	//POSTCODESYSTEEM
																												    postcodeveld = new Ext.form.TextField({
																													    	fieldLabel: 'Postcode',
																													        name:'form[postcode]', 
																													        id:'postcode', 
																													        maxLength: 7,
																													        enableKeyEvents: true,
																													        allowBlank:false,
																													        width: 60
																													    });
																													    
																													    
																													//Postcode ophaal functie
																												    postcodeveld.on('keyup', function() {
																														Ext.Ajax.request({ 
																															url : 'include/postcode.php', 
																															method : 'POST',
																															params : 'zipcode='+postcodeveld.getValue(),
																															success : 
																																function(response, options) { 
																																	var resultaddress=response.responseText;
																																	if (resultaddress.length > 10){
																																		resultaddress=resultaddress.split(",");
																																		formulier.getForm().findField('adres').setValue(resultaddress[0]);
																																		formulier.getForm().findField('adres').disable();
																																		formulier.getForm().findField('plaats').setValue(resultaddress[1]);
																																		formulier.getForm().findField('plaats').disable();
																																		formulier.getForm().findField('provincie').setValue(resultaddress[2]);
																																		formulier.getForm().findField('provincie').disable();
																																		formulier.getForm().findField('land').setValue('Netherlands');
																																	} else {
																																		formulier.getForm().findField('adres').setValue('');
																																		formulier.getForm().findField('adres').enable();
																																		formulier.getForm().findField('plaats').enable();
																																		formulier.getForm().findField('plaats').setValue('');
																																		formulier.getForm().findField('provincie').enable();
																																		formulier.getForm().findField('provincie').setValue('');
																																	}
																																}, 
																															failure : 
																																function(response, options) { 
																																	alert(response.responseText + "FAILURE"); 
																																}	
																															
																														});
																													});
																													
																													postcodeveld_reg = new Ext.form.TextField({
																													    	fieldLabel: 'Postcode',
																													        name:'form[postcode]', 
																													        id:'postcode_reg', 
																													        maxLength: 7,
																													        enableKeyEvents: true,
																													        width: 60
																													    });
																													    
																													    
																													//Postcode ophaal functie
																												    postcodeveld_reg.on('keyup', function() {
																														Ext.Ajax.request({ 
																															url : 'include/postcode.php', 
																															method : 'POST',
																															params : 'zipcode='+postcodeveld_reg.getValue(),
																															success : 
																																function(response, options) { 
																																	var resultaddress=response.responseText;
																																	if (resultaddress.length > 10){
																																		resultaddress=resultaddress.split(",");
																																		adres = resultaddress[0];
																																		plaats = resultaddress[1];
																																		provincie = resultaddress[2];
																																		land = 'Netherlands';
																																		houderwijziging = 'true';
																																	} else {
																																		adres = '';
																																		plaats = '';
																																		provincie = '';
																																		land = '';
																																		houderwijziging = 'false';
																																	}
																																}, 
																															failure : 
																																function(response, options) { 
																																	Ext.Msg.alert('Fout',response.responseText + "FAILURE"); 
																																}	
																															
																														});
																													});
																									//EINDE POSTCODESYSTEEM

    var domeinLabel = new Ext.form.Label({
		id: 'domeinLabel',
		html: 'De door u gekozen domeinnaam is: ...'
	});
	
    wizard = new Ext.ux.Wiz({
        y: 150,
        title : 'NulEuroHosting wizard',
        headerConfig : {
            title : 'Nieuwe hostingaanvraag'
        },
        listeners: {
	        finish: function() {
	        	var box = Ext.MessageBox.wait('Bezig met verwerken van uw ingevoerde gegevens', 'Moment alsjeblieft');
				offerte = Ext.getCmp('offerteAanvragen').getValue();

	        	Ext.Ajax.request({
					url : '/include/core/add.php',
					method: 'POST',
					params : {
						table: 'mod_nuleurohosting_bestellingen',
						'form[klantid]':'true',
						'form[transactiekosten]':transactiekosten,
						'form[domeinnaam]':Ext.get('domeinnaam').dom.value,
						'form[domeinbestellen]':Ext.getCmp('domeinBestellen').getValue(),
						'form[pakket]':Ext.get('pakketNaam').dom.value,
						'form[ordernummer]':randomKey(9),
						'form[spamfilter]':Ext.getCmp('spamfilter').getValue(),
						'form[backup]':Ext.getCmp('backuppack').getValue(),
						'form[support]':Ext.getCmp('support').getValue(),
						'form[akkoord]':Ext.getCmp('registratieAkkoord').getValue(),
						'form[bedrijfsnaam]':Ext.getCmp('bedrijfsnaam_reg').getValue(),
						'form[voornaam]':Ext.getCmp('voornaam_reg').getValue(),
						'form[achternaam]':Ext.getCmp('achternaam_reg').getValue(),
						'form[postcode]':Ext.getCmp('postcode_reg').getValue(),
						'form[huisnummer]':Ext.getCmp('huisnummer_reg').getValue(),
						'form[offerte]':offerte,
						'form[telefoon]':Ext.getCmp('telefoon_reg').getValue(),
						'form[email]':Ext.getCmp('email_reg').getValue(),
						'form[adres]':adres,
						'form[plaats]':plaats,
						'form[provincie]':provincie,
						'form[land]':land,
						'form[houderwijziging]':houderwijziging,
						'form[totaal]':Ext.getCmp('totaalBedrag').getValue(),
						'hAsH':'d17650308b7f627a9e6c3cb78f0db019',
						'form[betaalmethode]':Ext.get('betaalMethode').dom.value
					},
					success: function (result, request) {
						//this.close();
						box.hide();
						if (offerte == false){
							location.href= '/include/paymentSetup.php?bestellingId='+result.responseText;
						} else {
							location.href= '/offerte/verstuurd';
						}
						
					},
					failure: function (result, request) {
						box.hide();
						Ext.MessageBox.alert('Failed', result.responseText);
					}
				});
			},
			previousclick : function() {
				//Zorgen dat als domein niet bij NulEuroHosting besteld word dat dit scherm overgeslagen wordt
	        	if (this.currentCard == 4) {
	        		if (Ext.getCmp('domeinBestellen').getValue() == false){
	        			this.currentCard = this.currentCard-2;
	        		}
	        	}
			},
			nextclick  : function() {
	        	if (this.currentCard == 1) {
	        		domeinnaam = domeinnaamVeld.getValue();
	        		domeinnaam = domeinnaam.replace('http://www.','');
	        		domeinnaam = domeinnaam.replace(' ','');
	        		
	        		if (Ext.getCmp('domeinBestellen').getValue() == false){
	        			this.currentCard = this.currentCard+2;
	        		} else {
	        			var box = Ext.MessageBox.wait('Moment alsjeblieft', 'Bezig met het nakijken van beschikbaarheid domein');
		        		Ext.Ajax.request({ 
							url : '/javascript/NulEuroHosting/ajaxRequests/domainCheck.php', 
							method : 'POST',
							params : 'domain='+domeinnaam,
							success : 
								function(response, options) {
									var Akkoord = Ext.getCmp('registratieAkkoord');
									switch(response.responseText){
										case 'BESCHIKBAAR':
										  var kleur = 'green';
										  var domeinMelding = '- Ik ben me er volledig van bewust dat ik bovenstaand domein op mijn naam registreer en hiervoor jaarlijks, tot wederopzegging, voor betaal.<br><br>- Ik geef NulEuroHosting de machtiging dit domein op mijn naam te registreren.';
										  Akkoord.show();
										  break;
										case 'NIET BESCHIKBAAR':
										  var kleur = 'red';
										  var domeinMelding = 'Dit domein kunnen wij niet registreren of verhuizen, hierdoor is het niet mogelijk om verder te gaan. Kies een ander domein door op vorige te klikken.';
										  Akkoord.hide();
										  break;
										case 'BEZET':
										  var kleur = 'red';
										  var domeinMelding = '- Ik ben de rechtmatige eigenaar van het domein en verhuis deze naar NulEuroHosting.<br><br>- Ik geef NulEuroHosting de machtiging dit domein op mijn naam te registreren.';
										  Akkoord.show();
										  break;
									}
									
									domeinLabel.setText('Het domein: '+domeinnaam+' is <span style="color: '+kleur+';"><b>'+response.responseText+ '</b></span> voor registratie.',false);
									
									var domeinVoorwaarden = Ext.getCmp('domeinVoorwaarden');
									domeinVoorwaarden.body.update(Ext.DomHelper.markup({
										tag: 'p',
										cn: 'Bericht bijwerken',
										children: [{
											cn: domeinMelding
										}]
									}));
								}, 
							failure : 
								function(response, options) { 
									Ext.Msg.alert('Fout',response.responseText + "FAILURE"); 
								}		
						});
						box.hide();
					}
	        	}
	        	
				//GEEN houder invullen bij offerte aanvraag
	        	if (this.currentCard == 2) {
	        		this.currentCard = this.currentCard+1;
	        	}
	        	//Als mensen offerte willen dan wizard afronden
	        	if (this.currentCard == 6) {
	        		var offerte = Ext.getCmp('offerteAanvragen').getValue();
	        		if (offerte == true){
	        			this.onFinish();
	        		}
	        	}

	        	//Overzicht maken van bestellen
	        	if (this.currentCard == 4) {
	        		var totaal = 0;
	        		var domeinnaam = Ext.get('domeinnaam').dom.value;
	        		domeinnaam = domeinnaam.replace('http://www.','');
	        		var pakket = Ext.get('pakketNaam').dom.value;
	        		var backuppack = Ext.getCmp('backuppack').getValue();
	        		var spamfilter = Ext.getCmp('spamfilter').getValue();
	        		var support = Ext.getCmp('support').getValue();
	        		var meldingKosten = '';
	        		var overzicht = 'Overzicht van uw bestelling<br><br><table style="width:90%;"><tr><th><b>Product&nbsp;</b></th><th><b>Periode</b></th><th align="right"><b>Prijs</b></th></tr>';
	        		
	        		switch(pakket){
						case 'oranje':
						  var pakketPrijs = 0;
						  pakket = 'Oranje';
						  break;
						case 'groen':
						  var pakketPrijs = 12;
						  pakket = 'Groen';
						  break;
						case 'blauw':
						  var pakketPrijs = 24;
						  pakket = 'Blauw';
						  break;
						case 'pro':
						  var pakketPrijs = 36;
						  pakket = 'Professional';
						  break;
						case 'extreme':
						  var pakketPrijs = 48;
						  pakket = 'eXtreme';
						  break;
					}
					
					totaal = totaal + pakketPrijs;
					
					if ((domeinnaam != "") && (Ext.getCmp('domeinBestellen').getValue() == true)) {
						overzicht = overzicht+'<tr><td>Domein: '+domeinnaam+'</td><td>1 jaar</td><td>&euro; 20,- p/j</td></tr>';
						totaal = totaal + 20;
						
						var domeinVerhoging = 0;
						var extensieDomein = domeinnaam.split(".");
						var extensie = extensieDomein[1];
						
						switch(extensie){
							case 'eu':
							  domeinVerhoging = 5;
							  overzicht = overzicht+'<tr><td>Extra kosten .'+extensie+' domein</td><td>1 jaar</td><td>&euro; '+domeinVerhoging+',- p/j</td></tr>';
							  break;
							case 'de':
							  domeinVerhoging = 11;
							  overzicht = overzicht+'<tr><td>Extra kosten .'+extensie+' domein</td><td>1 jaar</td><td>&euro; '+domeinVerhoging+',- p/j</td></tr>';
							  break;
							case 'be':
							  domeinVerhoging = 4;
							  overzicht = overzicht+'<tr><td>Extra kosten .'+extensie+' domein</td><td>1 jaar</td><td>&euro; '+domeinVerhoging+',- p/j</td></tr>';
							  break;
							case 'biz':
							  domeinVerhoging = 5;
							  overzicht = overzicht+'<tr><td>Extra kosten .'+extensie+' domein</td><td>1 jaar</td><td>&euro; '+domeinVerhoging+',- p/j</td></tr>';
							  break;
							case 'mobi':
							  domeinVerhoging = 20;
							  overzicht = overzicht+'<tr><td>Extra kosten .'+extensie+' domein</td><td>1 jaar</td><td>&euro; '+domeinVerhoging+',- p/j</td></tr>';
							  break;
							case 'nu':
							  domeinVerhoging = 50;
							  overzicht = overzicht+'<tr><td>Extra kosten .'+extensie+' domein</td><td>1 jaar</td><td>&euro; '+domeinVerhoging+',- p/j</td></tr>';
							  break;
						}
						totaal = totaal + domeinVerhoging;
					} else {
						overzicht = overzicht+'<tr><td>Administratiekosten</td><td>1 jaar</td><td>&euro; 9,- p/j</td></tr>';
						overzicht = overzicht+'<tr><td>Eigen beheer: '+domeinnaam+'</td><td>1 jaar</td><td>&euro; 0,- p/j</td></tr>';
						totaal = totaal + 9;
					}
					
					overzicht = overzicht+'<tr><td>Pakket: '+pakket+'</td><td>1 jaar</td><td>&euro; '+pakketPrijs+',- p/j</td></tr>';
					
					if (spamfilter == true){
						overzicht = overzicht+'<tr><td>Extra: Spamfilter</td><td>1 jaar</td><td>&euro; 10,- p/j</td></tr>';
						totaal = totaal + 10;
					}
					if (support == true || pakket == 'Professional'){
						if (pakket != 'Professional'){
							totaal = totaal + 15;
							overzicht = overzicht+'<tr><td>Extra: Support</td><td>1 jaar</td><td>&euro; 15,- p/j</td></tr>';
						} else {
							overzicht = overzicht+'<tr><td>Extra: Support</td><td>1 jaar</td><td>Inclusief</td></tr>';
						}
					}
					if (backuppack == true){
						overzicht = overzicht+'<tr><td>Extra: Dagelijkse backup</td><td>1 jaar</td><td>&euro; 25,- p/j</td></tr>';
						totaal = totaal + 20;
					}
					
					if (totaal < 21){
						overzicht = overzicht+'<tr><td>Transactiekosten</td><td>Per transactie</td><td>&euro; 1,-</td></tr>';
						meldingKosten = 'Uw totaalbedrag is lager dan 21 euro, hierdoor zijn wij genoodzaakt transactiekosten voor de online betaling in rekening te brengen.<br><br>';
						totaal = totaal + 1;
						transactiekosten = 'true';
					}
					
					overzicht=overzicht+'<tr style="height:25px;"><td colspan="3"></td></tr>';
					overzicht=overzicht+'<tr><td align="right"><td><b>TOTAAL</b></td><td><b>&euro; '+totaal+',-</b></td></tr>';
					
					overzicht = overzicht+'</table><br>';
					overzicht = overzicht+meldingKosten;
					overzicht = overzicht+'Indien u een wijziging wenst aan te brengen aan uw bestelling, dan kunt u op vorige klikken.';
					
					Ext.getCmp('totaalBedrag').setValue(totaal*100);
					
					var bestellingsOverzicht = Ext.getCmp('bestellingsOverzicht');
					bestellingsOverzicht.body.update(Ext.DomHelper.markup({
						tag: 'p',
						cn: 'Bericht bijwerken',
						children: [{
							cn: overzicht
						}]
					}));
	        	}
	        	
	        }
		},
        cardPanelConfig : {
            defaults : {
                baseCls    : 'x-small-editor',
                bodyStyle  : 'padding:10px 5px 5px 120px;background-color:#F6F6F6;background-image:url(/images/wizard.png);',
                border     : false
            }
        },   
           
        cards : [
        
            // first card with welcome message
            new Ext.ux.Wiz.Card({
                title : 'Introductie',
                items : [{
                    border    : false,
                    bodyStyle : 'background:none;',
                    html      : 'Welkom bij de NulEuroHosting wizard.<br /><br />'+
                    			'In deze wizard voert u stap voor stap uw bestelling of offerte aanvraag uit. Na het afsluiten van de wizard wordt uw verzoek verwerkt en zal het betalingsscherm in beeld verschijnen of uw offerte verstuurd worden.<br /><br />'+
                    			'Na het afronden van de wizard zullen uw gegevens meteen verwerkt worden en zult u alle gegevens in uw mailbox ontvangen.'
                }]    
            }),
            
            new Ext.ux.Wiz.Card({
                title        : 'Domeinnaam keuze',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px'
                },
                items : [{
	                    border    : false,
	                    bodyStyle : 'background:none;padding-bottom:30px;',
	                    html      : 'Kies eerst de domeinnaam die u wilt registreren, verhuizen of wilt gebruiken voor uw hostingpakket.<br /><br />'+
	                                'Na de keuze van uw domeinnaam krijgt u de keuze welk hostingpakket en welke extra\'s u wilt bestellen.<br/><br/>'+
	                                'Zorg ervoor dat u een geldige domeinnaam invult zoals: http://www.mijndomein.nl en niet zoals: http://www.asd.anderdomein.nl!'    
	                },
                    domeinnaamVeld = new Ext.form.TextField({
                        name       : 'form[domeinnaam]',
                        fieldLabel : 'Domeinnaam',
                        value: 'http://www.',
                        allowBlank : false,
                        maxLength: 50,
                        name: 'form[domeinnaam]',
                        id: 'domeinnaam',
                        width: '200',
                        validator  : function(v){
                            var url = new RegExp();
							url.compile("^(http://www\.)([a-z0-9-])+\.(nl|be|biz|eu|de|com|net|org|mobi|nu)$");
							if ( (substr_count(v, '.')) > 2 ){
								return false;
							} else {
								return url.test(v);
							} 
                        }
                    }),
                    {
	                    border    : false,
	                    bodyStyle : 'background:none;padding-bottom:30px;',
	                    html      : ''    
	                },
                	{
	                    xtype: 'xcheckbox',
	                    id: 'domeinBestellen',
	                    labelStyle : 'font-size:11px; width:255px;',
						fieldLabel : 'Ik wil dit domein laten beheren door NulEuroHosting',
						listeners: {
							check: function(){
								if (Ext.getCmp('domeinBestellen').getValue() == false){
									Ext.Msg.alert('Waarschuwing','Let op, indien je deze optie uitzet registreren wij je domeinnaam NIET! Het blijft echter wel noodzakelijk de domeinnaam in te vullen die je wilt gebruiken voor je hostingpakket.');
								}
							}
						},
				        checked: true
	                }
                
                ]    
            }),            
            
            new Ext.ux.Wiz.Card({
                title        : 'Domeinnaam registratie/verhuizing',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px'
                },
                items : [domeinLabel,
                	{
                		border: false,
                		id: 'domeinVoorwaarden',
	                    bodyStyle: 'background:none;padding-top:25px; padding-bottom:50px;',
                		html: ''
                		
                	},
                	{
	                    xtype: 'xcheckbox',
	                    id: 'registratieAkkoord',
	                    labelStyle : 'font-size:11px; width:350px;',
						fieldLabel : 'Ik verklaar hierbij dat ik akkoord ga met alle bovengenoemde stellingen',
				        name: 'form[akkoord]',
				        checked: false,
				        validateValue: function(){
							return this.getValue();
						},
				        allowBlank : false,
				        hidden: false
	                }
                
                ]    
            }),
            
            // third card with input field email-address
            new Ext.ux.Wiz.Card({
                title        : 'Domeinhouder',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px;'
                },
                items : [{
		            xtype:'fieldset',
		            checkboxToggle:true,
		            title: 'Ik wil een andere eigenaar voor het domein opgeven dan mezelf',
		            autoHeight:true,
		            defaults: {width: 60},
		            defaultType: 'textfield',
		            listeners:{
						expand:function(o,a){
							Ext.getCmp('voornaam_reg').allowBlank = false;
							Ext.getCmp('achternaam_reg').allowBlank = false;
							Ext.getCmp('postcode_reg').allowBlank = false;
							Ext.getCmp('huisnummer_reg').allowBlank = false;
							Ext.getCmp('email_reg').allowBlank = false;
						},
						collapse:function(o,a){
							Ext.getCmp('voornaam_reg').allowBlank = true;
							Ext.getCmp('achternaam_reg').allowBlank = true;
							Ext.getCmp('postcode_reg').allowBlank = true;
							Ext.getCmp('huisnummer_reg').allowBlank = true;
							Ext.getCmp('email_reg').allowBlank = true;
						}
			        },
		            collapsed: true,
		            items :[
			            {
		                	xtype:'textfield',
		                	fieldLabel: 'Bedrijfsnaam',
					    	id:'bedrijfsnaam_reg',
					        name:'form[bedrijfsnaam]',
					        allowBlank:true,
					        enableKeyEvents: true,
					        width: 200	
		                },{
		                	xtype:'textfield',
		                	fieldLabel: 'Voornaam',
					    	id:'voornaam_reg',
					        name:'form[voornaam]',
					        enableKeyEvents: true,
					        width: 200	
		                },{
		                	xtype:'textfield',
		                	fieldLabel: 'Achternaam',
					    	id:'achternaam_reg',
					        name:'form[achternaam]',
					        enableKeyEvents: true,
					        width: 200	
		                },postcodeveld_reg,{
		                	xtype:'textfield',
		                	fieldLabel: 'Huis nr',
		                    name: 'form[huisnummer]',
		                    id:'huisnummer_reg',
		                    width: 50,
		                    height: 23
		                },{
		                    xtype:'textfield',
		                    fieldLabel: 'Telefoon',
		                    name: 'form[telefoon]',
		                    id: 'telefoon_reg',
		                    width: 150
		                },{
		                    xtype:'textfield',
		                    fieldLabel: 'E-mail',
		                    name: 'form[email]',
		                    id: 'email_reg',
		                    vtype: 'email',
		                    width: 200
		                }
		            ]
		        },{
	                    xtype: 'xcheckbox',
	                    id: 'houderAkkoord',
	                    labelStyle : 'font-size:11px; width:200px;',
						fieldLabel : 'De huidige gegevens zijn juist',
				        name: 'form[akkoord]',
				        checked: false,
				        validateValue: function(){
							return this.getValue();
						},
				        allowBlank : false,
				        hidden: false
	                }
                ]    
            }), 
            
            // third card with input field email-address
            new Ext.ux.Wiz.Card({
                title        : 'Pakket keuze',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px;'
                },
                items : [{
                        border    : false,
                        bodyStyle : 'background:none;padding-bottom:30px;',
                        html      : 'Kies hier uw hosting pakket en uw pakketopties.'
                    },
                    new Ext.form.ComboBox({
	                    fieldLabel: 'Hosting pakket',
	                    emptyText: 'Kies uw hosting pakket',
						store: pakkettenStore,
						displayField: 'name',
						valueField: 'titel',
						selectOnFocus: true,
						allowBlank : false,
						mode: 'local',
						typeAhead: true,	
						editable: false,
						triggerAction: 'all',
	                    name: 'form[pakket]',
	                    minListWidth: 250,
	                    width: 250,
	                    id: 'pakket',
	                    hiddenName : 'pakketNaam'
                    }),{
                    	border    : false,
                    	bodyStyle : 'background:none;padding-bottom:30px;'
                    },{
	                    xtype:'xcheckbox',
	                    labelStyle : 'font-size:11px; width:220px;',
	                    fieldLabel: 'Uitgebreide spamfilter <b>(&euro; 10,- per jaar)</b>',
	                    name: 'form[spamfilter]',
	                    id: 'spamfilter',
	                    checked: false
	                },{
	                    xtype:'xcheckbox',
	                    labelStyle : 'font-size:11px; width:220px;',
	                    fieldLabel: 'Support pakket <b>(&euro; 15,- per jaar)</b>',
	                    name: 'form[support]',
	                    id: 'support',
	                    checked: false
	                },{
	                    xtype:'xcheckbox',
	                    labelStyle : 'font-size:11px; width:220px;',
	                    fieldLabel: 'Dagelijkse backup <b>(&euro; 20,- per jaar)</b>',
	                    name: 'form[backup]',
	                    id: 'backuppack',
	                    checked: false
	                }
                ]    
            }), 
            
            new Ext.ux.Wiz.Card({
                title        : 'Overzicht',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px'
                },
                items : [{
                        border    : false,
                        id		  : 'bestellingsOverzicht',
                        bodyStyle : 'background:none;padding-bottom:5px;',
                        html      : 'Inladen overzicht...'
                    },{
	                    xtype:'xcheckbox',
	                    labelStyle : 'font-size:11px; width:350px;',
	                    fieldLabel: 'Ik wil alleen een offerte toegemaild krijgen en eventueel later betalen',
	                    id: 'offerteAanvragen',
	                    checked: false
	                },{
	                    xtype:'textfield',
	                    fieldLabel: '',
	                    id: 'totaalBedrag',
	                    hidden : true,
	                    hideMode:'offsets'
	                }
                ]    
            }),    
            
            new Ext.ux.Wiz.Card({
                title        : 'Inloggen',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px'
                },
                items : [{
                        border    : false,
                        id		  : 'loginText',
                        bodyStyle : 'background:none;padding-bottom:15px;',
                        html      : 'Sorry, voordat u uw bestelling af kunt ronden dient u in te loggen. Dit is nodig om uw domeinnaam op uw naam te zetten, zodat u officieel de eigenaar bent en om alle overige administratieve zaken goed te verwerken.<br><br> Indien u nog niet bent aangemeld op onze website kunt u deze aanmaken door op "aanmelden" te klikken.'
                    },{
	                    xtype: 'textfield',
	                    fieldLabel: 'E-mail adres',
	                    id: 'inlog_reg_email'
	                },{
	                    xtype: 'textfield',
	                    fieldLabel: 'Password',
	                    inputType:'password',
	                    id: 'inlog_reg_password'
	                },{
	                	xtype: 'button',
	                	text: 'Login',
	                	id: 'login_reg_btn',
	                	iconCls: 'login',
	                	listeners:
	            			{ 'click': function(){
	            				Ext.Ajax.request({ 
									url : '/include/login.php', 
									method : 'POST',
									params : 'email='+Ext.getCmp('inlog_reg_email').getValue()+'&password='+Ext.getCmp('inlog_reg_password').getValue(),
									success : 
										function(response, options) { 
											var resultUser=response.responseText;
											
											if (resultUser == 'failed'){
												Ext.Msg.alert('Login', 'Verkeerde combinatie tussen email en wachtwoord!');
											}
											
											if (resultUser == 'gelukt'){
												Ext.getCmp('ingelogdField').setValue('aangemeld');
												Ext.getCmp('login_reg_btn').disable();
												Ext.getCmp('aanmelden_reg_btn').disable();
												Ext.Msg.alert('Login','U bent aangemeld');
											}
										}
								});
	            			}
	            		}
	                },{
                        border    : false,
                        id		  : 'aanmeldText',
                        bodyStyle : 'background:none;padding-top:15px;padding-bottom:15px;',
                        html      : 'Nog niet aangemeld?'
                    },{
	                	xtype: 'button',
	                	text: 'Aanmelden',
	                	id: 'aanmelden_reg_btn',
	                	iconCls: 'user',
	                	listeners:
	            			{ 'click': function(){
	            				aanmeldWindow.show();
	            				aanmeldWindow.setSize(900,450);
	            			}
	            		}
	                },{
	                    xtype:'textfield',
	                    fieldLabel: '',
	                    id: 'ingelogdField',
	                    hidden : true,
	                    allowBlank : false,
	                    hideMode:'offsets'
	                }
                ]    
            }),      

            // fourth card with finish-message
            new Ext.ux.Wiz.Card({
                title        : 'Betaling',
                monitorValid : true,
                items : [{
                    border    : false,
                    bodyStyle : 'background:none;padding-bottom:30px;',
                    html      : 'Kies uw betaalmethode en klik op afronden om de bestellen te betalen en te activeren.' 
                },new Ext.form.ComboBox({
                    fieldLabel: 'Betaalmethode',
                    emptyText: 'Kies uw betaalmethode',
					store: betaalMethodesStore,
					displayField: 'name',
					valueField: 'titel',
					selectOnFocus: true,
					allowBlank : false,
					mode: 'local',
					typeAhead: true,	
					editable: false,
					triggerAction: 'all',
                    minListWidth: 175,
                    width: 175,
                    id: 'betaalMethodes',
                    hiddenName : 'betaalMethode'
                })]  
            })   
        
        
        ]
    });
    
    //Enable bestelknop
    bestelButton.on('click', function(){
    	wizard.show();
    });
    
	var loginForm = new Ext.FormPanel({ 
		region: 'center',
	    labelWidth:80,
	    id: 'loginform',
	    frame:true, 
	    bodyStyle:'padding:5px',
	    width: '100%',
	    height: '100%', 
	    defaultType:'textfield',
		monitorValid:true,
	    items:[{
	            fieldLabel:'E-mail adres', 
	            name:'inlogemail',
	            id:'inlogemail',
	            allowBlank:false 
	        },{ 
	            fieldLabel:'Paswoord', 
	            name:'inlogpassword', 
	            id:'inlogpassword', 
	            inputType:'password', 
	            allowBlank:false 
	        }],
	    buttons:[{ 
	            text:'OK',
	            iconCls: 'login',
	            listeners:
	            	{ 'click': function()
	            		{ 
		                    Ext.Ajax.request({ 
								url : '/include/login.php', 
								method : 'POST',
								params : 'email='+Ext.getCmp('inlogemail').getValue()+'&password='+Ext.getCmp('inlogpassword').getValue(),
								success : 
									function(response, options) { 
										var resultUser=response.responseText;
										
										if (resultUser == 'failed'){
											Ext.Msg.alert('Login', 'Verkeerde combinatie tussen email en wachtwoord!');
										}
										
										if (resultUser == 'gelukt'){
											loginWindow.close();
											location.href= '/';
										}
									}
							});
	            		} 
					}
	        }] 
	});
	
	var loginWindow = new Ext.Window({
		title: 'NulEuroHosting bestelsysteem login',
		y: 150,
        closable: true,
        resizable: false,
        width: 300,
        height: 180,
        plain: true,
        layout: 'border',
        closeAction: 'hide',
        items: [loginForm]
	});
	
	loginButton.on('click',function(){
			loginWindow.show();
    });
    
	var formulier = new Ext.FormPanel({
    	region: 'center',
        labelWidth: 95,
        labelAlign: 'left',
        frame: true,
        url: 'include/core/add.php',
        title: 'Klantenregistratie',
        bodyStyle:'padding:5px',
		layout: 'form',
        id: 'adresboek',
        items: [{
            xtype:'fieldset',
            checkboxToggle:true,
            title: 'Ik kom uit voor een bedrijf',
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            collapsed: true,
            items :[{
                    fieldLabel: 'Bedrijfsnaam',
                    name: 'form[bedrijfsnaam]',
                    allowBlank:true
                },{
                    fieldLabel: 'KVK nummer',
                    name: 'form[kvk]'
                },{
                    xtype:'combo',
                    fieldLabel: 'Bedrijfsvorm',
                    emptyText: 'Kies uw bedrijfsvorm',
					store: bedrijfsvormStore,
					displayField: 'name',
					valueField: 'titel',
					selectOnFocus: true,
					mode: 'local',
					typeAhead: true,	
					editable: false,
					triggerAction: 'all',
                    name: 'form[bedrijfsvorm]',
                    id: 'bedrijfsform',
                    hiddenName : 'bedrijfsvorm2'
                }, {
                    fieldLabel: 'BTW nummer',
                    name: 'form[btw]'
                }
            ]
        },{
            layout:'column',
            border:false,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                	xtype:'textfield',
                	fieldLabel: 'Voornaam',
			    	id:'voornaam',
			        name:'form[voornaam]',
			        allowBlank:false,
			        enableKeyEvents: true,
			        width: 250	
                },{
                	xtype:'textfield',
                	fieldLabel: 'Achternaam',
			    	id:'achternaam',
			        name:'form[achternaam]',
			        allowBlank:false,
			        enableKeyEvents: true,
			        width: 250	
                },postcodeveld,{
                	layout:'column',
                	id: 'adrescolumn',
		            border:false,
		            width: 360,
		            height: 28,
		            items:[{
		            	xtype: 'label',
		            	text: 'Adres:',
		            	style: 'margin-top:3px;font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;',
		            	width: 100
		            	},{
						width: 200,
		                border:false,
		                items: [{
		                	xtype:'textfield',
		                    name: 'form[adres]',
		                    allowBlank:false,
		                    id:'adres',
							labelWidth: 0,
							labelSeparator: '',
		                    width: 195,
		                    height: 23
		                }]
		            	},{
						width: 55,
		                border:false,
		                items: [{
		                	xtype:'textfield',
		                    name: 'form[huisnummer]',
		                    allowBlank:false,
		                    id:'huisnummer',
		                    labelWidth: 0,
		                    labelSeparator: '',
		                    width: 50,
		                    height: 23
		                }]	
		            }]
                },{
                    xtype:'textfield',
                    fieldLabel: 'Plaats',
                    name: 'form[plaats]',
                    id:'plaats',
                    allowBlank:false,
                    width: 250
                },{
                    xtype:'textfield',
                    fieldLabel: 'Provincie',
                    name: 'form[provincie]',
                    id:'provincie',
                    allowBlank:false,
                    width: 250
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Telefoon',
                    name: 'form[telefoon]',
                    id: 'telefoon',
                    allowBlank:true,
                    width: 150
                },{
                    xtype:'textfield',
                    fieldLabel: 'Mobiel',
                    name: 'form[mobiel]',
                    id: 'mobiel',
                    allowBlank:true,
                    width: 150
                },{
                    xtype:'textfield',
                    fieldLabel: 'E-mail',
                    name: 'form[email]',
                    id: 'email',
                    allowBlank:false,
                    listeners:{ 
                    	'blur': function() {
                    		Ext.Ajax.request({ 
								url : '/include/userExists.php', 
								method : 'POST',
								params : 'email='+Ext.getCmp('email').getValue(),
								success : 
									function(response, options) { 
										var resultUser=response.responseText;
										if (resultUser == 'true'){
											Ext.Msg.alert('Foutmelding','User bestaat reeds, vraag je wachtwoord op bij: support@nuleurohosting.nl');
											var aanmeldenNietToegestaan = true;
											Ext.getCmp('saveBtn').disable();
										}
									}
							});
                    	}
                    },
                    vtype: 'email',
                    width: 250
                },{
                    xtype:'combo',
                    fieldLabel: 'Land',
                    emptyText: 'Selecteer een land',
					store: countryStore,
					displayField: 'name',
					valueField: 'alpha2code',
					selectOnFocus: true,
					mode: 'local',
					typeAhead: true,	
					editable: false,
					triggerAction: 'all',
                    name: 'form[land]',
                    id: 'land',
                    width: 250
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Rekeningnummer',
                    name: 'form[rekeningnummer]',
                    id: 'rekeningnummer',
                    allowBlank:false,
                    width: 150
                },{
                    xtype:'textfield',
                    fieldLabel: 'Fax',
                    name: 'form[fax]',
                    id: 'fax',
                    width: 150
                }]
            }]
        }],

        buttons: [{
            text: 'Cancel',
            iconCls: 'cancel',
            formBind: true,
            handler:
            	function(){ 
					aanmeldWindow.hide();
                } 
            },{
            text: 'Opslaan',
            iconCls: 'save',
            id: 'saveBtn',
            formBind: true,
            handler:function(){ 
            	//VELDEN WEER ACTIVEREN
            	formulier.getForm().findField('adres').enable();
				formulier.getForm().findField('plaats').enable();
				formulier.getForm().findField('provincie').enable();
				
				formulier.getForm().submit({ 
					method:'POST',
					params : 'formulier=true&table=mod_nuleurohosting_klanten&password=random&id='+id+'&hAsH=d17650308b7f627a9e6c3cb78f0db019',
					waitTitle:'Connecting',
					waitMsg:'Gegevens worden opgeslagen...',
					success:function(){ 
						formulier.getForm().reset();
						aanmeldWindow.hide(); 
						Ext.Msg.alert('Welkom bij NulEuroHosting!','Uw aanmelding is zojuist geslaagd! Binnen enkele minuten krijgt u een bevestiging met uw inloggegevens toegezonden.');
					},	 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Opslaan mislukt!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Warning!', 'De server is niet bereikbaar! Error: 2 ' + action.response.responseText + "<br />U kunt deze error doorgeven aan NulEuroHosting (support@nuleurohosting.nl)"); 
                            } 
                            
                        } 
                    }); 
                } 
            }] 
    });
    
    var aanmeldWindow = new Ext.Window({
        title: 'NulEuroHosting bestelsysteem - Aanmelding nieuwe klant',
        closable: true,
        resizable: false,
        y: 120,
        width: 900,
        height: 400,
        plain: true,
        layout: 'border',
        closeAction: 'hide',
        items: [formulier]
    });
    
    
    aanmeldButton.on('click', function(){
		aanmeldWindow.show(this);
        aanmeldWindow.setSize(900,450);
    });
 	
	pakkettenWindow = new Ext.Window({
    	title:'Pakketten overzicht',
    	closeAction:'hide',
        width:650,
        height:480,
        plain:true,
        y: 120,
        closable:true,
        layout:'accordion',
        layoutConfig:{animate:true},
        defaults:{bodyStyle: 'padding:0px; margin: 0px;'},
        border:false,
        items:[{
			title:'Oranje',
			id: 'oranje_accordion',
            defaults:{frame:false, border: false, height: 300, bodyStyle: 'padding:0px; margin: 0px;'},
            layout: 'table',
            layoutConfig:{columns:2},
            items:[{
				html: '<img src="/images/hostingpakket.png" style="margin-top: 75px;"/>',
				bodyStyle: 'margin: 0px;padding:0px;background:#f68a2a;',
				width: 275
            },{
            	html: '<span><ul> <li>- 750 MB schijfruimte</li><li>- 10000 MB dataverkeer</li><li>- 50 pop mailboxen</li> <li>- PHP5 MySQL5 Apache Linux ASP</li> <li>- Virtuele disk toegang via FTP</li> <li>- Plesk Controlpanel</li> <li>- Onbeperkt aantal subdomeinen</li> <li>- E-mail: afwezigheid berichten</li> <li>- E-mail: email forwarding</li> <li>- E-mail: IMAP toegang</li> <li>- Folder security</li>  <li>- Geen support</li></ul> </span> ',
            	title: 'Hostingpakket Oranje',
            	bodyStyle: 'margin-left: 10px;',
            	frame: true,
            	width: 360
            }]
        },{
            title:'Groen',
            id: 'groen_accordion',
            defaults:{frame:false, border: false, height: 300, bodyStyle: 'margin: 0px; padding:0px'},
            layout: 'table',
            layoutConfig:{columns:2},
            items:[{
				html: '<img src="/images/hostingpakket.png" style="margin-top: 75px;"/>',
				bodyStyle: 'margin: 0px;padding:0px;background:#adef2d;font-weight:bold;',
				width: 275
            },{
            	html: '<span><ul> <li>- 1500 MB schijfruimte</li><li>- 15000 MB dataverkeer</li><li>- 100 pop mailboxen</li> <li>- PHP5 MySQL5 Apache Linux ASP</li> <li>- Virtuele disk toegang via FTP</li> <li>- Plesk Controlpanel</li> <li>- Onbeperkt aantal subdomeinen</li> <li>- E-mail: afwezigheid berichten</li> <li>- E-mail: email forwarding</li> <li>- E-mail: IMAP toegang</li> <li>- Folder security</li>  <li>- Standaard geen support</li></ul> </span> ',
            	title: 'Hostingpakket Groen',
            	bodyStyle: 'margin-left: 10px;',
            	frame: true,
            	width: 360
            }]
        },{
            title:'Blauw',
            id: 'blauw_accordion',
            defaults:{frame:false, border: false, height: 300, margin: 0},
            layout: 'table',
            layoutConfig:{columns:2},
            items:[{
				html: '<img src="/images/hostingpakket.png" style="margin-top: 75px;"/>',
				bodyStyle: 'margin: 0px;padding:0px;background:#1619f4;',
				width: 275
            },{
            	html: '<span> <ul> <li>- 4000 MB schijfruimte</li><li>- 20000 MB dataverkeer</li><li>- 200 pop mailboxen</li> <li>- PHP5 MySQL5 Apache Linux ASP</li> <li>- Virtuele disk toegang via FTP</li> <li>- Plesk Controlpanel</li> <li>- Onbeperkt aantal subdomeinen</li> <li>- E-mail: afwezigheid berichten</li> <li>- E-mail: email forwarding</li> <li>- E-mail: IMAP toegang</li> <li>- Folder security</li>  <li>- Standaard geen support</li></ul>  </span> ',
            	title: 'Hostingpakket Blauw',
            	bodyStyle: 'margin-left: 10px;',
            	frame: true,
            	width: 360
            }]
        },{
            title:'Professional',
            id: 'pro_accordion',
            defaults:{frame:false, border: false, height: 300, margin: 0},
            layout: 'table',
            layoutConfig:{columns:2},
            items:[{
				html: '<img src="/images/hostingpakket.png" style="margin-top: 75px;"/>',
				bodyStyle: 'margin: 0px;padding:0px;background:#f6fafa;',
				width: 275
            },{
            	html: '<span><ul> <li>- 4000 MB schijfruimte</li><li>- 10000 MB high available dataverkeer</li><li>- Onbeperkt aantal pop mailboxen</li> <li>- PHP5 MySQL5 Apache Linux ASP</li> <li>- Virtuele disk toegang via FTP</li> <li>- Plesk Controlpanel</li> <li>- Onbeperkt aantal subdomeinen</li> <li>- E-mail: afwezigheid berichten</li> <li>- E-mail: email formarding</li> <li>- E-mail: IMAP toegang</li> <li>- Folder security</li>  <li>- <b>Standaard support!</b></li><li>- <b>Uptime garantie (99.7%)!</b></li></ul> </span> ',
            	title: 'Hostingpakket Professional',
            	bodyStyle: 'margin-left: 10px;',
            	frame: true,
            	width: 360
            }]
        },{
            title:'eXtreme',
            id: 'extreme_accordion',
            defaults:{frame:false, border: false, height: 300, margin: 0},
            layout: 'table',
            layoutConfig:{columns:2},
            items:[{
				html: '<img src="/images/hostingpakket.png" style="margin-top: 75px;"/>',
				bodyStyle: 'margin: 0px;padding:0px;background:#f6fafa;',
				width: 275
            },{
            	html: '<span><ul> <li>- 10000 MB schijfruimte</li><li>- 100000 MB dataverkeer</li><li>- 250 pop mailboxen</li> <li>- PHP5 MySQL5 Apache Linux ASP</li> <li>- Virtuele disk toegang via FTP</li> <li>- Plesk Controlpanel</li> <li>- Onbeperkt aantal subdomeinen</li> <li>- E-mail: afwezigheid berichten</li> <li>- E-mail: email forwarding</li> <li>- E-mail: IMAP toegang</li> <li>- Folder security</li>  <li>- Standaard geen support</li></ul> </span> ',
            	title: 'Hostingpakket eXtreme',
            	bodyStyle: 'margin-left: 10px;',
            	frame: true,
            	width: 360
            }]
        }],
        buttons: [{
            text: 'Sluiten',
            handler: function(){
                pakkettenWindow.hide();
            }
        }]
    });
    

    


    
});

function pakkettenScherm(pakket){
	pakkettenWindow.show();
	Ext.getCmp(pakket+'_accordion').expand();
}

function bestelWizard(offerteKnop){
	if (offerteKnop){
		Ext.getCmp('offerteAanvragen').setValue('true');
	}
	wizard.show();
}