{% 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 "150x80" as thumb %}
                {% if s.url %} <a href="{{ s.url }}" target="_blank"> {% endif %}
                    <img alt="{{ s.name }}" src="{{ thumb.url }}" /> <br />
                {% if s.url %} </a> {% endif %} 
                {% endthumbnail %}
                &nbsp;
            {% 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.videos.all %}
                  <span class="talkIcon">
                    <a href="/static/{{ v.padmavideo.padma_link }}" class="padmaLink" data-video-id="{{v.id}}" target="_blank">
                      <img src="/static/images/VideoIcon.jpg" title="<span class='ttTitle'>Video: {{ talk.title }}.</span><span class='rightclickHelp'>Click to view on page</span>">
                    </a>
                  </span>
                  {% endfor %}
                </span>
              &nbsp;&nbsp;  {{ talk.title }} {% if talk.presenter %} by {{ talk.presenter }} {% endif %}
                {% for v in talk.videos.all %}
                    <div class="padmaVideo" data-pandora-id="{{ v.padmavideo.padma_id }}" data-video-id="{{ v.id }}" data-pandora-in="{{ v.time_in }}" data-pandora-out="{{ v.time_out }}" data-pandora-layers="transcripts" data-pandora-width="480" data-pandora-resolution="240p"></div>

                {% endfor %}
              </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" src="/static/js/innertabs.js"></script>




<script type="text/javascript">
(function() {
    var $video;
    $('.padmaVideo').hide();
/*
    $('.padmaVideo').each(function() {
        $(this).pandoravideo();
    });
*/
    $('a.padmaLink').toggle(function() {
        var padma_id = $(this).attr("data-video-id");
                
        var $video = $('.padmaVideo[data-video-id=' + padma_id + ']');
        if ($video.data("padmaLoaded")) {
            $video.slideDown();
        } else {
            $video.text("Loading video...");
            $video.pandoravideo({
                callback: function(videoObject) {
                    $video.data("padmaLoaded", true);
                }
            });
            $video.slideDown();
        }
    }, function() {
        var index = $(this).index('.padmaLink');
        var $video = $('.padmaVideo').eq(index);
        $video.slideUp();
    });
/*
    $('a.padmaLink').toggle(function(e) {
        e.preventDefault();
        if ($(this).data("$video") == undefined) {
            var videoSrc = $(this).attr("data-video");
            var $video = $('<video>').attr("src", videoSrc).attr("autoplay", "autoplay").attr("controls", "controls").addClass("padmaVideo").css({'maxWidth': '100%', 'marginTop': '6px', 'display': 'block'}).hide();
            $(this).data("$video", $video);
            $(this).parents('li').eq(0).append($video);
            $video.slideDown();
        } else {
            $(this).data("$video").slideDown();
        }
        //console.log("clicked in");
        }, function(e) {
        e.preventDefault();
        //console.log("clicked out");
        $(this).data("$video").get(0).pause();
        $(this).data("$video").slideUp();
           
    });
*/
})();

$('.talkIcon img').tooltip({
    showURL: false,
    extraClass: 'myToolTip'
});
</script>

