{% load markup %}
<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">Talks</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 %}

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

<div class="tab_container">
    <div id="synopsis" class="tab_content">
        {{ meeting.intro|markdown }}      
         <!--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|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 %}

      {% 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">
          {% load thumbnail %}
          {% for i in imagegallery %}
          {% thumbnail i.file "600x500" crop="center" as big %}
          {% thumbnail i.file "100x100" crop="center" as thumb %}
          <img title="" src="{{ thumb.url }}" 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> <br />{{ p.title }}
          </div>
          <div class="pBio">
            {{ p.short_bio|markdown }}
          </div>
        </div>
        {% endfor %}
        </div>
      </div>
    {% endifnotequal %}



</div>

<script type="text/javascript">
$(document).ready(function() {
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabsInnerRight li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	//On Click Event
	$("ul.tabsInnerRight li").click(function() {
		$("ul.tabsInnerRight li").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;
	});
});
</script>