
					try{
						var oHotelSearchFormMaker = new HotelSearchFormMaker({

							//form ID
							'sElementId' : 'hotel_refinesearchform',
							'bRefineGUI' : 1,
							//location form handler
							'LoactionHandler' : function(oCountryCode,oRegion,oLocationList) {
								
								//Auto compliter start
								var oAutoCompleter = new AutoCompleter({

									'sUrl' : '/hotels/town-list?pattern=SEARCH_KEYWORD',
									'iCharLimit' : 2,
									'iRenderLimit' : 10,
									'sElementId' : 'location_search',
									'sResultShowAllCSS' : {},
									'sResultShowMinCSS' : {},
									'bNoEscForSearchField':false,
									'bPersisField':false,
									'bHideSearchField':true,
									'onInputClick':function() {
										//$('#hotel_refinesearchform .show_search_field').show();
									},
									'onStaticInputClick':function() {
										$('#hotel_refinesearchform .search_input').val('');
										$('#hotel_refinesearchform .show_search_field').hide();
									},
									'onData' : function(oData, sKeyword) {

										//this function let you process the return from json/ajax to standard array and it only trigger after ajax fetch or cache not found, plz make sure you had supply all data for render
										//id = id, val = internal value, display = list to auto compliter
										//you may your hardcoded data in here if you wish to disable the ajax
										//alert(oData);
										var sDivOut = [];
										var h =0;
										//loop through data
										for ( var i in oData ) {
											for ( var j in oData[i] ) {
												sDivOut.push({
												  'id':h,
												  'value':{'i':i,'j':j}, 
												  'displaytxt':''+j+', '+i, 
												  'count':oData[i][j],
												  'display': '<div style="float:left;">'+j+', '+i+'</div> <div class="__cl" style="float:right;">'+oData[i][j]+' products</div> <div style="clear:both;"/>'
												});
												h++;
											}
										} 
										return sDivOut;
									},
									'onSelect' : function(id,value,Display,DisplayTx){
										//this will let you define how to handle selected data
										oCountryCode.val(value.i);
										oRegion.val(''); //PYO2 didnt have region
										oLocationList.val(value.j);
									}
								});
								oAutoCompleter.start();
								//Auto completer end
							},

							//will pass in jquery object and element name, 
							//so we can manipulate it here with 3rd party date picker
							//'DateFormat':'dd-mm-yyyy',
							'DateFormat':'dd-mm-yyyy',
							'DateHandler' : function( oStartDate, oEndDate, oNight ) {
								
								oStartDate.attr('readOnly', true);
								oEndDate.attr('readOnly', true);
								var monthToShow = 2;

								//Initial date correction
								var iAddDaysAhead = 1;
								var d = new Date();

								try{
									//set the date field if the original date field is blank
									if( oStartDate.val() == undefined || oStartDate.val() == '' ){ oStartDate.val(d.addDays(iAddDaysAhead).asString()); }
									if( oEndDate.val() == undefined || oEndDate.val() == '' ){ oEndDate.val(d.addDays(parseInt(oNight.val())).asString()); }
								}catch(e){}

								var oStartD = Date.fromString(oStartDate.val());
								oStartDate.datePickerMultiMonth({
									numMonths: monthToShow,
									month: oStartD.getMonth(), //datePickerMultiMonth didnt have auto select the selected month, this is the hack way to generate it!
									year: oStartD.getFullYear(),
									clickInput:true,
									displayClose:true,
									//selectMultiple:true
									horizontalPosition: 0
								});

								var oEndD = Date.fromString(oEndDate.val());
								oEndDate.datePickerMultiMonth({
									numMonths: monthToShow,
									month:oEndD.getMonth(),
									year: oEndD.getFullYear(),
									clickInput:true,
									displayClose:true,
									//selectMultiple:true
									horizontalPosition: 0
								});

								$(document).bind('keyup keypress', function(e) {
									if(e.which==27) {
										oStartDate.dpClose();
										oEndDate.dpClose();
									}
								});

								try{
									oStartDate.dpSetSelected(oStartDate.val(), true, true);
									oEndDate.dpSetSelected(oEndDate.val(), true, true);
								}catch(e){}

								return true;
							}, 

							// indate/outdate checker, trigger on change, return true for OK
							// ichange, 1 = start date, 2 = end date, 3 = night change
							'DateValidator' : function( ichange, oStartDate, oEndDate, oNight, mData1, mData2 ) {
								//alert('> '+oNight.val()+' , '+mData1+' , '+mData2);

								//StartDate change
								if(ichange==1){
										var d = new Date();
										if(d.asString() == oStartDate.val()){
											alert('Your CHECK IN date must be a  least 1 day from now');
											oStartDate.val(d.addDays(1).asString());
										}else{
											//update end date base on selected night
											oEndDate.val(mData2); 
											oEndDate.dpSetSelected(oEndDate.val());
										}
								}

								//endDate change
								if(ichange==2){
									if(mData1<1){
										alert('Your CHECK OUT date must  be greater than CHECK IN date');
										oEndDate.val(mData2); //auto correction for invalid date
										oEndDate.dpSetSelected(oEndDate.val());
									}else{
										//update night selection box
										if(mData1>14){
											alert('Your interval between CHECK IN and  CHECK OUT date must be less than 14 days');
											var oEndD = Date.fromString(oStartDate.val());
											oEndDate.dpSetSelected(oEndD.addDays(14).asString());
											oNight.selectOptions(14+'');

										}else{
											oNight.selectOptions(mData1+'');
										}
									}
								}

								//night change
								if(ichange==3){
									//update end date base on night
									oEndDate.val(mData2); 
									oEndDate.dpSetSelected(oEndDate.val());
								}
								return true;
							}, 

							'SubmitValidator' : function(oCountryCode,oRegion,oLocationList) {
								//alert('test send');
								if( $('#hotel_refinesearchform .search_input').val().length > 0 ){
									return true;
								}else{
									alert('Your destination country is blank');
									return false;
								}

							},

							//select box option list
							'aNightList' : [1,2,3,4,5,6,7,8,9,10,11,12,13,14],
							'iNightDefault' : 1,
							'aRoomList' : [1,2,3,4],
							'iRoomDefault' : 1,
							'aAdultList' : [1,2,3],
							'iAdultDefault' : 1,
							'aChildList' : [0,1,2],
							'iChildDefault' : 0,
							'aInfantList' : [0,1,2],
							'iInfantDefault' : 0
						});
						//generate the form
						oHotelSearchFormMaker.draw(); 

						$('#hotel_refinesearchform .show_search_field').click(function() {
							$('#hotel_refinesearchform .search_inputstatic').trigger('click', null );
						});

						//Advance search button
						var advance_sch_bt = $('#advanced-filter-display').html()=='1'; 
						$('.advance_search_button > .close').show();
						if(advance_sch_bt){
							$('.advance_search_button > .close > .txt').html('Close');
							$('.advance_search_button > .close > img').attr('src', '/images/b_r-.gif' );
						}else{
							$('.advance_search_button > .close > .txt').html('Advanced');
							$('.advance_search_button > .close > img').attr('src', '/images/b_r+.gif' );
						}

						$('#hotel_refinesearchform .advance_search_button').click(function() {
							$('#advanced-filter').toggle(700);
							advance_sch_bt = !advance_sch_bt;
							if(advance_sch_bt){
								$('.advance_search_button > .close > .txt').html('Close');
								$('.advance_search_button > .close > img').attr('src', '/images/b_r-.gif' );
							}else{
								$('.advance_search_button > .close > .txt').html('Advanced');
								$('.advance_search_button > .close > img').attr('src', '/images/b_r+.gif' );
							}
							$('#hotel_refinesearchform .bRefineSearchOpened').val(advance_sch_bt);
						});

						//Star & Slider function
						var StarCount = 0;
						var PriceRange = 0;
						$('input.fStarSlider').rating({
							callback: function(value, link){
								StarCount = value;
								$('.star_info').html( (StarCount==0? 'Any star' : 'Minimum '+StarCount+' star' ) );
								oHotelSearchFormMaker.SubmitAction = '/hotels/filter';
								$('#hotel_refinesearchform  .submit_button').click();
							},
							focus: function(value, link){
								$('.star_info').html( (value==0? 'Any star' : 'Minimum '+value+' star' ) );
							},
							blur: function(value, link){
								$('.star_info').html( (StarCount==0? 'Any star' : 'Minimum '+StarCount+' star' ) );
							}
						});

						$('.price_slider').slider({
							min: parseInt($('.price_setup').attr('min')),
							max: parseInt($('.price_setup').attr('max')),
							value: parseInt($('.price_setup').attr('selected')),
							slide: function(event, ui){
								var PriceRange = Math.round(ui.value);
								$('.price_info').html( PriceRange==0 ? 'Any price range' : 'Less then $'+PriceRange+'.00'  );
								$('#hotel_refinesearchform .fPriceSlider').val(PriceRange);
							},
							stop: function(event, ui) {
								oHotelSearchFormMaker.SubmitAction = '/hotels/filter';
								$('#hotel_refinesearchform  .submit_button').click();
							}
						});	
						
						$('.aHotelPref').change(function(){
								oHotelSearchFormMaker.SubmitAction = '/hotels/filter';
								$('#hotel_refinesearchform  .submit_button').click();
						});


						$('#hotel_name_submit').click(function(){
								if($('#sHotelName').val().length>1){
									oHotelSearchFormMaker.SubmitAction = '/hotels/filter';
									$('#hotel_refinesearchform  .submit_button').click();
								}else{
									alert('The hotel name too short');
								}
						});

						$('#sArea').change(function(){
								oHotelSearchFormMaker.SubmitAction = '/hotels/filter';
								$('#hotel_refinesearchform  .submit_button').click();
						});
				}catch(e){}
