$(function () {
  $('#ml-link').click(function() {
    if ($('#signup').length) {
      $('#signup').remove();
      return false; 
    }
    $('#top').append('<div id="signup"> <form action="/umspost.php" method="post"> <input type="hidden" name="AID" value="18916"> <input type="hidden" name="ACTION" value="NEW"> <input type="hidden" name="RED" value="http://www.headlongtheatre.co.uk"> <p><strong>Join our mailing list before 31 May and be entered into a prize draw for tickets for ENRON in the West End.</strong></p> <label for="s-firstname">First name:</label> <input class="text" type="text" name="firstname" id="s-firstname"/> <label for="s-email">Email:</label> <input class="text"  type="text" name="email" id="s-email" /><br /> <input type="submit" value="Sign up" /> </form> <div class="close"> <a href="#signup" onclick="$(\'#signup\').remove(); return false;">Close</a> </div> </div>');
    $('#signup form').validate(
      {
        submitHandler: function(form) {
          var thanks = '<strong>Thank you, you are now subscribed to receive information from Headlong Theatre. You are also entered into a prize draw to win one of 25 pairs of ENRON tickets. Winners will be notified by email on 1 June.</strong><div class="close"><a href="#signup" onclick="$(\'#signup\').remove(); return false;">Close</a></div>';
          var thedata = $('#signup form').serialize();
          $('#signup input').attr('disabled', true);
          $.ajax({ 
            url:$(form).attr('action'), 
            data: thedata, 
            type: 'POST', 
            success: function() { $('#signup').html(thanks); },
            error: function() { $('#signup').html(thanks); }
          });
          return false;
        },
        errorPlacement: function() { },
        rules: {
          firstname: 'required',
          email: {
            required: true,
            email: true
          }

        }
      }
    );
    return false;
  });
});