<script type="text/javascript">
    $(function () {
        var submitted = false;

        $('#contact-form').submit(function () {
            submitted = true;
        });

        $('#contact-hidden-iframe').load(function () {
            if (submitted) {
                $('#contact').modal('hide')
            }
        });

        $('#contact').on('hidden', function () {
            if (submitted) {
                $('#contact-confirm').modal('show');
            }
            submitted = false;
        });

        $('a[data-contact]').click(function(e) {
            e.preventDefault();
            showContactPopup($(this).data('contact'));
        })
    });

    function showContactPopup(subject) {
        if (subject == null) {
            subject = '';
        }
        $('#entry_0').val(subject);
        $('#entry_1').val('');
        $('#contact').modal('show');
    }
</script>
<div id="contact" class="modal hide fade" tabindex="-1" role="dialog">
    <iframe name="contact-hidden-iframe" id="contact-hidden-iframe" class="hide"></iframe>
    <form action="https://docs.google.com/spreadsheet/formResponse?formkey=dHkzR2t2bkl2Q2VHaWNsLTR6OXBLUnc6MQ&amp;ifq"
          method="POST" id="contact-form" class="form-horizontal" target="contact-hidden-iframe">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Contact the Flyway Team</h3>
        </div>
        <div class="modal-body">
            <div class="control-group">
                <label class="control-label" for="entry_2">Your Name *</label>

                <div class="controls">
                    <input type="text" required="required" name="entry.2.single" placeholder="Edward Example"
                           id="entry_2">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="entry_3">Your E-mail address *</label>

                <div class="controls">
                    <input type="email" required="required" name="entry.3.single" placeholder="edward@example.com"
                           id="entry_3">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="entry_0">Subject *</label>

                <div class="controls">
                    <input type="text" required="required" name="entry.0.single" placeholder="Contact Request"
                           id="entry_0">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="entry_1">Message *</label>

                <div class="controls">
                    <textarea required="required" name="entry.1.single" placeholder="Contact Request"
                              id="entry_1" rows="8" cols="75"></textarea>
                </div>
            </div>

            <input type="hidden" name="pageNumber" value="0">
            <input type="hidden" name="backupCache" value="">
            <input type="hidden" name="submit" value="Submit">
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">Send</button>
        </div>
    </form>
</div>
<div id="contact-confirm" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Message sent</h3>
    </div>
    <div class="modal-body">
        <p>Thanks! We'll be in touch shorty.</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </div>
</div>
