$('#img-with-usemap-attr').timezonePicker();

$('#img-with-usemap-attr').timezonePicker({
  pin: '.timezone-pin',
  fillColor: 'FFCCCC',
});

$.fn.timezonePicker.defaults = {
  // Selector for the pin that should be used. This selector only works in the
  // immediate parent of the image map img tag.
  pin: '.timezone-pin',
  // Specify a URL for the pin image instead of using a DOM element.
  pinUrl: null,
  // Preselect a particular timezone.
  timezone: null,
  // Pass through options to the jQuery maphilight plugin.
  maphilight: true,
  // Selector for the select list, textfield, or hidden to update upon click.
  target: null,
  // Selector for the select list, textfield, or hidden to update upon click
  // with the specified country.
  countryTarget: null,
  // If changing the country should use the first timezone within that country.
  countryGuess: true,
  // A list of country guess exceptions. These should only be needed if a
  // country spans multiple timezones.
  countryGuesses: {
    'AU': 'Australia/Sydney',
    'BR': 'America/Sao_Paulo',
    'CA': 'America/Toronto',
    'CN': 'Asia/Shanghai',
    'ES': 'Europe/Madrid',
    'MX': 'America/Mexico_City',
    'RU': 'Europe/Moscow',
    'US': 'America/New_York'
  },
  // If this map should automatically adjust its size if scaled. Note that
  // this can be very expensive computationally and will likely have a delay
  // on resize. The maphilight library also is incompatible with this setting
  // and will be disabled.
  responsive: false,
  // A function to be called upon timezone change
  // timezoneName, countryName, and offset will be passed as arguments
  changeHandler: null,
  
  // Default options passed along to the maphilight plugin.
  fade: false,
  stroke: true,
  strokeColor: 'FFFFFF',
  strokeOpacity: 0.4,
  fillColor: 'FFFFFF',
  fillOpacity: 0.4,
  groupBy: 'data-offset'
};

// Query the user's browser for the current location and set timezone from that.
$('#img-with-usemap-attr').timezonePicker('detectTimezone');

// The detectTimezone method may also provide event callbacks.
$('#img-with-usemap-attr').timezonePicker('detectTimezone', {
  success: successCallback,
  error: errorCallback,
  complete: completeCallback, // Called on both success or failure.
});

// Set the active timezone to some value programatically.
$('#img-with-usemap-attr').timezonePicker('updateTimezone', 'America/New_York');

// Resize the image map coordinates to match an adjusted size of the image.
// Note that this option does not work well and is very slow. Not recommended.
$('#img-with-usemap-attr').timezonePicker('resize');