var transactionPanel = new Ext.Panel({
	width       : 700,
	height		:380,
	html:'<div id="transactionDiv" height="380"></div>'
});

var signInPanel = new Ext.form.FormPanel({
		width:250,
		height:150,
		layout:'form',
		xtype:'form',
		formId:'loginForm',
		//id:'loginForm',
		//contentEl:'loginForm',
		region:'center',
		bodyStyle:'padding:15px',
		border:true,
		//frame:true,
		standardSubmit: true,

		items:[
			{
				height:60,
				width:250,
				border:false,
				html:'<font style="font-size:14px;font-weight:bold;color:red;">Registered Users: </font><br /><font style="font-size:11px;font-weight:bold;color:brown;">Please enter your login info and click on the login button.'
			}
			,
			{
				id:'username',
				name:'username',
				xtype:'textfield',
				fieldLabel:'username' 
			},
			{
				id:'password',
				name:'password',
				xtype:'textfield',
				fieldLabel:'password',
				inputType:'password'
			},
			{
				xtype:'button',
				text:'login',
				handler  : function(){
					userLogin();
				}
			},
			{
				xtype:'panel',
				id:'loginMessagePanel',
				border:false,
				bodyStyle:'color:red;',
				html:'<div id="loginMessageDiv"></div>',
				width:200,
				height:40
				
			}
		]


	

});

var signInPanelWrapper = new Ext.Panel({
	width:370,
	layout:'border',
	region:'center',
	border:false,
	items:[signInPanel,{region:'north',height:10,border:false},
		{region:'south',height:115,border:false},
		{region:'east',width:10,border:false},
		{region:'west',width:10,border:false}]
});


var signUpPanel = new Ext.form.FormPanel({
		width:350,
		layout:'form',
		bodyStyle:'padding:15px',
		region:'center',
		border:true,
		formId: 'registerForm',
		standardSubmit: true,
		
		items:[
			{
				height:70,
				width:330,
				border:false,
				autoLoad:'../jsp/registrationHeader.jsp'
				//html:'<font style="font-size:14px;font-weight:bold;color:red;">New Users: </font><br /><font style="font-size:11px;font-weight:bold;color:brown;">Please enter your registration info and click on the continue button.<br />You will be charged a one time fee of: <font style="font-size:14px;font-weight:bold;color:red;">&nbsp;$9.99</font><br />'
			}
			,
			{
				xtype:'textfield',
				id:'rusername',
				name:'rusername',
				fieldLabel:'username' 
			},
			{
				xtype:'textfield',
				id:'rpassword',
				name:'rpassword',
				fieldLabel:'password',
				inputType:'password' 
			},
			{
				xtype:'textfield',
				id:'reenterpassword',
				name:'reenterpassword',
				fieldLabel:'reenter password',
				inputType:'password' 
			},
			{
				xtype:'textfield',
				id:'email',
				name:'email',
				fieldLabel:'email' 
			},
			{
				xtype:'textfield',
				id:'reenteremail',
				name:'reenteremail',
				fieldLabel:'reenter email' 
			},
			{
				xtype:'button',
				text:'continue',
				handler  : function(){
					registerUser();
				}
			},
			{
				xtype:'panel',
				border:false,
				bodyStyle:'color:green;',
				html:'<div id="registerMessageDiv"></div>',
				width:200,
				height:40
				
			}
		]

	

});

var signUpPanelWrapper = new Ext.Panel({
	width:370,
	layout:'border',
	region:'east',
	border:false,
	items:[signUpPanel,{region:'north',height:10,border:false},
		{region:'south',height:10,border:false},
		{region:'east',width:10,border:false},
		{region:'west',width:10,border:false}]
});


var signInSignUpPanel = new Ext.Panel({
		layout      : 'border',
		width       : 700,
		height      : 380,
		items       : [
			signInPanelWrapper,signUpPanelWrapper
		]

});

var signInSignUpWindow = new Ext.Window({
		layout      : 'card',
		width       : 700,
		height      : 420,
		closeAction :'hide',
		activeItem: 0,
		modal:true,
		items       : [
			signInSignUpPanel,transactionPanel
		],

		buttons: [{
			text     : 'Close Window',
			handler  : function(){
				signInSignUpWindow.hide();
				collapseAccordion();
			}
		}]
	});