<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>with_js</title>
    <script src="/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/test.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body id="with_js">
    <h1>FooBar</h1>

    <p id="change">This is text</p>
    <div id="drag">
      <p>This is a draggable element.</p>
    </div>
    <div id="drop">
      <p>It should be dropped here.</p>
    </div>

    <p><a href="#" id="clickable">Click me</a></p>
    <p><a href="#" id="slow-click">Slowly</a></p>

    <p>
      <select id="waiter">
        <option>Foo</option>
        <option>My Waiting Option</option>
      </select>
    </p>

    <p>
      <input type="text" name="with_focus_event" value="" id="with_focus_event"/>
    </p>

    <p>
      <input type="text" name="with_change_event" value="default value" id="with_change_event"/>
    </p>

    <p>
      <input type="checkbox" id="checkbox_with_event"/>
    </p>

    <p>
      <input type="submit" id="fire_ajax_request" value="Fire Ajax Request"/>
    </p>

    <p>
      <a id="reload-link" href="#">Reload!</a>
      <em>this won't change</em>
      <div id="reload-me"><em>waiting to be reloaded</em></div>
    </p>

    <p>
      <a id="reload-list" href="#">Fetch new list!</a>
      <ul id="the-list">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </p>

    <p>
      <a href="#" id="change-title">Change title</a>
    </p>

    <script type="text/javascript">
      // a javascript comment
      var aVar = 123;
    </script>
  </body>
</html>

