{% extends "schedule/base.html" %}
{% load staticfiles %}

{% block extra_head %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "schedule/js/jquery.timePicker.js" %}"></script>
    <script type="text/javascript">
    $(function() {
        $("#id_start_0").datepicker({dateFormat: $.datepicker.ATOM});
        $("#id_end_0").datepicker({dateFormat: $.datepicker.ATOM});
        $("#id_start_1").timePicker();
        $("#id_end_1").timePicker();
        $("#id_end_recurring_period").datepicker({dateFormat: $.datepicker.ATOM});
        var oldTime = $.timePicker("#id_start_1").getTime();
        $("#id_start_1").change(function() {
          if ($("#id_end_1").val()) { // Only update when second input has a value.
          // Calculate duration.
          var duration = ($.timePicker("#id_end_1").getTime() - oldTime);
          var time = $.timePicker("#id_start_1").getTime();
          // Calculate and update the time in the second input.
          $.timePicker("#id_end_1").setTime(new Date(new Date(time.getTime() + duration)));
          oldTime = time;
          }
        });
        // Validate.
        // TODO this should validate date AND time
        $("#id_end_1").change(function() {
          if($.timePicker("#id_start_1").getTime() > $.timePicker(this).getTime()) {
          $(this).addClass("error");
          }
          else {
          $(this).removeClass("error");
          }
        });
    });
    </script>
{% endblock %}

