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


{% block title %}{{ block.super }}{{ event.get_title }}{% endblock %}
{% block meta_description %}{{ event.get_description }}{% endblock %}
{% block meta_keywords %}{{ event.get_keywords }}{% endblock %}
{% block meta_canonical_url %}<link rel="canonical" href="{{ event.get_canonical_url }}" />{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ STATIC_URL }}css/events.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/tipsy.css">
{% endblock %}

{% block body %}

{% has_perm user events.change_event as can_edit %}

<div class="t">
    {% event_nav user event %}
    <div class="event-wrap">
		<div class="info">
	        <h1>{{ event.title }}</h1>

            <ul class="tabs">
                <li class="dropdown active">
                    <a id="event_detail_tab" href="#">{% trans "Event Details" %}</a>
                </li>
                <li class="dropdown">
                    <a id="event_files_tab" href="#">{% trans "Event Files" %}</a>
                </li>
            </ul>

            <!-- Event Details -->
            <div class="details-wrap">
                {% for speaker in speakers|slice:"1" %}
                <div class="speaker-wrap">
                    {% if speaker.get_photo %}
                    <div class="speaker-photo">
                        <img alt="Speaker: {{ speaker.name }}" src="{% url file speaker.get_photo.pk %}"  width="100" />
                    </div>
                    {% endif %}
                    <div class="speaker">
                        <strong>{% trans "Speaker" %}</strong> {{ speaker.name }}
                    </div>
                    {% if speaker.description|striptags|wordcount > 50 %}
                    <div class="speaker-desc-short">
                        {{ speaker.description|striptags|safe|truncatewords:"50" }}
                    </div>
                    <div class="speaker-desc-long">
                        {{ speaker.description|safe|urlize|linebreaks }}
                    </div>
                    {% else %}
                    <div class="speaker-desc-short">
                        {{ speaker.description|safe|urlize|linebreaks }}
                    </div>                    
                    {% endif %}
                    {% if speaker.description|striptags|wordcount > 50 %}
                    <a class="speaker-desc-toggle" href="#">{% trans "Full Description" %}</a>
                    {% endif %}
                    <div style="clear:both;"></div>
                </div>              
                {% endfor %}
                {% if speakers|length > 1 %}
                <a href="{% url event.speakers event.pk %}">{% trans "Speaker info" %}</a>
                {% endif %}
	        
                <!-- event description -->
                <div class="content">
                    {% if event.image %}
                    <div class="photo">
                        <img src="{% image_url event.image size=300x300 crop=True quality=88 %}" title="{{ event.title }}" />
                    </div>
                    {% endif %}
                    <div class="event-desc">{{ event.description|safe }}</div>
                </div>

                {% if organizer.name %}
                <div class="organizer-wrap">
                    <div class="organizer">
                        <strong>{% trans "Organizer" %}</strong> {{ organizer.name }}
                    </div>
                    {% if organizer.description|striptags|wordcount > 50 %}
                    <div class="organizer-desc-short">
                        {{ organizer.description|striptags|truncatewords:"50" }}
                    </div>
                    <div class="organizer-desc-long">
                        {{ organizer.description|safe|urlize|linebreaks }}
                    </div>
                    {% else %}
                        <div class="organizer-desc-short">
                            {{ organizer.description|safe|urlize|linebreaks }}
                        </div>                    
                    {% endif %}
                    {% if organizer.description|striptags|wordcount > 50 %}
                    <a class="organizer-desc-toggle" href="#">{% trans "Full Description" %}</a>
                    {% endif %}
                </div>
                {% endif %}
            
                {% if addons %}
                    <hr/>
                    <h2 class="addons-title">{% trans "Addons" %}</h2>
                    <div class="addons-wrap">
                        {% for addon in addons %}
                            <h2>{{ addon.title }}</h2>
                            <table class="addon-detail">
                            <tr><td><strong>Price</strong></td><td>{{ SITE_GLOBAL_CURRENCYSYMBOL }}{{ addon.price }}</td></tr>
                            {% if addon.options.all %}
                            <tr>
                                <td><strong>Options</strong></td>
                                <td>
                                {% for op in addon.options.all %}
                                {{ op.title }}{% if not forloop.last%}, {% endif %}
                                {% endfor %}
                                </td>
                            </tr>
                            {% endif %}
                            </table>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div class="files-wrap">
                {% if event_files %}
                    <h3>{% trans "Event Files" %}</h3>
                    {% for file in event_files %}
                        {% file_detail file %}
                    {% endfor %}
                {% endif %}
                {% if speaker_files %}
                    <h3>{% trans "Speaker Files" %}</h3>
                    {% for file in speaker_files %}
                        {% file_detail file %}
                    {% endfor %}
                {% endif %}
                {% if organizer_files %}
                    <h3>{% trans "Organizer Files" %}</h3>
                    {% for file in organizer_files %}
                        {% file_detail file %}
                    {% endfor %}
                {% endif %}
                {% if place_files %}
                    <h3>{% trans "Location Files" %}</h3>
                    {% for file in place_files %}
                        {% file_detail file %}
                    {% endfor %}
                {% endif %}
            </div>
		</div> <!-- end info -->

		<div class="vitals">
		{% if event.external_url %}
		<div class="external-link">
		<h4><a href="{{ event.external_url }}" target="_blank">View this event's webpage &raquo;</a></h4>
		</div>
		{% endif %}
            <div class="time-period">
                <h4 class="vital-header">{% trans "When?" %}</h4>

                {% for span in event.date_spans %}

                    {% if span.same_date %}
                        <div class="line">{{ span.start_dt|date:"D, M. j, Y" }}</div>{% if not forloop.last %} and {% endif %}
                    {% else %}
                        <div class="line">{{ span.start_dt|date:"D, M. j" }} - {{ span.end_dt|date:"D, M. j, Y" }}</div>{% if not forloop.last %} and {% endif %}
                    {% endif %}

                {% endfor %}

                <div class="line">{{ event.start_dt|date:"P" }} - {{ event.end_dt|date:"P" }} {{ event.timezone }}</div>
            </div>

            {% if event.registration_configuration.enabled %}
            <div class="pricing">
                <h4 class="vital-header">How Much?</h4>
                {% registration_pricing_and_button event request.user %}
            </div>
            {% endif %}

			<div class="place">
                <h4 class="vital-header">{% trans "Where?" %}</h4>
				<div><strong>{{ event.place.name }}</strong></div>
				<div class="line">{{ event.place.address }}</div>
				<div class="line">{{ event.place.city_state|join:", "}} {{ event.place.zip }}</div>
                <div class="line">{{ event.place.country }}</div>
                {% if event.place.description|striptags|wordcount > 50 %}
                    <div class="line event-place-desc-short">
                        {{ event.place.description|striptags|truncatewords:"50" }}
                    </div>
                    <div class="line event-place-desc-long">
                        {{ event.place.description|safe|urlize|linebreaks }}
                    </div>
                {% else %}
                        <div class="line event-place-desc-short">
                            {{ event.place.description|safe|urlize|linebreaks }}
                        </div>        
                {% endif %}
                {% if event.place.description|striptags|wordcount > 50 %}
                    <a class="line event-place-desc-toggle" href="#">{% trans "Full Description" %}</a> 
                {% endif %}
			</div>

			<div class="hr"></div>

            {% if event.place.address and event.place.city_state %}
            <div class="map">
                <iframe width="250" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q={{ event.place.address|urlencode }}+{{ event.place.city_state|join:", "}}+{{ event.place.zip }}&amp;ie=UTF8&amp;hl=en&amp;view=map&amp;hq=&amp;hnear={{ event.place.address|urlencode }}+{{ event.place.city_state|join:", "}}+{{ event.place.zip }}&amp;z=12&amp;iwloc=near&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?q={{ event.place.address|urlencode }}+{{ event.place.city_state|join:", "}}+{{ event.place.zip }}&amp;ie=UTF8&amp;hl=en&amp;view=map&amp;hq=&amp;hnear={{ event.place.address|urlencode }}+{{ event.place.city_state|join:", "}}+{{ event.place.zip }}&amp;z=14&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
            </div>
            {% endif %}
            
            {% url event event.pk as the_url %}
            <p>{% fb_like_button_iframe the_url %}</p>
		</div> <!-- end vitals -->

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

</div>

{% endblock %}

{% block extra_body %}
    {{ block.super }}
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tipsy.js"></script>
    <script type="text/javascript">
		$(document).ready(function(){

            $('td.price-disabled').tipsy({
                gravity: 'e', 
                live: true 
            });

            $('.files-wrap').hide();
            $('a#event_detail_tab').click(function(){
                var _this = $(this);
                $('.event-wrap .tabs .dropdown').removeClass('active');
                _this.parent().addClass('active');
                $('.details-wrap').show();
                $('.files-wrap').hide();
                return false;
            });
            $('a#event_files_tab').click(function(){
                var _this = $(this);
                $('.event-wrap .tabs .dropdown').removeClass('active');
                _this.parent().addClass('active');
                $('.details-wrap').hide();
                $('.files-wrap').show();
                return false;
            });

            // speaker description toggle
            $('a.speaker-desc-toggle').click(function() {
                var _this = $(this);
                var speaker_wrap = _this.parents('.speaker-wrap');

                _this.hide();
                speaker_wrap.find('div.speaker-desc-short').hide();
                speaker_wrap.find('div.speaker-desc-long').show();
                return false;
            });

            // organizer description toggle
            $('a.organizer-desc-toggle').click(function() {
                var _this = $(this);
                var speaker_wrap = _this.parents('.organizer-wrap');

                _this.hide();
                speaker_wrap.find('div.organizer-desc-short').hide();
                speaker_wrap.find('div.organizer-desc-long').show();
                return false;
            });

            // event description toggle
            $('a.event-place-desc-toggle').click(function() {
                var _this = $(this);
                var speaker_wrap = _this.parents('.place');

                _this.hide();
                speaker_wrap.find('div.event-place-desc-short').hide();
                speaker_wrap.find('div.event-place-desc-long').show();
                return false;
            });

			// 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 %}
