{% extends 'festival_wireframe.html' %}
{% block title %}
India Theatre Forum - {{data.meeting.title}}
{% endblock %}

{% block extra_head %}
  <link type="text/css" rel="stylesheet" href="/static/css/jquery-ui-1.7.2.custom.css" />
  <link type="text/css" rel="stylesheet" href="/static/css/jquery.tooltip.css" />
  <link type="text/css" rel="stylesheet" href="/static/css/meeting.css" />
  <link type="text/css" rel="stylesheet" href="/static/css/people.css" />
  <link type="text/css" rel="stylesheet" href="/static/css/colorbox.css" />
  <script type="text/javascript" src="/static/js/jquery-ui-1.7.2.custom.min.js"></script>
  <script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
  <script type="text/javascript" src="/static/js/people.js"></script>
  <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
  <script type="text/javascript" src="/static/js/pretty.js"></script>
  <script type="text/javascript">

function commentFormError(err) {
  $('#comment_form_errors').html(err);
  }

$(document).ready(function() {
  $('.comment_date').each(function() {
    var seconds = parseInt($.trim($(this).text()));
    var datestring = new Date(seconds * 1000).toString();
    var pretty_date = prettyDate(datestring);
    $(this).text(pretty_date);
    });
//  if ($.support.opacity) $('.tabText').jScrollPane();  
  $('#tabs').tabs();
  $('.talkIcon img').tooltip({
    showURL: false,
    extraClass: 'myToolTip'
    });
  $('.thickbox').colorbox();
  $('.sessionTitle').toggle(function() {
    $(this).next().show("slow");
    }, function() {
    $(this).next().hide("slow");
    });
  $('#comment_form').submit(function(e) {
    var $that = $(this);
    e.preventDefault();
    var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    var emailField = $('#id_email');
    if (!filter.test(emailField.val())) {
      var err = "Please enter a valid email address. We will never display it publicly, sell it, or use it to send you unsolicited email. Thanks.";
      commentFormError(err);
      return false;
      }
    if ($.trim($("#id_comment").val()) == '') {
      var err = "You cannot leave the comment field blank!"
      commentFormError(err);
      return false;
      }
    if ($.trim($("#id_name").val()) == '') {
      var err = "Write something for your name?"
      commentFormError(err);
      return false;
      }
    var data = $that.serialize();
    $('#commentSubmit').attr("disabled", "disabled");
    $.getJSON("/itf/meeting/comment/", data, function(json) {
      if (json.status == 0) {
        $('#comment_form_errors').html(json.msg);
        $('#commentSubmit').removeAttr("disabled");
        } else {
        var d = {
          'cname': $('#id_name').val(),
          'cdate': prettyDate(new Date().toString()),
          'ccomment': $('#id_comment').val()         
          }
        $('#comment_form_errors').html('');
        var html = tmpl("tmpl_comment", d);
        $('#commentList').append(html);
        var jqForm = $('#commentForm');
        jqForm.hide();
        jqForm.html("Thanks for the comment!");
        jqForm.slideDown("slow");
        jqForm.animate({'fontSize': '36px'}, 2000);
        jqForm.fadeOut(2000);
        }      
      });
    });
//  $('.cbIframe').colorbox({width: '530px', height: '450px', iframe: true});
  });


/*
John Resig's templating utility - http://ejohn.org/blog/javascript-micro-templating/
Updated code to resolve issue with single quotes from: http://www.west-wind.com/Weblog/posts/509108.aspx
define templates inside <script type="text/html" id="foo"> tags
get html of template with tmpl("foo", json)
*/
(function() {
    var cache = {};

    this.tmpl = function tmpl(str, data) {
        // Figure out if we're getting a template, or if we need to
        // load the template - and be sure to cache the result.
        var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
str.replace(/[\r\t\n]/g, " ")
   .replace(/'(?=[^%]*%>)/g,"\t")
   .split("'").join("\\'")
   .split("\t").join("'")
   .replace(/<%=(.+?)%>/g, "',$1,'")
   .split("<%").join("');")
   .split("%>").join("p.push('")
   + "');}return p.join('');");

        // Provide some basic currying to the user
        return data ? fn(data) : fn;
    };
})();


  </script>
{% endblock %}


{% block centerCol %}
  <script type="text/html" id="tmpl_comment">
    <div class="comment">
        <div class="comment_meta">
          posted by <span class="comment_name"><%= cname %></span> <span class="comment_date"><%= cdate %></span>:
        </div>
        <div class="comment_comment">
      <%= ccomment %>
        </div>
      </div>
  </script>
  <div>
    <div id="tabs">
      <ul>
        <li><a href="#synopsis">Synopsis</a></li>
        {% ifnotequal data.sessions|length 0%}
        <li><a href="#talks">Talks</a></li>
        {% endifnotequal %}
        {% ifnotequal data.documents|length 0%}
        <li><a href="#prereading">Pre-Reading</a></li>
        {% endifnotequal %}
        {% ifnotequal data.imagegallery|length 0 %}
        <li><a href="#gallery">Gallery</a></li>
        {% endifnotequal %}
        {% ifnotequal data.participants|length 0 %}
        <li><a href="#participants">Participants</a></li>
        {% endifnotequal %}
        <li><a href="#comments">Comments</a></li>
      </ul>
      <div id="synopsis">
        <h4 class="tabTitle">{{data.meeting.title}}</h4>
        <div class="tabText">
          {{data.meeting.intro}}
        </div>
      </div>
      {% ifnotequal data.sessions|length 0 %}
      <div id="talks">
        <h4 class="tabTitle">Programme</h4>
        <div class="tabText">
          {% for s in data.sessions %}
          <div class="session">
            <div class="sessionTitle">
              {{ s.title|title }}
            </div>
            <div class="sessionChild">
            <div class="sessionIntro">
              {{ s.intro|linebreaksbr }}
            </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 data.documents|length 0%}
      <div id="prereading">
        <h4 class="tabTitle">Reading Materials</h4>
        <div class="tabText">
          {% for d in data.documents %}
            <div class="objWrapper">
              <div class="readingMatTitle">
                <a href="/static/{{d.file}}">{{d.title}}</a>
              </div>
              <div class="intro">
                {{ d.intro }}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
      {% endifnotequal %}
      {% ifnotequal data.imagegallery|length 0 %}
      <div id="gallery">
       <h4 class="tabTitle">Gallery</h4>
        <div class="tabText">
          {% load thumbnail %}
          {% for i in data.imagegallery %}
          <a href="{% thumbnail i.file 600x500 quality=60 %}" title="{{i.title}}" class="thickbox" rel="gall">
            <img src="{% thumbnail i.file 100x100 autocrop crop %}" />
          </a>
          {% endfor %}
          </div>
        </div>
      {% endifnotequal %}
      {% ifnotequal data.participants|length 0 %}
      <div id="participants">
        <h4 class="tabTitle">Participant List</h4>
        <div class="tabText">
        {% for p in data.participants %}
        <div class="pWrapper">
          <div class="pName">
            <a href="#">{{ p.name }}</a>
          </div>
          <div class="pBio">
            {{ p.short_bio }}
          </div>
        </div>
        {% endfor %}
        </div>
      </div>
      {% endifnotequal %}
      <div id="comments">
        <h4 class="tabTitle">Comments</h4>
        <div class="tabText">
        {% ifequal data.comments|length 0 %}
          No comments yet.. Be the first!
        {% else %}
          <div id="commentList">
          {% for c in data.comments %}
            <div class="comment">
              <div class="comment_meta">
                posted by <span class="comment_name">{{ c.name }}</span> <span class="comment_date">{{ c.epoch_date }}</span>:
              </div>
              <div class="comment_comment">
            {{ c.comment }}
              </div>
            </div>
          {% endfor %}
         </div>
        {% endifequal %}
          <div id="commentForm">
            <p>Add a Comment:</p>
            <form id="comment_form" action="/itf/meeting/comment/" method="POST">
              <div id="comment_form_errors"></div>
              {{comment_form.as_p}}

              <div class="captchaWrap">
                <p>Please answer this question to prove you are human (sorry): </p>
                <p><span class="captchaQ">{{ captcha.question }}</span> <input id="captcha" name="captcha" type="text" /></p>
              </div>
              <input name="captcha_id" id="captcha_id" value="{{captcha.id}}" type="hidden" />
              <input name="meeting_id" id="meeting_id" value="{{id}}" type="hidden" />
              <input name="parent_id" id="parent_id" value="0" type="hidden" />
              
              <input type="submit" id="commentSubmit" value="Submit" />  
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}