{% extends 'events/base.html' %}

{% load events_tags %}
{% load uni_form %}

{% block extra_head %}
<link type="text/css" href="{{MEDIA_URL}}css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="{{MEDIA_URL}}events/css/scrollable-minimal.css" rel="stylesheet" />
<link type="text/css" href="{{MEDIA_URL}}events/css/scrollable-navig.css" rel="stylesheet" />
{% endblock %}

{% block body %}
<noscript>
{% for event in object_list %}
  {{event}}
{% endfor %}
</noscript>
<div style="float:right;">
    <form class="uniForm" id="create-event" method="POST" enctype="multipart/form-data" 
            action="{% url events_all %}">
        <fieldset class="inlineLabels">
            {{search_form|as_uni_form}}
           <div class="form_block">
                <input type="hidden" name="action" value="search" />
                <input type="submit" value="Submit" />
            </div>
        </fieldset>
    </form>
</div>
<div style="float:left;">
<div id="calendar" style="margin:1em 3em 1em 1em;height:240px; width:280px;"></div>
</div>

<div id="directions" style="margin:1em;padding:1em;">
    <p style="clear:right;">
    {% if for_instance %}
        These are the events for {{obj}}.
    {% endif %}

    {% if is_me %}
        These are your events.
    {% endif %}

    {% if all %}
    These are the upcoming events for everyone on the site.<br>
    You can also <a href="{% url events_archive %}">Browse the archive</a>
    {% endif %}

    {% if you_watch %}
        These are the events that you watch.
    {% endif %}

    {% if archive %}
    These are the events in the past.  <a href="{% url events_all %}">See upcoming events</a>
    {% endif %}

    </p>
</div>

<div style="clear:both;"></div>


<div id="scroll-parent">
<div class="navi"></div> 
<a class="prev"></a> 
<div class="scrollable">
<div id="event_list" class="items">
    {% for event in object_list %}
        {% show_event event request.user 15 %}
    {% endfor %}
</div>
</div>
<a class="next"></a>
</div>

{% endblock %}

{% block extra_body %}
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/jquery-ui.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/ui.datepicker.js"></script>
  <script type="text/javascript" src="{{MEDIA_URL}}events/js/jquery.mousewheel.js"></script>

  <script type="text/javascript">
  $(document).ready(function(){
    var datepicker = $("div#calendar").datepicker({
        dateFormat: 'yy/mm/dd',
        beforeShowDay: function(date){
            //console.log(String($.datepicker.formatDate("yy/mm/dd", date)));
            if ($.datepicker.formatDate("yy/mm/dd", date) in { 
		{% for e in object_list %}
		    "{{e.start|date:'Y/m/d'}}" : 1 
			{% if not forloop.last %}, {% endif %}
		{% endfor %} }
	    ){ 
                //console.log(date);
                var a = new Array(true, '');
                return a;
            }else{
                var a = new Array(false, '');
                return a;
            }
        },
        onSelect: function(dateText, inst) {
            var dia = $('<div/>');

            // FIXME how can I un-hardcode the date and use reverse?
            dia.load( '/events/for_day/'+ dateText + '/' + ' #for_day', null, function(){
                var title = "Events for " + dateText;
                dia.dialog({
                    width:650, height:525, maxHeight:1200, dialogClass:'dialog', position:['right','bottom'], 
                    show:'slide', hide: 'slide', title:title, draggable:false, resizeable:false, 

                    open: function() { 
			var swert= 1;
                    },

                    beforeclose: function() { 
                        dia.empty();
                        dia.remove();
                    }

                });
            });

        }
    });

    $("div.scrollable").scrollable({'size':3,});

  });
  </script>


{% endblock %}
