{% load com %}
{% load i18n %}

<!-- TODO factorize with base.html for style and jquery etc... -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<!-- TODO factorize with base.html etc...--> 
    <link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}js/lib/yui/{{ YUI_VERSION  }}/build/cssreset/reset-min.css"> 
    <link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}js/lib/yui/{{ YUI_VERSION  }}/build/cssfonts/fonts-min.css"> 
    <link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}js/lib/yui/{{ YUI_VERSION  }}/build/cssbase/base-min.css">

<!-- TODO factorize with base.html for jquery etc... -->
	<script type="text/javascript">
	<!--
  sv_media_url = "{{ CM_MEDIA_PREFIX|escapejs}}" ; 
  sv_pandoc_version = "{{ PANDOC_VERSION|escapejs}}" ;
	-->
	</script>
    <link type="text/css" href="{{ CM_MEDIA_PREFIX }}js/lib/jquery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/jquery/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/jquery/js/layout/jquery.layout.min.js"></script>
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/jquery/js/cookie/jquery.cookie.js"></script><!-- not minified -->

    <!-- <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/bgiframe_2.1.1/jquery.bgiframe.min.js"></script> -->

    <link type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_frame.css" rel="stylesheet" />

    <script type="text/javascript" src="{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}{% url django.views.i18n.javascript_catalog %}"></script>
{% if CLIENT_DEBUG %}
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/f_message.js"></script>
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/f_printDialog.js"></script>
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/site/f_text_view_frame.js"></script>
{% else %}
    <script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/f_client-min.js?1372170380"></script> 
{% endif %}
    <style type="text/css">
        /*
         *  TAB-THEME ADJUSTMENTS
         */
        .ui-tabs-nav li {
            white-space:    nowrap;
        }
        .ui-tabs-nav li a {
            font-size:      1em !important;
            padding:        4px 1.5ex 3px !important;
        }
        .ui-tabs-panel {
            font-size:      1em !important;
            padding:        8px 1em !important;
        }
    </style>
    <script type="text/javascript">
      <!--
      function iframe_onload() {
        var throbber = document.getElementById('throbber');
        throbber.style.display = "none";
      }
      -->
    </script>

</head>
<BODY>

    <span id="add_comment_btn" class="initially_hidden" title="{% blocktrans %}add a comment{% endblocktrans %}"> 
    <img style="vertical-align: middle;" src="{{ CM_MEDIA_PREFIX }}img/add_plus.png" alt="{% blocktrans %}add a comment{% endblocktrans %}"/>
    <span>{% blocktrans %}comment{% endblocktrans %}</span>
    </span>
	<!-- cf.http://layout.jquery-dev.net/download/example.html -->
	<!-- TODO check height 600 ... -->
	<DIV id="outer-north" class="ui-layout-north"> 
        <div style="margin-top:4px;" id="c_slider"></div>        
 	</DIV>
	<DIV class="outer-center" > 
	    <DIV class="inner-north initially_hidden" > 
		    <ul id="header-nobck">
		        <li><a href="#c_filter">{% blocktrans %}Filter comments{% endblocktrans %}</a></li>
                <li><a href="#c_preferences">{% blocktrans %}Preferences{% endblocktrans %}</a></li>
                <li><a href="#c_text_preferences">{% blocktrans %}Text preferences{% endblocktrans %}</a></li>
		    </ul>
            <div id="c_filter" class="c_tab">
            </div>
            <div id="c_preferences" class="c_tab">
            </div>
            <div id="c_text_preferences" class="c_tab">
            </div>
	    </DIV>
      <div id="throbber" style="visibility: visible; position: absolute; top: 4%; left: 40%">
              <img alt="throbber" src="{{ CM_MEDIA_PREFIX }}img/throbber.gif" /><br />{% blocktrans %}Loading text…{% endblocktrans %}
      </div>
	    {% url text-view-comments-version text.key text_version.key as frame_url %}
	             <iframe id="text_view_comments" name="text_view_comments" class="ui-layout-center"
            width="100%" height="100%" frameborder="0" scrolling="auto"
            src="{% if request.GET.prefix %}{{ request.GET.prefix }}{% else %}{% endif %}{{ frame_url }}{{ frame_url|url_args }}{{ request.GET.urlencode }}"></iframe>
             
             
<!--  exemple de passage d'arguments        <iframe id="text_view_comments" name="text_view_comments" class="ui-layout-center"
            width="100%" height="100%" frameborder="0" scrolling="auto"
            src="{% url text-view-comments text.key %}?filter_name=aa&filter_tag=toto"></iframe>
 -->            
	</DIV>
<div style="display: none;">
    <div id="dialog_h"></div>
    <div id="dialog_print_export" title="">
<!--         <p id="validateTips">All form fields are required.</p> -->

		{% url text-export text.key "FoRmAt" "DoWnLoAd" "WhIcHCoMmEnT" "WiThCoLoR" as export_url %}    
        <form name="print_export_form" id="print_export_form" method="post" action="" target_action="{% if request.GET.prefix %}{{ request.GET.prefix }}{% else %}{% endif %}{{ export_url }}{{ export_url|url_args }}{{ request.GET.urlencode }}">
	        <fieldset>
                <label for="p_comments">{% blocktrans %}Which comments?{% endblocktrans %}</label>
                <select  name="p_comments" id="p_comments" />
                </select>

                <label id="how" for="p_method"></label>
                <select name="p_method" id="p_method"/>
                </select>

	            <label id="p_color_label" for="p_color">{% blocktrans %}How should comments' scope be shown in text?{% endblocktrans %}</label>
                <select name="p_color" id="p_color"/>
                </select>
	        </fieldset>
	        
            <input type="hidden" name="filteredIds" id="filteredIds" value="" />
            <input type="hidden" name="print_export_action" id="print_export_action" value="" />
	    </form>        
    </div>
</div>
</BODY>
</html>
