<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head id="head">

  {% block head %}
    
<meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Home</title>
    <link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/common.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/ui-red/jquery-ui.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}css/ui-lightness/jquery-ui-1.8.24.custom.css">
    <script src="{{ STATIC_URL }}js/vendor/modernizr-2.6.1.min.js"></script>	
    <script type="text/javascript" src="{{ STATIC_URL }}libraries/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/recherche.js"></script>
    <link rel="stylesheet" href="{{ STATIC_URL }}css/home.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/article.css" />        
    {% endblock %}
</head>

{% block body %}
    <body onLoad="showResults({{ request.session.jsonTreemap }});loadStreamgraph({{ request.session.jsonStreamgraph }});setCategories({{ request.session.jsonTreemap }});">
{% endblock %}
         <div class="wrap">
          {% block main %}
            <div class="header">
 {% block header %}
 				<div class="logo">
                  <div class="date">
                      <span class="year">5</span>
                      <span class="text">années archivées</span>
                  </div>
                </div>
  {% block recherche %}
                 <div class="recherche-wrap">
                    <h1><img src="{{ STATIC_URL }}img/mediapart-by-periplus.jpg" alt="" /></h1>
                    <!--form method="post" action="/recherche/">{% csrf_token %}
                    <input type="hidden"  name="filtre"  value="nok">
                    <input type="hidden" name="from_date" value="07/01/2007" />
                    <input type="hidden" name="to_date" value="12/01/2012" />
                        <p >
                            <a href="#" class="photo"></a>
                            <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" id="recherche"/>
                            <input type="submit" value="" class="recherche-submit"/>
                           
                        </p>
                    </form-->
                      {% block query %}
                     <form id="ajaxstreamgraph" method="post" action="/">{% csrf_token %}

                     	<input type="hidden" id="requestType"  name="requestType"  value="streamgraph">
                     	<input type="hidden" id="filtre" name="filtre"  value="nok">
                        <input type="hidden" id="refresh" name="refresh"  value="ok">
                   
                     </form>
                     
                     <form id="ajaxtreemap" method="post" action="/">{% csrf_token %}
               
                    	<input type="hidden"  id="filtre" name="filtre"  value="nok">
                        <input type="hidden" id="requestType" name="requestType"  value="treemap">
                        <input type="hidden" id="refresh" name="refresh"  value="ok">
                   
 
           
                        <p >
                            <a href="#" class="photo"></a>
                            <input id="recherche_id" name="recherche" placeholder="Rechercher" class="input-recherche" type="text" title="Rechercher"/>
                            <input id="recherche_button" type="button" value="" class="recherche-submit"/>
                            
                        </p>
                    </form>
                         {% endblock %}
                    <form id="ajaxupdatedossierdoc" method="post" action="/documentary_file_user_update/">{% csrf_token %}
                    </form>
                     
                     <form id="create-dossierDoc" class="plus-button home">
                      	 <input class="plus-button home" type="button"  title="Créer un dossier documentaire" value="" >
                     </form>
                    
                     <div id="dialog-form" title="Créer un nouveau dossier documentaire">
                    <form id="ajaxdocumentaryfile" method="post" action="/documentary_file_create/">{% csrf_token %}
                        <fieldset>
                        <label for="title">Titre du dossier</label>
                        <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
                        <label for="description">Description</label>
                        <input type="text" name="description" id="description" value="" class="text ui-widget-content ui-corner-all" />
                        </fieldset>
                    </form>
                      </div>


                </div>
{% endblock %}
               {% block headermenu %}
                 <ul class="header-menu">
                    <li><a href="http://localhost:8000"><img src="{{ STATIC_URL }}img/home-button.jpg" alt="" /> </a></li>
                    <li><a href="http://www.mediapart.fr/journal/international">INTERNATIONAL</a></li>
                    <li><a href="http://www.mediapart.fr/journal/france">FRANCE</a></li>
                    <li><a href="http://www.mediapart.fr/journal/economie">ECONOMIE</a></li>
                    <li><a href="http://www.mediapart.fr/journal/culture">CULTURE</a></li>
                </ul>
                {% endblock %}
 {% block login %}
                <div id="login" class="login-wrap">
                {% if user.username == ''%}
                    <h2>SE CONNECTER</h2>
                    {% if form.errors %}
	  	    	      <p>Le login et le mot de passe ne correspondent pas, essayez a nouveau.</p>
	    	    	 {% endif %}
                    <form method="post" action="/login/?next={{request.get_full_path}}">{% csrf_token %}
                        <p><input id="username" type="text" name="username" placeholder="Identifiant" /></p> 
                        {{ user.username }}
                        <p class="submit-wrap">
                            <input class="password" type="password" name="password" placeholder=".............."/>
                            <input class="submit-button" type="submit" value="OK" />
                            <input type="hidden" name="from_date" value="07/01/2007" />
                   			<input type="hidden" name="to_date" value="12/01/2012" />
                            <input type="hidden" name="categories"  value=""/> 
                        </p>
                    </form>
                    <!--p class="password-lost"><a  href="">Mot de passe oublié ?</a> </p {% if not loginstatus == ''%}
					{{ loginstatus }}
					{% else %}
                    	</br>
			{% endif %}-->
                   
            {% else %}
                <form method="post" action="/logout/?next={{request.get_full_path}}">{% csrf_token %}
                       <div style="display:block;">
                       <div class="header-name" id="user_connected">
                       {{ user.username }}
                       </div>
                        <input class="submit-button" type="submit" value="d&#233;connexion">
                       </div>          
                </form>
            {% endif %}
            </div>
{% endblock %}
                
                <a onClick="getDossierDocs('{{user.username}}');" style="cursor:pointer;"><p class="dossier-button" >DOSSIERS DOCUMENTAIRES</p></a>

                <div class="dossier-documentaire">
                    <div  class="dossier-documentaire-inner">
                        <h2>MES DOSSIERS</h2>
                        <ul id="mesdossiers">
                        {% for dossierDoc in dossierDocs %}
                			{% for mydoc in dossierDoc %}
                             <li class="clearfix">
                             	 <a href="/documentary_files/{{user.username}}/{{ mydoc.id }}">
                                 <img src="{{mydoc.url}}" alt="" width="50px" height="29px"/>
                             	 <span class="documentaire-texte">
                                 <h3>{{ mydoc.title }}</h3>
                                 <p>{{ mydoc.description }}</p>
								  </span>
                                </a>
                            </li>
                			{% endfor %}
                		{% endfor %}
                		</ul>
                        <a class="documentaire-lien" href="#"></a>
                    </div>
                </div><!--dossier-documentaire-->
                {% endblock %}
            </div><!-- header -->
            
             <div class="content-wrap clearfix">
              {% block headerdossier %}
              {% endblock %}
              {% block frise %}
                 <div class="frise">
                    <div class="streamgraph"></div>
                    <div id="slider-range"></div>
                </div><!-- frise -->
                 <div class="cluster-wrap">
                    <a href="#" class="cluster-arrow arrow-left"></a>
                    <a href="#" class="cluster-arrow arrow-right"></a>
                    <div class="cluster-containment">
                        <div class="cluster-visible">
                            <ul class="cluster">
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                                <li><a title="Afficher le cluster" href="#"></a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                {% endblock %}
   
                  {% block contentleft %}   
                <div class="content clearfix">
           
                     <div class="content-left" >
                    {% block titleleft %} <h2 id="titleleft"> </h2> {% endblock %}
       <div class="widget-wrapper">
            <div class="widget-wrap">
             
                {% block affichage %} <div class="widget affichage" id="affichage">
                    <h3><a href="#"  class="open">AFFICHAGE</a></h3>
                    <div class="widget-inner">
                        <ul class="clearfix">
                               <li><a id="treemapaff" title="Passer en vue Treemap" class="treemap active" href="#" ><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
                            <li ><a  id="listehref" title="Passer en vue Liste" class="liste" href="#" ><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
                        </ul>
                    </div>
                </div><!-- affichage -->{% endblock %}
                            <div class="widget filtre">
                                <h3><a href="#" class="open">FILTRES</a></h3>
                                <div class="widget-inner">
                                	
                                     <form id="ajaxfiltrestreamgraph" method="post" action="/">{% csrf_token %}
                                        {% block filtrestreamgraph %}<input type="hidden" id="requestType"  name="requestType"  value="streamgraph"/>{% endblock %}
                                        <input type="hidden" id="filtre" name="filtre"  value="ok"/>
                                     </form>
                     
                                    {% block filtretreemap %}<form id="ajaxfiltretreemap" method="post" action="/" class="filtre-date">{% csrf_token %}
                                         <input type="hidden" id="requestType"  name="requestType"  value="treemap"/>{% endblock %}
                                    	<input type="hidden" name="filtre"  value="ok">
                                        <p>
                                            <label for="">De :</label>
                                            <input id="pickeddatebegin" type="text" name="from_date" class="dateBegin" value="07/01/2007"/>
                                        </p>
                                        <p>
                                            <label for="">à :</label>
                                            <input id="pickeddateend" type="text" name="to_date" class="dateEnd" value="12/01/2012"/>
                                        </p>
                                    <!--/form-->
                                    <h4>Catégories :</h4>                        	
                                        <p><input type="checkbox" name="categories1" value="International" class="checkbox_category" checked="checked"/> <label for="">International</label> </p>
                                        <p><input type="checkbox" name="categories2" value="France"        class="checkbox_category" checked="checked"/> <label for="">France</label> </p>
                                        <p><input type="checkbox" name="categories3" value="Economie"      class="checkbox_category" checked="checked"/> <label for="">Economie</label> </p>
                                        <p><input type="checkbox" name="categories4" value="Culture"       class="checkbox_category" checked="checked"/> <label for="">Culture</label> </p>
                                    </form>
                                </div>
                            </div><!-- filtre -->
                            <!--div class="widget links">
                                <h3><a href="#">DOSSIER ASSOCIES</a></h3>
                                <div class="widget-inner">
                                    <ul>
                                        <li><a href="#">« Corruption »</a></li>
                                        <li><a href="#">« Corruption »</a></li>
                                        <li><a href="#">« Corruption »</a></li>
                                        <li><a href="#">« Corruption »</a></li>
                                    </ul>
                                </div>
                            </div--><!-- links -->
                            </div>
                        </div>
       </div>
                      {% endblock %}
            		
                    <div class="content-right" id="right">
                    
                    {% block contentright %}
                     <div id="treemap">
                            <div id="actus" class="actus">
                            </div> <!-- actus -->
                        </div>
                        <div id="liste">
                                <div class="articles" >
                        
                            <div class="tooltip"></div>
                            </div>
                            </div>
                           
                     {% endblock %}
                    </div>
                 </div>
                 
                <div class="footer clearfix">
                        <div class="footer-information">
                            <h2>Information utiles</h2>
                            <ul>
                                <li>- <a href="#">Mentions légales</a></li>
                                <li>- <a href="#">Mentions légales</a></li>
                                <li>- <a href="#">Conditions d'utilisations générale</a></li>
                                <li>- <a href="#">Le projet Periplus</a></li>
                            </ul>
                        </div>
                        <div class="footer-raccourci">
                            <h2>Raccourcis</h2>
                            <ul>
                                <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
                                <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
                                <li>- <a href="#">Conditions d'utilisations générale</a>
                            </ul>
                        </div>
                        <div class="footer-partenaire">
                            <h2>Partenaires</h2>
                            <ul>
                                 <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
                                <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
                                <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
                            </ul>
                        </div>
                        <div class="footer-texte">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco.
                        </p>
                        </div>
                  </div><!-- footer -->
            </div><!-- content-wrap -->
            <div class="copyright">
                &copy; Mediapart &copy; Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
            </div>
      
            {% endblock %}
   
        </div>
        <script src="{{ STATIC_URL }}js/vendor/jquery-1.8.0.min.js"></script>
        <script src="{{ STATIC_URL }}js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
        <!--script src="{{ STATIC_URL }}js/jquery.ui.datepicker-fr.js"></script-->
        <script src="{{ STATIC_URL }}js/vendor/dragslider.js"></script>
        <script src="{{ STATIC_URL }}js/lib/raphael-min.js"></script>
        <script src="{{ STATIC_URL }}js/lib/underscore-min.js"></script>
        <script src="{{ STATIC_URL }}js/plugins.js"></script>
        <script src="{{ STATIC_URL }}js/treemap.js"></script>
		<script src="{{ STATIC_URL }}js/main.js"></script>
         {% block streamgraphjs %}
        <script src="{{ STATIC_URL }}js/streamgraph.js"></script>
         {% endblock %}
         
        
       
        
    </body>
</html>
