/**
 * Main login viewport on which other panels will resides.
 *
 * @author Interface
 * @created 10-28-2009
 * @version 1.0
 * 
 * @param labels - customized instance of Ron.Properties
 *
 * @known_issues 
 *		- 
 *		
*/

Ext.namespace("Ron");

//get the blank image URL from the local server
Ext.BLANK_IMAGE_URL = './images/default/s.gif';

var custom_labels;
var custom_prefs;
var lookup_codes;

Ext.onReady(function(){
	
	Ext.QuickTips.init();
	custom_labels = new Ron.Properties();
	custom_prefs = new Ron.Preferences();
	lookup_codes = new Ron.LookupCodes(custom_labels);
	
	// Header incident command image and label
    var incidentCommand = new Ext.Panel({
    	id: 'incident-command-img',	      
        frame: false,
        border: false,
        renderTo: 'incidentcommand'
//        html: '<table border = "0" cellspacing = "7" cellpadding = "0" bgcolor="#1F3447"><tr><td align = "center"><img src="./images/incidentcommand.jpg" width="35" height="35"/></td><td align = "center"><img src="./images/headers/lockout.jpg" width="35" height="35"/></td><td align = "center"><img src="./images/headers/lackdown.jpg" width="35" height="35"/></td><td align = "center"><img src="./images/headers/evacuate.jpg" width="35" height="35"/></td><td align = "center"><img src="./images/headers/shelter.jpg" width="35" height="35"/></td><td align = "center"><img src="./images/headers/medicalemergency.jpg" width="35" height="35"/></td></tr><tr><td align = "center">' + custom_labels.Img_incidentCommand_label + '</td><td align = "center">' + custom_labels.Img_lockout_label + '</td><td align = "center">' + custom_labels.Img_lackdown_label + '</td><td align = "center">' + custom_labels.Img_evacuate_label + '</td><td align = "center">' + custom_labels.Img_shelter_label + '</td><td align = "center">' + custom_labels.Img_medicalEmergency_label + '</td></tr></table>'
        //#1F3447
    });	    
	    
	var headerContainer = new Ext.Panel({		
		id: 'header',
		bodyStyle : 'padding:0 0 0',
		width: '100%',
		frame: false,
		height: 80,
		x: '0%',
		y: '0%',			
		border: false//,		
//		html: '<img src="./images/headerbg.png" width="335" height="86"/>'
    });
    
	var tabContainer = new Ext.Panel({		
		title: custom_labels.LoginPanel_loginTitle,
		id: 'tab-container',
		bodyStyle : 'padding:5px 5px 5px 5px',
		cls: 'page-container-cls',
		width: 430,		
		x: '30%',
		y: '30%',		
		border: true,		
		items: [{			
			layout: 'fit',
			id: 'login-tab',
			width: 419,
			border: false,
			items: [{xtype: 'loginform', custom_labels : window.custom_labels, id: 'login-form'}]
		}]
    }); 
    
    var footerContainer = new Ext.Panel({		
		id: 'footer',		
		width: '100%',
		frame: false,
		height: 25,
		x: '0%',
		y: '96%',			
		border: false,		
		html: custom_labels.copyright_footer_links
    });    
    
    var pageContainer = new Ext.Viewport({
		layout: 'absolute',
		id: 'page-container',
		frame: false,				
		items: [
			headerContainer,
			tabContainer,
			footerContainer
		],
        renderTo: Ext.getBody()
    }); 
    
	Ext.getCmp('UserName').focus();
	
});