// Global variables used by the locator
var MAP;
var GEOCODER;
var DEFAULT_ZOOM_LEVEL = 12;
var search_point;
var markers = {};
var icons = {};

$.extend( $.template.helpers , {
  image_url: function(value) {
    return '/images/'+value.toLowerCase()+'_icon.png';
  },
  if_dt: function(value) {
    if (value) {
      return '<span class="drive-thru">Drive-thru: '+value+'</span>';
    } else {
      return "";
    }
  },
  with_br_unless_blank: function(value) {
    if (value) {
      return "<br/>" + value;
    } else {return "";}
  },
  with_fax_label: function(value) {
    if (value) {return value + " (fax)";}
    else {return "";}
  }
});

var LIST_ITEM_TMPL = $.template(
  '<li class="location" id="${id}">' +
    '<span class="distance">${rounded_distance}mi</span><span class="image_wrapper"><img src="${type:image_url}" /></span>' +
    '<h3><a href="#">${name}</a></h3>' +
    '${address1}<br/>${city}, ${state}' +
  '</li>'
);
var INFO_WINDOW_TMPL = $.template(
'<style type=\"text/css\" media=\"all\">\n.locator_info_window {\n  position: relative;\n  top: -5px;\n  font-size: 11px;\n}\n\n.locator_info_window h3 {\n  margin: 0 0 0.2em 0;\n  font-size: 2em;\n  line-height: 1.2em;\n}\n\n.locator_info_window p {\n  font-size: 11px;\n  line-height: 1.3em;\n  margin: 0 0 0.5em 0.5em;\n}\n\n.locator_info_window p span.fax{\n  color: #999;\n  margin-left: 5px;\n}\n</style>\n<div class=\"locator_info_window\">\n  <h3>${name}</h3>\n  <p>\n    ${address1}${address2:with_br_unless_blank}<br>\n    ${city}, ${state} ${zip}<br/>\n    ${phone} <span class=\"fax\">${fax:with_fax_label}</span>\n  </p>\n  <p>${additional_info}</p>\n</div>' //'
,{compile:true});
var BRANCH_TMPL = $.template(
'<style type=\"text/css\">\n.locator_details_window {\n  font-size: 11px;\n  line-height: 15px;\n}\n.locator_details_window dt {\n  width: 66px;\n  font-weight:bold;\n  display:inline;\n  display:block;\n  float:left;\n  clear:left;\n  text-align:right;\n  margin-right:5px;\n}\n.locator_details_window dd {\n  display:inline;\n  line-height: 15px;\n}\n.locator_details_window dd span.lobby {\n  width: 9em;\n  display: block;\n  float: left;\n  line-height: 15px;\n}\n.locator_details_window dd span.drive-thru {\n  font-size: 10px;\n  color: #999;\n  margin-left: 3px;\n  line-height: 15px;\n}\n</style>\n<div class=\"locator_details_window\">\n  <dl>\n   <dt>Sunday</dt><dd><span class=\"lobby\">${sunday}</span> ${dt_sunday:if_dt}<br></dd>\n   <dt>Monday</dt><dd><span class=\"lobby\">${monday}</span> ${dt_monday:if_dt}<br></dd>\n   <dt>Tuesday</dt><dd><span class=\"lobby\">${tuesday}</span> ${dt_tuesday:if_dt}<br></dd>\n   <dt>Wednesday</dt><dd><span class=\"lobby\">${wednesday}</span> ${dt_wednesday:if_dt}<br></dd>\n   <dt>Thursday</dt><dd><span class=\"lobby\">${thursday}</span> ${dt_thursday:if_dt}<br></dd>\n   <dt>Friday</dt><dd><span class=\"lobby\">${friday}</span> ${dt_friday:if_dt}<br></dd>\n   <dt>Saturday</dt><dd><span class=\"lobby\">${saturday}</span> ${dt_saturday:if_dt}<br></dd>\n  </dl>\n</div>' //'
,{compile:true});


var TL_Initialize = function() {
  // Initializes the global variables 'MAP', 'GEOCODER', and 'markers'.
  // Sets up the map icons.
  // Also binds the Google destructor to the page's unload event.
  MAP = new GMap2(document.getElementById("locator_map"));
  MAP.addControl(new GSmallMapControl());
  MAP.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(75,10)));
  MAP.enableDoubleClickZoom();
  GEOCODER = new GClientGeocoder();
  window.unload = GUnload;
  
  types = new Array(2);
  types[0] = 'BRANCH'; types[1] = 'SERVICE_CENTER'; types[2] = 'ATM'; types[3] = 'DEPOSIT_ATM'; types[4] = 'BRANCH_ATM';
    icons[types[0]] = new GIcon();
    icons[types[0]].image = '/images/branch_icon.png';
    icons[types[0]].iconSize = new GSize(30, 35);
    icons[types[0]].iconAnchor = new GPoint(15, 35);
    icons[types[0]].infoWindowAnchor = new GPoint(15, 1);
    icons[types[4]] = new GIcon();
    icons[types[4]].image = '/images/branch_atm_icon.png';
    icons[types[4]].iconSize = new GSize(30, 35);
    icons[types[4]].iconAnchor = new GPoint(15, 35);
    icons[types[4]].infoWindowAnchor = new GPoint(15, 1);
  for (i = 1; i < 4; i++) {
    icons[types[i]] = new GIcon();
    icons[types[i]].image = '/images/'+types[i].toLowerCase()+'_icon.png';
    icons[types[i]].iconSize = new GSize(30, 35);
    icons[types[i]].iconAnchor = new GPoint(15, 35);
    icons[types[i]].infoWindowAnchor = new GPoint(15, 1);
  }
}

var TL_CreateMarker = function(location) {
  // MAP must be initialized
  // location: a json object representing a branch, service center, or atm
  if (!markers[location.id]) {
    var window_html = "";
    switch(location.type) {
      case "BRANCH": 
      case "SERVICE_CENTER":
        window_html = [
          new GInfoWindowTab("Address", INFO_WINDOW_TMPL.apply(location)),
          new GInfoWindowTab("Hours", BRANCH_TMPL.apply(location))
        ];
        break;
      case "ATM":
      case "DEPOSIT_ATM":
      case "BRANCH_ATM":
        window_html = INFO_WINDOW_TMPL.apply(location);
        break;
    }
    var marker = new GMarker(new GLatLng(location.latitude, location.longitude),icons[location.type]);
    markers[location.id] = marker;
    MAP.addOverlay(marker);
    if (window_html instanceof Array) {
      GEvent.addListener(marker,'click',function() {marker.openInfoWindowTabsHtml(window_html);});
    } else {
      GEvent.addListener(marker,'click',function() {marker.openInfoWindowHtml(window_html);});
    }
    GEvent.addListener(marker,'infowindowclose',function() {$('#locator_results ul li#' + location.id).removeClass('selected');});
    GEvent.addListener(marker,'infowindowopen',function() {$('#locator_results ul li#' + location.id).addClass('selected');});
  }
}

var TL_PrepareFormData = function(form) {
  // MAP must be initialized
  // search_point must be initialized to a valid GLatLng object
  // form: a JQuery object referencing the search form
  bounds = MAP.getBounds();
  data = form.formToArray();
  data.push({name:'zoom', value:MAP.getZoom()});
  data.push({name:'ll', value:search_point.toUrlValue()});
  data.push({name:'ne', value:bounds.getNorthEast().toUrlValue()});
  data.push({name:'sw', value:bounds.getSouthWest().toUrlValue()});
  return $.param(data);
}

var TL_LoadLocations = function() {
  // MAP must be initialized
  // search_point must be initialized to a valid GLatLng object
  if (MAP.getZoom() < 7) {
    // We don't want to freeze up the browser by putting up too many overlays
    MAP.clearOverlays();
  } else {
    form = $('#locator_controls form');
    $.post(form.attr('action'), TL_PrepareFormData(form), function(locations) {
      // I'm not happy with the inefficiency of this function...
      // First, mark the locations that are still visible after the move/research
      visible = {}
      $.each(locations,function() {
        visible[this.id] = true;
      });
      // Next, remove markers that are no longer visible
      for (m in markers) {
        if (!visible[m]) {
          MAP.removeOverlay(markers[m])
          delete markers[m]
        }
      }
      // Now create any new markers and build the result list
      current_location = $('#locator_results ul li.selected').attr('id');
      locations_ul = "";
      $.each(locations,function() {
        TL_CreateMarker(this);
        locations_ul += LIST_ITEM_TMPL.apply(this);
      });
      if ("" != locations_ul){
        $('#locator_results').html("<ul>"+locations_ul+"</ul>");
        $('#locator_results ul li:last').addClass('last');
      } else {$('#locator_results').html("");}
      // Finally, rebind the result list events and mark the selected location (if any)
      $('#locator_results ul li').click(function(e) {
        e.preventDefault();
        marker = markers[this.id];
        GEvent.trigger(marker,'click');
      });
      $('#locator_results ul li#' + current_location).addClass('selected');
    },'json');
  }
}

var TL_SubmitSearch = function(e) {
  e.preventDefault();
  if ($(this).data.q != this.q.value) {
    $(this).data.q = this.q.value;
    GEOCODER.getLatLng(this.q.value, function(point) {
      if (!point) {alert('I did not understand your location. Please try again.');}
      else {
        search_point = point;
        MAP.setCenter(point,DEFAULT_ZOOM_LEVEL);
      }
      return false;
    });
  } else {
    // one of the checkboxes was clicked, but query is the same...
    TL_LoadLocations();
  }
}

var TL_SetCheckbox = function(field) {
  if ($.uri.param(field) && $('#locator_controls form input[name='+field+']')) {
    $('#locator_controls form input[name='+field+']')[0].checked = $.uri.param(field) == true ? 1 : 0;
  }  
}

var StartTrabianLocator = function() {
  if (GBrowserIsCompatible()) {
    TL_Initialize();
    TL_SetCheckbox("branches"); TL_SetCheckbox("service_centers");
    TL_SetCheckbox("atms"); TL_SetCheckbox("deposit_atms_only");
    
    // Various interface handlers
    $('#locator_controls #location_atms').click(function() {
      if (this.checked) {
        $('#locator_controls #deposit_atms_only').removeAttr('disabled');
      } else {
        $('#locator_controls #deposit_atms_only').attr('disabled','disabled');
      }
    });
    $('#locator_controls #location_atms').triggerHandler('click');
    $('#locator_controls form input:checkbox').click(function() {
      $('#locator_controls form').triggerHandler('submit');
    });
    $('#locator_controls .form_toggle').click(function(e) {
      e.preventDefault();
      $('#locator_controls form').toggle();
      $('#locator_controls .form_toggle').toggleClass('collapsed');
    });
    
    // Look for initial query in URL params
    if ($.uri.param('q')) {$('#locator_controls input[name=q]').val($.uri.param('q'));}
    try{
    if ($.uri.param('branch')) {
      $('#branch_'+$.uri.param('branch')).livequery(function() {
        $(this).click();
        $('#branch_'+$.uri.param('branch')).expire();
      });
    }} catch(e) {;}
    
    // OnSubmit handler for the location search
    $('#locator_controls form').submit(TL_SubmitSearch);
    $('#locator_controls form').triggerHandler('submit');
    
    // Map manipulation
    GEvent.addListener(MAP,'moveend', TL_LoadLocations); 
  }
}

// Entry Point
$(function() {
    StartTrabianLocator();
});