<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
  <title>hCalendar mockups</title>
  <style type="text/css">
    <!--
    @import url("media/style/master.css");
    @import url("media/style/colours.css");
    -->
  </style>
  <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="media/style/hacks_ie.css">
  <![endif]-->

  <script type="text/javascript" src= "media/behaviour/vendor/mootools.v1.1.full.js"></script>
  <script type="text/javascript" src= "media/behaviour/master.js?dev"></script>
</head>

<body>
  <h1>hCalendar mockups</h1>

  <form action="#">
    <p>
      <input type="button" id="loadearmarks" value="Load earmarks">
      <input type="button" id="loadearmarksdiscontinous" value="Load discontinuous earmarks">
      <input type="button" id="loadsessions" value="Load sessions">
    </p>
    <p>
      <input type="button" id="toearmarks" value="Edit earmarks mode">
      <input type="button" id="tosessions" value="View/edit sessions mode">
    </p>
  </form>

  <p>This example loads data from a JSON fixture, generates HTML
  on-the-fly, and lays out the table. In reality we'd want to load
  at least the first version of the table as normal HTML, for
  accessibility's sake.</p>

  <div id="schedule">
    <ul id="schedule-timescale" class="day"><!--{{{-->
      <li>08:00</li>
      <li>09:00</li>
      <li>10:00</li>
      <li>11:00</li>
      <li>12:00</li>
      <li>13:00</li>
      <li>14:00</li>
      <li>15:00</li>
      <li>16:00</li>
      <li>17:00</li>
      <li>18:00</li>
      <li>19:00</li>
    </ul><!--}}}-->

    <div id="schedule-earmarks">
    </div>

    <div id="schedule-sessions">
    </div>

    <div id="schedule-clear">
      &nbsp;
    </div>
  </div>

<!--
vim:fdm=marker:
-->
</body>
</html>
