<html>
  <head>
    <%= javascript_include_tag 'prototype' %>
    <%= javascript_include_tag 'cross_site' %>
    <%= javascript_include_tag 'effects' %>
    <script type="text/javascript">
function lookupZip(element, value) {
  if (value.length == 5) {
    $("result").show();
    new Ajax.Updater("result", 
                     '<%= url_for :action=>"lookup_ajax", :only_path=>false %>', {
      parameters: "zip="+encodeURIComponent(value),
      method: "get",
      onSuccess: function(request) {
        if (/Not Found/.test(request.responseText)) {
          new Effect.Shake("zip_zip");
        }
        new Effect.Highlight("result", {
          duration: 3,
          startcolor: '#aaffff'
        });
      }
    });
  } else {
    $("result").hide();
  }
}
    </script>
    <title>Zip Lookup with Scriptaculous Effects</title>
  </head>
  <body>
<h1>Zip Lookup with Scriptaculous Effects</h1>

<%= link_to 'Browse Zipipedia', :action => 'list' %>
<% form_tag 'javascript:void(0)' do %>
  <p><label for="zip_zip">Zip</label><br/>
  <%= text_field 'zip', 'zip', :autocomplete=>"off"  %></p>
<script type="text/javascript">
  new Form.Element.Observer('zip_zip', 0.5, lookupZip);
</script>  
<% end %>
<div id="result"></div>

  </body>
</html>
