{% extends "events/base-wide.html" %}
{% load event_tags %}
{% load tagging_tags %}
{% load base_tags %}
{% load category_tags %}
{% load i18n %}

{% block title %}{{ month_names.1 }} {{ year }} Calendar {% endblock %}
{% block meta_description %} {% endblock %}
{% block meta_keywords %} {% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="alternate" type="application/rss+xml" title="Latest Events" href="{% url event.feed %}" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/events.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/tipsy.css">
<link type="text/css" href="{{ STATIC_URL }}css/jquery_ui_all_custom/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
{% endblock %}

{% block body %}

<div class="month-view">

	{% event_nav user %}

	<div class="month-names">
		<div class="month-name previous"><a href="{{ prev_month_url }}"> &laquo;</a></div>
		<div class="month-name current"><a href="">{{ month_names.1 }} {{ year }}</a></div>
		<div class="month-name next"><a href="{{ next_month_url }}">&raquo;</a></div>
		<div style="clear:both;"></div>
	</div>
	<div style="clear:both;"></div>

	<div class="calendar-wrap">

	<div class="month-wrap">

		<div class="month-labels">
		{% for weekday in weekdays %}
			<div class="weekday">{{ weekday }}</div>
		{% endfor %}
		<div style="clear:both;"></div>
		</div>
	
		<div class="month-grid">
		{% for week in cal %}
			{% for day in week %}

				<div class="day{% if today.date == day %} today{% endif %}">
					<div class="date-numeral"><a href="{% url event.day day.year day.month day.day %}">{{ day.day }}</a></div>

					{% event_list day type 'single_day' as events %}
					
					{% if events %}
						{% for event in events|slice:"2" %}
							<div class="event-item" title="{{ event.type }}: {{ event }}" 
								style="color:{{ event.type.fg_color }}; background-color:{{ event.type.bg_color }}">
                                {% if event.priority %}
                                <div class="event-priority"></div>
                                {% endif %}
								<a href="{{ event.get_absolute_url }}" 
									class="time-stamp">{{ event.start_dt|date:"f a" }}</a>
								<a href="{{ event.get_absolute_url }}" 
									class="event-title">{{ event.title|slice:":15" }}&nbsp;...</a>
								<a class='click-mask' href="{{ event.get_absolute_url }}"></a>
							</div>
						{% endfor %}
	
						{% if events|length|add:"-2" > 0 %}
							<div class="more-events">
								<a href="{% url event.day day.year day.month day.day %}">{% blocktrans with events|length|add:"-2" as events_more %}+{{ events_more }} more{% endblocktrans %}</a>
							</div>
						{% endif %}
	
	
					{% endif %}
					
				</div>
			{% endfor %}	
		{% endfor %}
		<div style="clear:both;"></div>
		</div> <!-- END month-grid -->
	</div> <!-- END month-wrap -->

	{# TODO: If there are no types, don't show sidebar #}

	<div class="side-bar">

		<div class="header">{% trans "Filter by Type" %}</div>
		<div class="types">
			<div class="type all-types"><a href="{% url event.month year month %}">{% trans "All Events" %}</a></div>
			{% with type as curr_type %}
			{% for type in types %}

				{% if curr_type == type.slug %}

				<div class="type">
					<a style="color:{{ type.fg_color }}; background-color:{{ type.bg_color }}; border-color:{{ type.border_color }};" 
					href="{% url event.month year month type.slug %}?latest">{{ type }}</a>
				</div>
				{% else %}
				<div class="type">
					<a style="color:{{ type.fg_color }}; background-color:{{ type.bg_color }}; border-color:{{ type.bg_color }};" 
					href="{% url event.month year month type.slug %}?latest">{{ type }}</a>
				</div>
				{% endif %}
			{% endfor %}
			{% endwith %}

		</div>
	</div>

	<div style="clear:both;"></div>
	</div> <!-- END calendar-wrap -->

</div>

{% endblock %}

{% block extra_body %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tipsy.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery_ui_all_custom/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
	$('.event-item').tipsy({
		gravity: 's', 
		live: true 
	});
	
	// Dialog			
	$('#event_export_dialog').dialog({
		autoOpen: false,
		width: 600,
		buttons: { 
			"Close": function() { 
				$(this).dialog("close"); 
			} 
		}
	});
	// Dialog Link
	$('#event_export_link').click(function(){
		$('#event_export_dialog').show();
        $('#event_export_dialog').dialog('open'); 
 
		return false;
	});
</script>
{% endblock %}
