var ukc_search_widget = Ext.onReady(function ()
{	
	var code_version = "0.94";
	var eColor = "#980606";

	var groupReader = new Ext.data.JsonReader({
		root		:  	'rows',
		totalProperty	:	'results',
		idProperty	:	'vacancy',
		sortInfo	: 	{field:"vac_added",direction:"DESC" },				
	 	fields		: 	[ 'vacancy','title','salarylow','salaryhigh','salary','category','region','cstate', {name: 'vac_added', type: 'date', dateFormat:'Y-m-d H:i:s'} ]
	});
			
	var grpStore = new Ext.data.GroupingStore({
		proxy: new Ext.data.HttpProxy( new Ext.data.Connection({ url: '/wp-admin/ukc-ajax.php?action=ejb_js_get_vacancies' })),
		reader			: 	groupReader,				
		remoteSort		: 	false,
		remoteGroup		: 	false,
		groupOnSort		:	true,
		baseParams: [
			{ 'free_text'	: '' },
			{ 'region'	: '' },
			{ 'category'	: '' },
			{ 'database'	: '' },
			{ 'groupby'	: '' }
		],
		listeners: { 'load' : function(store,records,options) { if( Ext.MessageBox.isVisible() ) { Ext.MessageBox.hide(); } } }
	});	

	var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy( new Ext.data.Connection({ url: '/wp-admin/ukc-ajax.php?action=ejb_js_get_vacancies' })),
		remoteSort: true,
		baseParams: [
			{ 'free_text'	: '' },
			{ 'region'	: '' },
			{ 'category'	: '' },
			{ 'database'	: 'pharmacareers' }
		],
		listeners: { 'load' : function(store,records,options) { if( Ext.MessageBox.isVisible() ) { Ext.MessageBox.hide(); } } },
		reader: new Ext.data.JsonReader({
			root:  'rows',
			totalProperty:'results',
			idProperty:'vacancy',
			sortInfo: {field:"vac_added",direction:"DESC" },				
		 	fields: ['title','closedate','vacancy','salarylow','salaryhigh','salary',
				{name: 'vac_added', type: 'date', dateFormat:'Y-m-d H:i:s'},
				'category','region','jobdescription','ref','contract','recruiter','cstate' ]
		})
	});	

	var catStore = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy( new Ext.data.Connection({ url: '/wp-admin/ukc-ajax.php?action=ejb_js_get_categories' })),
		baseParams: [{ 'database'	: 'pharmacareers' }],				
		reader: new Ext.data.JsonReader({
			root	:  	'rows',
			id	:	'category',
		 	fields	: 	[ 'category','name' ]
		}),
		autoLoad: true,
		valueField: 'category',				
		listeners: { 'load' : function(store,records,options) { if( Ext.MessageBox.isVisible() ) { Ext.MessageBox.hide(); } } }				
	});

	var regStore = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy( new Ext.data.Connection({ url: '/wp-admin/ukc-ajax.php?action=ejb_js_get_regions' })),
		baseParams: [{ 'database'	: 'pharmacareers' }],								
		reader: new Ext.data.JsonReader({
			root	:	'rows',
			id	:	'region',
		 	fields	: 	[ 'region','name' ]
		}),
		autoLoad: true,
		valueField: 'region'
	});

	var vacStore = new Ext.data.Store({
		baseParams: [
			{ 'database'	: 'pharmacareers' },
			{ 'vacancy'	: '' }
		],			
		proxy: new Ext.data.HttpProxy(
			new Ext.data.Connection({ url: '/wp-admin/ukc-ajax.php?action=ejb_js_get_vacancy' })),
		reader: new Ext.data.JsonReader({
		root	:  	'rows',
			fields	: 	['title','closedate','vacancy','salarylow','salaryhigh','salary',
				{name: 'vac_added', type: 'date', dateFormat:'Y-m-d H:i:s'},
				'category','region','jobdescription','ref','contract','recruiter',		
			 	'compdescription','skills','qualifications','benefits','cstate' ]
		}),
		autoLoad: false,
		listeners: { 'load' : function(store,records,options) { applyForJobForm(); } }
	});


	function renderStamp(val, x, obj){
		if( obj.data.cstate == 'active' ) {
			return String.format('{0}', val.dateFormat('M j, Y'));
		}
		return String.format('<span style="color:{0}">Expired / Filled</span>',eColor);
	}

	function renderTitle(val, x, obj){
		if( obj.data.cstate == 'active' ) { return val; }
		return String.format('<span style="color:{0}">{1}</span>',eColor,val);
	}

	    		
	function Right(str, n){
		if (n <= 0) { return ""; }
		else if (n > String(str).length)
			{ return str; }
   			else {
      				var iLen = String(str).length;
      				return String(str).substring(iLen, iLen - n);
   			}
	}
			
	function Left(str, n){
		if (n <= 0) { return ""; }
		else if (n > String(str).length) { return str; }
		else { return String(str).substring(0,n); }
	}

	function fix(val) {
		if( Right(val,3) != '000' ) { return val; }
		return Left(val,String(val).length-3)+"k";
	}
    		
	function renderSalaryDetail(val,x,obj) { 
		if( obj.data.salary > 0 ) { return fix(obj.data.salary); }
		if( (obj.data.salarylow>0) && (obj.data.salaryhigh>0) ) { return fix(obj.data.salarylow)+" - "+fix(obj.data.salaryhigh); }
		if( obj.data.salaryhigh>0 ) { return fix(obj.data.salaryhigh); }
		return "Negotiable";
	}
	    		
	function renderSalary( val,x,obj ) {
		var salary = renderSalaryDetail( val,x,obj );
		return obj.data.cstate == 'active' ? salary : String.format('<span style="color:{0}">{1}</span>',eColor,salary);
	}
    		
	function renderDesc(val,x,store) { 
		var ret = "";
		if( String(store.data.ref).length > 0 ) { ret = "<span class='label'>Ref:</span>&nbsp;<span class='ref'>"+store.data.ref+"</span>&nbsp;&nbsp;&nbsp;"; }
		if( String(store.data.closedate).length > 0 ) { ret = ret + "<span class='label'>Closes in:</span>&nbsp;<span class='ref'>"+store.data.closedate+" days</span>&nbsp;&nbsp;&nbsp;"; }
		ret = ret + "<span class='label'>Contract:</span>&nbsp;<span class='ref'>"+store.data.contract+"</span>&nbsp;&nbsp;&nbsp;";
		if( String(store.data.recruiter).length > 0 ) { ret = ret + "<span class='label'>Advertised by:</span>&nbsp;<span class='ref'>"+store.data.recruiter+"</span>&nbsp;&nbsp;&nbsp;"; }
		return "<div>"+val+"</div><div id='detail'>"+ret+"</div>";
	}

	function renderRegion(val,x,store) {
		var rec = regStore.getById(store.data.region);
		var nam = rec ? rec.get("name") : store.data.region;
		return store.data.cstate=="active" ? nam : String.format('<span style="color:{0}">{1}</span>',eColor,nam);
	}
     			
	function renderCategory(val,x,store) {
		var rec = catStore.getById(store.data.category);
		var nam = rec ? rec.get("name") : store.data.category;				
		return store.data.cstate=="active" ? nam : String.format('<span style="color:{0}">{1}</span>',eColor,nam);
	}

	function applyForJob(sm) 
	{
		if(sm) {
			var sel = sm.getSelected();     			
			vacStore.baseParams.vacancy = sel.data.vacancy;														
			vacStore.load();
		}
	}
			
	function applyForJob1() { applyForJob(sgrid.getSelectionModel()); }			
	function applyForJob2() { applyForJob(grpGrid.getSelectionModel()); }

	function applyForJobForm()
	{				
		var record = vacStore.getAt(0);
		var advertiser = String.format('<span class="cat-label">Advertised by</span> <span class="cat-data">{0}</span>',record.get('recruiter'));
		var city = record.get('city') ? String.format('<tr><th>City</th><td>{0}</td></tr>',record.get('city')) : '';
		var type = String.format('<tr><th>Type</th><td>{0}</td></tr>',record.get('contract'));
		var category = String.format('<tr><th>Type</th><td>{0}</td></tr>',record.get('category'));					 				
		var tpl1 = new Ext.Template('<table class="app" width="100%"><tr><td valign="top" width="*"><div class="title">'+record.get('title')+'</div>'+advertiser+'<div class="toapply">To apply for this vacancy, please click on <b><i>Apply</i></b> below.</div></td><td align="right"><table class="detail"><tr><th width="75">Ref</th><td>'+record.get('ref')+'</td></tr><tr><th>Region</th><td>'+record.get('region')+'</td></tr>'+category+'<tr><th>Salary</th><td>'+renderSalary('','',record)+'</td></tr>'+type+city+'</table></td></tr></table>');    				
		var applicationBar = new Ext.Toolbar({
				
			autoWidth	:	true,
			autoHeight	:	true,
			items: [ "->",
			{
				xtype	:	'tbbutton',
				text	:	'Apply',
				cls	: 	'x-btn-text-icon apply',														
				minWidth:	80,
				icon	:	'',
				handler	:	function() { 
					view.close();
					var database = Ext.get("database").getValue();
					var url = "";
					switch( database ) {
						case 'Pharmaceutical'		:	url="www.pharmacareers.co.uk"; 		break;
						case 'Recruitment'		:	url="www.recruitmentcareers.co.uk"; 	break;
						case 'Information Technology'	:	url="www.ukit-careers.co.uk"; 		break;								
						case 'SEO'			:	url="www.ukseocareer.co.uk"; 		break;
						case 'Sales'			:	url="www.uksales-careers.co.uk"; 	break;
						case 'Catering'			:	url="www.ukcateringcareers.co.uk"; 	break;																											
						case 'graduate'			:	url="www.ukgraduatecareers.net"; 	break;
						default				:	
							Ext.Msg.alert("Error",Ext.get("database").getValue());
							return;
					}									
					var newwin = window.open('http://'+url+'/apply?id='+record.get('vacancy'),'_blank');
				}
			},
			{
				xtype	:	'tbbutton',
				text	:	'Close',
				cls	: 	'x-btn-text-icon close',
				minWidth:	80,
				icon	:	'',
				handler	:	function() { view.close(); }						
			}]
		});			     			
    				
		var view = new Ext.Window({
			id		:	'ukc-app-widget',
			frame		:	true,
			closable	:  	false,
			border		:	false,
			width		:	700,
			height		:	600,
			plain		:	true,
			modal		: 	true,
			layout		:	'fit',
			bbar		:	applicationBar,	
			items		:	[{
				layout		: 	'border',
				height		: 	3000,
				frame		: 	true,											
				title		: 	"Vacancy Details",
				margins		: 	'0 0 4 0',
				items		: [
					{ 	region		: 	'north',
						autoHeight	: 	true,
						frame		: 	true,
		    				margins		: 	'0 0 4 0',			 	    				
		    				html  		: 	tpl1
		    			},{
		    				region		:	'center',
						frame		:	false,
						border		:	false,
						autoScroll	: 	true,
						height		:	3000,
						items		:	[
						{
						layout		:	'border',																								
						border		: 	false,
						height		: 	3000,
						margins		: 	'0 0 4 0',
						items		: [
							{ 	region		: 	'north',
								autoHeight	: 	true,
								frame		: 	true,	
		 	    					margins		: 	'0 4 4 0',			 	    				
								title		: 	"Brief description (up to 250 characters)",										 	    					
		 	    					html  		: 	'<p>'+record.get('jobdescription')+'</p>'
			 	    			},{
								region		: 	'center',									 	    			
								layout		:	'border',																								
								border		: 	false,
								height		: 	500,
								margins		: 	'0 4 4 0',
								items		: 	[
								{ 	id		:	'app-description',
									region		: 	'north',
									autoHeight	: 	true,
									frame		: 	true,	
			 	    					margins		: 	'0 0 4 0',			 	    				
									title		: 	"Full description",
									html		:	"<p>"+record.get('compdescription')+"</p>"
				 	    			},{
									region		: 	'center',
									layout		:	'border',
									border		: 	false,
									height		: 	500,
									margins		: 	'0 0 4 0',
									items		:	[
									{	id		:	'app-skills', 	
										region		: 	'north',
										autoHeight	: 	true,
										frame		: 	true,	
				 	    					margins		: 	'0 0 4 0',			 	    				
										title		: 	"Skills required (if applicable)",
										html		:	"<p>"+record.get('skills')+"</p>"
					 	    			},{
										region		: 	'center',
										layout		:	'border',
										border		: 	false,
										height		: 	500,
										margins		: 	'0 0 4 0',
										items		:	[
										{ 	id		:	'app-qualifications',
											region		: 	'north',
											autoHeight	: 	true,
											frame		: 	true,	
					 	    					margins		: 	'0 0 4 0',			 	    				
											title		: 	"Qualifications required (if applicable)",
											html		:	"<p>"+record.get('qualifications')+"</p>"
						 	    			},{
						 	    				id		:	'app-benefits',
											region		: 	'center',
											border		: 	false,
											autoHeight	: 	true,
											frame		: 	true,	
					 	    					margins		: 	'0 0 4 0',			 	    				
											title		: 	"Benefits available (if applicable)",
											html		:	"<p>"+record.get('benefits')+"</p>"
										}]
									}]
								}]
			 	    			}]
	 	    			}]
	 	    		}]
			}]
		});			
		view.show();     				
     	}

	var pagingBar = new Ext.PagingToolbar({
		pageSize:19,
		store:store,
		displayInfo:false,
		//displayMsg:'Found <b>{2}</b> matching vacancies',
		//emptyMsg:'Idle',
		
		items: ["-",{
			pressed		:	false,
			enableToggle	:	true,
			text		:	' Preview On ',
			cls		:	'x-btn-text-icon details',
			toggleHandler	: 	function(btn,pressed) {
				var view = sgrid.getView();
				view.showPreview = pressed;
				view.refresh();							
				if( pressed ) {	this.setText(' Preview Off '); }
				else { this.setText(' Preview On  '); }
			}
		},"-",{
			id		: 	'detail-button',
			pressed		:	false,
			enableToggle	:	false,
			text		:	' View / Apply ',
			cls		: 	'x-btn-text-icon view',
			handler		: 	applyForJob1
		},"->",{
			id		: 	'close-button',
			text		:	' Close ',
			cls		: 	'x-btn-text-icon close',
			handler		: 	function() { win.hide(); }			
		}]
	});	
				
	var toolBar = new Ext.Toolbar({
			
		items: [{ 	
			xtype		:	'tbtext',
			text		:	'Select a vacancy then click View / Apply'
		},"->",{	
			id		: 	'apply-button2',
			pressed		:	false,
			enableToggle	:	false,
			text		:	' View / Apply ',
			cls		: 	'x-btn-text-icon view',
			handler		: 	applyForJob2				
		},{
			id		: 	'close-button',
			text		:	' Close ',
			cls		: 	'x-btn-text-icon close',
			handler		: 	function() { win.hide(); }				
		}]
	});			

		var grpGrid = new Ext.grid.GridPanel({
			cls		: 'results-grid',
			id			: 'grouping-view',
			title			: 'Browsing Vacancies',			
			store			: grpStore,
			frame			: true,
			bbar			: toolBar,		
			autoExpandColumn	: 'title',				
			columns		: [
				{id:'title'   ,header: 'Vacancy Title', dataIndex: 'title'    , width:320 , sortable: false , renderer: renderTitle    },				
				{id:'added'   ,header: 'Date Posted'  , dataIndex: 'vac_added', width:80  , sortable: true  , renderer: renderStamp  , align: 'right' },					
				{id:'category',header: 'Category'     , dataIndex: 'category' , width:120 , sortable: false , renderer: renderCategory },				
				{id:'region'  ,header: 'Region'       , dataIndex: 'region'   , width:120 , sortable: false , renderer: renderRegion   },				
				{id:'salary'  ,header: 'Salary'       , dataIndex: 'salary'   , width:80  , sortable: false , renderer: renderSalary , align: 'right' }
			],
			view		: new Ext.grid.GroupingView({
						scrollOffset		: 21,
						startCollapsed		: true,
						hideGroupedColumn	: true,
						collapsable		: true,
						animCollapse		: false,
						forceFit		: false,
						groupTextTpl		: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'					
						}),
			
			sm		: new Ext.grid.RowSelectionModel({ singleSelect	: true })				
		});

		var sgrid = new Ext.grid.GridPanel({
			cls		: 'results-grid',
			title		: 'Search Results',
			remoteSort	: true,	
			bodyBorder	: true,
			frame		: true,		
			store		: store,
			bbar		: pagingBar,
			autoExpandColumn: 'title',
			sm		: new Ext.grid.RowSelectionModel({ singleSelect	: true }),
			columns: [
				{id:'title'   ,header: 'Vacancy Title', dataIndex: 'title'    , width:200 , sortable: true , renderer: renderTitle },				
				{id:'added'   ,header: 'Date Posted'  , dataIndex: 'vac_added', width:80  , sortable: true , renderer: renderStamp, align: 'right' },
				{id:'category',header: 'Category'     , dataIndex: 'category' , width:115 , sortable: true , renderer: renderCategory },				
				{id:'region'  ,header: 'Region'       , dataIndex: 'region'   , width:90  , sortable: true , renderer: renderRegion },				
				{id:'salary'  ,header: 'Salary'       , dataIndex: 'salary'   , width:60  , sortable: false, renderer: renderSalary , align: 'right' }
			],
			viewConfig: {
				forceFit:true,
				enableRowBody:true,
				showPreview:false,
				getRowClass: function(record,rowIndex,p,store) {
					if(this.showPreview) {
						p.body = renderDesc(record.data.jobdescription,'',record);
						return 'x-grid3-row-expanded';
					}
					return 'x-grid3-row-collapsed';
				}
			}			
		});
		
		sgrid.getSelectionModel().on('rowselect'     , function() { var button = Ext.get('detail-button'); button.show(); });
		sgrid.getSelectionModel().on('rowdeselect'   , function() { var button = Ext.get('detail-button'); button.hide(); });
		grpGrid.getSelectionModel().on('rowselect'   , function() { var button = Ext.get('apply-button2'); button.show(); });
		grpGrid.getSelectionModel().on('rowdeselect' , function() { var button = Ext.get('apply-button2'); button.hide(); });			

 		var panel_results = new Ext.Panel({
			layout		: 'border',			
			region		: 'center',
			frame		: true,
			items		: [
				new Ext.Panel({
					region		: 'north',					
					border		: false,
					html		: '<p class="welcome"><span class="big">Welcome</span> to the <span class="big">UK Careers Vacancy Search Tool</span>. Please use the options on the left of the screen to define the type of Jobs you are interested in, then click <b>Find</b>. Anything matching will appear on the right hand side in the <b>Results</b> window. For more details, select a Vacancy then press the <b>View / Apply</b> button at the bottom of the screen.</p>',		
					frame		: true,	
					margins		: '0 0 4 0'
				}),
				new Ext.Panel({
					region		: 'center',
					id		: 'results-page',
					layout		: 'card',						
					activeItem	: 0,
					items		: [sgrid,grpGrid]
				})
			]
		});
			
		var database_store = new Ext.data.SimpleStore({
			fields		: ['id','title'],
			data		: [
						['pharmacareers','Pharmaceutical'],
						['recruitmentcareers','Recruitment'],
						['pcc','Graduate'],
						['ukitcareers','Information Technology'],
						['realuksalescareers','Sales'],
						['ukseocareers','SEO'],
						['ukcateringcareers','Catering']
					]
		});

		function findVacancies() {
			Ext.MessageBox.wait('... Searching');
			store.baseParams.free_text = panel_search.getForm().findField("free_text").getValue();
			store.baseParams.region    = panel_search.getForm().findField("region").getValue();
			store.baseParams.category  = panel_search.getForm().findField("category").getValue();														
			Ext.getCmp('results-page').layout.setActiveItem(0);						
			store.load();									
		}
		
		var panel_search = new Ext.FormPanel({
			region		: 'north',
			margins		: '0 0 4 0',
			autoHeight	: true,				
			title		: 'Search for Vacancies',
			html		: '<p>Choose which jobs you would like to search for, then click the <b>Find</b> button.</p>',			
			border		: false,
			frame		: true,
			buttonAlign	: 'right',
			cls		: 'noborder',
			items		: [{
				xtype		: 'fieldset',
				title		: 'Search Criteria',
				collapsed	: false,
				defaultType	: 'textfield',
				autoHeight	: true,
				labelWidth	: 58,
				items		: [{
					id		:	'database',
					fieldLabel	:	'Sector',
					xtype		:	'combo',
					mode		:	'local',
					store		:	database_store,
					valueField	:	'id',
					displayField	:	'title',
					value		:	'Pharmaceutical',
					disableKeyFilter:	true,
					editable	:	false,
					forceSelection	:	true,
					readOnly	:	true,
					width		:	158,
					triggerAction	:	'all',
					listeners	:	{
						'select': function(self,record,index) {
							Ext.MessageBox.wait('... switching to new Sector');
							store.removeAll();							
							store.baseParams.database  = self.getValue();	
							vacStore.baseParams.database  = self.getValue();
							regStore.baseParams.database  = self.getValue();
							catStore.baseParams.database  = self.getValue();
							regStore.reload();
							catStore.reload();
							return true;
						}
					}
				},{
					name		:	'category',
					fieldLabel	:	'Category',
					xtype		:	'combo',
					forceSelection	:	true,						
					store		:	catStore,
					valueField	:	'category',
					displayField	:	'name',
					mode		:	'local',
					shadow		:	'drop',						
					autoHeight	:	true,
					width		:	158,
					triggerAction	:	'all'
				},{
					name		:	'region',
					fieldLabel	:	'Region',
					xtype		:	'combo',						
					forceSelection	:	true,
					store		:	regStore,
					valueField	:	'region',
					displayField	:	'name',
					mode		:	'local',
					shadow		:	'drop',
					autoHeight	:	true,
					width		:	158,
					triggerAction	:	'all'
				},{					
					name		:	'free_text',
					id		:	'free_text',
					fieldLabel	:	'Any text',
					allowBlank	:	true,
					width		:	158
				}]
			}],
			buttons	: [{	
				text		:	'Find',
				handler		: 	findVacancies
			},{	
				text		:	'Reset',
				handler		:	function() {
					panel_search.getForm().findField("free_text").setValue("");
					panel_search.getForm().findField("region").setValue("");
					panel_search.getForm().findField("category").setValue("");																				
				}	
			}]	
		});

		function browse(sortField) 
		{  						
			if( !grpStore.getCount() )
			{
				Ext.MessageBox.wait('... Loading Vacancies');			
				grpStore.groupBy(sortField);					
				grpStore.baseParams.groupby = sortField;
				grpStore.load();
			} else {
				grpStore.sort(sortField);
				grpStore.groupBy(sortField,true);
			}
			Ext.getCmp('results-page').layout.setActiveItem(1);	
			Ext.get('apply-button2').hide();						
			var panel = Ext.getCmp('grouping-view');
			panel.setTitle(String.format('Browsing vacancies by {0}',sortField));						
		}
		
		function browse_cat() { browse('category'); }
		function browse_reg() { browse('region'); }			

		var panel_browse = new Ext.Panel({
			region		: 'north',
			border		: false,	
			frame		: true,	
			autoHeight	: true,
			margins		: '0 0 4 0',
			html		: '<p>Browse the entire Database by clicking on one of the following buttons.</p>',						
			title		: 'Browse Vacancies',
			buttons		: [{text : 'By Category', handler : browse_cat },{ text : 'By Region', handler : browse_reg }]	
		});

			//	function() { 
			//		Ext.get('hot-job').fadeOut(); 
			//		window.setTimeout(function() {
			//			Ext.get('hot-job').fadeIn();
			//		},1000);
			//	}


		var panel_job = new Ext.Panel({
			region		: 'center',
			border		: false,
			height		: 'fit',			
			html		: '<p id="hot-job"><b><a href="#">Advertisement Slot # 1</a></b></p><p>This product is only in Beta, however if you would like to advertise here (people will see this!) then please call us on <b>0845 527 5529</b></p><p id="hot-job"><b><a href="#">Advertisement Slot # 2</a></b></p><p>Ultimately this box will run a fader that will switch between adverts.. note that ads can carry graphics (!)</p><p><div class="copyright">UK Careers Search Widget version '+code_version+'<br/><a href="http://encryptec.net">&copy; Encryptec Ltd 2009</a></p>',		
			frame		: true
		});

		var panel_pane1 = new Ext.Panel({
			region		: 'center',
			border		: false,
			layout		: 'border',			
			items		: [panel_search,panel_job]
		});


		var panel_left = new Ext.Panel({
			id		: 'criteria-text',
			region		: 'west',
			width		: '270',
			frame		: true,			
			margins		: '0 4 0 0',
			layout		: 'border',
			items		: [panel_browse,panel_pane1]
		});
		
		var win = new Ext.Window({
			id		:	'ukc-search-widget',
			layout		:	'border',
			closable	:  	false,
			width		:	1000,
			height		:	594,
			plain		:	true,
			border		:	false,
			modal		: 	true,
			split		:	false,				
			items		:	[panel_left,panel_results],
			keys: {	
				key	: 	Ext.EventObject.ENTER,
				fn	: 	findVacancies,
				scope	:	this
			}
		});								


	function showWidget() {
		win.show();
		Ext.get('detail-button').hide();
	}
					
	Ext.get('show-btn').on('click', function() { showWidget(); });
	showWidget();
});