Ext.onReady(function(){

   Ext.QuickTips.init();  
   
   var login = new Ext.FormPanel({ 
      id: 'LoginForm',
      labelWidth:80,
      url:'Login.aspx', 
      frame:true, 
      title:'Please Login', 
      width:330,  
      defaultType:'textfield',
      region: 'center',
      align: 'center',
      labelAlign: 'right',
      monitorValid:true,
      maskDisabled: true,
      defaults:{
         width:170,
         allowBlank:false,
         selectOnFocus:true
      },
      items:[{ 
            fieldLabel:'Username', 
            name:'loginUsername', 
            id:'loginUsername', 
            allowBlank:false,
            value: document.getElementById('username').value
         },{ 
            fieldLabel:'Password', 
            name:'loginPassword', 
            inputType:'password', 
            allowBlank:false 
      }],
      keys: [{
         key: "\r",
         fn: function(){
            var username = login.getForm().getValues()['loginUsername'];
            var password = MD5(login.getForm().getValues()['loginPassword']);                       
            
            Indev.Protrace.Web.Login.ValidateLogin(
               username, password, OnSuccess_Validate, OnFailure_Validate);    
         }
      }],
      buttons:[{ 
         text:'Login',
         formBind: true,	 
         handler:function(){
            var username = login.getForm().getValues()['loginUsername'];
            var password = MD5(login.getForm().getValues()['loginPassword']);                       
            
            Indev.Protrace.Web.Login.ValidateLogin(
               username, password, OnSuccess_Validate, OnFailure_Validate);                                       
         } 
      }] 
   });
 
   function OnSuccess_Validate(result){      
      if(result){
         var redirect = 'Default.aspx'; 
         window.location = redirect;
      }
      else{
         Indev.Protrace.Web.Login.GetBadLoginAttempts(
            login.getForm().getValues()['loginUsername'], OnSucess_GetBadLoginAttempts, OnFailure_GetBadLoginAttempts);
      }
   }
   
   function OnFailure_Validate(result){
      Ext.Msg.alert('Error', result.get_message());
      login.getForm().reset();
   }
   
   function OnSucess_GetBadLoginAttempts(result)
   {
      if(result >= 3){
         Ext.Msg.alert('Login', 'Your user account is currently disabled. Contact helpdesk for assistance.');
         login.setDisabled(true);
      }
      else{
         Ext.Msg.alert('Login', 'Username or Password is incorrect.');
      }
   }
   
   function OnFailure_GetBadLoginAttempts(result)
   {
   }
   
   var win = new Ext.Window({
      id: 'LoginWindow',
      width:300,
      autoHeight:true,
      region: 'center',
      closable: false,
      resizable: false,
      draggable: false,
      plain: true,
      shadow: true,
      items: [
         login,{
         frame:true,
         style:'color:red',
         region:'south',
         collapsed: true,
         hidden: false,
         autoHeight:true,
         items: [{
            id: 'NotificationText', 
            xtype: 'box', 
            autoEl: {
               html: '',
               autoWidth: true
            } 
         }]
      }]      
   });
   win.on('show', function(win){Ext.getCmp('loginUsername').focus('', 10);});
   win.on('show', function(win){
      Indev.Protrace.Web.Notification.GetNotifications(         
         function(result){                        
            if(result.length > 0){               
               var message = result[0].Message;
               Ext.get('NotificationText').update(message);
               Ext.getCmp('LoginWindow').items.itemAt(1).toggleCollapse();
            }
         }.createDelegate(this),
         function(error){            
         }.createDelegate(this));
   });
   win.show();
   
   var banner = new Ext.FormPanel({
      frame:false,
      region:"north",
      items:[{}],      
      html:'<img style="float:left;" src="IMG/Banners/Logo-Drexan_HeatTracer.jpg"/><span style="padding-top:75px; float:right; text-align:right; padding-right:10px; border:1px red;"></span><img style="float:right;" src="IMG/Banners/Logo-Fujikura.jpg"/>',
      width:'100%',
      margins:'0 0 0 0'
   });
   
   var footer = new Ext.FormPanel({
      frame:false,
      region:"south",
      items:[{}],      
      html:'<span style="padding-top:20px; float:right; text-align:right; padding-right:10px; border:1px red;"></span><img style="float:right;" src="IMG/Banners/Logo-Indev_PoweredBy.jpg"/>',
      width:'100%',
      margins:'0 0 0 0'
   });
   
   var dummy = new Ext.Panel({
      region:"center",
      border:false,
      bodyStyle:{backgroundColor:'transparent'}
   });
   
   var viewport = new Ext.Viewport({
      layout:'border',             
      items:[banner, dummy, footer]
   });
   
});