{% load markup %}
{% load thumbnail %}
<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />

<ul class="tabsInnerRight">
<!--
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    <li><a href="#tab4">Tab4</a></li>
    <li><a href="#tab5">Tab5</a></li>
    <li><a href="#tab6">Tab6</a></li>    
-->
    <li><a href="#synopsis">About</a></li>
    {% ifnotequal sessions|length 0%}
    <li><a href="#talks">Programme</a></li>
    {% endifnotequal %}
    {% ifnotequal documents|length 0%}
    <li><a href="#prereading">Pre-Reading</a></li>
    {% endifnotequal %}
    {% ifnotequal imagegallery|length 0 %}
    <li><a href="#gallery">Gallery</a></li>
    {% endifnotequal %}
    {% ifnotequal participants|length 0 %}
    <li><a href="#participants">Participants</a></li>
    {% endifnotequal %}
    {% comment %}
    {% if meeting.register_form_embed %}
    <li><a href="#register">Register</a></li>
    {% endif %}
    {% endcomment %}
    {% if performances %}
    <li><a href="#performances">Performances</a></li>
    {% endif %}

    <!--    <li><a href="#comments">Comments</a></li> -->
</ul>

<div class="tab_container">
    <div id="synopsis" class="tab_content">
        {{ meeting.intro|markdown }}

        {% if sponsors %}
        Supported by: <br />
            {% for s in sponsors %}
                {% thumbnail s.logo "120x" crop="center" as thumb %}
                <a href="{{ s.url }}" target="_blank" /><img alt="{{ s.name }}" src="{{ thumb.url }}" /></a> 
                {% endthumbnail %}
            {% endfor %}
        {% endif %}
        <!--
        <iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFJqM3hGQWktT0tUbnVPZWhoY1g4N3c6MQ" width="600" height="1969" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
        -->
         <!--Content-->
    </div>

    {% ifnotequal sessions|length 0 %}
     <div id="talks" class="tab_content">
        <!-- <h4 class="tabTitle">Programme</h4> -->
        <div>
          {% for s in sessions %}
          <div class="session">
            <div class="sessionTitle toggleNext">
              {{ s.title }}
            </div>
            <div class="sessionChild">
            <div class="sessionIntro">
              {{ s.intro|markdown }}
            </div>
            {% ifnotequal s.talks|length 0 %}
            <ul class="talks">
            {% for talk in s.talks %}
              <li>
                <span class="talkIcons">
                  {% for d in talk.documents %}
                  <span class="talkIcon">
                    <a href="/static/{{d.file}}" target="_blank">
                      <img src="/static/images/PDFIcon.jpg" title="<span class='ttTitle'>Download: {{d.title}}.</span> <br /><span class='ttIntro'>{{d.intro}}</span>" />
                    </a>
                  </span>
                  {% endfor %}
                  {% for a in talk.audio %}
                  <span class="talkIcon">
                    <a href="/static/{{a.file}}" target="_blank">
                      <img src="/static/images/Audio.jpg" title="<span class='ttTitle'>Listen: {{a.title}}.</span><br /><span class='rightclickHelp'>(Right click and select 'Save Link As' to download)</span>" />
                    </a>
                  </span>
                  {% endfor %}
                  {% for v in talk.video %}
                  <span class="talkIcon">
                    <a href="/static/{{v.file}}">
                      <img src="/static/images/VideoIcon.jpg" title="<span class='ttTitle'>Video: {{ talk.title }}.</span><span class='rightclickHelp'>(Right click and select 'Save Link As' to download)</span>">
                    </a>
                  </span>
                  {% endfor %}
                </span>
              &nbsp;&nbsp;  {{ talk.title }} by {{ talk.presenter }}
              </li>
            {% endfor %}
            </ul>
            {% endifnotequal %}
          </div>
          </div>
          {% endfor %}
        </div>
      </div>
    {% endifnotequal %}

    {% if performances %}
    <div id="performances" class="tab_content">
        {% for p in performances %}
        <div class="performanceTitle toggleNext"><a href="Javascript:return false;">{{ p.title }}</a></div>
        <div class="performanceChild" style="display:none;">
            {% if p.date %}
            <div class="performanceTime">
                Date: {{ p.date|date:"F j, Y" }} <br />
                Time: {{ p.time|time:"H:i A" }}
            </div>
            {% endif %}
            {% if p.performed_by %}
            <div class="performanceGroup">
            Group: {{ p.performed_by }}
            </div>
            {% endif %}
            {% if p.director %}
            <div class="performanceDirector">Directed by: {{ p.director }}</div>
            {% endif %}
            {% if p.language %}
            <div class="performanceLanguage">Language: {{ p.language }}</div>
            {% endif %}   
            {% if p.synopsis %}
            <div class="performanceSynopsis">{{ p.synopsis|markdown }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    {% endif %}
      {% ifnotequal documents|length 0%}
      <div id="prereading" class="tab_content">
        <!-- <h4 class="tabTitle">Reading Materials</h4> -->
        <div>
          {% for d in documents %}
            <div class="objWrapper">
              <div class="readingMatTitle">
                <a href="/static/{{d.file}}">{{d.title}}</a>
              </div>
              <div class="intro">
                {{ d.intro|markdown }}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
      {% endifnotequal %}

      {% ifnotequal imagegallery|length 0 %}
      <div id="gallery" class="tab_content">
       <!-- <h4 class="tabTitle">Gallery</h4> -->
        <div class="thumbsGallery">
          
          {% for i in imagegallery %}
          {% thumbnail i.file "600x500" crop="center" as big %}
          {% thumbnail i.file "164x114" crop="center" as thumb %}
          <img title="{{ i.title }}" src="{{ thumb.url }}" width="164" height="114" data-width="{{ big.width }}" data-height="{{ big.height }}" class="thumbsDetails" data-bigimage="{{ big.url }}" />

<!--
          <a href="{{ big.url }}" title="{{i.title}}" class="thickbox" rel="gall">
            <img src="{{ thumb.url }}" />
          </a>
-->
          {% endthumbnail %}
          {% endthumbnail %}
          {% endfor %}
          </div>
        </div>
      {% endifnotequal %}

      {% ifnotequal participants|length 0 %}
      <div id="participants" class="tab_content">
        <!-- <h4 class="tabTitle">Participant List</h4> -->
        <div>
        {% for p in participants %}
        <div class="pWrapper">
          <div class="pName toggleNext">
            <a href="Javascript:return false;">{{ p.name }}</a> {{ p.title }}
          </div>
          <div class="pBio">
            {% if p.short_bio %}
                {{ p.short_bio|markdown }}
            {% else %}
                No bio available.
            {% endif %}
          </div>
        </div>
        {% endfor %}
        </div>
      </div>
    {% endifnotequal %}

    {% if meeting.register_form_embed %}
    <div id="register" class="tab_content">
        Sorry, registrations are closed. <br /><br />
        {{ meeting.register_form_embed|safe }}
    </div>
    {% endif %}


</div>

<script type="text/javascript">

	//When page loads...
	$(".tab_content").hide(); //Hide all content
//	$("ul.tabsInnerRight li:first").addClass("active").show(); //Activate first tab

	//On Click Event
	$("ul.tabsInnerRight li").click(function() {
		$(".active").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	}); 
//    var queryData = {};
    
    if (queryData.hasOwnProperty("innertab")) {
        if ($('#' + queryData.innertab).length > 0) {
            $('a[href=#' + queryData.innertab + "]").click();
        } else {
            $('ul.tabsInnerRight li:first').click();
        }
    } else {
	    $('ul.tabsInnerRight li:first').click(); //Show first tab content
    }


</script>