Create hybrid signup/signin form

app/views/layouts/application.html.erb

@@ -20,13 +20,90 @@
       var redMarker = '/images/markers/red.png';
       var greenMarker = '/images/markers/green.png';
 <% @hydrants.each do |hydrant| %>
-      var h<%= hydrant.city_id %>LatLng = new google.maps.LatLng(<%= hydrant.lat %>, <%= hydrant.lng %>);
-      var h<%= hydrant.city_id %>Marker = new google.maps.Marker({
-          position: h<%= hydrant.city_id %>LatLng,
+  <% if user = hydrant.user %>
+      <% require 'digest/md5' %>
+      <% hash = Digest::MD5.hexdigest(user.email) %>
+      var contentString = '\
+<h2>Adopted by <%= hydrant.user.name %></h2>\
+<a class="button">Email a reminder to shovel</a>\
+'
+  <% else %>
+      var contentString = '\
+<div class="box">\
+<h2>Adopt this Hydrant</h2>\
+<%= form_tag do %>\
+  <div class="common_fields">\
+    <%= label_tag "email" %>\
+    <%= text_field_tag "email", params[:email], :tabindex => 1 %>\
+    <%= label_tag "account_new" , radio_button_tag("account", "new", true, :tabindex => 2).html_safe + "I haven\\'t signed up yet" %><br />\
+    <%= label_tag "account_existing", radio_button_tag("account", "existing").html_safe + "I already signed up" %><br />\
+  </div>\
+  <div class="account_new_fields">\
+    <%= label_tag "name" %>\
+    <%= text_field_tag "name", params[:name], :tabindex => 3 %>\
+    <%= label_tag "organization" %>\
+    <%= text_field_tag "organization", params[:organization], :tabindex => 4 %>\
+    <%= label_tag "voice_number" %>\
+    <%= text_field_tag "voice_number", params[:voice_number], :tabindex => 5 %>\
+    <%= label_tag "sms_number", "SMS number" %>\
+    <%= text_field_tag "sms_number", params[:sms_number], :tabindex => 6 %>\
+    <%= label_tag "password", "Choose a password" %>\
+    <%= password_field_tag "password", nil, :tabindex => 7 %>\
+    <%= submit_tag "Sign up", :tabindex => 8 %>\
+    <p>By signing up you accept the <%= link_to "Terms of Service", "#", :tabindex => 9 %>.</p>\
+  </div>\
+  <div class="account_existing_fields" style="display: none;">\
+    <%= label_tag "password" %>\
+    <%= password_field_tag "password", nil, :tabindex => 0 %>\
+    <%= label_tag "remember_me", check_box_tag("remember_me", nil, true).html_safe + "Stay signed in" %><br />\
+    <%= submit_tag "Sign in", :tabindex => 0 %>\
+    <p><%= link_to "Forgot your password?", "#", :class => "forgot_password", :tabindex => 0 %></p>\
+  </div>\
+  <div class="forgot_password_fields" style="display: none;">\
+    <%= submit_tag "Email me my password", :tabindex => 0 %>\
+    <p><%= link_to "Never mind. I remembered my password.", "#", :class => "remembered_password", :tabindex => 0 %></p>\
+  </div>\
+<% end %>\
+</div>\
+';
+  <% end %>
+      var h<%= hydrant.id %>InfoWindow = new google.maps.InfoWindow({
+          content: contentString
+      });
+      var h<%= hydrant.id %>LatLng = new google.maps.LatLng(<%= hydrant.lat %>, <%= hydrant.lng %>);
+      var h<%= hydrant.id %>Marker = new google.maps.Marker({
+          position: h<%= hydrant.id %>LatLng,
           map: map,
           icon: <%= hydrant.user_id ? "greenMarker" : "redMarker" %>
       });
+      google.maps.event.addListener(h<%= hydrant.id %>Marker, 'click', function() {
+      <% @hydrants.each do |hydrant| %>
+        h<%= hydrant.id %>InfoWindow.close();
+      <% end %>
+        h<%= hydrant.id %>InfoWindow.open(map, h<%= hydrant.id %>Marker);
+      });
 <% end %>
+      $('.box input[type="radio"]').live('click', function() {
+        var self = $(this);
+        if('new' == self.val()) {
+          $('.forgot_password_fields').slideUp();
+          $('.account_existing_fields').slideUp();
+          $('.account_new_fields').slideDown();
+        } else if('existing' == self.val()) {
+          $('.account_new_fields').slideUp();
+          $('.account_existing_fields').slideDown(function() {
+            $('.forgot_password').click(function() {
+              $('.account_existing_fields').slideUp();
+              $('.forgot_password_fields').slideDown(function() {
+                $('.remembered_password').click(function() {
+                  $('.forgot_password_fields').slideUp();
+                  $('.account_existing_fields').slideDown();
+                });
+              });
+            });
+          });
+        }
+      });
     })
     </script>
     <%= csrf_meta_tag %>

app/views/welcome/index.html.erb

@@ -4,18 +4,20 @@
     Claim responsibility for shoveling out a fire hydrant after it snows.
   </p>
   <%= form_tag do %>
-    <%= label_tag "address" %>
-    <%= text_field_tag "address", params[:address], :tabindex => 1 %>
-    <%= label_tag "city" %>
-    <%= select_tag "city", '<option value="Boston" selected="selected">Boston</option>'.html_safe, :tabindex => 2 %>
     <%= label_tag "state" %>
-    <%= select_tag "state", '<option value="MA" selected="selected">Massachusetts</option>'.html_safe, :tabindex => 3 %>
-    <%= submit_tag "Find Fire Hydrants", :tabindex => 4 %>
+    <%= select_tag "state", '<option value="MA" selected="selected">Massachusetts</option>'.html_safe, :tabindex => 10 %>
+    <%= label_tag "city" %>
+    <%= select_tag "city", '<option value="Boston" selected="selected">Boston</option>'.html_safe, :tabindex => 11 %>
+    <%= label_tag "address" %>
+    <%= text_field_tag "address", params[:address], :tabindex => 12 %>
+    <%= submit_tag "Find Fire Hydrants", :tabindex => 13 %>
   <% end %>
-  <%= image_tag "logos/boston.png", :alt => "City of Boston", :title => "City of Boston" %>
-  <%= image_tag "logos/cert.png", :alt => "Community Emergency Response Team", :title => "Community Emergency Response Team" %>
-  <%= image_tag "logos/cfa.png", :alt => "Code for America", :title => "Code for America" %>
-  <%= image_tag "hydrant-in-snow.jpg" %>
+  <div id="logos">
+    <%= image_tag "logos/boston.png", :alt => "City of Boston", :title => "City of Boston" %>
+    <%= image_tag "logos/cert.png", :alt => "Community Emergency Response Team", :title => "Community Emergency Response Team" %>
+    <%= image_tag "logos/cfa.png", :alt => "Code for America", :title => "Code for America" %>
+  </div>
+  <%= image_tag "hydrant-in-snow.jpg", :id => "hydrant-in-snow" %>
 </div>
 <div id="map_canvas">
 </div>

public/stylesheets/main.css

@@ -9,6 +9,10 @@ body {
   padding: 0px;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  text-align: center;
+}
+
 #map_canvas {
   float: left;
   height: 100%;
@@ -17,44 +21,58 @@ body {
 
 #sidebar {
   float: left;
-  text-align: center;
   height: 100%;
   width: 25%;
   overflow: hidden;
 }
 
-#sidebar img {
-  padding: 10px 5px 0 5px;
-}
-
-#sidebar img#hydrant-in-snow {
-  width: 100%;
-}
-
 form {
   width: 90%;
   margin: auto;
 }
 
-#tagline {
+#sidebar #tagline {
+  text-align: center;
   padding: 10px;
-  background: #cc3333;
-  color: #ffffff;
+  background: #c33;
+  color: #fff;
+}
+
+#sidebar #logos {
+  text-align: center;
+}
+
+#sidebar #logos img {
+  padding: 10px 5px 0 5px;
+}
+
+#sidebar img#hydrant-in-snow {
+  width: 100%;
 }
 
 label, input {
-  display: block;
-  clear: both;
+  white-space: nowrap;
   text-align: left;
 }
 
 input, select, option, input[type="submit"] {
+  display: block;
   margin-bottom: 10px;
   font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
   font-size: 1.0em;
   width: 100%;
 }
 
-input[type="submit"] {
+input[type="radio"], input[type="checkbox"] {
+  display: inline;
+  width: auto;
+}
+
+input[type="radio"], input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+button, input[type="submit"] {
+  width: 100%;
   text-align: center;
 }