{% extends 'noel/base.html' %}

{% block title %} ITF: {{ title }} {% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/noel/inner.css" type="text/css" />
<link rel="stylesheet" href="/static/css/noel/inner-details.css" type="text/css" />
<script type="text/javascript" src="/static/js/history/history.js"></script>
<script type="text/javascript" src="/static/js/history/amplify.store.js"></script>
<script type="text/javascript" src="/static/js/history/history.html4.js"></script>
<script type="text/javascript" src="/static/js/history/history.adapter.jquery.js"></script>
<script type="text/javascript" src="/static/js/query_parser.js"></script>
<script type="text/javascript" src="/static/js/insidepage.js"></script>
{% endblock %}


{% block content %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="lightboxPanel">
    <div id="lightboxContent">

    </div>
    <div id="lightboxClose">
    <img src="/static/images/noel/close.jpg" width="12" height="16"  id="closeImg" alt="close" /></div>
</div>
<div id="lightbox"></div>

<div id="moduleAbout" class="hidden">
	<div class="lightboxStyling">
    	<h1>{{ title }}</h1>
       <!-- <h2>Dummy sub-title</h2> -->

	        <p> {{ about|linebreaksbr }} </p>
        <!--
        <div class="lightboxImg">
            <img src="/static/images/noel/events-tab.jpg" width="230" height="233" alt="close" />
            <p class="imgCaptionLightbox">Some Image Caption here</p>
        </div>
        <p>Some text here</p>
        -->
    </div>
</div>

<div id="moduleAdd" class="hidden">
    <form id="addForm" action="" method="POST" data-id="{{ default_tab.id }}">
    <table>
    {{ add_form.as_table }}
    <tr>
      <td>
      
      </td>
      <td>
      	<input type="submit" />
      </td>
    </tr>
    </table>
    </form>
</div>

<div id="centerInner">
	<!--<div id="woodPng">
	</div>-->  
   	<div id="shadow">
   	</div>
    
  <div class="centerInnerContent">
    
    <div id="leftColumn">
        {% load itftags %}    	
        <h3 id="topText" class="tabHeader">{{ title|format_title|safe }}</h3>
          
        <div id="searchInnerDiv">
            <!--<img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" class="searchInner">-->	
            <img src="/static/images/noel/about.png" width="22" height="22" id="aboutBtn" alt="About" title="About">
            {% if has_add %}
                        <img src="/static/images/noel/add.png" width="28" height="20" id="addBtn" alt="About" title="Add">
            
            {% endif %}
            {% ifequal title "Best Practices" %} <!-- FIXME!!! -->
                <a target="_blank" href="/static/upload/bestpractices_downloads/INDIA_THEATRE_FORUM_BOOK-rev-4-4-11.pdf">
                    <img src="/static/images/noel/Download-Icon.gif" width="29" height="20" id="downloadBtn" alt="Download" title="Download">
                </a>
            {% endifequal %}
            <!--
            <img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" class="searchInner">
            <img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" class="searchInner">
            -->
        </div>
        
        <form action="" method="get">
            <input type="text" placeholder="search" name="field" class="searchInnerField"/>
        </form>
		
        <div id="tabsInner">
	  		<ul id="selection">
<!--
				<li class="tabCategory innerSelected">Info</li>
				<li class="tabCategory innerSelected">Stories</li>
            	<li class="tabCategory innerSelected">FAQs</li>
            	<li class="tabCategory innerSelected">Guidelines</li>
-->
                <li class="tabCategory defaultTab" data-id="{{ default_tab.id }}" id="tab_{{default_tab.slug}}" data-slug="{{ default_tab.slug }}">{{ default_tab.title }}</li>
                {% for t in tabs %}
                    <li class="tabCategory" data-id="{{ t.id }}" id="tab_{{ t.slug }}" data-slug="{{ t.slug }}">{{ t.title }}</li>
                {% endfor %}
	  		</ul>
            
	    	<div id="contentTabsInner">
                <div id="tabText_{{default_tab.id}}" class="tabText displayedTab">
	  	            {{ default_tab.text }}
                </div>
                {% for t in tabs %}
                    <div id="tabText_{{t.id}}" class="tabText">
	      	            {{ t.text }}
                    </div>          
                {% endfor %}
                    <!--is this select okay, my forms are a bit weak, do we need action and method here?--><form class="selectMenu" id="listForm" method="post" action="">
                        
                        <span>Sort:</span><!--Can i avoid a p tag here to keep it inline -->
                        <select id="orderBySelect">Select
                            {% for s in default_sorts %}
                                <option value="{{s.operator}}{{s.field_name}}">{{s.friendly_name}}</option>
                            {% endfor %}                            
<!--
                            <option value="atoz">A-Z</option>
                            <option value="ztoa">Z-A</option>
                            <option value="title">Title</option>
                            <option value="mostpopular">Most popular</option>
-->
                        </select>
                        
                        <input id="page_no" name="page_no" type="hidden" value="1" />
                        <input id="object_id" name="object_id" type="hidden" value="" />
                        <input type="text" placeholder="Filter by keyword" id="searchList" name="field" class="searchListField"/>
                        <!--<img src="/static/images/noel/search-icon.png" width="18" height="14" alt="search-icon" id="searchListIcon">-->                    
                        
                        <span id="pageDisplay" style="display:none;">Page <span id="currPageNo">1</span> of <span id="totalPages">10</span></span>
                        </form>
                        
                    
            </div>
	    </div>

        	<div id="triangleUp">prev</div>
      		<div id="triangleDown">next</div>
            
            <div class="clear"></div>
                
     
        <div id="listLeft">
      		<ul>
                <li id="loadingList">Loading...</li>
                <!--
                {% for l in default_list.items %}
                    <li class="tabListItem"><a href="{{ l.url }}" data-id="{{ l.id }}""><span>{{ l.title }}</span></a></li>
                {% endfor %}
                -->
        		<!-- <li><a href=""><span>The Mystery of vanishing rights<span></a></li> -->
  	        </ul>
        
        </div>
        <div id="pagination" style="display:none;"> <!-- Please, please let me display pagination info -->
            <span id="currPageNo">1</span>
            <span id="totalPages"></span>
        </div>

    </div>
    
    <div id="rightColumn">
 
   		<div id="topRight">
            <img src="/static/images/noel/pin.png" width="46" height="58" alt="pin" id="pin">
 
    		<div id="imageLeft">
                <div id="imageInside">

                </div>
 
        	</div>
      		<p id="textRight">

        	</p>
         
        	<div class="socialIcons">
                
                    <img src="/static/images/noel/tweet.png" width="18" height="18" alt="twitter" class="iconImages"> 
                    <!--<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="http://twitter.com/#!/indtheatreforum">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>-->     	
                
<!-- <div id="fb_like" class="fb-like" data-href="http://theatreforum.in/m/bestpractices/?tab=cases&amp;object_id=16" data-send="false" data-width="90" data-show-faces="false" data-layout="button_count"></div> -->
                   <!-- <img src="/static/images/noel/facebook.png" width="18" height="18" alt="facebook" class="iconImages"> -->  
   <!-- <iframe src="http://www.facebook.com/plugins/like.php?href=www.theatreforum.in&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>-->
                
                    <a href="" id="permalinkBtn" title="Permalink"><img src="/static/images/noel/download.jpg" width="18" height="18" alt="permalink" title="Permalink" class="iconImages"></a>
          	</div>
    	</div>
        
    <div id="bottomRight">
        Loading...    
        <!--
    	<p><span class="sectionTitle">Story 1:</span> A well known theatre group had auditions for casting lead characters in their play for which over 150 actors auditioned. A television film director happened to see the recording of the auditions and obtained a copy. Two months later, a few actors who had auditioned were horrified to see themselves in a television comedy show. Snippets of the recording had obviously been used!</p><br/> 

		<p><span class="sectionTitle">Actors:</span> Not on! If you like our acting, you hire us! Not use our improvisations for another purpose and that too by someone else! We'll sue the television show producer and the theatre group.</p><br/>   

		<p><span class="sectionTitle">Story 2:</span> Neha Bhasin, a play back singer went for an audition. Months later, she heard the piece on a radio channel and realized that it had been used without her permission. She also found that her name was mentioned as the background vocalist and the producer of the movie was credited as the lead vocalist.</p><br/> 

		<p><span class="sectionTitle">Neha Bhasin:</span> That's my voice…that's my name on the CD but I'm not the background vocalist!!! I'll sue the film producer! The music director: Hmmm not so! We didn't even want to use your voice. It was a recording mistake! The Court: A costly mistake. You've used her voice, now pay up royalty! And recall all the CDs with her voice.</p><br/>

		<p><span class="sectionTitle">Law:</span> Do actors have special rights? Under the Indian Copyright law, actors, singers, musicians, dancers, et al are called performers</p><br/>
                
        <p><span class="sectionTitle">Actors:</span> Not on! If you like our acting, you hire us! Not use our improvisations for another purpose and that too by someone else! We'll sue the television show producer and the theatre group.</p><br/>   

		<p><span class="sectionTitle">Story 2:</span> Neha Bhasin, a play back singer went for an audition. Months later, she heard the piece on a radio channel and realized that it had been used without her permission. She also found that her name was mentioned as the background vocalist and the producer of the movie was credited as the lead vocalist.</p><br/> 

		<p><span class="sectionTitle">Neha Bhasin:</span> That's my voice…that's my name on the CD but I'm not the background vocalist!!! I'll sue the film producer! The music director: Hmmm not so! We didn't even want to use your voice. It was a recording mistake! The Court: A costly mistake. You've used her voice, now pay up royalty! And recall all the CDs with her voice.</p><br/>

		<p><span class="sectionTitle">Law:</span> Do actors have special rights? Under the Indian Copyright law, actors, singers, musicians, dancers, et al are called performers</p><br/>
    		-->
    </div>
  </div>
  <div id="clearBoth"></div>
 </div>

</div>

{% endblock %}