<% content_for :head_js do %>
  <script type="text/javascript">
    $(function() {
        $('.mash-image').click(function(elem) {
            $('#mash_winner_id').val($(elem.target).attr('data-map-id'));
            $('#new_mash').submit();
        });
    });
  </script>
<% end %>

<h1>Mash the Maps!</h1>
<p>Choose your fave.</p>

<% form_for(@mash) do |f| %>
  <%= f.error_messages %>

  <div id="maps">
    <div id="map_a" class="mash-image">
      <image src="<%= url_for @map_a %>.png" data-map-id="<%= @map_a.id %>" />
    </div>
    <div id="map_b" class="mash-image">
      <image src="<%= url_for @map_b %>.png" data-map-id="<%= @map_b.id %>" />
    </div>
  </div>

  <%= f.hidden_field :map_a_id, :value => @map_a.id %>
  <%= f.hidden_field :map_b_id, :value => @map_b.id %>
  <%= f.hidden_field :winner_id, :value => -1 %>
<% end %>

<%= link_to 'Back', mashes_path %>
