var wweek;
	var win;
	var winreg;
	var onlyone;
	var hold;
	var gridForm = new Ext.BasicForm(Ext.get("formgrid"));
	Ext.util.Format.roles = function(v, cell, record, rowIndex, columnIndex, store){

		if (v == "free"){
			return 'Libre';
		}
		else if (v == "busy"){
			cell.attr = "style=background-color:#C0C0C0";
			return 'Reservada';	
		}
		else if (v == "prd"){
			cell.attr = "style=background-color:#AEEBFF";
			return 'Con Prioridad';		
		}
		else if (v == "hld"){
			cell.attr = "style=background-color:#99CC99";
			return 'Reservada';		
		}
		else if (v == "none"){
			cell.attr = "style=background-color:#F5C0C0";
			return 'Cerrada';
		}
		else if (v == "aca"){
			cell.attr = "style=background-color:#FFFFCC";
			return 'Academia';
		}
		else
			return 'Error';
	};

	var cm = new Ext.grid.ColumnModel([{
		id : 'hora',
		header : "Hora",
		dataIndex : 'fecha',
		renderer: Ext.util.Format.dateRenderer('g:i a'),
		width : 55
	}, {
		header : "Cancha No. 1",
		dataIndex : 'cch1',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 2",
		dataIndex : 'cch2',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 3",
		dataIndex : 'cch3',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 4",
		dataIndex : 'cch4',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 5",
		dataIndex : 'cch5',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 6",
		dataIndex : 'cch6',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 7",
		dataIndex : 'cch7',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 8",
		dataIndex : 'cch8',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}, {
		header : "Cancha No. 9",
		dataIndex : 'cch9',
		width : 80,
		renderer : Ext.util.Format.roles,
		editor : new Ext.form.ComboBox({
			triggerAction : 'all',
			editable : false,
			mode : 'local',
			displayField : 'text',
			valueField : 'value',
			store : new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : [['free', 'Libre'], ['busy', 'Reservar']]
			})
		})	
	}]);
	cm.defaultSortable = false;

	var dsReader = new Ext.data.JsonReader({
			root : 'data', id : 'id'}, 
				[{name : 'fecha',type: 'date', dateFormat: 'Y-m-d H:i:s'}, 
				{	name : 'cch1'}, 
				{ name : 'cch2'}, 
				{	name : 'cch3'}, 
				{	name : 'cch4'}, 
				{	name : 'cch5'}, 
				{	name : 'cch6'}, 
				{	name : 'cch7'}, 
				{	name : 'cch8'}, 
				{	name : 'cch9'}
	]);

	
	var dsDay1 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-06'}),
		reader : dsReader
	});
	
	var dsDay2 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-07'}),
		reader : dsReader
	});
	
	var dsDay3 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-08'}),
		reader : dsReader
	});
	
	var dsDay4 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-09'}),
		reader : dsReader
	});
	
	var dsDay5 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-10'}),
		reader : dsReader
	});
	
	var dsDay6 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-11'}),
		reader : dsReader
	});
	
	var dsDay7 = new Ext.data.Store({
		autoLoad: true,
		proxy : new Ext.data.HttpProxy({ url : '/js/reserva_week.php?ac=getDay&pr=2012-02-12'}),
		reader : dsReader
	});

	var gridView = new Ext.grid.GridView({
		getRowClass : function (row, index, cols) {
			var cls = '';
			var data = row.data;
				switch (data.can1) {
					case 'busy' :
						cls = 'yellow-row'
						break;
					case 'prd' :
						cls = 'green-row'
					break;
					case 'none' :
						cls = 'red-row'
					break;
				}
			return cls;
		}
	});

	var can1 = new Ext.grid.EditorGridPanel({
		id: 'canGrid1',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		store: dsDay1,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can1.on('afteredit', afterEdit, this );
	function afterEdit(val) {

			if (val.originalValue == "aca" || val.originalValue == "none"){ // si es horario de la academia
			    val.record.reject();
			}
			else if (val.value == "busy" && val.record.dirty){ // si hace solo una reserva
				onlyone = true;
		        val.record.commit();
				hold = val;
			}
			else if (val.value == "free" && onlyone && val.originalValue == "busy"){ // si cambio la reserva
			    onlyone = false;
		        val.record.commit();
				hold = val;
			}
			else if (val.value == "free" && !onlyone && val.originalValue == "busy"){
				hold = val;
			}
	}; 

	var can2 = new Ext.grid.EditorGridPanel({
		id: 'canGrid2',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		ds: dsDay2,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can2.on('afteredit', afterEdit, this );
	var can3 = new Ext.grid.EditorGridPanel({
		id: 'canGrid3',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		ds: dsDay3,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can3.on('afteredit', afterEdit, this );
	var can4 = new Ext.grid.EditorGridPanel({
		id: 'canGrid4',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		ds: dsDay4,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can4.on('afteredit', afterEdit, this );
	var can5 = new Ext.grid.EditorGridPanel({
		id: 'canGrid5',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		ds: dsDay5,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can5.on('afteredit', afterEdit, this );
	var can6 = new Ext.grid.EditorGridPanel({
		id: 'canGrid6',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		ds: dsDay6,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can6.on('afteredit', afterEdit, this );
	var can7 = new Ext.grid.EditorGridPanel({
		id: 'canGrid7',
		border : false,
		clicksToEdit: 1,
		enableHdMenu : false,
		ds: dsDay7,
		autoExpandColumn : 'hora',
		sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
		cm : cm,
		viewConfig:{forceFit: true}
	});
	can7.on('afteredit', afterEdit, this );

	function saveCourts(oGrid_event){
		if (!hold){
			Ext.MessageBox.show({
				title : 'Advertencia',
				msg : 'Debe seleccionar una reserva antes de guardar.',
				buttons : Ext.MessageBox.OK,
				icon : Ext.MessageBox.WARNING
			});							
			return;
		}
		
			Ext.Ajax.request(
					{   
							waitMsg: 'Guardando su Reserva...',
							url: '/js/app_data.php?ac=guardar', 
							params: { 
									pr1: hold.column,
									pr: hold.record.json.fecha
							},
							failure:function(response,options){
									//console.log(response);
									Ext.MessageBox.alert('Warning','Hubo un problema con su reserva por favor <br/>comuniquese con el administrador...');
							},
							success:function(response,options){
								Ext.MessageBox.show({
									title : 'Información',
									msg : response.responseText,
									buttons : Ext.MessageBox.OK,
									icon : Ext.MessageBox.INFO
								});							
							}
					 }
			);
	}

	if (!wweek) {
		wweek = new Ext.Window({
			el : 'week-win',
			title : 'Reserva de Canchas de Tenis',
			layout : 'fit',
			width : 810,
			height : 395,
			modal : true,
			closeAction:'hide',
			plain : true,
			resizable : false,
			closable : false,
			buttonAlign : 'center',
			shim : false,
			constrainHeader : true,
			items: {
							xtype:'tabpanel',
							//activeItem: 0,
							autoWidth: true,
							autoHeight: true,
							deferredRender:false,
							layoutOnTabChange:true,
							defaults:{bodyStyle:'padding:10px'},
							frame: true,
							items:[{
									title:'Lunes 6',
									id: 'cancha1',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can1}
,{
									title:'Martes 7',
									id: 'cancha2',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can2}
,{
									title:'Miercoles 8',
									id: 'cancha3',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can3}
,{
									title:'Jueves 9',
									id: 'cancha4',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can4}
,{
									title:'Viernes 10',
									id: 'cancha5',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can5}
,{
									title:'Sabado 11',
									id: 'cancha6',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can6}
,{
									title:'Domingo 12',
									id: 'cancha7',
									autoWidth:true,
									bodyStyle:'padding:0px',
									items: can7}
]
			},
			buttons : [{
				text : 'Ver Nombres',
				handler : function() {
					window.open('/js/reservas-view-admin.php');
				}
			},{
				text : 'Guardar',
				handler : saveCourts
			},{
				text : 'Salir',
				handler : function() {
					window.location.href = '/js/logout.php';
				}
			}]
		});
	}
	var loginForm = new Ext.form.FormPanel({
		baseCls : 'x-plain',
		autoHeight : true,
		url : '/js/login.php',
		items : [{
			xtype : 'fieldset',
			border : false,
			style : 'border:0px',
			defaultType : 'textfield',
			autoHeight : true,
			items : [{
				fieldLabel : 'Email',
				name : 'email',
				id : 'email',
				allowBlank : false,
				width : '300'
			}, {
				fieldLabel : 'Contraseña',
				name : 'password',
				inputType : 'password',
				allowBlank : false,
				width : '300'
			}]
		}]
	});
	if (!win) {
		win = new Ext.Window({
			el : 'login-win',
			layout : 'fit',
			width : 460,
			height : 150,
			modal : true,
			closeAction:'hide',
			plain : true,
			resizable : false,
			keys : {
				key : 13,
				fn : function() {
					loginForm.form.submit({
						reset : false,
						waitMsg : 'Autenticando...',
						success : function(form, action) {
							Ext.MessageBox.alert('Información',action.result.message,function(btn, text){
								if (btn == 'ok'){										
									loginForm.disable();
									win.close();
									wweek.show();
									loginForm.form.reset();
								}
							});
						},
						failure : function(form, action) {
							Ext.MessageBox.show({
								title : 'Error en la Autenticación',
								msg : 'Su email o contraseña son incorrectos <br/>Por favor intentelo nuevamente.',
								buttons : Ext.MessageBox.OK,
								icon : Ext.MessageBox.ERROR
							});
							loginForm.form.reset();
						},
						scope : loginForm
					})
				}
			},
			buttonAlign : 'center',
			items : loginForm,
			buttons : [{
				text : 'Ingresar',
				handler : function() {
					loginForm.form.submit({
						reset : false,
						waitMsg : 'Autenticando...',
						success : function(form, action) {
							Ext.MessageBox.show({
								title : 'Información',
								msg : action.result.message,
								buttons : Ext.MessageBox.OK,
								icon : Ext.MessageBox.INFO
							});
							loginForm.disable();
							win.close();
							wweek.show();
							loginForm.form.reset();
						},
						failure : function(form, action) {
							Ext.MessageBox.show({
								title : 'Error en la Autenticación',
								msg : 'Su email o contraseña no son correctos <br/>Por favor intentelo de nuevo.',
								buttons : Ext.MessageBox.OK,
								icon : Ext.MessageBox.ERROR
							});
							loginForm.disable();
							win.close();
							loginForm.form.reset();
						},
						scope : loginForm
					});
				}
			},{
				text : 'Salir',
				handler : function() {
					window.location.href = '/js/logout.php';
				}
			}]
		});
	}
					var regForm = new Ext.FormPanel({
						labelWidth: 150,
						url:'/js/app_data.php?ac=setNewRecord',
						frame:true,
						bodyStyle:'padding:5px 5px 0',
						width: 350,
						defaults: {width: 300},
						defaultType: 'textfield',
						labelWidth: 200,
					  reader:  new Ext.data.JsonReader(
							{root: 'data', id: 'siteid'},
								[
									{name: 'nombres'},
									{name: 'apellidos'},
									{name: 'accion'},
									{name: 'email'},
									{name: 'passwd'},
									{name: 'repasswd'}
								]
						),
						items: [{
											fieldLabel: 'Nombres',
											name: 'nombres',
											allowBlank:false
									},{
											fieldLabel: 'Apellidos',
											name: 'apellidos',
											allowBlank:false
									},{
											fieldLabel: 'Número de Acción',
											name: 'accion',
											maxLength: 7,
											vtype: 'alphanum'
									},{
											fieldLabel: 'Correo Electrónico',
											name: 'email',
											vtype: 'email'
									},{
											fieldLabel: 'Contraseña',
											name: 'passwd',
											id: 'passwd',
											inputType: 'password'
									},{
											fieldLabel: 'Repita la Contraseña',
											name: 'repasswd',
											inputType: 'password',
											validator: function(value) {return (value==regForm.form.findField('passwd').getValue())||"Las contraseñas no coninciden.";}
								 }]
				});
        if(!winreg){
					winreg = new Ext.Window({
						el : 'reg-win',
						title:'Registro',
						layout : 'fit',
						width : 600,
						height : 250,
						modal : true,
						plain : true,
						closeAction:'hide',
						shadow: true,
						resizable : false,
						items: regForm,
						buttons : [{
							text : 'Registrarse',
							handler : function() {
								if (regForm.form.isValid()){
									regForm.form.submit({
										reset : false,
										waitMsg : 'Enviando datos...',
										success : function() {
											Ext.MessageBox.show({
												title : 'Confirmación',
												msg : 'Su registro ha sido exitoso, <br/>sus datos van a ser confirmados en <br/>nuestra base de datos y posteriormente<br/> se le enviará un correo para <br/>confirmar su registro.',
												buttons : Ext.MessageBox.OK,
												icon : Ext.MessageBox.INFO
											});
											winreg.close();
										},
										failure : function(form, action) {
											Ext.MessageBox.show({
												title : 'Error en el Registro',
												msg : 'Los datos ingresados son invalidos o su <br/>cuenta de correo ya ha sido registrada. <br/>Por favor intentelo nuevamente.',
												buttons : Ext.MessageBox.OK,
												icon : Ext.MessageBox.ERROR
											});
											regForm.form.reset();
										},
										scope : regForm
									});
								}
								else{
								  Ext.MessageBox.show({
										title : 'Error',
										msg : 'Debe completar todos los campos correctamente!',
										buttons : Ext.MessageBox.OK,
										icon : Ext.MessageBox.ERROR
									});
								}
							}
						}, {
							text : 'Cancelar',
							handler : function() {
								winreg.close();
							}
						}]
					});
			  }
Ext.onReady(function() {
	Ext.QuickTips.init();
	win.show();
  var button = Ext.get('show-btn');
	button.on('click', function(){
		win.show();
	});
});