gistfile1.js

$(function() {
  $('#rooms-index').each(function() {
    
    var GOOGLE_MAPS,
        SECONDS_IN_A_DAY = 86400,
        form = $('#room_search_form'),
        mapElement = $('#map'),
        results = $('#results'),
        controls = form.find('input, select'),
        mapController,
        spinnerPopup,
        bounds,
        map;
    
    mapElement.disableSelection();
    loadGoogleMaps(onGoogleMapsLoaded);
    results.change(updateResults);
    form.submit(updateResults);
    form.change(updateResults);
    
    spinnerPopup = $('<div><img src="/images/spinner.gif"></div>').dialog({
      dialogClass: 'spinner_popup',
      autoOpen: false,
      resizable: false,
      draggable: false,
      disabled: true,
      show: 'drop',
      hide: 'puff',
      width: 64,
      height: 64,
      minWidth: 64,
      minHeight: 64
    });
    
    $('#results').delegate('.pagination a', 'click', function() {
      $.get(this.href, onRequestCompleted);
      waitingForResponse();
      return false;
    });
    
    function onGoogleMapsLoaded(google_maps) {
      GOOGLE_MAPS = google_maps;
      
      var coords = mapElement.attr('data-center'),
          radius = Number(mapElement.attr('data-radius')),
          circle;
      
      createMap();
      
      if (coords) {
        coords = coords.split(',');
        circle = new GOOGLE_MAPS.Circle({
          center: new GOOGLE_MAPS.LatLng(coords[0], coords[1]),
          radius: radius
        });
        map.fitBounds(circle.getBounds());
      
      } else {
        map.setCenter(new GOOGLE_MAPS.LatLng(0, 0));
        map.setZoom(1);
      }
      
      // We want to update results depending on what's visible on the map,
      // We're deferring event handler registration to avoid callback to be
      // triggered when map is initially rendered.
      setTimeout(registerUpdateResultsOnMapManipulation, 1000);
      
      mapController = new com.maptimize.MapController(map);
      mapController.refresh();
    }

    function createMap() {
      map = new GOOGLE_MAPS.Map(mapElement[0], {
        mapTypeId: GOOGLE_MAPS.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false,
        scrollwheel: false
      });
    }
    
    function registerUpdateResultsOnMapManipulation() {
      GOOGLE_MAPS.event.addListener(map, 'idle', function() {
        bounds = map.getBounds();
        updateResults();
      });
    }

    function updateResults(event) {
      if (event) event.preventDefault();
      $.get(form.attr('action'), getParams(), onRequestCompleted);
      waitingForResponse();
      if (!event || event.target !== $('#order')[0]) {
        // Callback could happen before map were loaded so
        // ensure it exists before trying to update it...
        if (map) updateMap();
      }
    }
    
    function getParams() {
      var params = [form.serialize(), $('#order').serialize()];
      if (bounds) {
        params.push($.param({
          sw: bounds.getSouthWest().toUrlValue(),
          ne: bounds.getNorthEast().toUrlValue()
        }));
      }
      return params.join('&');
    }

    function waitingForResponse() {
      spinnerPopup.dialog('open');
      controls.attr('disabled', true);
    }

    function onRequestCompleted(results) {
      $('#results').html(results);
      spinnerPopup.dialog('close');
      controls.attr('disabled', false);
      $.scrollTo('#room_search_form', 1000);
      // $.scrollTo('#results', 1000);
    }

    // Refresh Maptimize clustering with new conditions from UI controls.
    // Maptimize map is populated in lib/maptimize/room_exporter.rb
    function updateMap() {
      var c = new com.maptimize.Condition();
      appendDurationCondition(c);
      appendPeopleCountCondition(c);
      appendAvailabilityCondition(c);
      mapController.setCondition(c);
      mapController.refresh();
    }
    
    function appendDurationCondition(condition) {
      if ($('#long_duration').attr('checked')) {
        condition.appendAnd({ 'long': true });
      }
    }
    
    function appendPeopleCountCondition(condition) {
      var peopleCount = Number($('#people_count').val());
      if (peopleCount > 1) {
        condition.appendAnd(['people >= ?', peopleCount]);
      }
    }
    
    function appendAvailabilityCondition(condition) {
      var date = $('#start_on').datepicker('getDate'),
          days = ($('#end_on').datepicker('getDate') - date) / (SECONDS_IN_A_DAY * 1000);
      
      // Condition string would be ridiculously long if more than 30 days were requested.
      // Ignore it if so...
      if (days > 0 && days <= 30) {
        var parts = [];
        for (var i = 0; i < days; i++) {
          date.setDate(date.getDate() + 1);
          parts[i] = 'unav HAS "' + toISOString(date) + '"';
        }
        condition.appendAnd('NOT(' + parts.join(' OR ') + ')');
      }
    }
    
    // toISOString(new Date) -> "2011-02-06"
    function toISOString(d) {
      return [d.getFullYear(), pad(d.getMonth() + 1), pad(d.getDate())].join('-');
    }
    
    // pad(10) -> "10"
    // pad(3) -> "03"
    function pad(n) {
      return n < 10 ? '0' + n : n;
    }
  });

  $('#rooms-show').delegate('#new_booking', 'change', requestBookingAmount);
  $('#rooms-show .slideshow').galleria({ autoplay: 5000 });
  
  function requestBookingAmount() {
    $.get(this.action, $(this).serialize(), function(response) {
      $('#amount').html(response.booking.amount);
    }, 'json');
  }
});