<!DOCTYPE html>
<html>
<head>
    <title>TEST RUNNER &mdash; jQuery Plugin for LiveAddress API</title>
    <meta charset="utf-8">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
    <script src="lib/jquery-2_0_2.js"></script>
    <script src="src/jquery.liveaddress.js"></script>
    <script>

        /** CONFIGURE **/

        var htmlKey = "HtmlKey";			// Put your HTML key here
        var debug = true;					// Toggle debug mode

        var testRunnerVersion = "2.0.0";	// The version of this test runner page

        /** PREPARE FORM(S) **/

        $(function () {
            $('form#submitEvent').submit(function () {
                alert("Form submit. Verification should happen first (if necessary), then this should occur.");
            });
        });

        /** INITIALIZE **/

        var liveaddress = $.LiveAddress({
            key: htmlKey,		// An HTML key from your account
            debug: debug,		// Show debug stuff
            target: "US",
            addresses: [{
                address1: '#street10',
                locality: '#locality0',
                administrative_area: '#administrativearea0',
                postal_code: '#postalcode0',
                country: '#country0'
            }, {
                address1: '#street11',
                address2: '#street21',
                locality: '#locality1',
                administrative_area: '#administrativearea1',
                postal_code: '#postalcode1',
                country: '#country1'
            }, {
                freeform: '#freeform2',
                country: '#country2'
            }, {
                freeform: '#freeform3',
                country: '#country3'
            }, {
                freeform: '#freeform4',
                country: '#country4'
            }, {
                address1: '#street15',
                locality: '#locality5',
                administrative_area: '#administrativearea5',
                postal_code: '#postalcode5',
                country: '#country5'
            }, {
                address1: '#street16',
                locality: '#locality6',
                administrative_area: '#administrativearea6',
                postal_code: '#postalcode6',
                country: '#country6'
            }, {
                address1: '#street17'
            }, {
                address1: '#street18',
                locality: '#locality8',
                administrative_area: '#administrativearea8',
                postal_code: '#postalcode8',
                country: '#country8'
            }, {
                address1: '#street19',
                locality: '#locality9',
                administrative_area: '#administrativearea9',
                postal_code: '#postalcode9',
                country: '#country9'
            }, {
                address1: '#street110',
                locality: '#locality10',
                administrative_area: '#administrativearea10',
                postal_code: '#postalcode10',
                country: '#country10'
            }, {
                address1: '#street111',
                locality: '#locality11',
                administrative_area: '#administrativearea11',
                postal_code: '#postalcode11',
                country: '#country11'
            }, {
                address1: '#street112',
                address2: '#street212',
                address3: '#street312',
                locality: '#locality12',
                administrative_area: '#administrativearea12',
                postal_code: '#postalcode12',
                country: '#country12'
            }, {
                address1: '#street113',
                address2: '#street213',
                address3: '#street313',
                address4: '#street413',
                locality: '#locality13',
                administrative_area: '#administrativearea13',
                postal_code: '#postalcode13',
                country: '#country13'
            }, {
                address1: '#street114',
                locality: '#locality14',
                administrative_area: '#administrativearea14',
                postal_code: '#postalcode14',
                country: '#country14'
            }, {
                address1: '#street115',
                locality: '#locality15',
                administrative_area: '#administrativearea15',
                postal_code: '#postalcode15',
                country: '#country15'
            }],
            waitForStreet: true	// Hides autocomplete suggestions until a street is entered
        });
    </script>
    <style>
        body {
            font: 400 16px/1.5em 'Open Sans', sans-serif;
            padding: 15px 50px;
            background: #F3F3F3;
            text-shadow: 0 1px 0 #FFF;
            min-width: 400px;
        }

        a {
            color: #1790db;
        }

        .smarty-container a {
            text-shadow: none;
        }

        h1, h2 {
            text-align: center;
            color: #222;
            text-shadow: none;
        }

        #revision, #version {
            font-size: 14px;
            padding: 0 10px;
            font-weight: 300;
        }

        #version {
            position: absolute;
            right: 0px;
        }

        h1 {
            font: 600 45px/1em 'Open Sans', 'Helvetica Neue', sans-serif;
            margin-bottom: 5px;
        }

        h2 {
            font-weight: normal;
            font-size: 25px;
            line-height: 1em;
        }

        h2 a {
            text-decoration: none;
        }

        form {
            border: 5px solid #AAA;
            width: 350px;
            background: #FFF;
            margin-right: 25px;
            margin-bottom: 25px;
            float: left;
            position: relative;
        }

        form header {
            padding: 10px 15px 0;
            background: #F0F0F0;
        }

        form header p {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        form header h3 {
            font-weight: 300;
            font-size: 27px;
            margin: 0;
            padding-bottom: 10px;
        }

        form table {
            margin: 15px 10px;
            font-size: 14px;
        }

        form table td {
            padding: 5px;
        }

        form input[type=text],
        form textarea {
            padding: 5px 5px 3px;
            font: 12px/1em sans-serif;
            width: 160px;
            outline: none;
        }

        form select {
            outline: none;
        }

        form textarea {
            min-height: 40px;
        }

        form input[type=submit],
        form [type=image],
        form button {
            font-size: 16px;
        }

        .formNumber {
            background: #3d3d3d;
            color: #FFF;
            width: 25px;
            height: 25px;
            padding: 5px;
            text-align: center;
            border-radius: 20px;
            position: absolute;
            top: -15px;
            right: -15px;
            font-size: 14px;
            box-shadow: 0 1px 2px #222;
            text-shadow: none;
        }

        .clear {
            border: none;
            background: none;
            clear: both;
        }

        label {
            cursor: pointer;
        }
    </style>
</head>
<body>

<hgroup>
    <h1>LiveAddress API jQuery Plugin</h1>
    <h2>Test Runner &mdash; by <a href="http://smartystreets.com/" target="_blank">SmartyStreets</a></h2>
    <span id="revision">Revision: <script>document.write(testRunnerVersion);</script> / Debug mode: <script>document.write(debug ? "on" : "off");</script></span>
    <span id="version">jQuery version: <script>document.write($.fn.jquery);</script> / Plugin version: <script>document.write(liveaddress.version);</script></span>
</hgroup>


<form id="happyPath">
    <header>
        <h3>Happy path</h3>
        <p>The simplest, most traditional kind of address form</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street10"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality0"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea0"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode0"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country0"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="street2">
    <header>
        <h3>Street 2 Field</h3>
        <p>Traditional address form containing a street line 2 field</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street11"></td>
        </tr>
        <tr>
            <td>Street line 2:</td>
            <td><input type="text" id="street21"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality1"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea1"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode1"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country1"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="freeform">
    <header>
        <h3>Freeform</h3>
        <p>The entire address in a single field</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="freeform2"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country2"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="twoFreeform">
    <header>
        <h3>Two Freeform addresses</h3>
        <p>One might be for shipping, the other might be for billing</p>
    </header>
    <table>
        <tr>
            <td>Billing address:</td>
            <td><textarea id="freeform3"></textarea></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country3"></td>
        </tr>
        <tr>
            <td>Ship to:</td>
            <td><textarea id="freeform4"></textarea></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country4"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<hr class="clear">

<form id="twoAddresses">
    <header>
        <h3>Two addresses</h3>
        <p>Likely, one would be a billing address, and the other would probably be shipping</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street15"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality5"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea5"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode5"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country5"></td>
        </tr>
        <tr>
            <td colspan="2">
                <hr>
            </td>
        </tr>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street16"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality6"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea6"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode6"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country6"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="incomplete">
    <header>
        <h3>Incomplete address</h3>
        <p>When there's not enough information to verify an address, the fields shouldn't be mapped</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street17"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="onClick">
    <header>
        <h3>onclick Handler</h3>
        <p>Submit button has an "onclick" attribute which should fire if the button is clicked</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street18"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality8"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea8"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode8"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country8"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"
                       onclick="alert('onclick handler; this should happen AFTER address verification')"></td>
        </tr>
    </table>
</form>

<form id="onSubmit" onsubmit="alert('onsubmit handler; this should happen AFTER address verification')">
    <header>
        <h3>onsubmit Handler</h3>
        <p>Form has onsubmit="" attribute which should fire when form is submitted</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street19"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality9"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea9"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode9"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country9"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<hr class="clear">

<form id="twoHandlers"
      onsubmit="alert('onsubmit handler; this should happen AFTER address verification and the onclick handlers')">
    <header>
        <h3>Two handlers</h3>
        <p>First the address should be verified, then the submit button's onclick handlers should fire, then the form's
            onsubmit handlers last</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street110"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality10"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea10"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode10"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country10"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"
                       onclick="alert('onclick handler; this should happen AFTER address verification and BEFORE onsubmit handlers')">
            </td>
        </tr>
    </table>
</form>

<form id="submitEvent">
    <header>
        <h3>Submit event handler</h3>
        <p>Form submit() should fire verification, if necessary, THEN a handler bound to submit, THEN submit the
            form.</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street111"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality11"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea11"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode11"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country11"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="street3">
    <header>
        <h3>Street 3 Field</h3>
        <p>Traditional address form containing street line 2 and line 3 fields</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street112"></td>
        </tr>
        <tr>
            <td>Street line 2:</td>
            <td><input type="text" id="street212"></td>
        </tr>
        <tr>
            <td>Street line 3:</td>
            <td><input type="text" id="street312"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality12"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea12"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode12"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country12"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="street4">
    <header>
        <h3>Street 4 Field</h3>
        <p>Traditional address form containing street line 2, line 3, and line 4 fields</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street113"></td>
        </tr>
        <tr>
            <td>Street line 2:</td>
            <td><input type="text" id="street213"></td>
        </tr>
        <tr>
            <td>Street line 3:</td>
            <td><input type="text" id="street313"></td>
        </tr>
        <tr>
            <td>Street line 4:</td>
            <td><input type="text" id="street413"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality13"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea13"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode13"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country13"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<form id="country">
    <header>
        <h3>Country field</h3>
        <p>Non-US addresses should be allowed to pass thru freely</p>
    </header>
    <table>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street114"></td>
        </tr>
        <tr>
            <td>Locality (City):</td>
            <td><input type="text" id="locality14"></td>
        </tr>
        <tr>
            <td>Administrative Area (State):</td>
            <td><input type="text" id="administrativearea14"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode14"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><select size="1" id="country14" required="required" style="width: 85%;">
                <option selected="selected">Select a Country</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="GB">United Kingdom</option>
            </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>


<form id="stateDropdown">
    <header>
        <h3>State dropdown menu</h3>
        <p>Option text must be a state (full name or two-letter state abbreviation). Also, if the first option is not a
            default value we will insert one for you.</p>
    </header>
    <table>
        <tr>
            <td>Country:</td>
            <td><input type="text" id="country15"></td>
        </tr>
        <tr>
            <td>Street address:</td>
            <td><input type="text" id="street115"></td>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" id="postalcode15"></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" id="locality15"></td>
        </tr>
        <tr>
            <td>State:</td>
            <td>
                <select id="administrativearea15">
                    <option>Select a state</option>
                    <option value="al">AL</option>
                    <option value="ak">AK</option>
                    <option value="az">AZ</option>
                    <option value="ar">AR</option>
                    <option value="ca">CA</option>
                    <option value="co">CO</option>
                    <option value="ct">CT</option>
                    <option value="dc">DC</option>
                    <option value="de">DE</option>
                    <option value="fl">FL</option>
                    <option value="ga">GA</option>
                    <option value="hi">HI</option>
                    <option value="id">ID</option>
                    <option value="il">IL</option>
                    <option value="in">IN</option>
                    <option value="ia">IA</option>
                    <option value="ks">KS</option>
                    <option value="ky">KY</option>
                    <option value="la">LA</option>
                    <option value="me">ME</option>
                    <option value="md">MD</option>
                    <option value="ma">MA</option>
                    <option value="mi">MI</option>
                    <option value="mn">MN</option>
                    <option value="ms">MS</option>
                    <option value="mo">MO</option>
                    <option value="mt">MT</option>
                    <option value="ne">NE</option>
                    <option value="nv">NV</option>
                    <option value="nh">NH</option>
                    <option value="nj">NJ</option>
                    <option value="nm">NM</option>
                    <option value="ny">NY</option>
                    <option value="nc">NC</option>
                    <option value="nd">ND</option>
                    <option value="oh">OH</option>
                    <option value="ok">OK</option>
                    <option value="or">OR</option>
                    <option value="pa">PA</option>
                    <option value="ri">RI</option>
                    <option value="sc">SC</option>
                    <option value="sd">SD</option>
                    <option value="tn">TN</option>
                    <option value="tx">TX</option>
                    <option value="ut">UT</option>
                    <option value="vt">VT</option>
                    <option value="va">VA</option>
                    <option value="wa">WA</option>
                    <option value="wv">WV</option>
                    <option value="wi">WI</option>
                    <option value="wy">WY</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit Form"></td>
        </tr>
    </table>
</form>

<script>
    $(function () {
        // Prevent forms, by default, from leaving the page, so we can keep testing
        $('form').submit(function (event) {
            alert("Default form submit; actual POST prevented");
            return suppress(event);
        });

        // Show the form index number so debug info can be connected to DOM elements visually
        $('form').each(function (idx) {
            $(this).append('<div class="formNumber">' + idx + '</div>');
        });
    });

    // Enable this to prevent accidentally leaving the page
    /*
     window.onbeforeunload = function() {
     return "Page is attempting to leave or reload";
     };
     */

    function suppress(event) {
        if (!event) return false;
        if (event.preventDefault) event.preventDefault();
        if (event.stopPropagation) event.stopPropagation();
        if (event.stopImmediatePropagation) event.stopImmediatePropagation();
        if (event.cancelBubble) event.cancelBubble = true;
        return false;
    }
</script>

</body>
</html>