<?php # Ajax Auto Complete Start
include_once("inc/rbelements/acinventory/php/db.php");
?>
<link rel="stylesheet" href="inc/rbelements/acinventory/css/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="inc/rbelements/acinventory/js/default.js"></script>
<script type="text/javascript" src="inc/rbelements/acinventory/js/jquery.autocomplete.js"></script>

<script language="javascript">
j(document).ready(function(){
	
	j("#ac_search").autocomplete("inc/rbelements/acinventory/php/grid_image_suggestion.php", {
		
	width: ac_result_width,
	max: ac_max_result_display,
	scroll: ac_result_scroll,
	scrollHeight: ac_result_height,
	formatItem: function(data, i, n, value) {
		var return_str = '';		
		return_str += "<img src='" + data[1] + "' width='"+ac_image_width+"'/>";
		return_str += data[0];		
		return_str += "<div id='codigoelementrb' style='display:none' ><codel>" + data[2] + "</codel></div>";
		return return_str;
	}
	}).result(function(event, item) {
		
	});
	
	j("#ac_search_idd").autocomplete("inc/rbelements/acinventory/php/grid_image_suggestion.php", {
	width: ac_result_width,
	max: ac_max_result_display,
	scroll: ac_result_scroll,
	scrollHeight: ac_result_height,
	formatItem: function(data, i, n, value) {
		var return_str = '';			
		return_str += "<img src='" + data[1] + "' width='"+ac_image_width+"'/>";
		return_str += "<div id='codigoelementrb'  ><codel>" + data[2] + "</codel></div>";
		return_str += data[0];	
		return_str += data[2];	
		return return_str;
	}
	}).result(function(event, item) {
		
	});
	
});
</script>

<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){
				try{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
    }
	
	//Room Data
	function getRooms(roomsId) {		
		
		var strURL="inc/roomdata.php?rooms="+roomsId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('roomsdiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	
	//Children 1 Data
	function getChildren(childrenId) {		
		
		var strURL="inc/roomdata.php?children="+childrenId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('childrendiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	
	
	//Children 2 Data
	function getChildren2(children2Id) {		
		
		var strURL="inc/roomdata.php?children2="+children2Id;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('children2div').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	
	//Children 3 Data
	function getChildren3(children3Id) {		
		
		var strURL="inc/roomdata.php?children3="+children3Id;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('children3div').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	
	//Children 4 Data
	function getChildren4(children4Id) {		
		
		var strURL="inc/roomdata.php?children4="+children4Id;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('children4div').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	
</script>

<link href="<?php echo PATH; ?>stylesheets/datepicker.css" media="screen" rel="stylesheet" type="text/css" />

<div style="border:2px solid #f3f3f3;padding:10px;">
<span class="book_now">BOOK NOW</span>
<hr class="thin" />

<form name="booking" method="post" action="inc/libraries-bgo/search-path.php">
                <input type="hidden" name="page_link" id="page_link" value=""/>
                <input type="hidden" name="searching" id="searching" value="ook"/>
                <input type="hidden" name="ota_id" id="ota_id" value=""/>
                <input type="hidden" name="ota_priority" id="ota_priority" value=""/>
                <input type="hidden" name="element_type" id="element_type" value=""/>
                <input type="hidden" name="element_original_id" id="element_original_id" value=""/>
					<!-- calendar image container -->
					<span style="display:none;"><img class="trigger" id="trigger" alt="" src="../img/blank.gif" /></span>
					<fieldset class="radius">						
						<p>
							<label class="destinationlabel" for="destination">Where are you going?</label>
							<input type="text" id="ac_search" class="destination" value="" name="destination"/>
						</p>                       
                        
                        <div style="display:inline-block;">
							<label class="formlabel" for="startdate">Check in</label>
							<input type="text" id="startdate" name="checkin" class="datefield" value="mm/dd/yyyy" />
							<input type="hidden" name="sd_timestamp" id="sd_timestamp" />
						</div>
                        <input type="hidden" id="addAmount" value="1" />
                        <input type="hidden" id="addPeriod" value="d" />
						<div style="display:inline-block;">
							<label class="formlabel" for="enddate">Check out</label>
							<input type="text" id="enddate" name="checkout" class="datefield" value="mm/dd/yyyy" />
							<input type="hidden" name="ed_timestamp" id="ed_timestamp" /> 
						</div>
						
                        
						<p>
                        <div style="position:relative; max-height:230px;">
							
                            <div style="height:168px;">
                            <label class="formlabel" for="rooms">Rooms?</label>
                            <select id="rooms" name="rooms" onChange="getRooms(this.value)" style="width:50px;">
								<option value="1" selected="selected">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
							</select><br/>
                            
                            
                            <div style="position:absolute; left:52px; top: 50px; height:17px;"><label class="formlabel">ROOM 1</label></div>
                                                     
							<div style="position:absolute; left:1px; top: 71px; height:30px;" class="formlabel">Adults</div>
                            
                            <div style="position:absolute; left:48px; top: 67px; height:30px;">
                            <select id="adults" name="adults" style="width:50px;">
								<option value="1">1</option>
								<option value="2" selected="selected">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
							</select>
                            </div><br>
							
                            <div style="position:absolute; left:1px; top: 103px; height:30px;" class="formlabel">Children</div>
                            
                            <div style="position:absolute; left:48px; top: 99px; height:30px;">
                            <select id="children" name="children" onChange="getChildren(this.value)" style="width:50px;">
								<option value="0" selected="selected">0</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
							</select>
                            </div>
                            </div>
                        
                       	<div id="roomsdiv"></div>
                        
                        <div id="childrendiv"></div>
                        
                        <div id="children2div"></div>
                        
                        <div id="children3div"></div>
                        
                        <div id="children4div"></div>
                        
                        </div>
                        
						</p>
						<hr class="thin" />
						
						<input type="submit" class="btn btn-primary radius fr pull-right" value="Search &raquo;" />
					</fieldset>
				</form>
</div>