Ext.onReady(function() {

	var cardOwnerGroup = {
		xtype : 'fieldset',
		autoHeight : true,
		style : 'padding : 5px; border: 0;margin-bottom: 0;',
		labelWidth : 1,
		width : 200,
		items : [{
					xtype : 'label',
					text : 'Type of Credit Card :',
					style : 'margin-bottom: 5; font-weight: bolder;'
				}, {
					xtype : 'radiogroup',
					id : 'typeOfCreditCardRadio',
					style : 'margin-top: 10px;margin-left:-6px;',
					listeners : {
						change : searchingDatabase
					},
					columns : 1,
					items : [{
								boxLabel : 'General Consumer',
								name : 'typeOfCreditCard',
								inputValue : 1,
								checked : true
							}, {
								boxLabel : 'Small Business Owner',
								name : 'typeOfCreditCard',
								inputValue : 2
							}, {
								boxLabel : 'College Student',
								name : 'typeOfCreditCard',
								inputValue : 3
							}]
				}]
	};

	var lookingForGroup = {
		xtype : 'fieldset',
		autoHeight : true,
		width : 350,
		style : 'margin-left:10px; border: 0;margin-bottom: 0;',
		layout : 'column',
		labelWidth : 10,
		defaults : {
			style : 'padding : 5px; margin-left:0px;'
		},
		items : [{
					width : 160,
					xtype : 'panel',
					items : [{
								xtype : 'label',
								text : 'Financial :',
								style : 'margin-bottom: 5; font-weight: bolder;'
							}, {
								xtype : 'checkboxgroup',
								name : 'financial',
								style : 'margin-top: 10px;',
								width : 170,
								listeners : {
									change : searchingDatabase
								},
								columns : 1,
								items : [{
											boxLabel : '0% on Purchases',
											name : 'financial_1'
										}, {
											boxLabel : '0% on Balance Transfers',
											name : 'financial_2'
										}, {
											boxLabel : 'Low Interest',
											name : 'financial_3'
										}, {
											boxLabel : 'Cards for Bad Credit',
											name : 'financial_4'
										}]
							}]
				}, {
					xtype : 'panel',
					style : 'padding : 5px; margin-left:30px;margin-bottom: 0;',
					items : [{
								xtype : 'label',
								text : 'Rewards :',
								style : 'margin-bottom: 5; font-weight: bolder;'

							}, {
								xtype : 'checkboxgroup',
								name : 'rewards',
								style : 'margin-top: 10px;',
								listeners : {
									change : searchingDatabase
								},
								columns : 1,
								items : [{
											boxLabel : 'All Rewards',
											name : 'rewards_1'
										}, {
											boxLabel : 'Cash Back',
											name : 'rewards_2'
										}, {
											boxLabel : 'Points',
											name : 'rewards_3'
										}, {
											boxLabel : 'Airline Miles',
											name : 'rewards_4'
										}]
							}]
				}]

	};

	var searchButton = new Ext.Button({
		text : 'Show Cards',
		id : 'showButton',
		width : 120,
		style : 'margin-left:10px;margin-top:3px;margin-bottom: 0;',
		handler : function() {
			var CIDs = Ext.getCmp('idCards').getValue();
			var selections = Ext.getCmp('mainPanel').getForm().getValues();
			window.location.href = "http://www.apeepa.com/Cards_select_tool.php?cardid="
					+ CIDs + "&vars=" + Ext.util.JSON.encode(selections);

		}

	});

	var noOfCards = new Ext.form.DisplayField({
		style : 'background-color: transparent; font-size: 55px; margin-left:10px; margin-top:0px;text-align:center;width:120px;height:60px',
		frame : false,
		id : "noOfCards",
		autoWidth : false
	});

	var idCards = new Ext.form.DisplayField({
				hidden : true,
				id : "idCards"

			});

	var searchPanel = new Ext.Panel({
				fieldLabel : "Number of Cards",
				style : 'margin-bottom: 0;margin-left:22;margin-top:5;',
				id : 'searchPanel',
				width : 140,
				items : [noOfCards, searchButton]
			});

	var whitePanel1 = new Ext.Panel({
		style : 'margin-bottom:0; margin-left:0; margin-right:0 ;margin-top:5 ;background-color: #FFFFFF; ',
		width : 3,
		height : 107
	});

	var whitePanel2 = new Ext.Panel({
		style : 'margin-bottom:0; margin-left:5; margin-right:5 ;margin-top:5 ;background-color: #FFFFFF; ',
		width : 3,
		height : 107
	});

	var fp = new Ext.FormPanel({

		id : 'mainPanel',
		frame : true,
		border : false,
		width : 773,
		height : 130,
		autoHeight : false,
		renderTo : 'CCDiv',
		bodyStyle : 'padding:0;',
		title : '<table class="head-table-border"> <tr>'
				+ '<td class="head-table" style = "width: 150;text-align: center; font-weight:bolder;"> I Am : </td>'
				+ '<td class="head-table" style = "width: 42;text-align: center;"></td>'
				+ '<td class="head-table" style = "width: 35;">  <img src="/extJS-plugin/images/white-arrow.png" />   </td>'
				+ '<td class="head-table" style = "width: 40;text-align: center;"></td>'
				+ '<td class="head-table" style = "width: 200;text-align: center; font-weight:bolder;"> Looking For : </td>'
				+ '<td class="head-table" style = "width: '
				+ (Ext.isIE ? '85' : '65')
				+ ';text-align: center;"></td>'
				+ '<td class="head-table" style = "width: 35;">  <img src="/extJS-plugin/images/white-arrow.png" />   </td>'
				+ '<td class="head-table" style = "width: 27;text-align: center;"></td>'
				+ '<td  class="head-table" style = "text-align: center; font-weight:bolder;"> Cards Found : </td>'
				+ '</td></tr></table>',
		labelAlign : 'center',
		labelWidth : 100,
		layout : 'column',
		bodyStyle : 'padding:0 10px 0;margin-left:0; margin-top:0; margin-bottom: 0;',
		items : [cardOwnerGroup, whitePanel1, lookingForGroup, whitePanel2,
				searchPanel, idCards]

	});

	function clearForm() {
		Ext.getCmp('idCards').setValue("");
		Ext.getCmp('mainPanel').getForm().reset();
		searchingDatabase();
		return;
	};

	function oldSearch() {
		var parameters = window.location.href.split("&");

		parameters.shift();
		var tmpSemph = "";
		var tmp;
		for (var i=0; i < parameters.length;i++) {
			tmp = parameters[i].split("=");
			if ( tmp[0] == "vars") tmpSemph=tmp[1];
		}

		if (tmpSemph !=""){
		var vals = tmpSemph.split('%22');

		vals = vals.join('"');

		vals = vals.split('\\');

		vals = vals.join('')
		
		
		var retVals = Ext.util.JSON.decode(vals);

		for (i in retVals) {
			if (retVals[i] == "on") {
				retVals[i] = true;
			}
		}

		Ext.getCmp('mainPanel').getForm().setValues(retVals);
		}
		return;
	}

	function searchingDatabase() {
		fp.getForm().submit({
					url : 'extJS-plugin/model/selectCard.php',
					params : {
						action : "search"
					},
					success : function(form, action) {
						Ext.getCmp('noOfCards')
								.setValue(action.result.noReturnCards);
						Ext.getCmp('idCards').setValue(action.result.cardsId);
						if (action.result.noReturnCards == "0") {
							Ext.getCmp('showButton').disable()
						} else {
							Ext.getCmp('showButton').enable()
						}
						return;
					}

				})
	};

	document.getElementById('resetForm').onclick = clearForm;

	clearForm();
	oldSearch();
	searchingDatabase();
	document.getElementById("CCDiv").style.display = "block";

});