Ext.ns('org.piercecountywa.salaryclassification.view');
org.piercecountywa.salaryclassification.view.SalarySearchForm = Ext.extend(Ext.form.FormPanel, {
 frame: true,
 labelAlign: 'left',
 enableKeyEvents: true,
 //bodyStyle:'padding:5px;backgroundColor:#d2232a;',
// Lavender - 8c76b0	Blue - 404ca0	Red - d2232a	Cream - f0e9de
 //title:'Pierce County Salary Classification Plan',
 layout:'column',
 region: 'center',
 initComponent: function(){
	this.addEvents('search');
	this.addEvents('print');
	this.addEvents('reset');
 	//look for way to call handler in scope of SalarySearchForm, not the button itself
    this.externalUserDisplay = this.initialConfig.externalUser=="true"?true:false;
	this.externalUser = new Ext.form.TextField({
		name: 'external_user',
		width: 1,
		value: this.externalUserDisplay
	});
	this.jobTitleSearch = new Ext.form.TextField({
		name: 'job_title_search',
		fieldLabel: ' Job Title',
		labelStyle: 'color:#404ca0',
		enableKeyEvents:true,
		width: 160,
           	listeners: {
    		'render': function(c){
            			c.getEl().dom.focus('', 10);
                  		}
            }
	});			
	this.jobTitleSearch.on('keyup',this.keyUpHandler,this);   //csc put this here
		
	this.fullTitleSearch = new Ext.form.Checkbox({
		name: 'full_title_search',
		labelSeparator:' ',
		layout: 'anchor',
		boxLabel: '<span style="color:#404ca0">Begins With</span>',
		labelStyle: 'color:#f0e9de',
		enableKeyEvents:true,
		width:90			
	});
	this.bargUnitSearch = new Ext.form.TextField({
		name: 'barg_unit_search',
		fieldLabel: ' Bargain Unit',
		labelStyle: 'color:#404ca0',
		enableKeyEvents:true,
		validationDelay: 100,
		maxLength: 2,
		width: 75,
		vtype: 'bargainUnit'
		});	
	this.bargUnitSearch.on('keyup',this.keyUpHandler,this);   //csc put this here
	
	this.jobClassSearch = new Ext.form.TextField({
		name: 'job_class_search',
		fieldLabel: ' Job Class',
		labelStyle: 'color:#404ca0',
		enableKeyEvents:true,
		validationDelay: 100,
		maxLength: 6,
		width: 75,
		vtype: 'jobClass'
		});	
	this.jobClassSearch.on('keyup',this.keyUpHandler,this);   //csc put this here
	
    this.searchButton = new Ext.Button({
		text: 'Search',
		style:'{position: absolute; top:36%;}'
	});	
	this.searchButton.on('click',this.handleSearchClicked,this);
	
	this.tipsLink = '<div style="position: absolute;top:33%;font-size:10pt;" title="Tips for Searching"><a href="http://www.co.pierce.wa.us/pc/abtus/ourorg/pers/comp/help.htm" target="_blank">Tips</a></div>';
	
	this.colaLink = '<div style="position: absolute;top:33%;font-size:10pt;" title="Recent COLA Adjustments"><a href="http://www.co.pierce.wa.us/xml/abtus/ourorg/pers/comp/recentcola.pdf" target="_blank">COLA</a></div>';
	
	this.reportButton = new Ext.Button({
			text: 'Reports',
			style:'{position: absolute;top:36%;}'
	});
	this.reportButton.on('click',this.handleReportClicked,this);
	
   	this.resetButton = new Ext.Button({
		text: 'Reset',
		style:'{position: absolute;top:36%;}',
		scope:this,
		handler: this.handleResetClicked
	});
	var singleQuote="'";
	var d=new Date();
	var curr_year=d.getFullYear();
//	this.salaryImage = '<div><img src="salbannerleft.jpg"><img src="salbannerexpand.jpg"><img src="salbannerright.jpg"><br><br></div>'
	this.salaryImage = '<table border="0" align="top" cellpadding="0" cellspacing="0" width="100%" style="background-image:url(salbannerexpand.jpg)"'
	this.salaryImage+= '	<tbody>'
	this.salaryImage+= '		<tr>'
	this.salaryImage+= '			<td align="left">'
	this.salaryImage+= '			 	<img src="salbannerleft.jpg" border="0"/>'
	this.salaryImage+= '				<span style="color:#fdebef; font-family:Century; font-size:22pt; font-style:italic; font-weight:bold; text-shadow: 3px 2px 6px gray; position:absolute; top:15%;">'+curr_year+'</span>'
	this.salaryImage+= '			</td>'		
	this.salaryImage+= '			<td align="right">'
	this.salaryImage+= '				 <img src="salbannerright.jpg"/></td>'
	this.salaryImage+= '		</tr>'
	this.salaryImage+= '	</tbody> '
	this.salaryImage+= '</table><br>'
	
// 	this.colaButton = new Ext.Button({
//		text: 'COLA Status',
//		style:'{position: absolute;top:36%;}'
//	});
//	this.colaButton.on('click',this.handleColaClicked,this);
/*	
	this.items = [
	 	{
	 	 layout:'form',
		 width:165,
		 labelWidth: 44,
		 labelAlign: 'top',
	 	 items:[this.jobTitleSearch]}	
	   ,{layout:'form',
		 labelWidth: 60,
		 width:95,
		 labelAlign:'top',
		 height:50,
		 items:[this.fullTitleSearch]}
	   ,{layout:'form',
		 labelWidth: 74,
		 width:80,
		 labelAlign: 'top',
	 	 items:[this.bargUnitSearch]}	
	   ,{layout:'form',
		 width:80,
		 labelWidth: 56,
		 labelAlign: 'top',
	 	 items:[this.jobClassSearch]}	
	   ,{layout:'form',
		 width:64,
		 labelAlign: 'top',
		 height:50,
		 items:[this.searchButton]}		
	   ,{layout:'form',
		 width:68,
		 labelAlign: 'top',
		 height:50,
		 items:[this.resetButton]}	
	   ,{width:45,
         height: 50,
	   	 layout:'form',
	   	 html:this.tipsLink}
  	   ,{width:68,
         height:50,
	   	 layout:'form',
		 hidden:false,	//todo: DELETE this line after jasper reports working on WWW (Bart 9/25 Why? No reports button for WWW?)
		 labelAlign: 'top',
		 items:[this.reportButton]}		
//	   ,{layout:'form',
//		 width:83,
//		 hidden:this.externalUserDisplay,
//		 labelAlign: 'top',
//		 height:50,
//		 items:[this.colaButton]}			
	   ,{layout:'form',
		 width:1,
		 hidden:true,
		 labelAlign: 'top',
		 height:50,
		 items:[this.externalUser]}		
	 ];
*/
	this.items = 
	[
    	{
            layout: "column",
            width: "100%",
            labelAlign: "left",
            labelWidth: 44,
            labelPadding: 2,
            items: [
	            {
	             items: {
	                    layout: 'form',
	                    border: false,
	                    labelWidth: 65,
	                    html: [this.salaryImage]
	                    }
	            }
			]
		},
		{
            layout: "column",
            width: "100%",
            labelAlign: "left",
            labelWidth: 44,
            labelPadding: 2,
            items: [
	            {
				  width: 165,
	              border: false,
	              labelWidth: 44,
	              items: {
					 	 layout:'form',
						 width:165,
						 labelWidth: 44,
						 labelAlign: 'top',
					 	 items:[this.jobTitleSearch]
						 }
				},	
				{
				  width:95,
	              border: false,
	              labelWidth: 144,
	              items: {
					 	 layout:'form',
						 width:95,
						 labelWidth: 44,
						 labelAlign: 'top',
					 	 items:[this.fullTitleSearch]
						 }					   
	            }  ,	
				{
				  width:80,
	              border: false,
	              labelWidth: 144,
	              items: {layout:'form',
						 labelWidth: 74,
						 width:80,
						 labelAlign: 'top',
					 	 items:[this.bargUnitSearch]}				   
	            }  ,	
				{
				  width:80,
	              border: false,
	              labelWidth: 144,
	              items: {layout:'form',
						 width:80,
						 labelWidth: 56,
						 labelAlign: 'top',
					 	 items:[this.jobClassSearch]}				   
	            }   ,	
				{
				  width:64,
	              border: false,
	              labelWidth: 144,
	              items: {layout:'form',
						 width:64,
						 labelAlign: 'top',
						 height:50,
						 items:[this.searchButton]}					   
	            } ,	
				{
				  width:68,
	              border: false,
	              labelWidth: 144,
	              items: {layout:'form',
						 width:68,
						 labelAlign: 'top',
						 height:50,
						 items:[this.resetButton]}					   
	            }      ,	
				{
				  width:38,
	              border: false,
	              labelWidth: 144,
	              items: {width:45,
				         height: 50,
					   	 layout:'form',
					   	 html:this.tipsLink}					   
	            },	
				{
				  width:45,
	              border: false,
	              labelWidth: 144,
	              items: {width:45,
				         height: 50,
					   	 layout:'form',
					   	 html:this.colaLink}					   
	            },	
				{
				  width:68,
	              border: false,
	              labelWidth: 144,
	              items: {width:68,
				         height:50,
					   	 layout:'form',
						 hidden:false,	//todo: DELETE this line after jasper reports working on WWW (Bart 9/25 Why? No reports button for WWW?)
						 labelAlign: 'top',
						 items:[this.reportButton]}						   
	            },	
				{
				  width:1,
	              border: false,
	              labelWidth: 144,
	              items: {layout:'form',
						 width:1,
						 hidden:true,
						 labelAlign: 'top',
						 height:50,
						 items:[this.externalUser]}							   
	            }                                                                             
            ]
    	}
    ]

	org.piercecountywa.salaryclassification.view.SalarySearchForm.superclass.initComponent.call(this);
    },
    handleSearchClicked:function(){
		 var formValues = this.getForm().getValues();
		 this.fireEvent('search',formValues);	 
    },
    handleResetClicked:function(){
		this.getForm().reset();
		this.fireEvent('reset');	
    },
//  handleColaClicked:function(){
//		colaWindow = window.open("http://hrweb.co.pierce.wa.us/admin/hrgcolastatus.pdf","colaWind","left=300,top=300");
//		colaWindow.focus();
//   },
	handleReportClicked:function(){
		var formValues = this.getForm().getValues();
		this.fireEvent('print',formValues);
	},
    keyUpHandler:function(textField,eventObject){
    	if(eventObject.getKey()==eventObject.ENTER){
			this.handleSearchClicked();    		
    	}
    }   	
});
Ext.reg('salarysearchform', org.piercecountywa.salaryclassification.view.SalarySearchForm);