/**
 * @author Elvin
 */

function alert(msg) {
	siteFunctions.popupWindowOK('Alert', msg, '');
}

function testing(msg) {
	siteFunctions.popupWindowOK('Alert', msg, '');
}

function $(elementID) {
	return document.getElementById(elementID);
}

function createMyOwnItem(createType) {
	Ext.QuickTips.init();

	var addItemType;
	var checkPartType = false;
	var configurePartCategory = true;
	var babeImage;
	var data;
	var generalName;
	var buttonExampleText;
	var examplePictures = new Array();

	switch (createType) {
		case 'verhicle' :
			examplePictures[0] = '/images/admin/createItem/carExample1.jpg';
			examplePictures[1] = '/images/admin/createItem/carExample2.jpg';
			buttonExampleText = 'Voertuig';
			babeImage = '/images/admin/createItem/createVerhicleBabe.jpg';
			addItemType = 'verhicle';
			generalName = 'Voertuig';
			break;
		case 'part' :
			examplePictures[0] = '/images/admin/createItem/partExample1.jpg';
			examplePictures[1] = '/images/admin/createItem/partExample2.jpg';
			buttonExampleText = 'Onderdelen';
			babeImage = '/images/admin/createItem/createPartBabe.jpg';
			checkPartType = true;
			addItemType = 'part';
			configurePartCategory = false;
			generalName = 'Onderdeel';
			break;
		default :
			alert('De configuraties staan verkeerd. Raadpleeg de admin.');
			return;
			break;
	}

	function setTotalPrice() {
		var totalPoints = attriBute1.getValue() + attriBute2.getValue()
				+ attriBute3.getValue();
		var totalPrice = totalPoints * 800;
		var winPrice = totalPoints * 1300;
		var winTotal = winPrice - totalPrice;
		totalValue.setText("Totale Kosten: Punten " + totalPoints
				+ " x € 800 = € " + totalPrice);
		moneyInfo
				.setText("Je hebt een groot voordeel als je een product maakt. Waarde wins: Punten  "
						+ totalPoints
						+ " x € 1500 = waarde € "
						+ winPrice
						+ ". Je WinPrijs =  waarde - Betaalprijs = € "
						+ winTotal
						+ ". Dus je hebt maar liefst € "
						+ winTotal
						+ " gewonnen voor het aanmaken van deze product.");
	}

	function resetFields() {
		attriBute1.setValue(5);
		attriBute2.setValue(5);
		attriBute3.setValue(5);
		name.setValue('');
		setVerhicleType.setValue(verhicleType[0]);
		attribute1Label1.setText('Top Snelheid: ' + attriBute1.getValue());
		attribute1Label2.setText('Handeling: ' + attriBute2.getValue());
		attribute1Label3.setText('Acceleratie: ' + attriBute3.getValue());
		setClass.setValue();
		setVerhicleType.setValue();
		setPartType.setValue();
	}

	var name = new Ext.form.TextField({
		maxLength : 16,
		minLength : 6,
		value : '',
		name : 'name',
		minLengthText : 'Minimale lengte is 6',
		maxLengthText : 'Maximale lengte is 12',
		fieldLabel : 'Naam'
	});

	var attriBute1 = new Ext.Slider({
		width : 100,
		animate : true,
		value : 5,
		name : 'value1',
		increment : 1,
		minValue : 1,
		maxValue : 100,
		plugins : new Ext.ux.SliderTip()
	});

	var classAmmount = new Ext.data.SimpleStore({
		fields : ['name'],
		data : [['1'], ['2'], ['3'], ['4'], ['5']]
	});

	var setClass = new Ext.form.ComboBox({
		store : classAmmount,
		fieldLabel : 'Classe ',
		displayField : 'name',
		mode : 'local',
		emptyText : 'Selecteer de classe',
		allowBlank : false,
		editable : false,
		triggerAction : 'all',
		width : 130
	});

	var verhicleType = new Array();
	verhicleType[0] = "Straat auto";
	verhicleType[1] = "Straat Motor";
	verhicleType[2] = "Scooter";
	verhicleType[3] = "MotoGp";
	verhicleType[4] = "Formule 1";

	var verhicleTypeAmmount = new Ext.data.SimpleStore({
		fields : ['name'],
		data : [[verhicleType[0]], [verhicleType[1]], [verhicleType[2]],
				[verhicleType[3]], [verhicleType[4]]]
	});

	var setVerhicleType = new Ext.form.ComboBox({
		store : verhicleTypeAmmount,
		fieldLabel : 'Voertuig ',
		displayField : 'name',
		mode : 'local',
		emptyText : 'Selecteer de type',
		allowBlank : false,
		editable : false,
		triggerAction : 'all',
		width : 130
	});

	var partType = new Array();
	partType[0] = "Motor";
	partType[1] = "Vering";
	partType[2] = "Nitro";
	partType[3] = "Banden";
	partType[4] = "Remmen";
	partType[5] = "Uitlaat";

	var partTypeAmmount = new Ext.data.SimpleStore({
		fields : ['name'],
		data : [[partType[0]], [partType[1]], [partType[2]], [partType[3]],
				[partType[4]], [partType[5]]]
	});

	var setPartType = new Ext.form.ComboBox({
		store : partTypeAmmount,
		fieldLabel : 'Type',
		displayField : 'name',
		mode : 'local',
		emptyText : 'Selecteer de onderdeel type',
		allowBlank : false,
		editable : false,
		disabled : configurePartCategory,
		triggerAction : 'all',
		width : 130
	});

	var attriBute2 = new Ext.Slider({
		width : 100,
		animate : true,
		value : 5,
		name : 'value2',
		increment : 1,
		minValue : 1,
		maxValue : 100,
		plugins : new Ext.ux.SliderTip()
	});

	var attriBute3 = new Ext.Slider({
		width : 100,
		animate : true,
		value : 5,
		name : 'value3',
		increment : 1,
		minValue : 1,
		maxValue : 100,
		plugins : new Ext.ux.SliderTip()
	});

	var moneyInfo = new Ext.form.Label({
		id : 'createItemMoneyValueID',
		text : ''
	});

	var textPanel = new Ext.Panel({
		title : 'Pit Babe',
		frame : true,
		width : 325,
		height : 225,
		region : 'east',
		html : '<img src="' + babeImage
				+ '" class="normalImage" width="305px" height="225px"">',
		items : moneyInfo
	});

	var totalValue = new Ext.form.Label({
		id : 'createItemTotalValueID',
		text : ''
	});

	var attribute1Label1 = new Ext.form.Label({
		text : 'Top Snelheid: ' + attriBute1.getValue()
	});

	var attribute1Label2 = new Ext.form.Label({
		text : 'Handeling: ' + attriBute2.getValue()
	});

	var attribute1Label3 = new Ext.form.Label({
		text : 'Acceleratie: ' + attriBute3.getValue()
	});

	// set total price
	setTotalPrice();

	attriBute1.on('change', function() {
		setTotalPrice();
		attribute1Label1.setText('Top Snelheid: ' + attriBute1.getValue());
	});

	attriBute1.on('drag', function() {
		setTotalPrice();
		attribute1Label1.setText('Top Snelheid: ' + attriBute1.getValue());
	});

	attriBute2.on('change', function() {
		setTotalPrice();
		attribute1Label2.setText('Handeling: ' + attriBute2.getValue());
	});

	attriBute2.on('drag', function() {
		setTotalPrice();
		attribute1Label2.setText('Handeling: ' + attriBute2.getValue());
	});

	attriBute3.on('change', function() {
		setTotalPrice();
		attribute1Label3.setText('Acceleratie: ' + attriBute3.getValue());
	});

	attriBute3.on('drag', function() {
		setTotalPrice();
		attribute1Label3.setText('Acceleratie: ' + attriBute3.getValue());
	});

	var pictureField = new Ext.form.FileUploadField({
		id : 'picture',
		emptyText : 'Selecteer een foto',
		fieldLabel : 'Voertuig foto',
		name : 'file',
		allowBlank : false,
		width : 300,
		buttonCfg : {
			text : '',
			iconCls : 'upload-icon'
		},
		getValue : function() {
			return (this.manualValue);
		}
	});

	var fp = new Ext.FormPanel({
		fileUpload : true,
		width : 200,
		region : 'center',
		// labelAlign: 'top',
		frame : true,
		tbar : new Ext.Toolbar({
			items : [{
				text : 'Help',
				iconCls : 'help',
				handler : function() {
					helpItems('createVerhicle');
				}
			}, {
				text : buttonExampleText + ' voorbeelden',
				iconCls : 'info',
				handler : function() {
					var examplePicturesPanel = new Ext.Panel({
						frame : true,
						html : '<br><br> Voorbeeld 1<br><img src="'
								+ examplePictures[0]
								+ '" class="normalImage" width="305px" height="225px""><br><br>Voorbeeld 2<br><img src="'
								+ examplePictures[1]
								+ '" class="normalImage" width="305px" height="225px"">'
					});
					siteFunctions.showWindow(examplePicturesPanel, 500, 340,
							'createVerhiclePanelExamplePictures', true);
				}
			}]
		}),
		method : 'POST',
		url : '/paginas/addItems.php',
		title : generalName + ' maken',
		autoHeight : true,
		bodyStyle : 'padding: 10px 10px 0 10px;',
		labelWidth : 80,
		defaults : {
			anchor : '80%',
			allowBlank : false,
			msgTarget : 'side'
		},
		items : [totalValue, name, attribute1Label1, attriBute1,
				attribute1Label2, attriBute2, attribute1Label3, attriBute3,
				setClass, setVerhicleType, setPartType, pictureField],
		buttons : [{
			text : 'In je garage opslaan',
			iconCls : 'add',
			handler : function() {
				if (fp.getForm().isValid()) {
					// check what verhicleType to send
					var verhicleTypeNumber = 1
					switch (setVerhicleType.getValue()) {
						case verhicleType[0] :
							verhicleTypeNumber = 1;
							break;
						case verhicleType[1] :
							verhicleTypeNumber = 2;
							break;
						case verhicleType[2] :
							verhicleTypeNumber = 6;
							break;
						case verhicleType[3] :
							verhicleTypeNumber = 15;
							break;
						case verhicleType[4] :
							verhicleTypeNumber = 10;
							break;
						default :
							alert('Voertuig selectie foutmelding.');
							return;
							break;
					}

					if (checkPartType) {
						// check what partType to send
						var partTypeNumber = 1;
						switch (setPartType.getValue()) {
							case partType[0] :
								partTypeNumber = 1;
								break;
							case partType[1] :
								partTypeNumber = 5;
								break;
							case partType[2] :
								partTypeNumber = 3;
								break;
							case partType[3] :
								partTypeNumber = 4;
								break;
							case partType[4] :
								partTypeNumber = 2;
								break;
							case partType[5] :
								partTypeNumber = 6;
								break;
							default :
								alert('Onderdeel selectie foutmelding.');
								return;
								break;
						}
					}

					// check what data to send
					if (addItemType == 'verhicle') {
						data = {
							'page' : 'createUserVerhicle',
							'verhicleName' : name.getValue(),
							'topSpeed' : attriBute1.getValue(),
							'handLing' : attriBute2.getValue(),
							'acceleration' : attriBute3.getValue(),
							'verhicleType' : verhicleTypeNumber,
							'class' : setClass.getValue(),
							'addItemType' : addItemType,
							'partType' : ''

						};
					} else if (addItemType == 'part') {
						data = {
							'page' : 'createUserVerhicle',
							'verhicleName' : name.getValue(),
							'topSpeed' : attriBute1.getValue(),
							'handLing' : attriBute2.getValue(),
							'acceleration' : attriBute3.getValue(),
							'verhicleType' : verhicleTypeNumber,
							'class' : setClass.getValue(),
							'addItemType' : addItemType,
							'partType' : partTypeNumber

						};

					}

					fp.getForm().submit({
						// url : '/paginas/addItems.php',
						waitMsg : 'Uploading your photo...',
						method : 'POST',
						params : data,

						success : function(fp, o) {
							// alert('asd');
							Ext.Msg.alert(o.result.message);
						},
						failure : function(form, action) {
							var newResult = Ext.util.JSON
									.decode(action.response.responseText);

							/*
							 * /alert('-->' + obj['error']); if
							 * (action.failureType == 'server') { Ext.Msg
							 * .alert('Save&nbsp;Failed!&nbsp;&nbsp;Please&nbsp;try&nbsp;again.'); }
							 * else {
							 */
							Ext.Msg
									.alert(
											'Warning yo!',
											/* action.response + */newResult['message'] /*
																						 * +
																						 * 'Server&nbsp;is&nbsp;unreachable'
																						 */);
							// }
						}

					});

				}
			}
		}, {
			text : 'Reset',
			iconCls : 'remove',
			handler : function() {
				fp.getForm().reset();
				resetFields();
				setTotalPrice();
			}
		}]
	});

	var propertyPanel = new Ext.Panel({
		layout : 'border',
		width : 700,
		height : 350,
		items : [fp, textPanel]
	});

	// fp.render('test');
	siteFunctions.showWindow(propertyPanel, 600, 700, 'createVerhiclePanel',
			true);
}

function helpItems(helpType) {

	// /////
	var url = '/paginas/help.php?page=getHelp&type=' + helpType;
	var data = [{
		name : 'helpIcon'
	}, {
		name : 'helpTitel'
	}, {
		name : 'helpText'
	}];

	// row expander
	var expander = new Ext.grid.RowExpander({
		tpl : new Ext.Template('<p><b>Help:<br><br></b> {helpText}</p>')
	});

	var store = new generalStore();
	store.createStore(url, data);
	store.reloadMyStore();

	var newStore = store.getMyStore();

	var newsGrid = new Ext.grid.GridPanel({
		store : newStore,
		cm : new Ext.grid.ColumnModel([expander, {
			width : 30,
			sortable : true,
			dataIndex : 'helpIcon'
		}, {
			header : "Titel",
			width : 403,
			sortable : true,
			dataIndex : 'helpTitel'
		}]),
		width : 495,
		frame : true,
		height : 285,
		plugins : expander,
		collapsible : false,
		animCollapse : false,
		autoScroll : true,
		title : 'Help',
		iconCls : 'icon-grid'
	});

	/*
	 * var panel = siteFunctions.createPanel('','',false,396,285,'');
	 * panel.add({ items : [newsGrid] });
	 */

	siteFunctions.showWindow(newsGrid, 400, 500, 'helpPanel', false);
}

function newsItems() {

	// /////
	var url = '/paginas/news.php?page=getNews';
	var data = [{
		name : 'newsIcon'
	}, {
		name : 'newsTitel'
	}, {
		name : 'newsText'
	}, {
		name : 'newsStarted'
	}, {
		name : 'newsLastChange'/* , type: 'date' */
	}];

	// row expander
	var expander = new Ext.grid.RowExpander({
		tpl : new Ext.Template('<p><b>Titel:</b> {newsTitel}</p><br>',
				'<p><b>Bericht:</b> {newsText}</p>')
	});

	var store = new generalStore();
	store.createStore(url, data);
	store.reloadMyStore();

	var newStore = store.getMyStore();

	var newsGrid = new Ext.grid.GridPanel({
		store : newStore,
		cm : new Ext.grid.ColumnModel([expander, {
			width : 30,
			sortable : true,
			dataIndex : 'newsIcon'
		}, {
			header : "Titel",
			width : 290,
			sortable : true,
			dataIndex : 'newsTitel'
		}		/*
				 * , {header: "Datum", width: 95, sortable: true, dataIndex:
				 * 'newsStarted'}, {header: "Aangepast", width: 100, sortable:
				 * true, /*renderer: Ext.util.Format.dateRenderer('m/d/Y'),
				 * dataIndex: 'newsLastChange'}
				 */
		]),
		width : 375,
		frame : true,
		height : 285,
		plugins : expander,
		collapsible : false,
		animCollapse : false,
		autoScroll : true,
		title : 'RaceFreakZ News / Artikelen',
		iconCls : 'icon-grid'
	});

	var panel = siteFunctions.createPanel('', '', false, 376, 285, '');
	panel.add({
		items : [newsGrid]
	});

	panel.render('newsPanel');
}

function showBodyContentButtons() {
	/*
	 * ENABLE LATER var company = new Array; company[0] = siteFunctions
	 * .createButton('Motors', 'motorcycle1', 85, 'west'); company[1] =
	 * siteFunctions.createButton('Auto\'s', 'car1', 85, 'center'); company[2] =
	 * siteFunctions.createButton('Huizen', 'buildings1', 85, 'west');
	 * company[3] = siteFunctions .createButton('Onderdelen', 'engine1', 85,
	 * 'west');
	 * 
	 * var market = new Array(); market[0] = siteFunctions.createButton('Motor
	 * Tweedehands', 'secondHand1', 100, 'west'); market[1] =
	 * siteFunctions.createButton('auto Tweedehands', 'secondHand1', 100,
	 * 'west');
	 * 
	 * var panel = siteFunctions.createPanel('Bedrijven', '', true, 650, 85,
	 * '');
	 * 
	 * panel.add({ buttons : [company[0], company[1], company[2], company[3],
	 * market[0], market[1]] });
	 * 
	 * company[0].on('click', function() { createCompanyDataview(2); });
	 * 
	 * company[1].on('click', function() { createCompanyDataview(1); });
	 * 
	 * company[2].on('click', function() { createCompanyDataview(5); });
	 * 
	 * company[3].on('click', function() { createCompanyDataview(3); });
	 * 
	 * market[0].on('click', function() { createMarketDataview(2); });
	 * 
	 * market[1].on('click', function() { createMarketDataview(1); });
	 * 
	 * panel.render('importantButtons');
	 */
}

function checkUserLevel(showNoLvlUp) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : 'paginas/ranking.php',
		method : 'POST',
		params : {
			'page' : 'checkLevel'
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		if (response['result'] == true) {
			siteFunctions.checkResultAlert(response['result'],
					response['message']);
		} else if (response['result'] == false && showNoLvlUp) {
			siteFunctions.checkResultAlert(response['result'],
					response['message']);
		}
	});
}

function showTopMembers(ammount, renderID, showWindow) {
	var store = new getTopUsers();
	store.createStore(ammount);
	store.reloadMyStore();

	var newStore = store.getMyStore();

	// create grid
	var showTopMembersGrid = new Ext.grid.GridPanel({
		// title : 'Top members',
		frame : true,
		width : 265,
		border : true,
		height : 250,
		// region : 'center',
		frame : false,
		iconCls : 'icon-grid',
		// bbar : pagingBar,
		store : newStore,
		cm : new Ext.grid.ColumnModel([{
			header : 'Naam',
			width : 100,
			sortable : true,
			renderer : function(name) {
				a = "<b>" + name + "</b>";
				return name;
			},
			dataIndex : 'userName'
		}, {
			header : 'Website Punten',
			width : 80,
			sortable : true,
			dataIndex : 'userRankPoints'
		}, {
			header : 'Level',
			width : 80,
			sortable : true,
			dataIndex : 'userLvl'
		}])
	});

	var panel = new Ext.Panel({
		title : 'Top members',
		frame : true,
		width : 265,
		items : showTopMembersGrid
	});

	if (showWindow == true) {
		siteFunctions.showWindow(showTopMembersGrid, 300, 295, renderID, true);
		return;
	} else {
		panel.render(renderID);
	}

	showTopMembersGrid.on('click', function() {
		var record = showTopMembersGrid.getSelectionModel().getSelected();

		var userID = record['data']['userID'];
		var racerPhoto = record['data']['userUrl'];
		var racerName = record['data']['userName'];
		var verhicleName = record['data']['verhicleName'];
		var verhiclePhoto = record['data']['verhicleUrl'];
		var racerAboutMe = record['data']['userAboutMe'];

		showUserProfile(userID, racerName, verhicleName, racerPhoto,
				verhiclePhoto, racerAboutMe);
	});

}

function createContactForm() {

	var maxLength = 16;
	var maxEmailLength = 30;

	var nameField = new Ext.form.TextField({
		region : 'center',
		maxLength : maxLength,
		maxLengthText : 'Maximale lengte is 16',
		fieldLabel : 'Naam'
	});

	var emailField = new Ext.form.TextField({
		fieldLabel : 'Email',
		maxLength : maxEmailLength,
		maxLengthText : 'Maximale lengte is 30',
		vtype : 'email'
	});

	var subjectField = new Ext.form.TextField({
		fieldLabel : 'Onderwerp',
		maxLength : maxLength,
		maxLengthText : 'Maximale lengte is 16'
	});

	var htmlEditor = new Ext.form.HtmlEditor({
		fieldLabel : 'Bericht',
		height : 220,
		anchor : '98%'
	});

	var contactPanel = new Ext.FormPanel({
		labelAlign : 'top',
		frame : true,
		title : 'Contact',
		height : 420,
		width : 540,
		items : [nameField, emailField, subjectField, htmlEditor],
		buttons : [{
			text : 'Verstuur',
			iconCls : 'contact',
			handler : function() {
				sendContactForm();
			}
		}]
	});

	function sendContactForm() {
		var senderName = nameField.getValue();
		var senderEmail = emailField.getValue();
		var senderSubject = subjectField.getValue();
		var senderMessage = htmlEditor.getValue();

		if (senderName == '' || senderName.length > maxLength) {
			alert("Je naam is niet correct ingevult.");
			nameField.markInvalid();
			return;
		} else if (senderEmail == '' || senderEmail.length > maxEmailLength) {
			alert("Je email is niet correct ingevult.");
			emailField.markInvalid();
			return;
		} else if (senderSubject == '' || senderSubject.length > maxLength) {
			alert("Je onderwerp is niet correct ingevult.");
			subjectField.markInvalid();
			return;
		} else if (senderMessage == '') {
			alert("Je hebt geen bericht ingetypt.");
			return;
		}

		var conn = new Ext.data.Connection();
		conn.request({
			url : 'paginas/contact.php',
			method : 'POST',
			params : {
				'page' : 'sendQuestionToWebsite',
				'senderEmail' : senderEmail,
				'senderSubject' : senderSubject,
				'senderText' : senderMessage,
				'senderName' : senderName
			}
		});

		conn.on('requestcomplete', function(sender, param) {
			response = siteFunctions.jsonDecode(param.responseText);

			// get php values
			var totalVerhicles = response['data']['totalVerhicles'];
			var totalHouses = response['data']['totalHouses'];
			var userMoney = response['data']['userMoney'];

			siteFunctions.checkResultAlert(response['result'],
					response['message']);

			if (response['result'] == true) {
				Ext.getCmp('contactForm').destroy();
			}
		});
	}

	// contactPanel.render(document.body);
	siteFunctions.showWindow(contactPanel, 420, 540, 'contactForm', true)

}

function payPanel() {

	function payConnect(page, type) {
		var conn = new Ext.data.Connection();
		conn.request({
			url : '/paginas/goldmember.php',
			method : 'POST',
			params : {
				'page' : page
			}
		});
		conn.on('requestcomplete', function(sender, param) {
			response = siteFunctions.jsonDecode(param.responseText);

			// get php values
			var message = response['message'];
			var paycode = response['data']['payCode'];
			var payline = response['data']['payline'];

			goldMemberConnectWindow(message, payline, paycode, type);

		});
	}

	function checkCallRdy(page, payline, paycode, type) {
		var conn = new Ext.data.Connection();
		conn.request({
			url : '/paginas/goldmember.php',
			method : 'POST',
			params : {
				'page' : page,
				'payline' : payline,
				'payCode' : paycode,
				'type' : type
			}
		});
		conn.on('requestcomplete', function(sender, param) {
			response = siteFunctions.jsonDecode(param.responseText);
			siteFunctions.checkResultAlert(response['result'],
					response['message'])
		});
	}

	function goldMemberConnectWindow(message, payline, paycode, type) {
		var goldMemberCheckButtom = new Ext.Button({
			text : 'Klik hier na het bellen',
			minWidth : 120,
			iconCls : 'money1',
			handler : function() {
				checkCallRdy('checkGoldMemberCallRdy', payline, paycode, type);
			}
		});

		var checkPanel = new Ext.Panel({
			title : 'Geld Zaken',
			frame : true,
			// renderTo : 'payPanel',
			height : 130,
			width : 400,
			html : '<br><br>' + message,
			items : [goldMemberCheckButtom]
				/*
				 * { buttons : [goldMemberCheckButtom] }]
				 */
		});

		siteFunctions.showWindow(checkPanel, 130, 400, 'goldmemberPanel', true)
	}

	var goldMemberButton = new Ext.Button({
		text : 'Goldmember ',
		minWidth : 120,
		iconCls : 'goldmember',
		handler : function() {
			payConnect('beGoldMember', 'goldMember');
		}
	});

	var getMoneyButton = new Ext.Button({
		text : 'Krijg spel geld',
		minWidth : 120,
		iconCls : 'money1',
		handler : function() {
			payConnect('getMoney', 'getMoney');
		}
	});

	var donationButtonIDEAL = new Ext.Button({
		text : 'Donatie IDEAL',
		minWidth : 120,
		iconCls : 'ideal',
		handler : function() {
			targetpay(10495, 44284, 'auto', 'auto', '');
		}
	});

	var payPanel = new Ext.Panel({
		title : 'Gold / Donation',
		frame : true,
		renderTo : 'payPanel',
		// height: 200,
		// width: 410,
		items : [{
			buttons : [goldMemberButton]
		}, {
			buttons : [getMoneyButton]
		}, {
			buttons : [donationButtonIDEAL]
		}]
	});
}

function gamePanel() {
	var racingJackButton = new Ext.Button({
		text : 'RacingJack &nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp',
		minWidth : 120,
		iconCls : 'money1',
		handler : function() {
			RacingJack();
		}
	});

	var randomGame = new Ext.Button({
		text : 'Lucky Number',
		minWidth : 120,
		iconCls : 'moneyGame',
		handler : function() {
			playRandomPrice();
		}
	});

	var taxiButton = new Ext.Button({
		text : 'Taxi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
		minWidth : 120,
		iconCls : 'taxi',
		handler : function() {
			workForMoney('taxi', 'Start spel.', 'Start spel.');
		}
	});

	var transportButton = new Ext.Button({
		text : 'Transport',
		minWidth : 120,
		iconCls : 'transport',
		handler : function() {
			workForMoney('goodsTransport', 'Start spel.', 'Start spel.');
		}
	});

	var towButton = new Ext.Button({
		text : 'Takelen&nbsp;&nbsp;&nbsp;&nbsp;',
		minWidth : 120,
		iconCls : 'tow',
		handler : function() {
			workForMoney('towVerhicles', 'Start spel.', 'Start spel.');
		}
	});

	var moneyPanel = new Ext.Panel({
		title : 'Money Games',
		frame : true,
		renderTo : 'moneyGamePanel',
		items : [{
			buttons : [racingJackButton]
		}, {
			buttons : [randomGame]
		}]
			// height: 200,
			// width: 410,
			// buttons : [racingJackButton]
	});

	var workPanel = new Ext.Panel({
		title : 'Money Games',
		frame : true,
		renderTo : 'workGamePanel',
		// height: 200,
		// width: 410,
		items : [{
			buttons : [taxiButton]
		}, {
			buttons : [transportButton]
		}, {
			buttons : [towButton]
		}]
	});

}

function trainPanel() {
	// create "train" button
	var trainConditionButton = new Ext.Button({
		text : 'Train Conditie',
		minWidth : 120,
		iconCls : 'train3',
		handler : function() {
			trainYourself('condition', 'Start training', 'Start training');
		}
	});

	// create "train" button
	var trainExperianceButton = new Ext.Button({
		text : 'Train Ervaring',
		minWidth : 120,
		iconCls : 'train2',
		handler : function() {
			trainYourself('experiance', 'Start training', 'Start training');
		}
	});

	// create "train" button
	var trainResponseButton = new Ext.Button({
		text : 'Train Reactie',
		minWidth : 120,
		iconCls : 'train1',
		handler : function() {
			trainYourself('response', 'Start training', 'Start training');
		}
	});

	var trainingPanel = new Ext.Panel({
		title : 'Trainen',
		// width: 300,
		renderTo : 'trainingPanel',
		frame : true,
		items : [{
			buttons : [trainConditionButton]
		}, {
			buttons : [trainExperianceButton]
		}, {
			buttons : [trainResponseButton]
		}]
	});
}

// check game needs before starting the game CONNECTION
function checkNeedsToStartGame(totalVerhicles, totalHouses, userMoney) {

	siteFunctions.removeUnregisteredPageContent();

	var panelText;
	var panelTitle;

	var minHouses = 1;
	var minVerhicles = 1;

	// create "Next" button
	var nextButton = new Ext.Button({
		text : 'Verder',
		iconCls : 'next',
		handler : function() {
			Ext.getCmp('infoPanel').destroy();
			checkNeedsToStartGameConnect();
			// siteFunctions.reDirect('/index.php');
		}
	});

	// create "Start game" button
	var startGame = new Ext.Button({
		text : 'Start Spel',
		disabled : true,
		iconCls : 'startGame',
		handler : function() {
			// really start the application
			startApp.reallyStartApp();
		}
	});

	// create "buy verhicle" button
	var buyVerhicleButton = new Ext.Button({
		text : 'Koop voertuig',
		disabled : true,
		iconCls : 'buy',
		handler : function() {

			var scooterButton = new Ext.Button({
				text : 'Koop Scooters',
				iconCls : 'buy',
				minwidth : 200,
				handler : function() {
					createCompanyDataview(6);
				}
			});

			var carsButton = new Ext.Button({
				text : 'Koop Auto\'s',
				iconCls : 'buy',
				minwidth : 200,
				handler : function() {
					createCompanyDataview(1);
				}
			});

			var motorcycleButton = new Ext.Button({
				text : 'Koop Motorfietsen',
				iconCls : 'buy',
				minwidth : 600,
				handler : function() {
					createCompanyDataview(2);
				}
			});

			var newBuyVerhiclePanel = new Ext.Panel({
				title : "Selecteer je voertuig type",
				frame : true,
				buttons : [scooterButton, carsButton, motorcycleButton],
				html : "Selecteer de voertuig type waarmee je wilt beginnen. Wees er wel op bedacht dat je niet alle voertuigen kunt aanschaffen in het begin fase van het spel. (Hoe verder je in het spel komt hoe meer je kunt kopen. Denk maar aan <b>Motogp</b> motoren, <b>Formule1</b> Wagens ect.)"
			});

			siteFunctions.showWindow(newBuyVerhiclePanel, 300, 365, "buyPanel",
					true);
		}
	});

	// create "buy house" button
	var buyHouseButton = new Ext.Button({
		text : 'Koop Woning',
		iconCls : 'buy',
		disabled : true,
		handler : function() {
			createCompanyDataview(5);
		}
	});

	// check if user have enough houses to proceed
	if (totalHouses < minHouses) {
		$('ErrorInfoPanel').innerHTML = '';
		panelTitle = '<center>Nog geen Huis in je bezit<br><br> STAP 1 van 3 </center>';
		panelText = 'Je hebt nog geen  <b>huis</b>  in je bezit.<br> Om het spel verder te kunnen spelen dien je eerst een  <b>huis aan te schaffen</b>! <br> Klik op "Koop Woning" om een huis te kopen. Klik na aankoop op <b>Verder</b><br><br>';
		buyHouseButton.enable();
	}

	// let user buy verhicle if user already have a house
	else if (totalVerhicles < minVerhicles && totalHouses > 0) {
		$('ErrorInfoPanel').innerHTML = '';
		panelTitle = '<center>Ook nog geen Voertuig in je bezit. <br><br> STAP 2 van 3 </center>';
		panelText = 'Je hebt nog geen  <b>Voertuig</b>  in je bezit.<br> Om het spel verder te kunnen spelen dien je eerst een <b>Voertuig aan te schaffen</b>!<br> Klik op  <b>"Koop Voertuig" en koop je voertuig.</b> Na het aanschaffen dien je op  <b>Verder</b>  te klikken .<br><br>';
		buyHouseButton.disable();
		buyVerhicleButton.enable();
	}

	else if (totalHouses >= minHouses && totalVerhicles >= minVerhicles) {
		$('ErrorInfoPanel').innerHTML = '';
		panelTitle = '<center>Start Spel<br><br> STAP 3 van 3 </center>';
		panelText = 'Je hebt nu een voertuig en een woning in je bezit. Klik op <b>Start Spel</> om verder te gaan<br>';

		buyVerhicleButton.disable();
		buyHouseButton.disable();
		nextButton.disable();
		startGame.enable();
	}

	var myMoneyPanel = new Ext.Panel({
		title : 'Mijn geld',
		frame : true,
		id : 'userMoneyPanel',
		height : 50,
		width : 550,
		html : '<b>Mijn Geld: €</b> ' + userMoney
	})

	// create info panel
	var infoPanel = new Ext.Panel({
		frame : true,
		height : 200,
		width : 400,
		region : 'east',
		id : 'infoPanel',
		buttons : [buyHouseButton, buyVerhicleButton, nextButton, startGame],
		title : panelTitle,
		html : panelText
	});

	var helpPersonPhoto = '<center><img src="/images/helpers/pitgirl2.jpg" class="normalImage" width="140" height="190"></center>';

	var helperPanel = new Ext.Panel({
		// title: 'RaceFreakZ chick',
		width : 150,
		// frame: false,
		region : 'center',
		html : helpPersonPhoto
	});

	var renderPanel = new Ext.Panel({
		frame : false,
		width : 550,
		layout : 'border',
		height : 200,
		items : [helperPanel, infoPanel]
	});

	if (totalHouses > 0 && totalVerhicles > 0) {
		Ext.getCmp('infoPanel').destroy();
		$('ErrorInfoPanel').innerHTML = '';
		// really start the application
		siteFunctions.setCurrentVerhicle();
		startApp.reallyStartApp();
	} else {
		// siteFunctions.showWindow(infoPanel, 400, 410, 'ErrorInfoPanel',
		// true);
		myMoneyPanel.render('ErrorInfoPanel');
		$('ErrorInfoPanel').innerHTML = $('ErrorInfoPanel').innerHTML + '<br>';
		renderPanel.render('ErrorInfoPanel');
	}
}

// check game needs before starting the game CONNECTION
function checkNeedsToStartGameConnect() {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/common.php',
		method : 'POST',
		params : {
			'page' : 'checkNeedsToStartGame'
		}
	});
	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		// get php values
		var totalVerhicles = response['data']['totalVerhicles'];
		var totalHouses = response['data']['totalHouses'];
		var userMoney = response['data']['userMoney'];

		checkNeedsToStartGame(totalVerhicles, totalHouses, userMoney);
			// return totalHouses;
		});
}

// function addExplanation

function checkIfUserHaveVerhicle() {

}

// show all members
function showAllMembers() {
	// get grid store
	var store = new getWebsiteMembers();
	store.createStore();
	store.reloadMyStore();

	var newStore = store.getMyStore();

	var pagingBar = new Ext.PagingToolbar({
		pageSize : 25,
		store : newStore,
		displayInfo : true,
		displayMsg : 'Displaying topics {0} - {1} of {2}',
		emptyMsg : "Geen gebruikers",

		items : ['-'/*
					 * , { pressed: true, enableToggle:true, text: 'Show
					 * Preview', cls: 'x-btn-text-icon details', toggleHandler:
					 * function(btn, pressed){ var view =
					 * showMembersGrid.getView(); view.showPreview = pressed;
					 * view.refresh(); } }
					 */]
	});

	// create grid
	var showMembersGrid = new Ext.grid.GridPanel({
		id : 'allMembersGrid',
		bbar : pagingBar,
		store : newStore,
		cm : new Ext.grid.ColumnModel([{
			header : 'Naam',
			width : 300,
			sortable : true,
			dataIndex : 'userName'
		}, {
			header : 'Level',
			width : 75,
			// renderer : Ext.util.Format
			sortable : true,
			dataIndex : 'userLvl'
		}]),
		width : 145,
		height : 300,
		// region : 'center',
		frame : false,
		title : 'Website gebruikers',
		iconCls : 'icon-grid'

	});

	// show
	siteFunctions.showWindow(showMembersGrid, 400, 410, 'myMessageList', true);

	showMembersGrid.on('mouseover', function() {

	});

	showMembersGrid.on('click', function() {
		var record = showMembersGrid.getSelectionModel().getSelected();

		var userID = record['data']['userID'];
		var racerPhoto = record['data']['userUrl'];
		var racerName = record['data']['userName'];
		var verhicleName = record['data']['verhicleName'];
		var verhiclePhoto = record['data']['verhicleUrl'];
		var racerAboutMe = record['data']['userAboutMe'];

		showUserProfile(userID, racerName, verhicleName, racerPhoto,
				verhiclePhoto, racerAboutMe);
	});
}

// first remove user and verhicle panel. Then reload
function reloadMyRaceInfoPanel() {
	Ext.getCmp('userDetailPanel').destroy();
	Ext.getCmp('userVerhiclePanel').destroy();
	getUserAndVerhiclePanelInfo();
}

function getMyProfileValues() {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/user.php',
		method : 'POST',
		params : {
			'page' : 'getMyInfoPanelProperties'
		}
	});
	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);
		var userID = response['data']['userID'];
		var racerName = response['data']['userNameGold'];
		var verhicleName = response['data']['verhicleName'];
		var racerPhoto = response['data']['userUrl'];
		var verhiclePhoto = response['data']['verhicleUrl'];
		var racerAboutMe = response['data']['userAboutMe'];

		showUserProfile(userID, racerName, verhicleName, racerPhoto,
				verhiclePhoto, racerAboutMe);
	});
}

function getUserProfileValues(userID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/user.php',
		method : 'POST',
		params : {
			'page' : 'getUserProperties',
			'userID' : userID
		}
	});
	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);
		var racerName = response['data']['userName'];
		var verhicleName = response['data']['verhicleName'];
		var racerPhoto = response['data']['userUrl'];
		var verhiclePhoto = response['data']['verhicleUrl'];
		var racerAboutMe = response['data']['userAboutMe'];

		showUserProfile(userID, racerName, verhicleName, racerPhoto,
				verhiclePhoto, racerAboutMe);
	});
}

// reload online time
function reloadOnlineTime() {
	var conn = new Ext.data.Connection();
	conn.request({
		url : 'paginas/user.php',
		method : 'POST',
		params : {
			'page' : 'reloadOnlineTime'
		}
	});
}

// show online users
function showUsersOnlineOffline() {
	// Define Tree.
	var treeCategoryLoader = new Ext.tree.TreeLoader({
		dataUrl : "paginas/user.php"
	});
	var onlineUserTree = new Ext.tree.TreePanel({
		// title : 'Online',
		collapsible : false,
		animCollapse : false,
		border : false,
		// id : "test",
		el : "testing",
		id : 'usersOnlineTree',
		autoScroll : true,
		animate : true,
		// enableDD : true,
		containerScroll : true,
		height : 200,
		width : 149
			// loader : Tree_Category_Loader
	});

	var offlineUserTree = new Ext.tree.TreePanel({
		// title : 'Gebruikers',
		collapsible : false,
		animCollapse : false,
		border : false,
		// id : "test",
		el : "testing",
		id : 'usersOfflineTree',
		autoScroll : true,
		animate : true,
		// enableDD : true,
		containerScroll : true,
		height : 149,
		width : 148
	});

	// SET the root node.
	var onlineTreeCategoryRoot = new Ext.tree.AsyncTreeNode({
		text : 'Online',
		qtip : 'gebruikers online',
		draggable : false,
		loader : treeCategoryLoader,
		id : 'getOnlineUsers' // this IS the id of the startnode...php uses
			// this as the node argument....do not remove
	});

	var offlineTreeCategoryRoot = new Ext.tree.AsyncTreeNode({
		text : 'Laatste 10 min',
		qtip : 'gebruikers online de laatste 10 minuten',
		draggable : false,
		loader : treeCategoryLoader,
		id : 'getOfflineUsers' // this IS the id of the startnode...php uses
			// this as the node argument....do not remove
	});

	// Render the tree.
	onlineUserTree.setRootNode(onlineTreeCategoryRoot);
	offlineUserTree.setRootNode(offlineTreeCategoryRoot);
	// Tree_Category.render();
	// Tree_Category2.render();
	onlineTreeCategoryRoot.expand();

	var accordion = new Ext.Panel({
		title : 'Gebruikers',
		hideCollapseTool : true,
		layout : 'accordion',
		id : 'usersOnlineAndOffline',
		renderTo : 'usersOnlineAndOffline',
		defaults : {
		// applied to each contained panel
		// bodyStyle: 'padding:15px'
		},
		layoutConfig : {
			// layout-specific configs go here
			fill : false,
			titleCollapse : false,
			animate : true,
			activeOnTop : false
		},
		items : [{
			title : 'Website Gebruikers',
			items : [onlineUserTree, offlineUserTree]
		}]
	});

	// when clicking do something
	onlineUserTree.on('click', function(node) {
		var userID = node.attributes.userID; // get the userId from PHP
		// reload tree
		offlineTreeCategoryRoot.reload();
		onlineTreeCategoryRoot.reload();

		if (userID > 0) {
			getUserProfileValues(userID);
		}
	});

	// when clicking do something
	offlineUserTree.on('click', function(node) {
		var userID = node.attributes.userID; // get the userId from PHP
		// reload tree
		offlineTreeCategoryRoot.reload();
		onlineTreeCategoryRoot.reload();

		if (userID > 0) {
			getUserProfileValues(userID);
		}
	});
}

// show verhicle info and edit car properties
function createMyVerhiclePanel() {
	this.verhicleStore = new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
			url : '/paginas/myVerhicles.php?page=getVerhicles',
			method : 'POST'
		}),
		reader : new Ext.data.JsonReader({
			root : "data" // The property which contains an Array of
				// row objects
				}, [{
					name : 'ID'
				}, {
					name : 'verhicleName',
					id : 'verhicleName'
				}, {
					name : 'verhicleValue',
					type : 'float'
				}, {
					name : 'verhicleClass'
				}, {
					name : 'verhicleType'
				}, {
					name : 'verhicleInUse'
				}, {
					name : 'verhicleForSale'
				}, {
					name : 'verhicleForSaleOrginal'
				}, {
					name : 'verhicleAcceleration'
				}, {
					name : 'verhicleHandling'
				}, {
					name : 'verhicleTopSpeed'
				}, {
					name : 'verhicleDamage'
				}, {
					name : 'verhiclePhoto'
				}, {
					name : 'inRaceName'
				}, {
					name : 'inRaceID'
				}])
	});

	this.verhicleStore.load();

	this.grid = new Ext.grid.GridPanel({
		id : 'myVerhiclePanelGrid',/*,
		loadMask : siteFunctions.gridLoadMask('Laden...', this.verhicleStore),*/
		store : this.verhicleStore,
		cm : new Ext.grid.ColumnModel([{
			header : 'Naam',
			width : 180,
			sortable : true,
			dataIndex : 'verhicleName'
		}, {
			header : 'Type',
			width : 100,
			sortable : true,
			dataIndex : 'verhicleType'
		}, {
			header : 'Waarde',
			width : 100,
			sortable : true,
			renderer : Ext.util.Format.euMoney,
			dataIndex : 'verhicleValue'
		}, {
			header : 'Classe',
			width : 45,
			sortable : true,
			dataIndex : 'verhicleClass'
		}, {
			header : 'In gebruik?',
			width : 60,
			sortable : true,
			dataIndex : 'verhicleInUse'
		}, {
			header : 'Te koop',
			width : 60,
			sortable : true,
			dataIndex : 'verhicleForSale'
		}, {
			header : 'Aangemeld bij',
			width : 100,
			sortable : true,
			dataIndex : 'inRaceName'
		}]),
		width : 700,
		height : 400,
		region : 'center',
		frame : true,
		title : 'Mijn Voertuigen',
		iconCls : 'icon-grid'
	});

	this.grid.on('click', function() {
		grid.getStore().load();
		getInfo();
	});

	function getInfo() {
		var record = grid.getSelectionModel().getSelected();
		var removerVerhicleFromRaceText;
		var disableSignoffButton = true;

		var dataID = record.get('ID');
		var vName = record.get('verhicleName');
		var vValue = record.get('verhicleValue');
		var vClass = record.get('verhicleClass');
		var vAccel = record.get('verhicleAcceleration');
		var VHandLing = record.get('verhicleHandling');
		var vTopSpeed = record.get('verhicleTopSpeed');
		var vDamage = record.get('verhicleDamage');
		var vPhoto = record.get('verhiclePhoto');
		var vForSale = record.get('verhicleForSaleOrginal');

		var vInRaceID = record.get('inRaceID');
		var vInRaceName = record.get('inRaceName');

		if (vInRaceID == '' || vInRaceID == null) {
			removerVerhicleFromRaceText = 'Afmelden Bij Race';
			disableSignoffButton = true;
		} else {
			disableSignoffButton = false;
			removerVerhicleFromRaceText = 'Afmelden bij ' + vInRaceName;
		}

		var verhiclePanel = new createVerhiclePanel(dataID, vName, vValue,
				vClass, vAccel, VHandLing, vTopSpeed, vDamage, vPhoto, true);

		// set forsale button text
		if (vForSale == 0) {
			var forSaleText = 'Te koop zetten';
		} else {
			var forSaleText = 'Van de markt halen';
		}

		// use verhicle
		var useVerhicle = new Ext.Button({
			text : 'Gebruiken',
			iconCls : 'add',
			handler : function() {
				useVerhicleNow(dataID);
				verhiclePanel.closeWindow();
			}
		});

		// garage Menu
		var createItemsMenu = new Ext.menu.Menu({
			id : 'createItemsMenu'
		});

		createItemsMenu.add({
			text : 'Voertuig maken',
			handler : function() {
				createMyOwnItem('verhicle');
			}
		});

		createItemsMenu.add({
			text : 'Onderdeel maken',
			handler : function() {
				createMyOwnItem('part');
			}
		});

		// upgrade your verhicle
		var upgradeVerhicle = new Ext.Button({
			text : 'Upgraden',
			iconCls : 'upgrade',
			handler : function() {
				upgradeVerhicleWithPart(dataID);
			}
		});

		// repair your verhicle
		var repairVerhicle = new Ext.Button({
			text : 'Repareren',
			iconCls : 'repairing',
			handler : function() {
				repairUserVerhicleNow(dataID);
				verhiclePanel.closeWindow();
			}
		});

		// sell your verhicle
		var sellVerhicle = new Ext.Button({
			text : forSaleText,
			iconCls : 'money1',
			handler : function() {
				setForSaleVerhicleNow(dataID);
				verhiclePanel.closeWindow();
			}
		});

		// repair your verhicle
		var removeVerhicleFromRace = new Ext.Button({
			text : removerVerhicleFromRaceText,
			iconCls : 'remove',
			disabled : disableSignoffButton,
			handler : function() {
				Ext.Msg.show({
					title : 'Afmelden',
					msg : 'Weet je het zeker dat je wilt afmelden?',
					buttons : Ext.Msg.YESNO,
					fn : function(btn, text) {
						if (btn == 'yes') {
							var url = '/paginas/myVerhicles.php';
							var data = {
								'page' : 'removeVerhicleFromRace',
								'verhicleID' : dataID
							};

							siteFunctions.makeConnectionWithoutHandler(url,
									data, 'POST');
							Ext.getCmp('verhicleInfoPanel').destroy();
						}
					},
					animEl : 'elId',
					icon : Ext.MessageBox.QUESTION
				});

			}
		});

		// add buttons
		verhiclePanel.Toolbar.addButton(useVerhicle);
		verhiclePanel.Toolbar.addButton(upgradeVerhicle);
		verhiclePanel.Toolbar.addButton(repairVerhicle);
		verhiclePanel.Toolbar.addButton(sellVerhicle);
		verhiclePanel.Toolbar.add('-', {
			text : 'Maken',
			iconCls : 'createVerhicle', // <-- icon
			menu : createItemsMenu
		});
		verhiclePanel.Toolbar.addButton(removeVerhicleFromRace);

	}

	// show verhicle grid
	siteFunctions.showWindow(grid, '400px', '680px',
			'myVerhicleGridProperties', true);
}

// show my parts -> see store for the verhiclePartTypes
function showMyParts(verhiclePartType) {
	// create store classes
	var extendStore = new getMyAvaibleParts();
	extendStore.createStore(verhiclePartType);
	extendStore.reloadMyStore();

	// creat dataview classes
	var myAvaibleParts = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getMyAvaiblePartsTPL());

	// get panel
	var panel = myAvaibleParts.panel;

	// get dataview
	var dataview = myAvaibleParts.dataview;

	panel.add({
		items : [dataview]
	});

	dataview.on('click', function() {
		// count selected records
		var countSelections = myAvaibleParts.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (countSelections < 1) {
			siteFunctions.popupWindowError('Resultaat', 'niets geselecteerd',
					'');
		} else {
			var data = myAvaibleParts.dataview.getSelectedRecords()[0];

			// get selected record
			var partID = data.get('ID');

			siteFunctions.checkResultAlert(true,
					'Je kunt je voertuigen upgraden via de garage.');
			// upgradeVerhicleWithPartConnect(partID, verhicleID);
		}
	});

	siteFunctions.showWindow(panel, 400, '480px', 'myAvaibleParts', true);
}

function upgradeVerhicleWithPart(verhicleID) {
	// create store classes
	var extendStore = new getMyAvaibleParts();
	extendStore.createStore('all');
	extendStore.reloadMyStore();

	// creat dataview classes
	var myAvaibleParts = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getMyAvaiblePartsTPL());

	// get panel
	var panel = myAvaibleParts.panel;

	// get dataview
	var dataview = myAvaibleParts.dataview;

	panel.add({
		items : [dataview]
	});

	/*
	 * addButton.on('click', function(){ alert("asdasd");
	 * upgradeVerhicleWithPartConnect(partID, verhicleID); });
	 */

	dataview.on('click', function() {
		// count selected records
		var countSelections = myAvaibleParts.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (countSelections < 1) {
			siteFunctions.popupWindowError('Resultaat', 'niets geselecteerd',
					'');
		} else {
			var data = myAvaibleParts.dataview.getSelectedRecords()[0];

			// get selected record
			var partID = data.get('ID');
			var vName = data.get('name');
			var vValue = data.get('price');
			var vClass = data.get('class');
			var vAccel = data.get('acceleration');
			var VHandLing = data.get('handling');
			var vTopSpeed = data.get('topSpeed');
			var vPartTypeName = data.get('type');
			var vPartVerhicleTypeName = data.get('verhicleType');
			var vPhoto = data.get('url');
			var usedBy = data.get('usedBy');

			var verhiclePartPanel = new createVerhiclePartPanel(partID, vName,
					vValue, vClass, vAccel, VHandLing, vTopSpeed,
					vPartTypeName, vPartVerhicleTypeName, vPhoto, usedBy, true)

			var addButton = new Ext.Button({
				text : "Toevoegen aan de geselecteerde voertuig",
				iconCls : 'add',
				handler : function() {
					upgradeVerhicleWithPartConnect(partID, verhicleID);
				}
			});

			var removePartFromVerhicleButton = new Ext.Button({
				text : "Onderdeel loskoppelen",
				iconCls : 'remove',
				handler : function() {
					Ext.Msg.show({
						title : 'verwijderen?',
						msg : 'Weet je het zeker dat je deze onderdeel wilt loskoppelen van een andere voertuig?',
						buttons : Ext.Msg.YESNO,
						fn : function(btn, text) {
							if (btn == 'yes') {
								removeVerhiclePart(partID);
							}
						},
						animEl : 'elId',
						icon : Ext.MessageBox.QUESTION
					});
				}
			});

			verhiclePartPanel.Toolbar.addButton(addButton);
			verhiclePartPanel.Toolbar.addButton(removePartFromVerhicleButton);

			// upgradeVerhicleWithPartConnect(partID, verhicleID);
		}
	});

	siteFunctions.showWindow(panel, 400, '480px', 'myAvaibleParts', true);
}

// upgrade user verhicle with part
function upgradeVerhicleWithPartConnect(partID, verhicleID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/parts.php',
		method : 'POST',
		params : {
			'page' : 'upgradeVerhicleWithPart',
			'partID' : partID,
			'verhicleID' : verhicleID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		// response = siteFunctions.jsonDecode(param.responseText);
		// Ext.getCmp('verhicleInfoPanel').destroy();
		Ext.getCmp('myVerhiclePanelGrid').getStore().load(); // reload the
		// grid data ->
		// Note -> if
		// this id
		// doesn't exist
		// there will be
		// an error
		siteFunctions.afterEdit(param.responseText, response['message']);
	});
}

// upgrade user verhicle with part
function removeVerhiclePart(partID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/parts.php',
		method : 'POST',
		params : {
			'page' : 'removePartFromVerhicle',
			'partID' : partID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		siteFunctions.checkResultAlert(response['result'], response['message']);
		Ext.getCmp('verhicleInfoPanel').destroy();
		Ext.getCmp('myVerhiclePanelGrid').getStore().load();
	});
}

// repair user verhicle
function repairUserVerhicleNow(verhicleID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/myVerhicles.php',
		method : 'POST',
		params : {
			'page' : 'repairVerhicle',
			'ID' : verhicleID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		// response = siteFunctions.jsonDecode(param.responseText);
		Ext.getCmp('myVerhiclePanelGrid').getStore().load(); // reload the
		// grid data ->
		// Note -> if
		// this id
		// doesn't exist
		// there will be
		// an error
		siteFunctions.afterEdit(param.responseText, response['message']);
	});
}

// use user verhicle
function useVerhicleNow(verhicleID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/myVerhicles.php',
		method : 'POST',
		params : {
			'page' : 'useVerhicle',
			'ID' : verhicleID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		// response = siteFunctions.jsonDecode(param.responseText);
		Ext.getCmp('myVerhiclePanelGrid').getStore().load(); // reload the
		// grid data ->
		// Note -> if
		// this id
		// doesn't exist
		// there will be
		// an error
		siteFunctions.afterEdit(param.responseText, response['message']);
	});
}

// set verhicle for sale
function setForSaleVerhicleNow(verhicleID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/myVerhicles.php',
		method : 'POST',
		params : {
			'page' : 'forSaleVerhicle',
			'ID' : verhicleID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		// response = siteFunctions.jsonDecode(param.responseText);
		Ext.getCmp('myVerhiclePanelGrid').getStore().load(); // reload the
		// grid data ->
		// Note -> if
		// this id
		// doesn't exist
		// there will be
		// an error
		siteFunctions.afterEdit(param.responseText, response['message']);
	});
}

function showAdvertPanel() {
	var url = '/paginas/getPageText.php';
	var method = 'POST';
	var params = {
		'page' : 'siteTips'
	};
	siteFunctions.showContentPanels(url, params, method, 'siteTips');
}

function showPersonalLinkPanel() {
	var url = '/paginas/getPageText.php';
	var method = 'POST';
	var params = {
		'page' : 'personalLinkPanel'
	};
	siteFunctions.showContentPanels(url, params, method, 'personalLinkPanel');
}

/*
 * function welcomePanel() { var advertPanelSiteTop = new Ext.Panel({ title :
 * 'Site Tips', frame : true, border : true, width : 650, // bbar: bbarRacer, //
 * height: 200, autoHeight : true, html : 'Welkom bij <b>RaceFreakZ.com</b><br><br>Ben
 * jij diegene die de straten onveilig gaat maken? <br>Registreer jezelf en
 * breng jezelf naar de top door middel van het winnen van races tegen andere
 * online racers.' });
 * 
 * advertPanelSiteTop.render('welcomePanel'); }
 */
// info for the user and verhicle panel
function getUserAndVerhiclePanelInfo() {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/user.php',
		method : 'POST',
		params : {
			'page' : 'getMyInfoPanelProperties'
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		var racerName = response['data']['userName'];
		var racerMoney = response['data']['userMoney'];
		var racerBankMoney = response['data']['userBankMoney'];
		var goldMember = response['data']['userGold'];
		var racerPhoto = response['data']['userUrl'];
		var verhicleName = response['data']['verhicleName']
		var verhicleID = response['data']['verhicleID'];
		var verhicleClass = response['data']['verhicleClass'];
		var verhiclePhoto = response['data']['verhicleUrl'];

		// check goldmember
		if (goldMember == 1) {
			goldMember = 'Yes';
		} else {
			goldMember = 'No';
		}

		showUserSitePanel(racerName, racerMoney, racerBankMoney, goldMember,
				racerPhoto, verhicleName, verhicleID, verhicleClass,
				verhiclePhoto);

	});
}

// show user and verhicle panel
function showUserSitePanel(racerName, racerMoney, racerBankMoney, goldMember,
		racerPhoto, verhicleName, verhicleID, verhicleClass, verhiclePhoto) {
	// coming from php later
	var userResponse = 60;
	var userExperiance = 100;
	var userCondition = 10;

	var profileButton = new Ext.Button({
		text : 'Profiel',
		minWidth : 60,
		iconCls : 'userProfile',
		handler : function() {
			getMyProfileValues();
		}
	});

	var inboxButton = new Ext.Button({
		text : 'Inbox',
		minWidth : 60,
		iconCls : 'PM',
		handler : function() {
			myPersonalMessagesList();
		}
	});

	var garageButton = new Ext.Button({
		text : 'Garage',
		minWidth : 120,
		iconCls : 'garage', // <-- icon
		handler : function() {
			createMyVerhiclePanel();
		}
	});

	var bankButton = new Ext.Button({
		text : 'Bankieren',
		minWidth : 120,
		iconCls : 'bank', // <-- icon
		handler : function() {
			siteBank.generateBank();
		}
	});

	var createVerhicleButton = new Ext.Button({
		text : 'Voertuig maken',
		minWidth : 120,
		iconCls : 'createVerhicle', // <-- icon
		handler : function() {
			createMyOwnItem('verhicle');
		}
	});

	var createPartButton = new Ext.Button({
		text : 'Onderdeel maken',
		minWidth : 120,
		iconCls : 'createPart', // <-- icon
		handler : function() {
			createMyOwnItem('part');
		}
	});

	var racerPanel = new Ext.Panel({
		title : racerName,
		frame : true,
		width : 145,
		renderTo : 'userDetailPanel',
		id : 'userDetailPanel',
		// bbar : bbarRacer,
		// height: 200,
		autoHeight : true,
		region : 'north',
		html : '<center><img class="normalImage" src="' + racerPhoto
				+ '" width="120" height="100"></center>'
				+ '<br><b>Geld: </b>€ ' + racerMoney + '<br><b>Bank: </b>€ '
				+ racerBankMoney + '<br><b>Gold: </b>' + goldMember,
		buttons : [profileButton, inboxButton],
		items : [{
			buttons : [bankButton]
		}]
	});

	var verhiclePanel = new Ext.Panel({
		title : verhicleName,
		frame : true,
		width : 145,
		renderTo : 'userVerhiclePanel',
		id : 'userVerhiclePanel',
		// height: 210,
		autoHeight : true,
		// bbar : bbarVerhicle,
		region : 'center',
		// items: garageButton,
		html : '<center><img class="normalImage" src="' + verhiclePhoto
				+ '" width="120" height="100"></center>'
				+ '<br><b>Classe: </b> ' + verhicleClass
				+ '<br><b>Kenteken: </b> ' + verhicleID,
		items : [{
			buttons : [garageButton]
		}, {
			buttons : [createVerhicleButton]
		}, {
			buttons : [createPartButton]
		}]
	});
	/*
	 * var panel = new Ext.Panel({ // title : 'Mijn Informatie', frame : false, //
	 * autoWidth: true, width : 150, autoHeight : true, // layout : 'border', id :
	 * 'myRaceInfoPanel', renderTo : 'myRaceInfoPanel', items : [racerPanel,
	 * {html: '<br>'}, verhiclePanel] });
	 */
	// panel.render('myRaceInfoPanel');
}

// show race panel
function showRaceDetails(raceID) {

	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/racing.php',
		method : 'POST',
		params : {
			'page' : 'getRaceInfo',
			'ID' : raceID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		var raceName = response['data']['raceName'];
		var raceTurnover = response['data']['turnover'];
		var raceClass = response['data']['class'];
		var raceOwner = response['data']['starter'];
		var raceOwnerID = response['data']['starterID'];
		var isRaceAdmin = response['data']['isOwner']
		var raceStatus = response['data']['status'];
		var raceSlots = response['data']['slots'];
		var raceVerhicleType = response['data']['verhicleType'];
		var raceType = response['data']['verhicleType'];

		var isFinished = response['data']['raceDone'];
		var raceMaxLaps = response['data']['circuitMaxLaps'];

		showRaceRacers(raceID, isRaceAdmin, isFinished, raceName, raceMaxLaps);
	});
}

// send php request
function joinRace(raceID) {

	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/racing.php?page=joinRace',
		method : 'POST',
		params : {
			'ID' : raceID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		siteFunctions.checkResultAlert(response['result'], response['message']);

		if (response['result']) {
			// remove race panel if entered
			Ext.getCmp('showRaceRacers').destroy();
		}

		// reload race overview
		Ext.getCmp('raceOverviewGridPanel').getStore().load();
	});
}

// create my houses panel
function showRaceRacers(raceID, isRaceAdmin, isFinished, raceName, raceMaxLaps) {
	// create store classes
	var extendStore = new getRacersInfoStore(raceID);
	extendStore.createStore();
	extendStore.reloadMyStore();

	// creat dataview classes
	var raceRacers = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getRaceRacersTPL());

	// load store
	// extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();
	/*
	 * TODO: don't show dataview if count records < 1. countRecords() rerurns
	 * value only when the dataview is loaded -> find solution for not showing
	 * an empty dataview
	 */

	// get panel
	var panel = raceRacers.panel;

	// get dataview
	var dataview = raceRacers.dataview;

	// challenge button
	var enterRaceButton = new Ext.Button({
		pressed : false,
		disabled : false,
		text : 'Racen',
		iconCls : 'enterRace',
		handler : function() {
			joinRace(raceID);
		}
	});

	// race admin button
	var raceAdminButton = new Ext.Button({
		pressed : false,
		disabled : true,
		text : 'Administreer mijn Races',
		iconCls : 'edit',
		handler : function() {
			showMyRaces();
		}
	});

	// race admin button
	var showRaceResultButton = new Ext.Button({
		pressed : false,
		disabled : true,
		text : 'Bekijk Race Uitslag',
		iconCls : 'raceResult',
		handler : function() {
			showRaceResult(raceID, raceName, raceMaxLaps);
		}
	});

	/*
	 * / race admin button var mySignInRacesButton = new Ext.Button({ pressed :
	 * false, disabled : false, text : 'Mijn aanmeldingen', iconCls : 'edit',
	 * handler : function() { alert('coming soon...'); } });
	 */
	// if user is admin enable button
	if (isRaceAdmin) {
		raceAdminButton.enable();
	}

	if (isFinished) {
		enterRaceButton.disable();
		showRaceResultButton.enable();
	}

	// creat toolbar
	var toolbar = new Ext.Toolbar({
		items : ['-', enterRaceButton, '-', raceAdminButton, '-',
				showRaceResultButton, '-']
	});

	// add panel dataview to panel
	panel.add({
		items : [toolbar, dataview]
	});

	// show verhicle details
	raceRacers.dataview.on('click', function() {

		// count selected records
		var countSelections = raceRacers.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (raceRacers.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowError('Resultaat', 'niets geselecteerd',
					'');
		} else {
			var data = raceRacers.dataview.getSelectedRecords()[0];

			// get selected record
			var userID = data.get('racerID')
			var racerName = data.get('racerName');
			var verhicleName = data.get('verhicleName');
			var racerPhoto = data.get('racerAvater');
			var verhiclePhoto = data.get('verhiclePhoto');
			var racerAboutMe = data.get('racerAboutMe');

			showUserProfile(userID, racerName, verhicleName, racerPhoto,
					verhiclePhoto, racerAboutMe);
		}
	});

	siteFunctions.showWindow(panel, 400, '480px', 'showRaceRacers', true);
}

function removeRace(raceID) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/racing.php',
		method : 'POST',
		params : {
			'page' : 'deleteRace',
			'raceID' : raceID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		if (!response['result']) {
			siteFunctions.popupWindowError('Race', response['message'], '');
			return;
		}

		var myracesInfopPanel = Ext.getCmp('raceInfoPanel');
		var myracesPanel = Ext.getCmp('myRaces');

		if (myracesInfopPanel) {
			Ext.getCmp('raceInfoPanel').destroy();
		}

		if (myracesPanel) {
			Ext.getCmp('myRaces').destroy();
		}

		Ext.getCmp('raceOverviewGridPanel').getStore().load();

		siteFunctions.popupWindowOK('Race', response['message'], '');
	});
}

// show my races
function showMyRaces() {

	var store = new getMyRacesStore();
	store.createStore();
	store.reloadMyStore();

	var newStore = store.getMyStore();

	var cm = new Ext.grid.ColumnModel([{
		header : "ID",
		dataIndex : 'ID',
		width : 70,
		align : 'center'
	}, {
		header : "Naam",
		dataIndex : 'raceName',
		width : 200,
		hidden : false
	}, {
		header : "Slots",
		dataIndex : 'slots',
		width : 200,
		hidden : false
	}, {
		header : "Catogorie",
		dataIndex : 'catogorie',
		width : 200,
		hidden : false
	}, {
		header : "Race Type",
		dataIndex : 'raceType',
		width : 200,
		hidden : false
	}, {
		header : "Inzet",
		dataIndex : 'turnover',
		hidden : true,
		width : 100
	}, {
		header : "Classe",
		dataIndex : 'class',
		align : 'center',
		width : 150
	}, {
		header : "status",
		dataIndex : 'statusInName',
		width : 150
	}]);

	// by default columns are sortable
	cm.defaultSortable = false;

	var grid = new Ext.grid.GridPanel({
		// el:'topic-grid',
		/*loadMask : siteFunctions.gridLoadMask('Laden...', newStore),*/
		width : 500,
		height : 300,
		title : 'Mijn Races',
		store : newStore,
		cm : cm,
		iconCls : 'icon-grid',
		trackMouseOver : false,
		//loadMask : true,
		viewConfig : {
			forceFit : true,
			enableRowBody : true,
			showPreview : false,
			getRowClass : function(record, rowIndex, p, store) {
				if (this.showPreview) {
					p.body = '<p>' + record.data.lapComment + '</p>';
					return 'x-grid3-row-expanded';
				}
				return 'x-grid3-row-collapsed';
			}
		}
	});

	grid.on('click', function() {
		var record = grid.getSelectionModel().getSelected();
		var raceID = record.get('ID');
		var raceName = record.get('raceName');
		var raceMaxLaps = record.get('raceLaps');
		var raceStatus = record.get('statusNumber');

		// show race info panel
		showRaceInfoPanel(raceID, raceName, raceMaxLaps, raceStatus);

	});

	siteFunctions.showWindow(grid, 334, 514, 'myRaces', true);
}

function getRaceRacers(raceID) {
	alert('test');
}

function showRaceInfoPanel(raceID, raceName, raceMaxLaps, raceStatus) {
	var store = new getRacersInfoStore(raceID);
	store.createStore();
	store.reloadMyStore();

	var newStore = store.getMyStore();

	var cm = new Ext.grid.ColumnModel([{
		header : "Naam",
		dataIndex : 'racerName',
		width : 200,
		hidden : false
	}, {
		header : "Voertuig",
		dataIndex : 'verhicleName',
		width : 200,
		hidden : false
	}]);

	// by default columns are sortable
	cm.defaultSortable = true;

	// start race button
	var startRaceButton = new Ext.Button({
		pressed : false,
		minWidth : 110,
		disabled : true,
		// enableToggle : true,
		text : 'Start Race',
		// cls : 'x-btn-text-icon details',
		iconCls : 'startRace',
		handler : function() {

			// destroy race window panel
			Ext.getCmp('raceInfoPanel').destroy();

			// destroy my races panel
			Ext.getCmp('myRaces').destroy();

			// calculate race result
			calculateRaceResult(raceID);

			// show my races again
			showMyRaces();
		}
	});

	// check result button
	var checkRaceResultButton = new Ext.Button({
		pressed : false,
		minWidth : 110,
		disabled : true,
		// enableToggle : true,
		text : 'Race Resultaat bekijken',
		// cls : 'x-btn-text-icon details',
		iconCls : 'raceResult',
		handler : function() {
			// show race result
			showRaceResult(raceID, raceName, raceMaxLaps);
		}
	});

	// removeUser button
	var removeUserButton = new Ext.Button({
		pressed : false,
		minWidth : 110,
		disabled : true,
		text : 'Verwijder Racer',
		iconCls : 'remove',
		handler : function() {
			alert('Komt in het volgende versie.');
		}
	});

	// removeUser button
	var removeRaceButton = new Ext.Button({
		pressed : false,
		disabled : false,
		// enableToggle : true,
		text : 'Verwijder Race',
		// cls : 'x-btn-text-icon details',
		iconCls : 'remove',
		handler : function() {
			removeRace(raceID);
		}
	});

	var gridTopToolbar = new Ext.Panel({
		// width: 485,
		frame : false,
		buttons : [startRaceButton, checkRaceResultButton, removeUserButton,
				removeRaceButton]
	});

	// enable buttons

	// check if race is already finished. if so disable buttons
	if (raceStatus == 0) {
		startRaceButton.setDisabled(false);
		removeUserButton.setDisabled(false);
	}

	if (raceStatus == 1) {
		checkRaceResultButton.setDisabled(false);
	}

	var grid = new Ext.grid.GridPanel({
		// el:'topic-grid',
		/*loadMask : siteFunctions.gridLoadMask('Laden...', newStore),*/
		width : 500,
		height : 300,
		title : 'Race Info',
		store : newStore,
		cm : cm,
		tbar : gridTopToolbar,
		iconCls : 'icon-grid',
		trackMouseOver : false,
		//loadMask : true,
		viewConfig : {
			forceFit : true,
			enableRowBody : true,
			showPreview : false,
			getRowClass : function(record, rowIndex, p, store) {
				if (this.showPreview) {
					p.body = '<p>' + record.data.lapComment + '</p>';
					return 'x-grid3-row-expanded';
				}
				return 'x-grid3-row-collapsed';
			}
		}

	});

	grid.on('click', function() {
		var record = grid.getSelectionModel().getSelected();
		var userID = record.get('racerID');
		var racerName = record.get('racerName');
		var racerPhoto = record.get('racerAvater');
		var verhicleName = record.get('verhicleName');
		var verhiclePhoto = record.get('verhiclePhoto');
		var racerAboutMe = record.get('racerAboutMe');

		showUserProfile(userID, racerName, verhicleName, racerPhoto,
				verhiclePhoto, racerAboutMe);
	});

	siteFunctions.showWindow(grid, 334, 514, 'raceInfoPanel', true);
}

function showCurrentUserMoney() {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/user.php',
		method : 'POST',
		params : {
			'page' : 'getMyMoney'
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);
		//var money = document.getElementById('myMoney').innerHTML = response['data'];
	});
}

// make connection to calculate the race result
function calculateRaceResult(raceID, raceType) {
	var conn = new Ext.data.Connection();
	conn.request({
		url : '/paginas/racing.php',
		method : 'POST',
		params : {
			'page' : 'startRace',
			'raceID' : raceID
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		if (!response['result']) {
			siteFunctions.popupWindowError('Race', response['message'], '');
			return;
		}

		siteFunctions.popupWindowOK('Race', response['message'], '');
	});
}

function calculationLapStore(raceID, raceLap) {
	var store = new showRaceResultStore();
	store.creatStore(raceID, raceLap);
	store.reloadMyStore();
	return store.getMyStore();
}

function showRaceResult(raceID, raceName, maxLap) {
	var currentLap = 1;

	var store = calculationLapStore(raceID, currentLap);

	var cm = new Ext.grid.ColumnModel([{
		header : "Plaats",
		dataIndex : 'racerPosition',
		width : 70,
		align : 'center'
	}, {
		header : "Racer",
		dataIndex : 'racerName',
		width : 200,
		hidden : false
	}, {
		header : "Voertuig",
		dataIndex : 'racerVerhicleName',
		width : 200,
		hidden : false
	}, {
		id : 'topic',
		header : "Lap",
		dataIndex : 'raceLaps',
		hidden : true,
		width : 100
	}, {
		id : 'last',
		header : "Ronde Tijd",
		dataIndex : 'raceLapTimeFormated',
		align : 'center',
		width : 150
			// renderer: renderLast
			}, {
				id : 'last',
				header : "Totaal",
				dataIndex : 'totalTimeFormated',
				width : 150,
				align : 'center'
			// renderer: bitchshit
			}]);

	// by default columns are sortable
	cm.defaultSortable = false;

	var grid = new Ext.grid.GridPanel({
		// el:'topic-grid',
		/*loadMask : siteFunctions.gridLoadMask('Laden...', store),*/
		width : 500,
		autoFitColumns : true,
		/*loadMask : {
			msg : 'Read the API Docs',
			msgCls : 'really-big-letters'
		},*/
		// loadmask: true,
		height : 300,
		title : '<div id="raceTitle"> RACE UITSLAG | ' + raceName + ' | Lap'
				+ currentLap + ' van ' + maxLap + '</div>',
		store : store,
		cm : cm,
		iconCls : 'icon-grid',
		trackMouseOver : false,
		/*
		 * sm : new Ext.grid.CheckboxSelectionModel({ // singleSelect : true //
		 * selectRow : Ext.emptyFn }),
		 */
		// loadMask : true,
		viewConfig : {
			forceFit : true,
			enableRowBody : true,
			showPreview : false,
			getRowClass : function(record, rowIndex, p, store) {
				if (this.showPreview) {
					p.body = '<p>' + record.data.lapComment + '</p>';
					return 'x-grid3-row-expanded';
				}
				return 'x-grid3-row-collapsed';
			}
		},
		// bbar : new Ext.PagingToolbar({
		tbar : new Ext.Toolbar({
			// pageSize : 5,
			store : store,
			// displayInfo : true,
			// displayMsg : 'Displaying topics {0} - {1} of {2}',
			// emptyMsg : "No topics to display",
			items : ['-', {
				pressed : false,
				enableToggle : true,
				text : 'Vorige Ronde',
				cls : 'x-btn-text-icon details',
				iconCls : 'getLastRecord',
				handler : function() {
					if (currentLap > 1) {
						currentLap--;
						var store = calculationLapStore(raceID, currentLap);
						grid.reconfigure(store, cm);
						grid.setTitle('<div id="raceTitle">RACE UITSLAG | '
								+ raceName + ' | Lap ' + currentLap + ' van '
								+ maxLap + '</div>');
					}

				}
			}, '-', {
				pressed : false,
				enableToggle : true,
				text : 'Volgende Ronde',
				// cls : 'goNext', total button background
				iconCls : 'getNextRecord',
				handler : function() {
					if (currentLap < maxLap) {
						currentLap++;
						var store = calculationLapStore(raceID, currentLap);
						grid.reconfigure(store, cm);
						grid.setTitle('<div id="raceTitle">RACE UITSLAG | '
								+ raceName + ' | Lap ' + currentLap + ' van '
								+ maxLap + '</div>');
					}
				}
			}, '-', {
				pressed : false,
				enableToggle : true,
				text : 'Bekijk de Eindstand',
				iconCls : 'stop',
				handler : function() {
					currentLap = maxLap;
					var store = calculationLapStore(raceID, maxLap);
					grid.reconfigure(store, cm);
					grid.setTitle('<div id="raceTitle">RACE UITSLAG | '
							+ raceName + ' | Lap ' + currentLap + ' van '
							+ maxLap + '</div>');
				}
			}, '-', {
				pressed : false,
				enableToggle : true,
				text : 'Ronde commentaar',
				iconCls : 'view',
				toggleHandler : showLapComment
			}, '-']
		})
	});

	grid.on('click', function() {
		var record = grid.getSelectionModel().getSelected();
		var userID = record.get('racerID');
		var racerName = record.get('racerName');
		var racerPhoto = record.get('racerAvater');
		var verhicleName = record.get('racerVerhicleName');
		var verhiclePhoto = record.get('racerVerhiclePhoto');
		var racerAboutMe = record.get('racerAboutMe');

		showUserProfile(userID, racerName, verhicleName, racerPhoto,
				verhiclePhoto, racerAboutMe);
	});

	// trigger the data store load
	/*
	 * / store.getRange(0,5 ); store.load({ params : { start : 0, limit : 22 }
	 * });
	 */
	// store.load();
	// render it
	// grid.render('raceOverview');
	siteFunctions.showWindow(grid, 334, 514, 'raceGridPanel', false);

	function showLapComment(btn, pressed) {
		var view = grid.getView();
		view.showPreview = pressed;
		view.refresh();
	}
}

// my personal messages
function myPersonalMessagesList() {

	function setMessageRead(messageID) {
		var conn = new Ext.data.Connection();

		conn.request({
			url : '/paginas/messages.php',
			method : 'POST',
			params : {
				'page' : "setRead",
				'messageID' : messageID
			}
		});

		conn.on('requestcomplete', function(sender, param) {
			myPersonalMessagesGrid.getStore().load();
		});
	}

	// get grid store
	var store = new getMyPersonalMessagesStore();
	store.createStore();
	store.reloadMyStore();

	var newStore = store.getMyStore();

	// create grid
	var myPersonalMessagesGrid = new Ext.grid.GridPanel({
		id : 'myPersonalMessagesGrid',
		/*loadMask : siteFunctions.gridLoadMask('Laden...', newStore),*/
		store : newStore,
		cm : new Ext.grid.ColumnModel([{
			header : 'Onderwerp',
			width : 150,
			sortable : true,
			dataIndex : 'messageSubject'
		}, {
			header : 'Van',
			width : 120,
			sortable : true,
			dataIndex : 'senderName'
		}, {
			header : 'Datum',
			width : 150,
			sortable : true,
			// renderer : Ext.util.Format.euMoney,
			dataIndex : 'sendDate'
		}, {
			header : 'Gelezen?',
			width : 75,
			sortable : true,
			dataIndex : 'messageRead'
		}]),
		width : 520,
		height : 200,
		// region : 'center',
		frame : false,
		title : 'Mijn Berichten',
		iconCls : 'icon-grid'
	});

	var textField = new Ext.form.HtmlEditor({
		hideLabel : true,
		height : 200,
		width : 516,
		disable : true,
		enableAlignments : false,
		enableColors : false,
		enableFont : false,
		enableFontSize : false,
		enableFormat : false,
		enableLinks : false,
		enableLists : false,
		enableSourceEdit : false,
		value : '<h2>Klik op een bericht</h2>'
	});

	var inboxButton = new Ext.Button({
		text : '<b>Reageer</b>',
		// enableToggle : true,
		// pressed : true,
		disabled : true,
		iconCls : 'PM'
	});

	var bbarMyEmailPanel = new Ext.Toolbar({
		text : 'bbar',
		items : [inboxButton]
	});

	var messageText = new Ext.Panel({
		title : 'Bericht inhoud',
		width : 520,
		bbar : bbarMyEmailPanel,
		// height : 500,
		autoScroll : true,
		// html: 'bitchhhhh'
		items : [textField]
	});

	// messageText.
	var contentPanel = new Ext.Panel({
		width : 534,
		height : 435,
		// layout : 'Column',
		items : [myPersonalMessagesGrid, messageText]
	});

	// show
	siteFunctions.showWindow(contentPanel, 435, 534, 'myMessageList', true);

	myPersonalMessagesGrid.on('click', function() {
		var record = myPersonalMessagesGrid.getSelectionModel().getSelected();
		var pmID = record['data']['pmID'];
		var messageSubject = record['data']['messageSubject'];
		var textMessage = record['data']['messageText'];
		var senderID = record['data']['senderID'];
		var senderName = record['data']['senderName'];
		var senderUrl = record['data']['senderUrl'];
		var senderCurrentVerhicleName = record['data']['senderCurrentVerhicleName'];
		var senderCurrentVerhicleUrl = record['data']['senderCurrentVerhicleUrl'];

		var value = /* /textMessage;/ */Ext.util.Format.stripTags(textMessage);

		textField.setValue(value);

		inboxButton.enable();
		inboxButton.on('click', function() {
			createPersonalMessage(senderID, senderName, senderUrl,
					senderCurrentVerhicleUrl, senderCurrentVerhicleName);
			Ext.getCmp('myMessageList').close();
		});
		// set message == read
		setMessageRead(pmID);
			// myPersonalMessagesGrid.getStore().load();

	});

}

function createPersonalMessage(toUserID, userName, userPhoto,
		userVerhiclePhoto, userVerhicleName) {

	var messageSubject = new Ext.form.TextField({
		fieldLabel : 'Onderwerp',
		name : 'asd',
		maxLength : 30,
		maxLengthText : 'Maximale lengte is 30',
		allowBlank : false
	});

	var userInfoVerhiclePanel = new Ext.Panel({
		title : userVerhicleName,
		frame : true,
		width : '50%',
		// height: 180,
		region : 'east',
		// split : true,
		// items : [racerVerhicleNameField],
		html : '<center><img src="' + userVerhiclePhoto
				+ '" width="150" height="130px"></center>'
	});

	var userInfoPanel = new Ext.Panel({
		title : userName,
		frame : true,
		width : '50%',
		// height: 150,
		region : 'canter',
		// split : true,
		// items : [racerNameField],
		html : '<center><img src="' + userPhoto
				+ '" width="150" height="130px"></center>'
	});

	var messageText = new Ext.form.HtmlEditor({
		hideLabel : true,
		height : 300,
		width : 500
			// value : '<h2>Jouw tekst...</h2>'
	});

	// messageText.
	var toUserInfo = new Ext.Panel({
		// width: 520,
		layout : 'Column',
		items : [userInfoVerhiclePanel, userInfoPanel]

	});

	var personalMessageForm = new Ext.FormPanel({
		title : 'stuur bericht naar ' + userName,
		frame : true,
		renderTo : Ext.getBody(),
		items : [messageSubject, messageText],
		buttons : [{
			text : 'send',
			// TODO: add button icon
			handler : function() {
				var personalMessageText = messageText.getValue();
				var messageSubjectText = messageSubject.getValue();

				if (personalMessageText == '') {
					siteFunctions.popupWindowError('Bericht',
							'Bericht tekst is niet ingevoerd.');

				} else if (messageSubjectText == '') {
					siteFunctions.popupWindowError('Bericht',
							'Bericht onderwerp is niet ingevoerd.');
					messageSubject.markInvalid();
				} else {
					// send message
					sendPersonalMessage(toUserID, messageSubjectText,
							personalMessageText, 'sendPersonalMessage');
				}
			}

		}]
	});

	var sendMessagePanel = new Ext.Panel({
		autoWidth : true,
		autoHeight : true,
		items : [toUserInfo, personalMessageForm]
	});

	siteFunctions.showWindow(sendMessagePanel, 550, 532, 'sendPersonalMessage',
			true);
}

// send a message
function sendPersonalMessage(toUserID, messageSubject, messageText,
		messageBoxID) {

	var conn = new Ext.data.Connection();

	conn.request({
		url : '/paginas/messages.php',
		method : 'POST',
		params : {
			'page' : "sendMessage",
			'toUserID' : toUserID,
			'messageText' : messageText,
			'messageSubject' : messageSubject
		}
	});

	conn.on('requestcomplete', function(sender, param) {
		var response = Ext.util.JSON.decode(param.responseText);

		if (!response.result) {
			siteFunctions.popupWindowError('PM', response.message, '');
		} else {
			Ext.getCmp(messageBoxID).destroy();
			siteFunctions.popupWindowOK('PM', response.message, '');
		}
	});
}

function showUserProfile(userID, racerName, verhicleName, racerPhoto,
		verhiclePhoto, racerAboutMe) {


	// TODO: store records are loaded from the stores. So this function only
	// needs to have the userID. The other values will be received from the
	// store

	var racerNameField = new Ext.form.Label({
		text : racerName
			// + getText(this.accelSlider)
	});

	var racerVerhicleNameField = new Ext.form.Label({
		text : verhicleName
			// + getText(this.accelSlider)
	});

	var verhiclePanel = new Ext.Panel({
		title : verhicleName,
		frame : true,
		width : 186,
		height : 210,
		region : 'center',
		// split : true,
		// items : [racerVerhicleNameField],
		html : "<center><img src="
				+ verhiclePhoto
				+ " width=\"150\" class=\"normalImage\" height=\"130px\"></center>"
	});

	var racerPanel = new Ext.Panel({
		title : racerName,
		frame : true,
		width : 186,
		height : 210,
		region : 'south',
		// split : true,
		// items : [racerNameField],
		html : "<center><img src="
				+ racerPhoto
				+ " width=\"150\" class=\"normalImage\" height=\"130px\"></center>"
	});

	// end grid
	var panelUserVerhicle = new Ext.Panel({
		frame : false,
		width : 190,// 375
		height : 570,
		//tbar : sendPersonalMessageButton,
		layout : 'border',
		// region : 'east',
		// split : true,
		items : [{
			//title: 'center',
			region : 'center',
			//height : 210,
			// minSize: 75,
			// maxSize: 250,
			//margins : '0 5 5 5',
			items : racerPanel
		}, {
			//title: 'West Panel',
			region : 'north',
			//margins : '5 0 0 5',
			//cmargins : '5 5 0 5',
			height : 210,
			//width : 375
			// minSize: 100,
			// maxSize: 300,
			items : verhiclePanel
		}]
	});

	var racerAboutMePanel = new Ext.Panel({
		title : 'Over ' + racerName,
		frame : true,
		width : 565,
		height : 120,
		// region : 'north',
		autoScroll : true,
		// split : true,
		// items : [racerNameField],
		html : racerAboutMe
	});

	// grid store
	var store = new getMyProfileInfoStore();
	store.createStore(userID); // userID
	store.reloadMyStore();

	var newStore = store.getMyStore();

	var propertyGrid = new Ext.grid.PropertyGrid({
		title : 'Properties Grid',
		height : 390,
		// region : 'west',
		width : 375,
		source : {},
		store : new Ext.grid.PropertyStore({
			sortable : false,
			defaultSortable : false
		})

	});
	
	// property grid set configuration
	propertyGrid.getColumnModel().setConfig([{
		header : 'Naam',
		width : 160,
		sortable : false,
		dataIndex : 'name',
		id : 'name',
		allowBlank : true
	}, {
		header : 'Waarde',
		width : 115,
		sortable : false,
		dataIndex : 'value',
		id : 'value',
		allowBlank : true
	}]);

	// newStore.reload();
	newStore.on('load', function() {
		propertyGrid.setSource(newStore.getAt(0).data);
	});

	var tb = new Ext.Toolbar({
		text : "test"
	});

	// end grid
	var panel = new Ext.Panel({
		frame : false,
		width : 300,// 375
		height : 530,
		tbar : [{		
				text : 'Stuur bericht',
				iconCls : 'add',
				handler : function() {
					createPersonalMessage(userID, racerName, racerPhoto,
							verhiclePhoto, verhicleName);
				}
			} // tbbutton is the default xtype if not specified
		],

		layout : 'border',

		items : [{
			region : 'south',
			height : 100,
			margins : '0 5 5 5',
			items : racerAboutMePanel
		}, {
			region : 'west',
			margins : '5 0 0 5',
			cmargins : '5 5 0 5',
			width : 375,
			items : propertyGrid
		}, {
			region : 'center',
			height : 420,
			margins : '5 5 0 0',
			items : panelUserVerhicle
		}]

	});
	
	siteFunctions.showWindow(panel, 1000, 590, 'userAndVerhiclePanel', true);
}

function createMarketDataview(type) {

	// create store classes
	var extendStore = new getForSaleUserVerhicles();

	// create dataview store
	extendStore.creatStore(type);

	// creat dataview classes
	var verhiclesFromUser = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getBuyFromUserVerhicleTPL());

	// load store
	extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();

	// get panel
	var panel = verhiclesFromUser.panel;

	// get toolbar
	var toolbar = verhiclesFromUser.dataviewToolbar;

	// get dataview
	var dataview = verhiclesFromUser.dataview;

	// add text
	panel.add({
		html : '<h1>Selecteer een voertuig en klik vervolgens op koop</h1>'
	});

	// add panel dataview to panel
	panel.add({
		items : [dataview]
	});

	// show verhicle details
	verhiclesFromUser.dataview.on('click', function() {

		// count selected records
		var countSelections = verhiclesFromUser.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (verhiclesFromUser.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowOK('Resultaat', 'niets geselecteerd', '');
		} else {
			// get selected record
			/*
			 * var dataID = verhiclesFromUser.dataview.getSelectedRecords()[0]
			 * .get('userID');
			 */
			var dataID = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('ID');
			var vName = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('name');
			var vValue = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('price');
			var vClass = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('class');
			var vAccel = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('acceleration');
			var VHandLing = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('handling');
			var vTopSpeed = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('topSpeed');
			var vDamage = 0;
			var vPhoto = verhiclesFromUser.dataview.getSelectedRecords()[0]
					.get('url');

			buyVerhiclesFromUsersPropertieSet(dataID, vName, vValue, vClass,
					vAccel, VHandLing, vTopSpeed, vDamage, vPhoto);

		}
	});

	var randomIDNumber = siteFunctions.randomNummbers(1000);
	siteFunctions.showWindow(panel, 500, 500, 'showVerhicle' + randomIDNumber,
			true);
}

// create company dataview
function createCompanyDataview(showType) {
	// creat store classes
	var extendStore = new showCompanyStore();

	// creat store classes
	// var extendStore = new getForSaleCompanyStore();

	// creat dataview store
	extendStore.creatStore(showType);

	// creat dataview classes
	var companyBuildings = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getShowCompanyTPL());

	// load store
	extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();
	/*
	 * TODO: don't show dataview if count records < 1. countRecords() rerurns
	 * value only when the dataview is loaded -> find solution for not showing
	 * an empty dataview
	 */

	// get panel
	var panel = companyBuildings.panel;

	// get toolbar
	var toolbar = companyBuildings.dataviewToolbar;

	// get dataview
	var dataview = companyBuildings.dataview;

	/*
	 * / add toolbar buttons toolbar.add({ text : 'Andere winkels ;)', handler :
	 * function() { alert('Coming soon....'); } });
	 */
	// add panel dataview to panel
	panel.add({
		html : '<h1>Selecteer een bedrijf</h1>'
	});

	panel.add({
		items : [dataview]
	});

	// show verhicle details
	companyBuildings.dataview.on('click', function() {
		// count selected records
		var countSelections = companyBuildings.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (companyBuildings.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowOK('Resultaat', 'niets geselecteerd', '');
		} else {
			// get selected record
			var dataID = companyBuildings.dataview.getSelectedRecords()[0]
					.get('ID');
			var vOwnerID = companyBuildings.dataview.getSelectedRecords()[0]
					.get('ownerID');
			var vOwnerName = companyBuildings.dataview.getSelectedRecords()[0]
					.get('ownerName');
			var vOwnerPhoto = companyBuildings.dataview.getSelectedRecords()[0]
					.get('ownerPhoto');
			var vName = companyBuildings.dataview.getSelectedRecords()[0]
					.get('name');
			var vValue = companyBuildings.dataview.getSelectedRecords()[0]
					.get('value');
			var vType = companyBuildings.dataview.getSelectedRecords()[0]
					.get('type');
			var vRespectPoints = companyBuildings.dataview.getSelectedRecords()[0]
					.get('respectPoints');
			var vTurnover = companyBuildings.dataview.getSelectedRecords()[0]
					.get('turnover');
			var vLevel = companyBuildings.dataview.getSelectedRecords()[0]
					.get('level');
			var vStorage = companyBuildings.dataview.getSelectedRecords()[0]
					.get('storage');
			var vPhoto = companyBuildings.dataview.getSelectedRecords()[0]
					.get('url');
			var vBannerImage = companyBuildings.dataview.getSelectedRecords()[0]
					.get('bannerImage');
			var vBannerImageRedirectUrl = companyBuildings.dataview
					.getSelectedRecords()[0].get('bannerImageRedirectUrl');

			var companyInfoPanel = new createCompanyPanel(vOwnerID, vOwnerName,
					vOwnerPhoto, vName, vValue, vType, vRespectPoints,
					vTurnover, vLevel, vStorage, vPhoto, vBannerImage,
					vBannerImageRedirectUrl, false);

			var companyInfoPanelItem = companyInfoPanel.companyInfoPanel;

			// show company info
			switch (showType) {
				case 1 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
				case 2 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
				case 3 :
					createForSaleVerhiclePartsDataview(dataID,
							companyInfoPanelItem);
					break;
				case 4 :
					alert('1');
					break;
				case 5 :
					// houses
					createForSaleHousesDataview(dataID, companyInfoPanelItem);
					break;
				case 6 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
				case 7 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
				case 10 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
				case 15 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
				case 19 :
					// verhicles
					createForSaleVerhicleDataview(dataID, companyInfoPanelItem);
					break;
			}
		}
	});

	var randomIDNumber = siteFunctions.randomNummbers(1000);
	// var randomIDNumber = Math.round(randomIDNumber);

	siteFunctions.showWindow(panel, 500, 500, 'companyPanel' + randomIDNumber,
			false);

}

// create my houses panel
function showMyHousesDataview() {
	// create store classes
	var extendStore = new getMyHousesStore();

	// create dataview store
	extendStore.createStore();

	// creat dataview classes
	var myHouses = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getMyHousesTPL());

	// load store
	extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();
	/*
	 * TODO: don't show dataview if count records < 1. countRecords() rerurns
	 * value only when the dataview is loaded -> find solution for not showing
	 * an empty dataview
	 */

	// get panel
	var panel = myHouses.panel;

	// get toolbar
	// var toolbar = myHouses.dataviewToolbar;

	// get dataview
	var dataview = myHouses.dataview;

	/*
	 * / add info panel panel.add({ items : [companyInfoPanelItem] });
	 */
	// add panel dataview to panel
	panel.add({
		items : [dataview]
	});

	// show verhicle details
	myHouses.dataview.on('click', function() {

		// count selected records
		var countSelections = myHouses.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (myHouses.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowError('Resultaat', 'niets geselecteerd',
					'');
		} else {

			// get selected record
			var dataID = myHouses.dataview.getSelectedRecords()[0].get('ID');
			var vName = myHouses.dataview.getSelectedRecords()[0].get('name');
			var vValue = myHouses.dataview.getSelectedRecords()[0].get('value');
			var vCompanyID = myHouses.dataview.getSelectedRecords()[0]
					.get('company_ID');
			var vStorage = myHouses.dataview.getSelectedRecords()[0]
					.get('storage');
			var vMin_level = myHouses.dataview.getSelectedRecords()[0]
					.get('min_level');
			var vPhoto = myHouses.dataview.getSelectedRecords()[0].get('url');

			showMyhousesPanel(dataID, vName, vValue, vStorage, vMin_level,
					vPhoto);

		}
	});

	siteFunctions.showWindow(panel, 500, '472px', 'showMyHouse', true);
}

// create for sale houses
function createForSaleHousesDataview(companyID, companyInfoPanelItem) {
	// create store classes
	var extendStore = new getForSaleHousesStore();

	// creat dataview store
	extendStore.creatStore(companyID);

	// creat dataview classes
	var HousesVerhicles = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getBuyHousesTPL());

	// load store
	extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();
	/*
	 * TODO: don't show dataview if count records < 1. countRecords() rerurns
	 * value only when the dataview is loaded -> find solution for not showing
	 * an empty dataview
	 */

	// get panel
	var panel = HousesVerhicles.panel;

	// get toolbar
	var toolbar = HousesVerhicles.dataviewToolbar;

	// get dataview
	var dataview = HousesVerhicles.dataview;

	/*
	 * / add toolbar buttons toolbar.add({ text : 'Andere winkels', handler :
	 * function() { alert('Coming soon....'); } });
	 */

	// add info panel
	panel.add({
		items : [companyInfoPanelItem]
	});

	// add text
	panel.add({
		html : '<h1>Selecteer een huis en klik vervolgens op koop</h1>'
	});

	// add panel dataview to panel
	panel.add({
		items : [dataview]
	});

	// show verhicle details
	HousesVerhicles.dataview.on('click', function() {

		// count selected records
		var countSelections = HousesVerhicles.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (HousesVerhicles.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowError('Resultaat', 'niets geselecteerd',
					'');
		} else {

			// get selected record
			var dataID = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('ID');
			var vName = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('name');
			var vValue = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('price');
			var vCompanyID = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('company_ID');
			var vStorage = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('storage');
			var vMin_level = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('min_level');
			var vPhoto = HousesVerhicles.dataview.getSelectedRecords()[0]
					.get('url');

			buyHousesPropertieSet(dataID, vName, vValue, vStorage, vMin_level,
					vPhoto);

		}
	});

	siteFunctions.showWindow(panel, 500, 533, 'showHouse', true);
}
// creat for sale verhicle parts
function createForSaleVerhiclePartsDataview(companyID, companyInfoPanelItem) {

	// creat store classes
	var extendStore = new getForSaleVerhiclePartsStore();

	// creat dataview store
	extendStore.createStore(companyID);

	// create dataview classes
	var companyVerhicleParts = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getBuyVerhiclePartsTPL());

	// load store
	extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();
	/*
	 * TODO: don't show dataview if count records < 1. countRecords() rerurns
	 * value only when the dataview is loaded -> find solution for not showing
	 * an empty dataview
	 */

	// get panel
	var panel = companyVerhicleParts.panel;

	// get toolbar
	var toolbar = companyVerhicleParts.dataviewToolbar;

	// get dataview
	var dataview = companyVerhicleParts.dataview;

	// add info panel
	panel.add({
		items : [companyInfoPanelItem]
	});

	// add text
	panel.add({
		html : '<h1>Selecteer een onderdeel en klik vervolgens op koop</h1>'
	});

	// add panel dataview to panel
	panel.add({
		items : [dataview]
	});

	// show verhicle details
	companyVerhicleParts.dataview.on('click', function() {

		// count selected records
		var countSelections = companyVerhicleParts.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (companyVerhicleParts.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowOK('Resultaat', 'niets geselecteerd', '');
		} else {
			// get selected record
			var dataID = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('ID');
			var vName = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('name');
			var vValue = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('price');
			var vClass = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('class');
			var vAccel = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('acceleration');
			var vHandLing = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('handling');
			var vTopSpeed = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('topSpeed');
			var vType = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('type');
			var vVerhicleType = companyVerhicleParts.dataview
					.getSelectedRecords()[0].get('verhicleType');
			var vPhoto = companyVerhicleParts.dataview.getSelectedRecords()[0]
					.get('url');

			buyPartsPropertieSet(dataID, vName, vValue, vClass, vAccel,
					vHandLing, vTopSpeed, vType, vVerhicleType, vPhoto);

		}
	});

	var randomIDNumber = siteFunctions.randomNummbers(1000);
	siteFunctions.showWindow(panel, 500, 533, 'showVerhicle' + randomIDNumber,
			true);
}

// create for sale verhicles
function createForSaleVerhicleDataview(companyID, companyInfoPanelItem) {

	// create store classes
	var extendStore = new getForSaleCompanyStore();

	// create dataview store
	extendStore.creatStore(companyID);

	// creat dataview classes
	var companyVerhicles = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getBuyVerhicleTPL());

	// load store
	extendStore.reloadMyStore();

	var storeRecords = extendStore.countRecords();
	/*
	 * TODO: don't show dataview if count records < 1. countRecords() rerurns
	 * value only when the dataview is loaded -> find solution for not showing
	 * an empty dataview
	 */

	// get panel
	var panel = companyVerhicles.panel;

	// get toolbar
	var toolbar = companyVerhicles.dataviewToolbar;

	// get dataview
	var dataview = companyVerhicles.dataview;

	/*
	 * / add toolbar buttons toolbar.add({ text : 'Andere winkels', handler :
	 * function() { alert('Coming soon....'); } });
	 */
	// add info panel
	panel.add({
		items : [companyInfoPanelItem]
	});

	// add text
	panel.add({
		html : '<h1>Selecteer een voertuig en klik vervolgens op koop</h1>'
	});

	// add panel dataview to panel
	panel.add({
		items : [dataview]
	});

	// show verhicle details
	companyVerhicles.dataview.on('click', function() {

		// count selected records
		var countSelections = companyVerhicles.dataview.getSelectionCount();

		// check if anything is selected in thhe dataview
		if (companyVerhicles.dataview.getSelectionCount() < 1) {
			siteFunctions.popupWindowOK('Resultaat', 'niets geselecteerd', '');
		} else {
			// get selected record
			var dataID = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('ID');
			var vName = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('name');
			var vValue = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('price');
			var vClass = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('class');
			var vAccel = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('acceleration');
			var VHandLing = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('handling');
			var vTopSpeed = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('topSpeed');
			var vDamage = 0;
			var vPhoto = companyVerhicles.dataview.getSelectedRecords()[0]
					.get('url');

			buyVerhiclesPropertieSet(dataID, vName, vValue, vClass, vAccel,
					VHandLing, vTopSpeed, vDamage, vPhoto);

		}
	});

	var randomIDNumber = siteFunctions.randomNummbers(1000);
	siteFunctions.showWindow(panel, 700, 533, 'showVerhicle' + randomIDNumber,
			true);
}

/*
 * creat Dataview.... actions: create store set store reload store add dataview
 * to the panel
 */
function createDataview(store, template) {

	this.dataview = new Ext.DataView({
		store : store,
		loadingText : 'Laden...',
		tpl : template,// ,

		// width : 500,
		id : 'dataview', // do not change
		autoHeight : true,
		loadingText : 'Loading..',
		//loadMask : true,
		deferEmptyText : true,
		singleSelect : true,
		overClass : 'x-view-over',
		itemSelector : 'div.thumb-wrap',
		emptyText : '<div style="padding:10px;">Geen items gevonden</div>',

		plugins : [/*
					 * new Ext.DataView.DragSelector(), new
					 * Ext.DataView.LabelEditor({ dataIndex : 'name' })
					 */],

		prepareData : function(data) {
			/*
			 * if(data == null){ alert('yo'); }else{ alert('yu'); }
			 */
			// alert('prepare');
			// data.shortName = Ext.util.Format.ellipsis(data.name, 15);
			// data.sizeString =
			// Ext.util.Format.fileSize(data.size);
			// data.dateString = data.lastmod.format("m/d/Y g:i a");
			return data;
		}
	});

	// dataview toolbar
	this.dataviewToolbar = new Ext.Toolbar({
		text : 'ds'
	});

	this.panel = new Ext.Panel({
		id : 'images-view',
		// frame : true,
		// width : 500,
		region : 'center',
		hideBorders : true,
		tabTip : 'klik op 1 van de opties ',
		height : 500,
		minHeight : 300,
		// autoHeight : true,

		autoScroll : true

	});

}

// Buytypes: verhicleParts, buyVerhicles
function buy(ID, buyType) {

	var connectUrl;
	var page;
	var openWindowType;
	// set connect url
	switch (buyType) {
		case 'buyVerhicles' :
			connectUrl = '/paginas/buy.php'
			page = 'buyVerhicles';
			break;
		case 'buyVerhiclesFromUsers' :
			connectUrl = '/paginas/buy.php'
			page = 'buyVerhiclesFromUsers';
			break;
		case 'buyVerhicleParts' :
			connectUrl = '/paginas/buy.php'
			page = 'buyVerhicleParts';
			break;
		case 'buyHouses' :
			connectUrl = '/paginas/buy.php'
			page = 'buyHouses';
			break;
		case 'buyCompany' :
			alert('Coming soon...');
			break;
	}

	// ff connectUrl == empty -> error
	if (connectUrl == "") {
		alert('No connect url');
		return;
	}

	var conn = new Ext.data.Connection();
	conn.request({
		url : connectUrl,
		method : 'GET',
		params : {
			'page' : page,
			'ID' : ID
		}
	});
	var test = {
		params : openWindowType
	};
	conn.on('requestcomplete', function(sender, param) {
		response = siteFunctions.jsonDecode(param.responseText);

		popupWindowError('Voertuig', test, '');
		if (!response['result']) {
			popupWindowError('Voertuig', response['message'], '');
			return false;
		} else {
			popupWindowOK('Voertuig', response['message'], '');
			/*
			 * switch (openWindowType) { case 'buyVerhicles' : //open my
			 * verhicles panel createMyVerhiclePanel(); break; case
			 * 'buyVerhicleParts' : //open my parts panel
			 * 
			 * break; case 'buyHouses' : //open my houses panel
			 * showMyHousesDataview(); break; case 'buyCompany' : //open my
			 * company window
			 * 
			 * break; }
			 */
			return true;
		}
	});

}

// buy verhicle see properties
function buyVerhiclesPropertieSet(dataID, vName, vValue, vClass, vAccel,
		VHandLing, vTopSpeed, vDamage, vPhoto) {
	var createVerhicle = new createVerhiclePanel(dataID, vName, vValue, vClass,
			vAccel, VHandLing, vTopSpeed, vDamage, vPhoto, true);

	createVerhicle.Toolbar.add({
		text : 'Koop',
		iconCls : 'buy',
		handler : function() {
			// alert('test');
			// buy verhicle
			buy(dataID, 'buyVerhicles');

			// close vehicle panel
			createVerhicle.closeWindow();
			// Ext.getCmp('showVerhicle').hide();
		}
	});
	// show verhicle panel
	createVerhicle.verhicleInfoPanel.show();
}

// buy verhicle see properties
function buyVerhiclesFromUsersPropertieSet(dataID, vName, vValue, vClass,
		vAccel, VHandLing, vTopSpeed, vDamage, vPhoto) {
	var createVerhicle = new createVerhiclePanel(dataID, vName, vValue, vClass,
			vAccel, VHandLing, vTopSpeed, vDamage, vPhoto, true);

	createVerhicle.Toolbar.add({
		text : 'Koop',
		iconCls : 'buy',
		handler : function() {
			// alert('test');
			// buy verhicle
			buy(dataID, 'buyVerhiclesFromUsers');

			// close vehicle panel
			createVerhicle.closeWindow();
			// Ext.getCmp('showVerhicle').hide();
		}
	});
	// show verhicle panel
	createVerhicle.verhicleInfoPanel.show();
}
// create show parts properties
function createPartsPanel(dataID, vName, vValue, vClass, vAccel, VHandLing,
		vTopSpeed, vType, vVerhicleType, vPhoto, show) {

	Ext.QuickTips.init();

	// get slider value
	function getText(slider) {
		return slider.getValue();
	}
	this.accelSliderName = new Ext.form.Label({
		text : 'Acceleratie ' + vAccel// + getText(this.accelSlider)
	});

	this.handlingSliderName = new Ext.form.Label({
		text : 'handleing ' + VHandLing// + getText(this.handlingSlider)
	});

	this.topSpeedSliderName = new Ext.form.Label({
		text : 'Top snelheid ' + vTopSpeed // + getText(this.topSpeedSlider)
	});

	this.nameField = new Ext.form.TextField({
		fieldLabel : 'Naam ',
		readOnly : true,
		value : vName,
		disabled : true,
		width : 130
	});

	this.valueField = new Ext.form.TextField({
		fieldLabel : 'Waarde €',
		readOnly : true,
		value : vValue,
		disabled : true,
		width : 130
	});

	this.classField = new Ext.form.TextField({
		fieldLabel : 'Classe',
		readOnly : true,
		value : vClass,
		disabled : true,
		width : 130
	});

	this.accelSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vAccel,
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.handlingSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : VHandLing,
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.topSpeedSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vTopSpeed,
		overCls : 'yo',
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.racePanelPhotoField = new Ext.Panel({
		title : 'Onderdeel',
		frame : true,
		width : 325,
		region : 'center',
		html : '<img src="' + vPhoto + '" width="350" height="225">'
	});

	this.Toolbar = new Ext.Toolbar({
		text : ' test'
	});

	this.properties = new Ext.FormPanel({
		title : 'Eigenschappen',
		frame : true,
		tbar : this.Toolbar,
		width : 250,
		region : 'west',
		split : true,
		items : [this.nameField, this.valueField, this.classField,
				this.accelSliderName, this.accelSlider,
				this.handlingSliderName, this.handlingSlider,
				this.topSpeedSliderName, this.topSpeedSlider]
	});

	this.infoPanel = new Ext.Window({
		width : 650,
		height : 300,
		tbar : this.Toolbar,
		modal : true,
		align : 'center',
		layout : 'border',
		collapsible : true,
		bodyBorder : false,
		items : [this.properties, this.racePanelPhotoField]
	});

	if (show == true) {
		this.infoPanel.show();
	}

	this.closeWindow = function() {
		this.infoPanel.close();
		this.infoPanel.setDisabled(true);
	}

}

// buy verhicle see properties
function buyPartsPropertieSet(dataID, vName, vValue, vClass, vAccel, vHandLing,
		vTopSpeed, vType, vVerhicleType, vPhoto) {

	var createParts = new createPartsPanel(dataID, vName, vValue, vClass,
			vAccel, vHandLing, vTopSpeed, vType, vVerhicleType, vPhoto, true);

	createParts.Toolbar.add({
		text : 'Koop',
		iconCls : 'buy',
		handler : function() {
			// alert('test');
			// buy verhicle
			buy(dataID, 'buyVerhicleParts');

			// close vehicle panel
			createParts.closeWindow();
			// Ext.getCmp('showVerhicle').hide();
		}
	});
	// show verhicle panel

	createParts.infoPanel.show();

}

// buy houses see properties
function buyHousesPropertieSet(dataID, vName, vValue, vStorage, vMin_level,
		vPhoto) {

	var createHouses = new createHousePanel(vName, vValue, vStorage,
			vMin_level, vPhoto, true);

	createHouses.Toolbar.add({
		text : 'Koop',
		iconCls : 'buy',
		handler : function() {

			// buy verhicle
			buy(dataID, 'buyHouses');

			// close vehicle panel
			createHouses.closeWindow();
		}
	});
	// show verhicle panel
	createHouses.infoPanel.show();
}

// My houses see properties
function showMyhousesPanel(dataID, vName, vValue, vStorage, vMin_level, vPhoto) {

	var createHouses = new createHousePanel(vName, vValue, vStorage,
			vMin_level, vPhoto, true);

	createHouses.Toolbar.add({
		text : 'Verkoop',
		iconCls : 'buy',
		handler : function() {
			alert('Komt in het volgende versie');
		}
	});

	// show verhicle panel
	createHouses.infoPanel.show();
}

// create company panel
function createCompanyPanel(vOwnerID, vOwnerName, vOwnerPhoto, vName, vValue,
		vType, vRespectPoints, vTurnover, vLevel, vStorage, vPhoto,
		vBannerImage, vBannerImageRedirectUrl, show) {
	Ext.QuickTips.init();

	this.companyAttributes = new Ext.form.Label({
		html : '<table width="150" border="0"><tr><td><b>Naam: </b></td><td>'
				+ vName + '</td></tr><tr><td><b>Waarde €: </b></td><td>'
				+ vValue + '</td></tr><tr><td><b>Type: </b></td><td>' + vType
				+ '</td></tr><tr><td><b>Respect Punten: </b></td><td>'
				+ vRespectPoints + '</td></tr><tr><td><b>Opslag: </b></td><td>'
				+ vStorage + ' </td></tr><tr><td><b>Omzet: </b></td><td>'
				+ vTurnover + '</td> </tr><tr><td><b>Level: </b></td><td>'
				+ vLevel + '</td></tr></table>'
	});

	this.racePanelcompanyPhotoField = new Ext.Panel({
		title : 'Foto',
		frame : true,
		width : 220,
		height : 150,
		columnWidth : .263,
		region : 'center',
		html : '<center><br><a href="'
				+ vPhoto
				+ '" target="_blank"><img src="'
				+ vPhoto
				+ '" width="90" height="70" id="imageOverAlign" class="normalImage"></a><br><br>'
				+ vName + '</center>'
	});

	this.racePanelOwnerPhotoField = new Ext.Panel({
		title : 'Eigenaar',
		frame : true,
		width : 220, // 220
		height : 150,
		columnWidth : .290, // .263
		region : 'center',
		html : '<br><center><a href="'
				+ vOwnerPhoto
				+ '" target="_blank"><img src="'
				+ vOwnerPhoto
				+ '" width="90" height="70" id="imageOverAlign" class="normalImage"></a><br><br>'
				+ vOwnerName + '</center>'
	});

	this.Toolbar = new Ext.Toolbar({
		text : ' test'
	});

	this.companysProperties = new Ext.FormPanel({
		title : 'Details',
		frame : true,
		height : 150,
		// tbar : this.Toolbar,
		// width : 300,
		columnWidth : .450,
		region : 'center',
		// split : true,
		items : [this.companyAttributes]
	});

	this.companyPropertiesPanel = new Ext.Panel({
		// title : 'Bedrijf',
		// frame : true,
		width : 500,
		// height : 1000,
		layout : 'column',
		region : 'center',
		items : [this.companysProperties, this.racePanelcompanyPhotoField,
				this.racePanelOwnerPhotoField]
	});

	this.companyAdvertPanel = new Ext.Panel({
		title : "Bedrijfsgegevens",
		frame : true,
		width : 500,
		// height : 100,
		autoScroll : true,
		region : 'south',
		html : '<center><a href="' + vBannerImageRedirectUrl
				+ '" target="_blank"><img src="' + vBannerImage
				+ '" height="60px" width="485px"></a></center>'
	});

	this.companyInfoPanel = new Ext.Panel({
		// title : 'Bedrijf',
		// frame : true,
		width : 500,
		// height : 300,
		layout : 'column',
		items : [this.companyPropertiesPanel, this.companyAdvertPanel]
	});

	/*
	 * if (show = true) { this.companyInfoPanel.show(); }
	 */
}

// create show verhicle properties
function createHousePanel(vName, vValue, vStorage, vMin_level, vPhoto, show) {

	Ext.QuickTips.init();

	this.nameField = new Ext.form.TextField({
		fieldLabel : 'Naam ',
		readOnly : true,
		value : vName,
		disabled : true,
		width : 130
	});

	this.valueField = new Ext.form.TextField({
		fieldLabel : 'Waarde €',
		readOnly : true,
		value : vValue,
		disabled : true,
		width : 130
	});

	this.storageField = new Ext.form.TextField({
		fieldLabel : 'Opslag',
		readOnly : true,
		value : vStorage,
		disabled : true,
		width : 130
	});

	this.minLevelField = new Ext.form.TextField({
		fieldLabel : 'Minimaal level',
		readOnly : true,
		value : vMin_level,
		disabled : true,
		width : 130
	});

	this.photoField = new Ext.Panel({
		title : 'Huis',
		frame : true,
		width : 325,
		region : 'center',
		html : '<img src="' + vPhoto + '" width="350" height="225">'
	});

	this.Toolbar = new Ext.Toolbar({
		text : ' test'

	});

	this.properties = new Ext.FormPanel({
		title : 'Eigenschappen',
		frame : true,
		tbar : this.Toolbar,
		width : 250,
		region : 'west',
		split : true,
		items : [this.nameField, this.valueField, this.storageField,
				this.minLevelField]
			/*
			 * , buttons : [this.useVerhicleButton, this.upgradeVerhicleButton,
			 * this.repairVerhicleButton, this.forSaleVerhicleButton]
			 */
	});

	this.infoPanel = new Ext.Window({
		width : 650,
		height : 300,
		tbar : this.Toolbar,
		modal : true,
		align : 'center',
		layout : 'border',
		collapsible : true,
		bodyBorder : false,
		items : [/* textPanel, */this.properties, this.photoField]
	});

	if (show == true) {
		this.infoPanel.show();
	}

	this.closeWindow = function() {
		this.infoPanel.close();
		this.infoPanel.setDisabled(true);
	}

}

// create show verhicle properties
function createVerhiclePartPanel(vPartID, vName, vValue, vClass, vAccel,
		VHandLing, vTopSpeed, vPartTypeName, vPartVerhicleTypeName, vPhoto,
		vUsedBy, show) {

	Ext.QuickTips.init();

	// get slider value
	function getText(slider) {
		return slider.getValue();
	}
	this.accelSliderName = new Ext.form.Label({
		html : '<b>Acceleratie</b>&nbsp;&nbsp;&nbsp;' + vAccel// +
			// getText(this.accelSlider)
	});

	this.handlingSliderName = new Ext.form.Label({
		html : '<b>Handeling</b>&nbsp;&nbsp;&nbsp;' + VHandLing// +
			// getText(this.handlingSlider)
	});

	this.topSpeedSliderName = new Ext.form.Label({
		html : '<b>Top snelheid</b>&nbsp;&nbsp;&nbsp;' + vTopSpeed // +
			// getText(this.topSpeedSlider)
	});

	this.partInfoField = new Ext.form.Label({
		html : '<table width="200"><tr><td><b>Naam: </b></td><td>' + vName
				+ '</td></tr><tr><td><b>Waarde </b></td>&euro; ' + vValue
				+ '</td></tr><tr><td><b>Classe: </b></td><td>' + vClass
				+ '<tr><td><b>Onderdeel voor: </b></td><td>'
				+ vPartVerhicleTypeName
				+ '<tr><td><b>Onderdeel type: </b></td><td>' + vPartTypeName
				+ '<tr><td><b>Gebruikt door: </b></td><td>' + vUsedBy
				+ '</td></tr></table><br>'
	});

	this.accelSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vAccel,
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.handlingSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : VHandLing,
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.topSpeedSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vTopSpeed,
		overCls : 'yo',
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.Toolbar = new Ext.Toolbar({
		text : ' test'
	});

	this.racePanelVerhiclePhotoField = new Ext.Panel({
		title : 'Onderdeel',
		frame : true,
		width : 325,
		region : 'center',
		html : '<center><img class="normalImage" src="' + vPhoto
				+ '" width="350" height="225"></center>'
	});

	this.partProperties = new Ext.FormPanel({
		title : 'Eigenschappen',
		frame : true,
		tbar : this.Toolbar,
		width : 250,
		// height : 250,
		region : 'west',
		// split : true,
		items : [this.partInfoField, this.accelSliderName, this.accelSlider,
				this.handlingSliderName, this.handlingSlider,
				this.topSpeedSliderName, this.topSpeedSlider]
	});

	this.partsAndVerhiclePicture = new Ext.Panel({
		width : 325,
		height : 270,
		region : 'center',
		layout : 'border',
		items : [this.racePanelVerhiclePhotoField]
	});

	this.verhicleInfoPanel = new Ext.Window({
		width : 650,
		height : 360,
		id : 'partInfoPanel', // don't change
		tbar : this.Toolbar,
		modal : true,
		align : 'center',
		layout : 'border',
		collapsible : true,
		bodyBorder : false,
		items : [/* textPanel, */this.partProperties,
				this.partsAndVerhiclePicture]
			// panelDataview
	});

	if (show == true) {
		this.verhicleInfoPanel.show();
	}

	this.closeWindow = function() {
		this.verhicleInfoPanel.close();
		this.verhicleInfoPanel.setDisabled(true);
	}

}

// create show verhicle properties
function createVerhiclePanel(vVerhicleID, vName, vValue, vClass, vAccel,
		VHandLing, vTopSpeed, vDamage, vPhoto, show) {

	Ext.QuickTips.init();

	// get slider value
	function getText(slider) {
		return slider.getValue();
	}
	this.accelSliderName = new Ext.form.Label({
		html : '<b>Acceleratie</b>&nbsp;&nbsp;&nbsp;' + vAccel// +
			// getText(this.accelSlider)
	});

	this.handlingSliderName = new Ext.form.Label({
		html : '<b>Handleing</b>&nbsp;&nbsp;&nbsp;' + VHandLing// +
			// getText(this.handlingSlider)
	});

	this.topSpeedSliderName = new Ext.form.Label({
		html : '<b>Top snelheid</b>&nbsp;&nbsp;&nbsp;' + vTopSpeed // +
			// getText(this.topSpeedSlider)
	});

	this.damageSliderName = new Ext.form.Label({
		html : '<b>Damage</b>&nbsp;&nbsp;&nbsp;' + vDamage// +
			// getText(this.topSpeedSlider)
	});

	this.verhicleInfoField = new Ext.form.Label({
		html : '<table width="200"><tr><td><b>Naam: </b></td><td>' + vName
				+ '</td></tr><tr><td><b>Waarde: </b></td><td>&euro; ' + vValue
				+ '</td></tr><tr><td><b>Classe: </b></td><td>' + vClass
				+ '</td></tr></table><br> test'
	});

	// var html = '<table><tr><td><b>Naam: </b></td><td>' + vName +
	// '</td></tr><tr><td><b>vValue </b></td>' + vClass +
	// '</td></tr><tr><td><b>Classe: </b></td><td>' + vClass +
	// '</td></tr></table>';

	this.verhicleValueField = new Ext.form.Label({
		html : '<b>Waarde €:&nbsp;&nbsp;&nbsp;</b>  ' + vValue + '<br>'
	});

	this.verhicleClassField = new Ext.form.Label({
		html : '<b>Classe:</b>&nbsp;&nbsp;&nbsp;' + vClass + '<br><br>'
	});

	this.accelSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vAccel,
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.handlingSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : VHandLing,
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.topSpeedSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vTopSpeed,
		overCls : 'yo',
		increment : 10,
		minValue : 0,
		maxValue : 600
	});

	this.damageSlider = new Ext.Slider({
		width : 200,
		animate : true,
		disabled : true,
		value : vDamage,
		increment : 10,
		minValue : 0,
		maxValue : 100
	});

	this.Toolbar = new Ext.Toolbar({
		text : ' test'
	});

	// make parts dataview

	// create store classes
	var extendStore = new getVerhiclePartsStore();

	// create dataview store
	extendStore.createStore(vVerhicleID);

	// create dataview classes
	var verhiclePartsDataview = new createDataview(extendStore.getMyStore(),
			dataviewXtemplate.getVerhiclePartsTPL());

	// load store
	extendStore.reloadMyStore();

	var panelDataview = verhiclePartsDataview.panel;

	var partsDataview = verhiclePartsDataview.dataview;

	this.racePanelVerhiclePhotoField = new Ext.Panel({
		title : 'Voertuig',
		frame : true,
		width : 325,
		region : 'center',
		html : '<center><img class="normalImage" src="' + vPhoto
				+ '" width="350" height="225"></center>'
	});

	panelDataview.add({
		title : 'Onderdelen',
		items : [partsDataview]
	});

	partsDataview.on('click', function() {
		// var VerhicleName = vName;
		var usedBy = vName;
		var data = partsDataview.getSelectedRecords()[0];
		var partID = data.get('ID');
		var partName = data.get('name');
		var vValue = data.get('price');
		var vClass = data.get('class');
		var vAccel = data.get('acceleration');
		var VHandLing = data.get('handling');
		var vTopSpeed = data.get('topSpeed');
		var vPartTypeName = data.get('type');
		var vPartVerhicleTypeName = data.get('verhicleType');
		var vPhoto = data.get('url');

		var verhiclePartPanel = new createVerhiclePartPanel(partID, partName,
				vValue, vClass, vAccel, VHandLing, vTopSpeed, vPartTypeName,
				vPartVerhicleTypeName, vPhoto, usedBy, true)

		var removeButton = new Ext.Button({
			text : "Verwijderen van dit voertuig",
			iconCls : 'remove',
			handler : function() {
				Ext.Msg.show({
					title : 'verwijderen?',
					msg : 'Weet je het zeker dat je deze onderdeel wilt loskoppelen van deze voertuig?',
					buttons : Ext.Msg.YESNO,
					fn : function(btn, text) {
						if (btn == 'yes') {
							removeVerhiclePart(partID);
							Ext.getCmp('partInfoPanel').destroy();
						}
					},
					animEl : 'elId',
					icon : Ext.MessageBox.QUESTION
				});
			}
		});

		verhiclePartPanel.Toolbar.addButton(removeButton);

	});

	this.verhiclesProperties = new Ext.Panel({
		title : 'Eigenschappen',
		frame : true,
		tbar : this.Toolbar,
		width : 250,
		// border : false,
		// height : 700,
		region : 'west',
		// split : true,
		items : [this.verhicleInfoField, this.accelSliderName,
				this.accelSlider, this.handlingSliderName, this.handlingSlider,
				this.topSpeedSliderName, this.topSpeedSlider,
				this.damageSliderName, this.damageSlider]
	});

	this.partsAndVerhiclePicture = new Ext.Panel({
		// title : 'Voertuig',
		// frame : false,
		width : 325,
		height : 270,
		region : 'center',
		layout : 'border',
		items : [this.racePanelVerhiclePhotoField]
	});

	this.panelDataviewPanel = new Ext.Panel({
		// title : 'Voertuig',
		// frame : false,
		width : 880,
		height : 240,
		region : 'south',
		items : [panelDataview]
	});

	this.verhicleInfoPanel = new Ext.Window({
		width : 650,
		height : 540,
		id : 'verhicleInfoPanel', // don't change
		tbar : this.Toolbar,
		modal : true,
		// align : 'center',
		layout : 'border',
		// collapsible : true,
		// bodyBorder : false,
		items : [/* textPanel, */this.verhiclesProperties,
				this.partsAndVerhiclePicture, this.panelDataviewPanel]
			// panelDataview
	});

	if (show == true) {
		this.verhicleInfoPanel.show();
	}

	this.closeWindow = function() {
		this.verhicleInfoPanel.close();
		this.verhicleInfoPanel.setDisabled(true);
	}

}

// configured oke alert box
function popupWindowOK(title, msg, handler) {
	Ext.Msg.show({
		title : title,
		msg : msg,
		minWidth : 400,
		buttons : Ext.Msg.OK,
		fn : handler,
		// animEl: 'elId',
		icon : Ext.MessageBox.INFO
	});
}

// configured error alert box
function popupWindowError(title, msg, handler) {
	Ext.Msg.show({
		title : title,
		msg : msg,
		minWidth : 400,
		buttons : Ext.Msg.OK,
		fn : handler,
		// animEl: 'elId',
		icon : Ext.MessageBox.ERROR
	});
}

// set site preloader
function setPreloader() {

	setTimeout(function() {
		Ext.get('loading').remove();
		Ext.get('loading-mask').fadeOut({
			remove : true
		});
	}, 250);
}

function comingSoon() {
	Ext.Msg.show({
		title : '',
		msg : 'Coming soon...',
		minWidth : 400,
		buttons : Ext.Msg.OK,
		icon : Ext.MessageBox.INFO
	});
}
function $(id) {
	var item = document.getElementById(id);
	return item;
}

function registerUser(friendCode) {

	if (friendCode == '') {
		friendCode = 'Niet beschikbaar';
	}

	Ext.QuickTips.init();
	// /////Startregister objects//////////
	var name = new Ext.form.TextField({
		fieldLabel : 'Inlog Naam * ',
		maxLength : 16,
		maxLengthText : 'Maximale lengte is 16',
		width : 130,
		blankText : 'Voer hier jouw gebruikers naam in',
		allowBlank : false
	});

	var email = new Ext.form.TextField({
		fieldLabel : 'E-mail * ',
		maxLength : 30,
		maxLengthText : 'Maximale lengte is 30',
		width : 130,
		blankText : 'Voer hier jouw e-mail adres in',
		allowBlank : false
	});

	var passw1 = new Ext.form.TextField({
		fieldLabel : 'Wachtwoord *',
		maxLength : 16,
		width : 130,
		inputType : 'password',
		maxLengthText : 'Maximale lengte is 16',
		blankText : 'Voer je wachtwoord in',
		name : 'passw1',
		allowBlank : false
	});

	var passw2 = new Ext.form.TextField({
		fieldLabel : 'Wachtwoord *',
		maxLength : 16,
		width : 130,
		inputType : 'password',
		maxLengthText : 'Maximale lengte is 16',
		blankText : 'Voer hetzelfde wachtwoord opnieuw in',
		allowBlank : false
	});

	var bonusCode = new Ext.form.TextField({
		fieldLabel : 'Vriend Code *',
		maxLength : 16,
		width : 130,
		disabled : true,
		value : friendCode,
		blankText : 'Voer een code in mocht je deze gekregen hebben.',
		allowBlank : false
	});

	var registerPanel = new Ext.FormPanel({
		width : 250,
		split : true,
		items : [name, email, passw1, passw2, bonusCode],
		buttons : [{
			text : 'Registeer',
			iconCls : 'add',
			handler : function() {

				var emailCheck = siteFunctions.validEmail(email.getValue());

				if (!emailCheck) {
					alert('Jouw email adres is niet correct');
					email.validate();
				} else if (email.getValue() == ''
						|| email.getValue().length > 30) {
					email.validate();
				} else if (name.getValue() == '' || name.getValue().length > 16) {
					name.validate();
				} else if (passw1.getValue() == ''
						|| passw1.getValue().length > 16) {
					passw1.validate();
				} else if (passw2.getValue() == ''
						|| passw1.getValue().length > 16) {
					passw2.validate();
				} else if (passw2.getValue() != passw1.getValue()) {
					alert('Je passwoord check dient hetzelfde te zijn als je eerste ingevoerde passwoord');
					passw2.validate();
				} else {

					var conn = new Ext.data.Connection();

					conn.request({
						url : '/paginas/user.php',
						method : 'POST',
						params : {
							'userName' : name.getValue(),
							'page' : 'registerUser',
							'userEmail' : email.getValue(),
							'passw1' : passw1.getValue(),
							'friendCode' : bonusCode.getValue()
						}
					});

					conn.on('requestcomplete', function(sender, param) {
						response = siteFunctions.jsonDecode(param.responseText);

						if (response['result']) {
							Ext.getCmp('registrationPanel').destroy();
						}

						siteFunctions.checkResultAlert(response['result'],
								response['message']);
					});
				}
			}
		}]
	});

	// /////End register objects//////////

	var htmlText = '<br>Welkom bij <b>RaceFreakZ</b> een <b>Race</b> MMORG (Massively Multiplayer Online roleplaying Game) die je via je browser speelt.<br>Voer je gebruikersnaam, email en je wachtwoord in  (wachtwoord tweemaal).<br>Mocht je op een persoonlijke link hebben geklikt zal de “Vriend code” invoer veld ingevuld zijn met een code. Deze hoeft echter niet aanwezig te zijn. <br>Na aanmelding kan jij jouw persoonlijke link ook verder verspreiden om spel geld te krijgen. <br><br>Klik na invoer op “Registreer” om deel te mogen nemen aan het spel. <br>Activeren  is wel vereist. Dus voer een geldig email adres in. <br>';

	var htmlPanel = new Ext.Panel({
		title : 'Help',
		width : 300,
		frame : true,
		height : 180,
		region : 'east',
		html : htmlText,
		autoScroll : true
	})

	var registrationPanel = new Ext.Panel({
		title : 'Registreer',
		frame : true,
		width : 300,
		region : 'center',
		height : 150,
		split : true,
		items : [registerPanel]
	});

	var contentPanel = new Ext.Panel({
		height : 210,
		layout : 'border',
		width : 605,
		items : [registrationPanel, htmlPanel]
	});

	siteFunctions.showWindow(contentPanel, 210, 605, 'registrationPanel', true);

}

var levelUp = function() {

	return {
		showLevelUpInfoPanel : function(renderID, showWindow) {
			// /////
			var url = '/paginas/ranking.php?page=getLevelInfo';
			var data = [{
				name : 'personal'
			}, {
				name : 'races'
			}, {
				name : 'verhiclesAndPartsHousesCompany'
			}];

			var store = new generalStore();
			store.createStore(url, data);
			store.reloadMyStore();

			var newStore = store.getMyStore();

			// show my started races
			var raceHelpButton = new Ext.Button({
				pressed : false,
				minWidth : 30,
				text : '',
				iconCls : 'help',
				disabled : false,
				handler : function() {
					//helpItems('race');
					siteFunctions.getPage('levelPage');
				}
			});

			var reLoadButton = new Ext.Button({
				text : "Herlaad",
				minWidth : 195,
				tooltip : "herlaad de race overzicht.",
				iconCls : 'refresh',
				handler : function() {
					newStore.load();
				}
			});

			var checkLevelButton = new Ext.Button({
				text : "Volgende level verkrijgen",
				minWidth : 195,
				tooltip : "Naar de volgende level",
				iconCls : 'next2',
				handler : function() {
					checkUserLevel(true);
				}
			});

			var levelInfo = new Ext.Button({
				text : "Level info",
				minWidth : 190,
				tooltip : "level informatie",
				iconCls : 'levelInfo',
				handler : function() {
					siteFunctions.getPage('levelPage');
				}
			});

			var buttonPanel = new Ext.Panel({
				frame : false,
				buttons : [levelInfo, checkLevelButton, reLoadButton,
						raceHelpButton]
			});

			// create grid
			var grid = new Ext.grid.GridPanel({
				title : 'Level omhoog',
				frame : true,
				tbar : buttonPanel,
				width : 650,
				border : true,
				height : 355,
				// region : 'center',
				// frame : false,
				iconCls : 'icon-grid',
				// bbar : pagingBar,
				store : newStore,
				cm : new Ext.grid.ColumnModel([{
					header : 'Persoonlijk',
					width : 175,
					sortable : true,
					renderer : function(name) {
						a = "<b>" + name + "</b>";
						return name;
					},
					dataIndex : 'personal'
				}, {
					header : 'Races',
					width : 225,
					sortable : true,
					dataIndex : 'races'
				}, {
					header : 'Voertuigen / Onderdelen / Overig',
					width : 230,
					sortable : true,
					dataIndex : 'verhiclesAndPartsHousesCompany'
				}])
			});

			var panel = new Ext.Panel({
				title : 'Level up',
				frame : true,
				width : 650,
				height : 260,
				items : grid
			});

			if (showWindow == true) {
				siteFunctions.showWindow(grid, 300, 650, renderID, true);
				return;
			} else {
				grid.render(renderID);
			}

			/*
			 * grid.on('click', function() { var record =
			 * showTopMembersGrid.getSelectionModel().getSelected();
			 * 
			 * /*var userID = record['data']['userID']; var racerPhoto =
			 * record['data']['userUrl']; var racerName =
			 * record['data']['userName']; var verhicleName =
			 * record['data']['verhicleName']; var verhiclePhoto =
			 * record['data']['verhicleUrl']; var racerAboutMe =
			 * record['data']['userAboutMe'];
			 * 
			 * showUserProfile(userID, racerName, verhicleName, racerPhoto,
			 * verhiclePhoto, racerAboutMe); });
			 */
		}

	};
}();

var siteLottery = function() {

	return {
		init : function() {

		},
		
		getMainPanel : function(renderID, showWindow){
			
			var babeImage = '/images/lottery/lotteryBabe.jpg';
			
			var url = '/paginas/ranking.php?page=getLevelInfo';
			var data = [{
				name : 'personal'
			}, {
				name : 'races'
			}, {
				name : 'verhiclesAndPartsHousesCompany'
			}];
			
			var store = new generalStore();
			store.createStore(url, data);
			store.reloadMyStore();

			var newStore = store.getMyStore();
			
			// create grid
			var grid = new Ext.grid.GridPanel({
				//title : 'Loterij',
				frame : true,
				//tbar : buttonPanel,
				width : 650,
				border : true,
				height : 355,
				region : 'center',
				// frame : false,
				iconCls : 'icon-grid',
				// bbar : pagingBar,
				store : newStore,
				cm : new Ext.grid.ColumnModel([{
					header : 'Naam',
					width : 120,
					sortable : true,
					renderer : function(name) {
						a = "<b>" + name + "</b>";
						return name;
					},
					dataIndex : 'personal'
				}, {
					header : 'Prijs',
					width : 120,
					sortable : true,
					dataIndex : 'races'
				}, {
					header : 'Inzet',
					width : 120,
					sortable : true,
					dataIndex : 'verhiclesAndPartsHousesCompany'
				}, {
					header : 'Aanmeldingen',
					width : 120,
					sortable : true,
					dataIndex : 'verhiclesAndPartsHousesCompany'
				}, {
					header : 'Status',
					width : 120,
					sortable : true,
					dataIndex : 'verhiclesAndPartsHousesCompany'
				}])
			});	
			
			var textPanel = new Ext.Panel({				
				region : 'center',
				html: 'hello dudes'
			});
			
			var picturePanel = new Ext.Panel({	
				width : 310,
				height : 230,				
				region : 'east',
				html : '<img src="' + babeImage
						+ '" class="normalImage" width="300px" height="350px"">'			
			});	
			
			var topPanel = new Ext.Panel({
				title : 'Lottery',
				frame : true,
				width : 650,
				height : 250,
				layout : 'border',
				region : 'north',
				items : [textPanel, picturePanel]
			});
			
			
			
			
			var panel = new Ext.Panel({
				frame : true,
				layout : 'border',
				width : 650,
				height : 1000,
				items : [topPanel, grid]
			});
		
			showWindow = false;
			renderID = 'test';
			
			if (showWindow == true) {
				siteFunctions.showWindow(panel, 300, 650, renderID, true);
				return;
			} else {
				panel.render(renderID);
			}			
		}
		
		
	};
}();

var siteBank = function() {

	return {
		init : function() {

		},

		getBankProperties : function(cashMoney, bankMoney) {

			var toImage = '<img src="/images/icons/next1.png">';
			var fromBank = '<img src="/images/icons/back1.png">';

			var toBankText = "Storten: ";
			var toNormalText = "Pinnen: ";

			var toBankField = new Ext.Slider({
				width : 200,
				animate : true,
				value : 5,
				name : 'value1',
				increment : 1000,
				minValue : 1000,
				maxValue : 100000,
				plugins : new Ext.ux.SliderTip()
			});

			var toNormalCashField = new Ext.Slider({
				width : 200,
				animate : true,
				value : 5,
				name : 'value1',
				increment : 1000,
				minValue : 1000,
				maxValue : 100000,
				plugins : new Ext.ux.SliderTip()
			});

			// slider text
			var toBankFieldLabel = new Ext.form.Label({
				text : toBankText + toBankField.getValue()
			});

			var toNormalCashFieldLabel = new Ext.form.Label({
				text : toNormalText + toNormalCashField.getValue()
			});

			// buttons
			// var sendToBankButton = siteFunctions.createButton(, "add", 100,
			// "");

			var sendToBankButton = new Ext.Button({
				text : toBankText,
				minWidth : 100,
				iconCls : "next1",
				handler : function() {
					siteBank.doSendData(toBankField.getValue(), "toBank");
				}
			});

			var sendToNormalCashButton = new Ext.Button({
				text : toNormalText,
				minWidth : 100,
				iconCls : "back1",
				handler : function() {
					siteBank.doSendData(toNormalCashField.getValue(), "toCash");
				}
			});

			// help button
			var raceHelpButton = new Ext.Button({
				pressed : false,
				minWidth : 30,
				text : '',
				iconCls : 'help',
				disabled : false,
				handler : function() {
					helpItems('bank');
				}
			});

			// panels
			var htmlPanel = new Ext.Panel({
				width : 370,
				height : 200,
				frame : true,
				html : "<table><tr><td width=\"60%\">Hallo daar,<br>U wilt een transactie doen? <br>Beweeg  1 van de slide balken om het gewenste bedrag te selecteren. <br>Klik daarna op de gewenste knop. <br><br>Bekijk de help knop om er achter te komen wat voor rente er te verkrijgen is. Doe dit elke dag en ontvang die <b>rente</b>. Je geld bedrag wordt elke dag na dat je rente ontvangen hebt terug gegeven. <br><br>Vergeet niet <b> elke dag</b> in te loggen om je geld bedrag terug te zetten op de bank.</td><td><img class=\"normalImage\" src=\"images/bank/bankWorker.jpg\" width=\"130px\" height=\"170px\"></td></tr></table>"
					// items: [cashLabel, bankCashLabel]
			});

			var formPanel = new Ext.FormPanel({
				title : 'Bank',
				frame : true,
				width : 370,
				height : 150

					// items : grid
			});

			var toolbar = new Ext.Toolbar({
				items : ['-', raceHelpButton, '-']
			});

			var panel = new Ext.Panel({
				width : 383,
				tbar : toolbar,
				height : 380,
				frame : true
					// html : "laaaaaaaaa"
			});

			// listeners
			toBankField.on("change", function() {
				toBankFieldLabel.setText(toBankText + toBankField.getValue())
			});

			toNormalCashField.on("change", function() {
				toNormalCashFieldLabel.setText(toNormalText
						+ toNormalCashField.getValue())
			});

			// add panel components
			formPanel.add(toBankFieldLabel);
			formPanel.add(toBankField);
			formPanel.add(toNormalCashFieldLabel);
			formPanel.add(toNormalCashField);
			formPanel.addButton(sendToNormalCashButton);
			formPanel.addButton(sendToBankButton);

			panel.add(htmlPanel);
			panel.add(formPanel);

			return panel;

		},

		doSendData : function(cash, type) {
			var url = "/paginas/bank.php";

			var method = "post";

			if (type == "toBank") {
				var page = "toBankTransfer";

				var data = {
					'page' : page,
					'money' : cash
				};
			} else if (type == "toCash") {
				var page = "fromBankTransfer";

				var data = {
					'page' : page,
					'money' : cash
				};
			} else {
				alert("Error");
				return;
			}

			siteFunctions.makeConnectionWithoutHandler(url, data, method);
		},

		generateBank : function() {
			var bank = siteBank.getBankProperties(1000, 21000);
			siteFunctions.showWindow(bank, 370, 396, bank, true);
		},

		getPanelValues : function() {

		}
	};
}();

var siteFunctions = function() {

	return {
		init : function() {
			var test;
		},

		makeConnectionWithoutHandler : function(url, data, method) {
			var conn = new Ext.data.Connection();
			conn.request({
				url : url,
				method : method,
				params : data
			});

			conn.on('requestcomplete', function(sender, param) {
				response = siteFunctions.jsonDecode(param.responseText);
				siteFunctions.checkResultAlert(response['result'],
						response['message']);
			});
		},

		gridLoadMask : function(msg, store) {
			var loadMask = new Ext.LoadMask(Ext.getBody(), {
				msg : msg,
				store : store
			});

			return loadMask;
		},

		setCurrentVerhicle : function() {
			var conn = new Ext.data.Connection();
			conn.request({
				url : 'paginas/myVerhicles.php',
				method : 'POST',
				params : {
					'page' : 'setCurrentVerhicle'
				}
			});
		},

		removeUnregisteredPageContent : function() {
			$("siteBodyContent").style.height = '1620px';
			// $("versionNews").style.margin = '1050px 0px';
			$('rightSiteAdvertPanel').innerHTML = '';
			$('welcomePanel').innerHTML = '';
			$('top10PointsMembers').innerHTML = '';
			$('linkPartNerPanel').innerHTML = '';
			$('inGamePictures').innerHTML = '';
			$('bodyAdvertention').innerHTML = '';
			$('newsPanel').innerHTML = '';
			$('mainPageGoogleAdvert').innerHTML = '';
			$('versionNews').innerHTML = '';
			$('mainPageGoogleAdvert').style.backgroundColor = '';
			$('userVerhiclePanel').innerHTML = $('userVerhiclePanel').innerHTML
					+ '<br>';

		},

		showContentPanels : function(url, params, method, type) {
			var conn = new Ext.data.Connection();
			conn.request({
				url : url,
				method : method,
				params : params
			});

			conn.on('requestcomplete', function(sender, param) {
				response = siteFunctions.jsonDecode(param.responseText);

				switch (type) {
					case 'personalLinkPanel' :
						document.getElementById("personalLinkPanel").innerHTML = '<br>'
								+ response['message'];
						break;
					case 'siteTips' :
						document.getElementById("siteTips").innerHTML = response['message'];
						break;
				}
			});
		},

		getPage : function(page) {
			var conn = new Ext.data.Connection();
			conn.request({
				url : 'paginas/getPageText.php',
				method : 'GET',
				params : {
					'page' : page
				}
			});

			conn.on('requestcomplete', function(sender, param) {
				response = siteFunctions.jsonDecode(param.responseText);
				siteFunctions.showHTMLWindow(response['data']['message'],
						response['data']['title'], response['data']['height'],
						response['data']['width'], 'testest', true);
			});
		},

		createHelpButton : function(handler) {
			var helpButton = new Ext.Button({
				text : '',
				minWidth : 20,
				iconCls : 'money1',
				handler : function() {
					handler;
				}
			});

			return helpButton;
		},

		createButton : function(text, iconCssString, minWidth, region) {
			var button = new Ext.Button({
				text : text,
				region : region,
				minWidth : minWidth,
				iconCls : iconCssString
			});

			return button;
		},

		createPanel : function(title, html, frame, width, height, layout) {
			var panel = new Ext.Panel({
				title : title,
				frame : frame,
				layout : layout,
				width : width,
				height : height,
				html : html
			});

			return panel;
		},

		fortGetPassw : function() {
			alert('Komt binnenkort. Je kan tijdelijk het contact formulier raadplegen<br>.');
		},

		existCookie : function(cookieName) {
			if (cookieName == "") {
				return false;
			} else {
				return true;
			}
		},

		// after json result ->
		afterEdit : function(result, functionRequest) {
			// decode json values
			var jsonResult = siteFunctions.jsonDecode(result);

			if (jsonResult['result'] == false) {
				siteFunctions.popupWindowError('Resultaat',
						jsonResult['message'], '');
				return;
			}
			siteFunctions.popupWindowOK('Resultaat', jsonResult['message'], '');
			functionRequest;
		},

		reloadSite : function() {
			// reload online time
			reloadOnlineTime();

			// reload user and verhicle panel
			reloadMyRaceInfoPanel();

			// reload race overview panel
			raceOverview.racesReload();

			// reload tip panel
			showAdvertPanel();

			// TODO: reload users online panel
		},

		// reload time display
		reloadSiteCountDownPanel : function(lastValue) {
			var reloadTime = 60;

			if (lastValue < reloadTime) {
				lastValue = lastValue + 1;

				reload = 'siteFunctions.reloadSiteCountDownPanel(' + lastValue
						+ ')';

				timer = setTimeout(reload, 1000);
				$('reloadTimeCounter').innerHTML = 'Site informatie<br> herlaad over '
						+ lastValue + ' / ' + reloadTime + ' Sec';
				// $('reloadTimeCounter').style.color = "red";
				return lastValue;
			} else {
				lastValue = 0;
				// $('test').innerHTML = lastValue;
				timer = setTimeout('siteFunctions.reloadSiteCountDownPanel('
						+ lastValue + ')', 1000);

				// reload site settings
				siteFunctions.reloadSite();
				$('reloadTimeCounter').innerHTML = 'Site informatie<br> herlaad over '
						+ lastValue + ' / ' + reloadTime + ' Sec';
				// $('reloadTimeCounter').style.color = "red";
				return lastValue;
			}
		},

		// decode json array with extjs
		jsonDecod : function(array) {
			return Ext.util.JSON.decode(array);
		},

		// configured oke alert box
		popupWindowOK : function(title, msg, handler) {
			Ext.Msg.show({
				title : title,
				msg : msg,
				minWidth : 400,
				buttons : Ext.Msg.OK,
				fn : handler,
				// animEl: 'elId',
				icon : Ext.MessageBox.INFO
			});
		},

		// configured oke alert box
		popupWindowError : function(title, msg, handler) {
			Ext.Msg.show({
				title : title,
				msg : msg,
				minWidth : 400,
				buttons : Ext.Msg.OK,
				fn : handler,
				// animEl: 'elId',
				icon : Ext.MessageBox.ERROR
			});
		},

		// choose alert box
		checkResultAlert : function(result, response) {
			if (result == false) {
				siteFunctions.popupWindowError(DEF_RESULT, response, '');
			} else {
				siteFunctions.popupWindowOK(DEF_RESULT, response, '');
			}

		},

		// Check if input is empty or has only spaces
		isEmpty : function(input) {
			if (input.match(/^\s+$/) || input == "") {
				return true;
			} else {
				return false;
			}
		},
		logout : function() {
			var conn = new Ext.data.Connection();
			conn.request({
				url : 'paginas/logout.php',
				method : 'POST'
			});
			Cookie.remove('name');
			siteFunctions.reDirect("/index.php");
		},

		reDirect : function reDirect(url) {
			window.location.href = url;
		},

		formatAsMoney : function(mnt) {
			mnt -= 0;
			mnt = (Math.round(mnt * 100)) / 100;
			return (mnt == Math.floor(mnt)) ? mnt + '.00' : ((mnt * 10 == Math
					.floor(mnt * 10)) ? mnt + '0' : mnt);
		},

		// configured oke alert box
		popupWindowOK : function popupWindowOK(title, msg, handler) {
			Ext.Msg.show({
				title : title,
				msg : msg,
				minWidth : 400,
				buttons : Ext.Msg.OK,
				fn : handler,
				// animEl: 'elId',
				icon : 'adminPicture'
			});
		},
		// random numbers 1 to given number
		randomNummbers : function(number) {
			var randNumber = Math.random();
			randNumber = randNumber * number;
			return Math.round(randNumber);
		},
		// show window
		showWindow : function(item, height, width, ID, hideBackground) {

			var sameID = Ext.getCmp(ID);
			if (sameID) {
				return;
			}

			var yPosition = this.randomNummbers(200) + 400;
			var xPosition = this.randomNummbers(200) + 400;
			var sameWindow = ID;

			var win = new Ext.Window({
				width : width,
				id : ID,
				name : ID,
				x : xPosition,
				y : yPosition,
				constrain : true,
				height : null,
				layout : 'Fit',
				modal : hideBackground,
				autoScroll : true,
				plain : true,
				resizable : false,
				collapsible : true,
				bodyBorder : false,
				items : [item]
			});

			/*
			 * win.addListener('beforerender', function() { alert('test');
			 * if(Ext.getCmp(sameWindow).){ Ext.getCmp(sameWindow).destroy(); }
			 * return true; });
			 */
			win.show();
		},

		showHTMLWindow : function(html, title, height, width, ID,
				hideBackground) {

			var sameID = Ext.getCmp(ID);
			if (sameID) {
				return;
			}

			var win = new Ext.Window({
				width : width,
				id : ID,
				name : ID,
				constrain : true,
				height : height,
				layout : 'Fit',
				modal : hideBackground,
				autoScroll : true,
				plain : true,
				resizable : false,
				collapsible : true,
				bodyBorder : false,
				html : html,
				title : title
			});

			win.show();
		},

		// json decoder
		jsonDecode : function jsonDecode(result) {
			var result = Json.evaluate(result);
			return result;
		},
		// /////////////////

		dataviewGetSelected : function() {

			// check anything is selected in thhe dataview
			var countSelections = this.dataview.getSelectionCount();
			if (this.dataview.getSelectionCount() < 1) {
				siteFunctions.popupWindowOK('Resultaat', 'niets geselecteerd',
						'');
			} else {
				// get selected record
				var vericleID = this.dataview.getSelectedRecords()[0].get('ID');
				// reload dataview store
				// this.dataview.store.reload();
				siteFunctions.popupWindowOK('Resultaat', vericleID, '');
				// buy.reloadStore(this.dataview.store);
			}
		},

		reloadStore : function(store) {
			store.reload();
		},

		// check if mail is valid
		validEmail : function(email) {
			// filter
			var emailRegEx = /^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$/;

			// Check email
			// if (filter(email))
			if (email.match(emailRegEx))
				return true; // email correct, return true
			else
				return false; // email correct, return false
		}

	};
}();

// start the application here
var startApp = function() {

	return {

		reallyStartApp : function() {

			// siteBank.generateBank();
			// document.getElementById('topAdvertPanel').innerHTML = '';
			// document.getElementById('topAdvertPanel').style.margin = '0px
			// 0px';
			// document.getElementById('topAdvertPanel').innerHTML =
			// document.getElementById('topAdvertPanel').innerHTML +
			// '<br><br><br>';

			// var test = new createCompanyPanel(22, "cabo",
			// "http://localhost/images/company/fgwteamCompany.jpg", "test",
			// 1200,
			// 1200, 1200, 1200, 1200, 1200,
			// "http://localhost/images/company/fgwteamCompany.jpg","http://localhost/images/company/fgwteamCompany.jpg","#",
			// true);

			// siteFunctions.showWindow(, 1000, 1000, "asd",false );
			// test.companyInfoPanel.render("test");
			
			
			//siteLottery.getMainPanel('tes', true);
//return;
			var test = siteFunctions.createPanel("Site Herladen",
					'<div id="reloadTimeCounter"></div>', true, 150)
			test.render("timerPanel");

			siteFunctions.reloadSiteCountDownPanel(0);
			// show online and offline users
			// showUsersOnlineOffline();
			// show user and verhicle panel
			getUserAndVerhiclePanelInfo();

			// show advert panel
			showAdvertPanel();

			// show personal link panel
			showPersonalLinkPanel();

			// show user money
			showCurrentUserMoney();
			// setPreloader();
			// inits
			ownerItems.init();

			// show toolbar
			headerToolbar.loggedIn();
			headerToolbar.companyTb();

			raceOverview.init();
			startRace.init();

			// load game pane;
			gamePanel();

			// create levelinfo panel
			$("levelupInfo").innerHTML = "<br>";
			levelUp.showLevelUpInfoPanel("levelupInfo", false);

			// create shoutbox
			createShoutBox();

			// load trainingpanel
			trainPanel();

			// show important company buttons
			showBodyContentButtons();

			// races grid
			raceOverview.makeRaceGridPanel();

			// owner items
			// ownerItems.buildVerhicleGrid();

			raceOverview.racesReload;
			// show panels
			raceOverview.showRaceViewGrid();

			ownerItems.showGrid();

			// check user level
			checkUserLevel(false);

		}
	};
}();