EMA.Viewport = Ext.extend(Ext.Viewport, {
	constructor: function(config) {
		config = config || {};
		
        this.padTop = new Ext.BoxComponent({
            region: 'north',
            el: 'header',
            height: 32
        });
		
		this.alarmsGrid = new EMA.Alert.grid.AlarmCommands({
			title: false,
		//	commandsGrid: this.alarmsListGrid
		});
		
		this.alarmsListGrid = new EMA.Alert.grid.Alarms({
			title: false,
			activeItem: 0,
			//playerView: true,
			commandsList: this.alarmsGrid
		});
		console.log('xxx');
		console.log(this.alarmsListGrid);
		console.log(this.alarmsListGrid.selModel);
		//this.alarmsListGrid.selModel.selectFirstRow()
		//this.alarmsListGrid.selModel.selectRow();
		//this.alarmsListGrid.selModel.lastActive = true;
		//this.alarmsListGrid.selModel.activeItem = 0;
		/*this.dealersTransactionsGrid = new EMA.Alert.grid.Alarms({
			title: false,
			dealerView: true
		});*/
		/*this.settingsGrid = new EMA.Alert.grid.Dealers({
			title: false,
			transactionsGrid: this.dealersTransactionsGrid
		});*/
		//this.transactionsGrid = new EMA.Alert.grid.Alarms();
		this.alarmsPanel = new Ext.Panel({
         	title: 'Alarms',
         	layout: 'border',
         	items: [
         		{	
         			region: 'center',
         			layout: 'fit',
         			items: this.alarmsGrid
         		}, {	
         			title: 'Alarm List',
         			region: 'west',
         			layout: 'fit',
         			width: '22%',
         			height: '100%',
         			split: true,
         			collapsible: true,
         			collapseMode: 'mini',
         			items: this.alarmsListGrid
         		}
         	]
		});
		
		this.settingsPanel = new Ext.Panel({
         	title: 'Settings',
         	layout: 'border',
         	items: [
         		{
         			region: 'center',
         			layout: 'fit',
         			items: this.settingsGrid
         		}, {	
         			title: 'Transactions',
         			region: 'west',
         			layout: 'fit',
         			width: '22%',
         			height: '100%',
         			split: true,
         			collapsible: true,
         			collapseMode: 'mini',
         			items: this.dealersTransactionsGrid
         		}
         	]
		});

		if (!u) {
			console.log('not logged in');
			var loginCallback = function(res) {
				console.log('inside loginCallback');
				loginForm.close();
			}
			var loginForm = new Ext.Window({
				title: 'User',
				layout: 'fit',
				width: 430,
				height: 170,
				closeAction: 'hide',
				plain: true,
				maximizable: false,
				modal: true,
				shim: false,
				items: [],
				closable: false
			});

			loginForm.add(new EMA.Alert.form.Login({
				title: 'Log In',
				populate: true,
//				url: '/users/login',
				url: '/login',
				parentWindow: loginForm,
				callback: loginCallback
			}));
			loginForm.show(); 
		} else {
			console.log('logged in');
		}
		
	    this.tabs = new Ext.TabPanel({
//	    this.tabs = new Ext.Panel({
	        activeTab: 0,
	        border: false,
			region: 'center',
			enableTabScroll: true,
	        defaults:{
	        	autoScroll:true
	        },
	        items:[
	        	this.alarmsPanel,
	        	this.settingsPanel,
	        	//this.commandsGrid
	        ]
	    });

		Ext.apply(this, {
			progressIndicator: null,
			autoShow: true,
			layout: 'fit',
			items: [{
				layout: 'border',
				title: 'Administration',
				items:[
				       this.tabs
				]
			}]
	 	});
		
		Ext.apply(Ext.form.VTypes, {
			password: function(value, field) {
				if (field.initialPasswordField) {
			         var pwd = Ext.getCmp(field.initialPasswordField);
			         this.passwordText = 'Confirmation does not match your intial password entry.';
			         return (value == pwd.getValue());
			    }
			 
				this.passwordText = 'Passwords must be at least 5 characters';
			 
			    var hasLength = (value.length >= 5);
			    return (hasLength);
			 },
			 passwordText: 'Passwords must be at least 5 characters'
		});		
	
		EMA.Viewport.superclass.constructor.apply(this, arguments);
	}

});