API tools faq
paste
Advertisement
Guest User

Chameleon Search Box with Styles

a guest
Jun 15th, 2011
650
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.88 KB | None | 0 0
raw download clone embed print report
  1. <STYLE type="text/css">
  2. /* set the image to use and establish the lower-right position */
  3.     .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
  4.       background: transparent url(images/background.png) no-repeat bottom right}
  5.     .cssbox{
  6.     /* intended total box width - padding-right(next) */
  7.       width:335px !important; /* IE Win = width - padding */
  8.       width: 320px;
  9.     /* the gap on the right edge of the image (not content padding) */
  10.       padding-right:15px; /* use to position the box */
  11.       margin:20px auto}
  12.  
  13.     /* set the top-right image */
  14.     .cssbox_head{background-position:top right;
  15.     /* pull the right image over on top of border */
  16.       margin-right:-15px;
  17.     /* right-image-gap + right-inside padding */
  18.       padding-right:40px}
  19.  
  20.     /* set the top-left image */
  21.     .cssbox_head h2{
  22.       background-position:top left;
  23.       margin:0; /* reset main site styles*/
  24.       border:0; /* ditto */
  25.     /* padding-left = image gap + interior padding ... no padding-right */
  26.       padding:25px 0 15px 40px;
  27.       height:auto !important;
  28.       height:1%} /* IE Holly Hack */
  29.  
  30.     /* set the lower-left corner image */
  31.     .cssbox_body{
  32.       background-position:bottom left;
  33.       margin-right:25px; /* interior-padding right */
  34.       padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */
  35.     #HEADLINE {
  36.         font-family: Georgia, "Times New Roman", Times, serif;
  37.         font-size:24px;
  38.         margin-top: 5px; margin-bottom: 0px;
  39.         text-align: left;
  40.         font-weight: normal;
  41.         color: #222;}
  42.        
  43.     fieldset {font-size: 10px;; border: 0px;}
  44.        
  45.     #SUBHEADLINE{
  46.         font-family: "Lucida Grande", Tahoma;
  47.     font-size: 10px;
  48.     font-weight: lighter;
  49.     font-variant: normal;
  50.     text-transform: uppercase;
  51.     color: #666666;
  52.         margin-top: 10px;
  53.     text-align: left!important;
  54.     letter-spacing: 0.3em;}
  55.      </style>
  56.        <div class="cssbox">
  57.       <div class="cssbox_head">
  58.        <h2 id="HEADLINE">Search for your Hotel</h2>
  59.       </div>
  60.       <div class="cssbox_body" id="SUBHEADLINE">
  61.        <div id="searchForm">
  62.  
  63.     <form id="hotSearch" name="hotSearch" action="http://cname.travelnow.com/index.jsp" method="post" onSubmit="return validate(this);">
  64.  
  65.     <input type="hidden" name="pageName" value="hotSearch">
  66.     <input type="hidden" name="validateDates" value="true">
  67.     <input type="hidden" name="validateCity" value="true">
  68.     <input type="hidden" name="mode" value="2">
  69.     <input type="hidden" name="submitted" value="true">
  70.     <input type="hidden" name="netOnly" value="true">
  71.     <input type="hidden" name="fc" value="list">
  72.     <input type="hidden" name="locale" value="">
  73.  
  74.     <input type="hidden" name="specials" value="false">
  75.     <input type="hidden" name="city" value="">
  76.     <input type="hidden" name="stateProvince" value="">
  77.     <input type="hidden" name="country" value="">
  78.     <input type="hidden" name="showPopUp" value="true">
  79.     <input type="hidden" name="passThrough" value="true">
  80. <input type="hidden" name="cid" value="9999">
  81.  
  82.  
  83.     <div >
  84.  
  85.     <div >
  86.     <p >1. Select a Destination</p>
  87.  
  88.     <div>
  89.  
  90.  
  91.  
  92.     <fieldset class="city">
  93.     <label for="city">City<br /><input name="cityText" class="city" value="City name"></label>
  94.  
  95.  
  96.                                
  97.  
  98.  
  99.  
  100.  
  101. </div>
  102. </div><!-- end insideBorder -->
  103.  
  104. <div >
  105. <p >2. Select your Dates</p>
  106.  
  107. <div>
  108.  
  109. <fieldset>
  110. <label>Check in<br />
  111.  
  112. <select onchange="amadChange(document.hotSearch.arrivalMonth, document.hotSearch.arrivalDay, document.hotSearch.departureMonth, document.hotSearch.departureDay)" name="arrivalMonth">
  113.  
  114.  
  115. <option value=0>January</option>
  116. <option value=1>February</option>
  117. <option value=2>March</option>
  118. <option value=3>April</option>
  119. <option value=4>May</option>
  120. <option value=5>June</option>
  121. <option value=6>July</option>
  122. <option value=7>August</option>
  123. <option value=8>September</option>
  124. <option value=9>October</option>
  125. <option value=10>November</option>
  126. <option value=11>December</option>
  127.  
  128.  
  129. </select>
  130.  
  131. <select onChange="amadChange(document.hotSearch.arrivalMonth, document.hotSearch.arrivalDay, document.hotSearch.departureMonth, document.hotSearch.departureDay)" name="arrivalDay">
  132. <option value="1">1</option>
  133. <option value="2">2</option>
  134. <option value="3">3</option>
  135. <option value="4">4</option>
  136. <option value="5">5</option>
  137. <option value="6">6</option>
  138. <option value="7">7</option>
  139. <option value="8">8</option>
  140. <option value="9">9</option>
  141. <option value="10">10</option>
  142. <option value="11">11</option>
  143. <option value="12">12</option>
  144. <option value="13">13</option>
  145. <option value="14">14</option>
  146. <option value="15">15</option>
  147. <option value="16">16</option>
  148. <option value="17">17</option>
  149. <option value="18">18</option>
  150. <option value="19">19</option>
  151. <option value="20">20</option>
  152. <option value="21">21</option>
  153. <option value="22">22</option>
  154. <option value="23">23</option>
  155. <option value="24">24</option>
  156. <option value="25">25</option>
  157. <option value="26">26</option>
  158. <option value="27">27</option>
  159. <option value="28">28</option>
  160. <option value="29">29</option>
  161. <option value="30">30</option>
  162. <option value="31">31</option>
  163. </select>
  164.  
  165. <a href="javascript:openCalendar('hotSearch', 'arrival');"><img src="http://travel.ian.com/BU40/_media/icons/calendar.gif" align="bottom"></a>
  166. </label>
  167. </fieldset>
  168.  
  169. <fieldset>
  170. <label>Check out<br />
  171.  
  172. <select onchange="dmddChange(document.hotSearch.departureMonth,document.hotSearch.departureDay)" name="departureMonth">
  173.  
  174.  
  175. <option value=0>January</option>
  176. <option value=1>February</option>
  177. <option value=2>March</option>
  178. <option value=3>April</option>
  179. <option value=4>May</option>
  180. <option value=5>June</option>
  181. <option value=6>July</option>
  182. <option value=7>August</option>
  183. <option value=8>September</option>
  184. <option value=9>October</option>
  185. <option value=10>November</option>
  186. <option value=11>December</option>
  187.  
  188.  
  189. </select>
  190.  
  191. <select onchange="dmddChange(document.hotSearch.departureMonth,document.hotSearch.departureDay)" name="departureDay">
  192. <option value="1">1</option>
  193. <option value="2">2</option>
  194. <option value="3">3</option>
  195. <option value="4">4</option>
  196. <option value="5">5</option>
  197. <option value="6">6</option>
  198. <option value="7">7</option>
  199. <option value="8">8</option>
  200. <option value="9">9</option>
  201. <option value="10">10</option>
  202. <option value="11">11</option>
  203. <option value="12">12</option>
  204. <option value="13">13</option>
  205. <option value="14">14</option>
  206. <option value="15">15</option>
  207. <option value="16">16</option>
  208. <option value="17">17</option>
  209. <option value="18">18</option>
  210. <option value="19">19</option>
  211. <option value="20">20</option>
  212. <option value="21">21</option>
  213. <option value="22">22</option>
  214. <option value="23">23</option>
  215. <option value="24">24</option>
  216. <option value="25">25</option>
  217. <option value="26">26</option>
  218. <option value="27">27</option>
  219. <option value="28">28</option>
  220. <option value="29">29</option>
  221. <option value="30">30</option>
  222. <option value="31">31</option>
  223. </select>
  224.  
  225. </select>
  226. <a href="javascript:openCalendar('hotSearch', 'departure');"><img src="http://travel.ian.com/BU40/_media/icons/calendar.gif" align="bottom"></a>
  227. </label><br>
  228.                    
  229.                    
  230.                    
  231. </fieldset>
  232. <p>
  233. <fieldset>
  234. <table align="left" border="0" cellspacing="0" cellpadding="0" >
  235. <tr>
  236. <td><div id="hot-search-params"></div></td>
  237. </tr>
  238. <tr>
  239. <td valign="bottom"><input type="submit" value="Search" class="button"></td>
  240. </tr>
  241. </table>
  242. </fieldset>
  243. </div>
  244. </div><!-- end insideBorder -->
  245.  
  246.        
  247. </div><!-- end outsideBorder -->
  248. </form>
  249. </div>
  250. <!-- END SEARCH  -->
  251. <script langage="javascript">
  252. <!--
  253. //start new script code
  254. // Checks if browser is Netscape 2.0x since the options array properties don't work with Netscape 2.0x
  255. function isBrowserSupp() {
  256. // Get the version of the browser
  257. version =  parseFloat( navigator.appVersion );
  258.  
  259. if ( ( version >= 2.0 ) && ( version < 2.1 ) && ( navigator.appName.indexOf( "Netscape" ) != -1 ) ) {
  260.   return false;
  261. } else {
  262.   return true;
  263. }
  264. return true;
  265. }
  266. function isLeapYear( yrStr ) {
  267. var leapYear = false;
  268. var year = parseInt( yrStr, 10 );
  269. // every fourth year is a leap year
  270. if ( year % 4 == 0 ) {
  271.   leapYear = true;
  272.   // unless it's a multiple of 100
  273.   if( year % 100 == 0 ) {
  274.       leapYear = false;
  275.       // unless it's a multiple of 400
  276.       if( year % 400 == 0 ) {
  277.           leapYear=true;
  278.       }
  279.   }
  280. }
  281. return leapYear;
  282. }
  283. function getDaysInMonth( mthIdx, YrStr ) {
  284. // all the rest have 31
  285. var maxDays = 31
  286. // expect Feb. (of course)
  287. if( mthIdx == 1 ) {
  288.   if( isLeapYear( YrStr ) ) {
  289.       maxDays=29;
  290.   } else {
  291.       maxDays=28;
  292.   }
  293. }
  294. // thirty days hath...
  295. if( mthIdx == 3 || mthIdx == 5 || mthIdx == 8 || mthIdx == 10 ) {
  296.   maxDays=30;
  297. }
  298. return maxDays;
  299. }
  300. //the function which does some magic to the date fields
  301. // return non-zero if it is the last day of the month
  302. function adjustDate( mthIdx, Dt ) {
  303. var value = 0;
  304.  
  305. var today = new Date()
  306. var theYear = parseInt( today.getFullYear(), 10 )
  307.  
  308. if( mthIdx < today.getMonth() ) {
  309.   theYear = ( parseInt( today.getFullYear(), 10 ) + 1 )
  310. }
  311. if( theYear < 100 ) {
  312.   theYear = "19" + theYear
  313. } else {
  314.   if( ( theYear - 100 ) < 10 ) {
  315.       theYear = "0" + ( theYear - 100 )
  316.   } else {
  317.       theYear = ( theYear - 100 ) + ""
  318.   }
  319.   theYear = "20" + theYear
  320. }
  321. var numDays = getDaysInMonth( mthIdx, theYear );
  322.  
  323. if( mthIdx == 1 ) {
  324.   if( Dt.options.selectedIndex + 1 < numDays ) {
  325.       return 0;
  326.   } else {
  327.       Dt.options.selectedIndex=numDays - 1;
  328.       //check for leap year
  329.       if( numDays == 29 ) {
  330.           return 99;
  331.       } else {
  332.           return 1;
  333.       }
  334.   }
  335. }
  336.  
  337. if( Dt.options.selectedIndex + 1 < numDays ) {
  338.   value = 0;
  339. } else {
  340.   if ( Dt.options.selectedIndex + 1 > numDays ) {
  341.       Dt.options.selectedIndex--;
  342.       value = 3;
  343.   } else {
  344.       //index is 31 or 30
  345.       value = 2;
  346.   }
  347. }
  348. return value;
  349. }
  350.  
  351. //changes departure month when arrival month is changed
  352. function amadChange( inM, inD, outM, outD ) {
  353. if ( !isBrowserSupp() ) {
  354.   return;
  355. }
  356.  
  357. var res = adjustDate( inM.options.selectedIndex, inD );
  358. if( res != 0 ) {
  359.   outD.options.selectedIndex = 0;
  360.   if ( outM.options.selectedIndex == 11 ) {
  361.       outM.options.selectedIndex = 0
  362.   } else {
  363.       outM.options.selectedIndex=inM.options.selectedIndex + 1;
  364.       outD.options.selectedIndex = 1;
  365.   }
  366. } else {
  367.   outM.options.selectedIndex = inM.options.selectedIndex;
  368.   if (outD.options.selectedIndex <= inD.options.selectedIndex) {
  369.       outD.options.selectedIndex = inD.options.selectedIndex + 2;
  370.   }
  371. }
  372. return;
  373. }
  374.  
  375.  
  376.  
  377.  
  378. function dmddChange( outM, outD ) {
  379. if ( !isBrowserSupp() ) {
  380.   return;
  381. }
  382.  
  383. adjustDate( outM.options.selectedIndex, outD );
  384. return;
  385. }
  386.  
  387.  
  388.  
  389.  
  390. function loadDates(arrivalMonthSelect,  arrivalDaySelect, departureMonthSelect, departureDaySelect)
  391. {
  392. var calendar = new Date();
  393. var calendar2 = new Date();
  394. var cal
  395. var cal2
  396. var date;
  397. var month;
  398. var year;
  399. var date2;
  400. var month2;
  401. var year2;
  402.  
  403. //Here is the variable to change for to advance the arrival Date
  404. var advanceArrival = 14;
  405. //Here is the variable to change for to advance the departure Date
  406. var advanceDeparture = 16;
  407.  
  408.  
  409. //Set the arrival Days
  410. calendar.setDate(calendar.getDate()+ advanceArrival);
  411. date = calendar.getDate();
  412. month = calendar.getMonth();
  413.  
  414. //Set the Departure Days
  415. calendar2.setDate(calendar2.getDate()+advanceDeparture);
  416. date2 = calendar2.getDate();
  417. month2 = calendar2.getMonth();
  418.  
  419. arrivalMonthSelect.value=month;
  420. arrivalDaySelect.value=date;
  421. departureMonthSelect.value=month2;
  422. departureDaySelect.value=date2;
  423. }
  424. //-->
  425. </script>
  426.  
  427. <script langauage="javascript">
  428. <!--
  429. function update(themonth,theday){
  430. document.forms[fName].elements[formType+'Day'].options[theday - 1].selected = true;
  431. document.forms[fName].elements[formType+'Month'].options[themonth].selected = true;
  432.  
  433. testWindow.close();
  434. }
  435. function loadCalendar(viewMonth) {
  436. testWindow.document.close();
  437. testWindow.document.open();
  438.  
  439. var day_of_week = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
  440. var month_of_year = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
  441.  
  442. var dateObj = new Date();
  443. var year = dateObj.getFullYear();        // Returns year
  444. var month = dateObj.getMonth();  // Returns month (0-11)
  445. var today = dateObj.getDate();   // Returns day (1-31)
  446. var weekday = dateObj.getDay();  // Returns day (1-31)
  447.  
  448. var DAYS_OF_WEEK = 7;   // "constant" for number of days in a week
  449. var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
  450. var cal;                // Used for printing
  451.  
  452. if (viewMonth < month) {
  453.   year = year + 1;
  454. }
  455.  
  456. if(year < 1900){
  457.   year += 1900; //done to solve the problem of netscape and mozilla returning year in form 10X for years > 2000
  458. }
  459.  
  460. month = viewMonth;
  461. dateObj.setDate(1);      // Start the calendar day at '1'
  462. dateObj.setMonth(month); // Start the calendar month at now
  463. dateObj.setFullYear((year));
  464.  
  465. // VARIABLES FOR FORMATTING
  466. var TR_start = '<TR>';
  467. var TR_end = '</TR>';
  468. var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=0 BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
  469. var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
  470. var TD_start = '<TD WIDTH="30"><CENTER>';
  471. var TD_end = '</CENTER></TD>';
  472. var prevM = month - 1;
  473. var nextM = month + 1;
  474.  
  475. if (nextM == 12) {
  476.   nextM = 0;
  477. }
  478.  
  479. if (prevM == -1) {
  480.   prevM = 11;
  481. }
  482.  
  483. // BEGIN CODE FOR CALENDAR
  484. cal =  '<html><head><title>Calendar</title></head><body>';
  485. cal += '<style>a{cursor: hand}body,table,td{cursor: default;font-family:sans-serif;font-size:12px;color:black;}p.masterHEADER {background: gray; color:white; font-weight: bold; font-size: 13px;margin:0;padding:5px;text-align: center;}</style>';
  486.  
  487. cal += '<div style="border:black 1px solid;">';
  488. cal += '<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" width="100%">' + TR_start;
  489. cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '"><p class=masterHEADER>';
  490. cal += month_of_year[month] + '   ' + year + '</p>' + TD_end + TR_end;
  491. cal += TR_start;
  492.  
  493. ///////////////////////////////////
  494. // DO NOT EDIT BELOW THIS POINT  //
  495. ///////////////////////////////////
  496.  
  497. // LOOPS FOR EACH DAY OF WEEK
  498. for(index=0; index < DAYS_OF_WEEK; index++) {
  499.   // PRINTS DAY
  500.   cal += TD_start + day_of_week[index] + TD_end;
  501. }
  502.  
  503. cal += TD_end + TR_end;
  504. cal += TR_start;
  505.  
  506. // FILL IN BLANK GAPS UNTIL TODAY'S DAY
  507. for(index=0; index < dateObj.getDay(); index++) {
  508.   cal += TD_start + '  ' + TD_end;
  509. }
  510.  
  511. // LOOPS FOR EACH DAY IN CALENDAR
  512. for(index=0; index < DAYS_OF_MONTH; index++) {
  513.   if( dateObj.getDate() > index ) {
  514.       // RETURNS THE NEXT DAY TO PRINT
  515.       week_day =dateObj.getDay();
  516.  
  517.       // START NEW ROW FOR FIRST DAY OF WEEK
  518.       if(week_day == 0) {
  519.           cal += TR_start;
  520.       }
  521.  
  522.       if(week_day != DAYS_OF_WEEK) {
  523.           // SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
  524.           var day  = dateObj.getDate();
  525.  
  526.           // PRINTS DAY
  527.           cal += TD_start + "<span onclick='window.opener.update(" + month + "," + day + "," + year +")'>" + day + "</span>" + TD_end;
  528.       }
  529.  
  530.       // END ROW FOR LAST DAY OF WEEK
  531.       if(week_day == DAYS_OF_WEEK) {
  532.           cal += TR_end;
  533.       }
  534.   }
  535.  
  536.   // INCREMENTS UNTIL END OF THE MONTH
  537.   dateObj.setDate(dateObj.getDate()+1);
  538.  
  539. }// end for loop
  540.  
  541. cal += '</td></TR></TABLE></div><br>';
  542. cal += '<div align="center"><a href="javascript:" onClick="window.opener.loadCalendar(' + prevM + ');">&lt;&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;';
  543. cal += '<a href="javascript:" onClick="window.opener.loadCalendar(' + nextM + ');">&gt;&gt;</a></div>';
  544. cal += '<a href="javascript:window.close();" style="float:right">close</a>';
  545. cal += '</body></html>';
  546.  
  547. //  PRINT CALENDAR
  548. testWindow.document.write(cal);
  549. }
  550.  
  551. var testWindow;
  552. var fieldName;
  553. var fName;
  554.  
  555. function openCalendar(formName,type) {
  556. formType=type;
  557. fName=formName;
  558. testWindow = window.open('','dates','width=300,height=225,resizable=1,status=1,menubar=0,location=0');
  559. loadCalendar(document.forms[fName].elements[formType+'Month'].selectedIndex);
  560. }
  561. //-->
  562. </script>
  563. <script language="javascript">
  564. <!--
  565. function setCityInformation(_city, _state, _country) {
  566. clearTextBox(document.forms["hotSearch"].cityText);
  567. document.forms["hotSearch"].city.value = _city;
  568. document.forms["hotSearch"].stateProvince.value = _state;
  569. document.forms["hotSearch"].country.value = _country;
  570. }
  571.  
  572. function clearTextBox(_textbox) {
  573. _textbox.value = "";
  574. }
  575.  
  576. function validate(form) {
  577. if (form.numberOfRooms.selectedIndex == 8) {
  578.   window.location = "http://travel.ian.com/index.jsp?pageName=groups&cid="&document.forms["hotsearch"].cid.value&"locale=en_US";
  579.   return false;
  580. }
  581.  
  582. if (document.forms["hotSearch"].cityText.value != "") {
  583.   document.forms["hotSearch"].stateProvince.value = "";
  584.   document.forms["hotSearch"].country.value = "";
  585.   document.forms["hotSearch"].city.value = document.forms["hotSearch"].cityText.value;
  586. }
  587.  
  588. return submitGuestInfoForm(form);
  589. }
  590. //-->
  591. </script>
  592. <!-- my custom search box -->
  593. <script language="javascript">
  594. <!--
  595. // NOTE: customize variables in this javascript block as appropriate.
  596. var defaultAdults="2";
  597. var cellStyle="";
  598. var childHelp="<p id=SUBHEADLINE>Please provide the ages of children in each room. Children's ages should be their age at the time of travel.</p>";
  599. var adultHelp="";
  600. var textRooms="<span id=SUBHEADLINE>Rooms</span>";
  601. var textAdults="<span id=SUBHEADLINE>Adults <br> (age 19+)<span id=SUBHEADLINE>";
  602. var textChildren="<span id=SUBHEADLINE>Children</span>";
  603. var textChildError="<span id=SUBHEADLINE>Please specify the ages of all children.</span>";
  604. var pad='<img src="http://travel.ian.com/images/p.gif" width="5" height="1">';
  605. // NOTE: Question marks ("?") get replaced with a numeric value
  606. var textRoomX="<span id=SUBHEADLINE>Room ?:</span>";
  607. var textChildX="<span id=SUBHEADLINE>Child ?:</span>";
  608.  
  609. //-->
  610. </script>
  611. <!-- NOTE: DO NOT MODIFY THIS JAVASCRIPT BLOCK -->
  612. <script language="javascript">
  613. <!--
  614. var adultsPerRoom=new Array(defaultAdults);
  615. var childrenPerRoom=new Array();
  616. var childAgesPerRoom=new Array();
  617. var numRooms=1;
  618. var maxChildren=0;
  619.  
  620. refresh();
  621.  
  622. function setChildAge(room, child, age) {
  623. if (childAgesPerRoom[room] == null) {
  624.   childAgesPerRoom[room] = new Array();
  625. }
  626. childAgesPerRoom[room][child] = age;
  627. }
  628.  
  629. function setNumAdults(room, numAdults) {
  630. adultsPerRoom[room] = numAdults;
  631. }
  632.  
  633. function setNumChildren(room, numChildren) {
  634. childrenPerRoom[room] = numChildren;
  635. refresh();
  636. }
  637.  
  638. function setNumRooms(x) {
  639. numRooms = x;
  640. for (i = 0; i < x; i++) {
  641.   if (adultsPerRoom[i] == null) {
  642.       adultsPerRoom[i] = 2;
  643.   }
  644.   if (childrenPerRoom[i] == null) {
  645.       childrenPerRoom[i] = 0;
  646.   }
  647. }
  648. refresh();
  649. }
  650.  
  651. function renderRoomSelect() {
  652. var x = '';
  653. x += '<select name="numberOfRooms" onchange="setNumRooms(this.options[this.selectedIndex].value);">';
  654. for (var i = 1; i < 9; i++) {
  655.   x += '<option value="'+i+'"'+(numRooms == i ? ' selected' : '')+'>' + i;
  656. }
  657. x += '<option value="9"'+(numRooms == 9 ? ' selected' : '')+'>9+';
  658. x += '</select>';
  659. return x;
  660. }
  661.  
  662. function refresh() {
  663. maxChildren = 0;
  664. for (var i = 0; i < numRooms; i++) {
  665.   if (childrenPerRoom[i] > maxChildren) {
  666.       maxChildren = childrenPerRoom[i];
  667.   }
  668. }
  669.  
  670. var x = '';
  671. if (adultHelp.length > 0) {
  672.   x = adultHelp + "<p>\n";
  673. }
  674.  
  675. if (numRooms > 8) {
  676.   x += textRooms;
  677.   x += renderRoomSelect();
  678.  
  679. } else {
  680.   x += '<table border="0" cellspacing="2" cellpadding="0" class="SUBHEADELINE">\n';
  681.   x += '<tr><td>'+textRooms+pad+'</td>';
  682.   if (numRooms >= 1) {
  683.       x += '<td>&nbsp;</td>';
  684.   }
  685.   x += '<td><nobr>'+textAdults+pad+'</nobr></td><td'+cellStyle+'><nobr>'+textChildren+pad+'</nobr></td></tr>\n';
  686.   for (var i = 0; i < numRooms; i++) {
  687.       x += '<tr><td'+cellStyle+'>';
  688.       if (i == 0) {
  689.           x += renderRoomSelect();
  690.       } else {
  691.           x += '&nbsp;';
  692.       }
  693.       x += '</td>';
  694.       if (numRooms >= 1) {
  695.           x += '<td><nobr>'+getValue(textRoomX, i+1)+pad + '</nobr></td>';
  696.       }
  697.       x += '<td>';
  698.       x += buildSelect('room-' + i + '-adult-total', 'setNumAdults(' + i + ', this.options[this.selectedIndex].value)', 1, 4, adultsPerRoom[i]);
  699.       x += '</td><td>';
  700.       x += buildSelect('room-' + i + '-child-total', 'setNumChildren(' + i + ', this.options[this.selectedIndex].value)', 0, 5, childrenPerRoom[i]);
  701.       x += '</td></tr>\n';
  702.   }
  703.   x += '</table>\n';
  704.  
  705.   var didHeader = false;
  706.   for (var i = 0; i < numRooms; i++) {
  707.       if (childrenPerRoom[i] > 0) {
  708.           if (!didHeader) {
  709.               x += '<table border="0" cellpadding="0" cellspacing="2">\n';
  710.               x += '<tr><td colspan="'+(maxChildren+1)+'">';
  711.               x += '<img src="/images/p.gif" width="1" height="5"><br>';
  712.               x += childHelp;
  713.               x += '<img src="/images/p.gif" width="1" height="5"><br>';
  714.               x += '</td></tr>\n<tr><td>&nbsp;</td>';
  715.               for (var j = 0; j < maxChildren; j++) {
  716.                   x += '<td'+cellStyle+'><nobr>'+getValue(textChildX, j+1)+pad+'</nobr></td>\n';
  717.               }
  718.               didHeader = true;
  719.           }
  720.           x += '</tr>\n<tr><td><nobr>'+getValue(textRoomX, i+1)+pad+'</nobr></td>';
  721.           for (var j = 0; j < childrenPerRoom[i]; j++) {
  722.               x += '<td'+cellStyle+'>';
  723.               var def = -1;
  724.               if (childAgesPerRoom[i] != null) {
  725.                   if (childAgesPerRoom[i][j] != null) {
  726.                       def = childAgesPerRoom[i][j];
  727.                   }
  728.               }
  729.               x += '<select name="room-'+i+'-child-'+j+'-age" onchange="setChildAge('+i+', '+j+', this.options[this.selectedIndex].value);">';
  730.               x += '<option value="-1"'+(def == -1 ? ' selected' : '')+'>-?-';
  731.               x += '<option value="0"'+(def == 0 ? ' selected' : '')+'>&lt;1';
  732.               for (var k = 1; k <= 18; k++) {
  733.                   x += '<option value="'+k+'"'+(def == k ? ' selected' : '')+'>'+k;
  734.               }
  735.               x += '</td>';
  736.           }
  737.           if (childrenPerRoom[i] < maxChildren) {
  738.               for (var j = childrenPerRoom[i]; j < maxChildren; j++) {
  739.                   x += '<td'+cellStyle+'>&nbsp;</td>';
  740.               }
  741.           }
  742.           x += '</tr>\n';
  743.       }
  744.   }
  745.   if (didHeader) {
  746.       x += '</table>\n';
  747.   }
  748. }
  749.  
  750. document.getElementById("hot-search-params").innerHTML = x;
  751. }
  752.  
  753. function buildSelect(name, onchange, min, max, selected) {
  754. var x = '<select name="' + name + '"';
  755. if (onchange != null) {
  756.   x += ' onchange="' + onchange + '"';
  757. }
  758. x +='>\n';
  759. for (var i = min; i <= max; i++) {
  760.   x += '<option value="' + i + '"';
  761.   if (i == selected) {
  762.       x += ' selected';
  763.   }
  764.  
  765.   x += '>' + i + '\n';
  766. }
  767. x += '</select>';
  768. return x;
  769. }
  770.  
  771. function validateGuests(form) {
  772. if (numRooms < 9) {
  773.   var missingAge = false;
  774.   for (var i = 0; i < numRooms; i++) {
  775.       var numChildren = childrenPerRoom[i];
  776.       if (numChildren != null && numChildren > 0) {
  777.           for (var j = 0; j < numChildren; j++) {
  778.               if (childAgesPerRoom[i] == null || childAgesPerRoom[i][j] == null || childAgesPerRoom[i][j] == -1) {
  779.                   missingAge = true;
  780.               }
  781.           }
  782.       }
  783.   }
  784.  
  785.   if (missingAge) {
  786.       alert(textChildError);
  787.       return false;
  788.   } else {
  789.       return true;
  790.   }
  791. } else {
  792.   return true;
  793. }
  794. }
  795.  
  796. function submitGuestInfoForm(form) {
  797. if (!validateGuests(form)) {
  798.   return false;
  799. }
  800.  
  801. return true;
  802. }
  803.  
  804. function getValue(str, val) {
  805. return str.replace(/\?/g, val);
  806. }
  807. //-->
  808. </script>
  809.  
  810. <script defer="defer" type="text/javascript">
  811. loadDates(document.forms['hotSearch'].arrivalMonth,document.forms['hotSearch'].arrivalDay, document.forms['hotSearch'].departureMonth, document.forms['hotSearch'].departureDay)
  812. </script>
  813.       </div>
  814.      </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!