{% extends "bpi_mashup_home.html" %}
{% load static %}
{% load i18n %}
{% load analytics %}
{% load thumbnail %}
    <title>{% block title %}Hashcut Playing - BPI{% endblock %}</title>    
    {% block css_import %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'hashcut/bpi/css/players.css' %}" />
    {% endblock %}

{% block wrap_header %}
<div class="wrap-header">  
    <div class="header">

    <!-- popin user -->
        <div class="popin user info" id="user">
            <div class="pointer"></div>
            <div class="popin-content">
                <h2>Mashup75</h2>
                <h3>mash@cinecast.fr</h3>
                <a href="#" class="nb-hashcut">12 Hashcuts</a>
                <p>
                    <a href="#" class="change-account button">Changer de compte</a>
                </p>
            </div>
        </div><!-- popin user info-->

        <div class="popin user signup" id="user">
            <div class="pointer"></div>
            <div class="popin-content">
                <h2>Créer un compte :</h2>
                <form action="#" class="signup-form">
                    <p>
                        <label for="signup-pseudo">Pseudonyme : </label>
                        <input type="text" id="signup-pseudo" name="" />
                    </p>
                    <p>
                        <label for="signup-email">Email : </label>
                        <input type="text" id="signup-email" name="" />
                    </p>
                    <p>
                        <label for="signup-password">Mot de passe : </label>
                        <input type="password" id="signup-password" name="" />
                    </p>
                    <p>
                        <label for="signup-password">Confirmer le mot de passe : </label>
                        <input type="password" id="signup-password" name="" />
                    </p>
                    <p>
                        <input class="button" type="submit" value="Créer le compte">
                    </p>
                </form>

            </div>
        </div><!-- popin user signup-->

        <div class="popin user login" id="user">
            <div class="pointer"></div>
            <div class="popin-content">
                <h2>Connexion :</h2>
                <form action="#" class="login-form">
                    <p>
                        <label for="signup-pseudo">E-mail : </label>
                        <input type="text" id="signup-pseudo" name="" />
                    </p>
                    <p >
                        <label for="signup-email">Mot de passe : </label>
                        <input type="password" id="signup-email" name="" />
                    </p>
                    <p>
                        <input class="button" type="submit" value="Se connecter">
                    </p>
                    <p>
                        <a class="button signup-button" href="#">Créer un compte</a>
                    </p>
                </form>

            </div>
        </div><!-- popin user login-->
        
    <!-- /popin user -->
    
        <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
            <img src="{% static 'hashcut/bpi/img/hashcut-logo.png' %}" alt="Hashcut" />
            <span>Le Mashup<br />Cliquable</span>
        </a></h1>
        <div class="title-video-wrap">
            <div class="Ldt-Social">
                <div class="Ldt-Social-Url-Container">
                    <a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url" title="Partager le lien"></a>
                    <span class="Ldt-Social-UrlPop">
                        <input class="Ldt-Social-Input"/>
                        <div class="Ldt-Social-CopyBtn">Copier</div>
                    </span>
                </div>
                <a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext" title="Partager sur Facebook"></a>
                <a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext" title="Partager sur Twitter"></a>
                <a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext" title="Partager sur Google+"></a>
                <a href="#" target="_blank" class="Ldt-Social-Mail" title="Partager par mail"></a>
            </div>
            <p class="title-video" href="#">Hashcut sans titre</p>
        </div>
        <div class="profil-wrap">
            <ul>
                <li><a href="#" class="all-hashcut">Tous les Hashcuts</a></li>
                <li><a href="edition.html" class="new-hashcut">Créer un Hashcut</a></li>
                <li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
            </ul>
        </div>
    </div><!-- header -->
</div><!-- wrap-header -->
{% endblock %}

{% block content %}
<div class="content clearfix">
    <div class="left-content">
        <h2>Lire le Hashcut</h2>
        <div class="bloc-video">
            <div class="video">
                <div class="video-wait"></div>
            </div>
            <div class="widget">
            <div class="Ldt-Slider-Container">
                <div class="Ldt-Slider"></div>
            </div>
            <div class="Ldt-Slider-Time"></div>

            <div class="Ldt-Ctrl">
                <div class="Ldt-Ctrl-Left">
                    <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
                    <div class="Ldt-Ctrl-spacer"></div>
                    <div class="Ldt-Ctrl-InOutBlock">
                        <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div>
                        <div class="Ldt-Ctrl-spacer"></div>
                        <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div>
                        <div class="Ldt-Ctrl-spacer"></div>
                    </div>
                </div>
                <div class="Ldt-Ctrl-Right">
                   <div class="Ldt-Ctrl-spacer"></div>
                   <div class="Ldt-Ctrl-Time">
                       <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div>
                       <div class="Ldt-Ctrl-Time-Separator">/</div>
                       <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div>
                   </div>
                   <div class="Ldt-Ctrl-spacer"></div>
                   <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div>
                </div>
                <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control">
                   <div class="Ldt-Ctrl-Volume-Bar"></div>
                </div>
            </div>
            
        </div>
            <div class="frise mashup-frise">
                <div class="frise-overflow">
                    <div class="frise-segments">
                    </div>
                    <div class="frise-indications">
                    </div>
                </div>
                <div class="frise-position"></div>
                <div class="mashup-tooltip segment-tooltip-wrapper">
                    <div class="segment-tooltip"></div>
                    <div class="segment-tooltip-tip"></div>
                </div>
                
            </div>
            <div class="segment-info mashup-description">
                <div class="pointer" style="left: 50%;"></div>
                <div class="popin-content">
                    <h2><span class="annotation-title">Segment sans titre</span></h2>
                    <table>
                        <tbody>
                            <tr>
                                <th>Extrait de :</th>
                                <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
                            </tr>
                            <tr>
                                <th>Description :</th>
                                <td><span class="annotation-description"></span></td>
                            </tr>
                            <tr>
                                <th>Tags :</th>
                                <td><span class="annotation-tags"></span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div><!-- bloc-video -->
    </div><!-- left-content -->
    
    <div class="right-content">
        <h2>Plus d’informations</h2>
        <div class="more-info-wrap">
            <table class="more-info ">
                <tbody>
                    <tr class="info-title">
                        <th>Titre :</th>
                        <td><a href="#">Titre du Hashcut</a></td>
                    </tr>
                    <tr class="info-duration">
                        <th>Durée :</th>
                        <td></td>
                    </tr>
                    <tr class="info-author">
                        <th>Auteur : </th>
                        <td><a href="#"></a></td>
                    </tr>
                    <tr class="info-description">
                        <th>Description : </th>
                        <td></td>
                    </tr>
<!--                                <tr class="info-tags">
                                    <th>Tags : </th>
                                    <td>Mashup, Création, Art</td>
                                </tr> -->
                </tbody>
            </table>
<!--                        <a href="#" class="button cloner">Cloner le Hashcut</a> -->
        </div>
        <h2>Médias utilisés dans le Hashcut</h2>
        <ul class="list-video">
            
        </ul>
    </div><!-- right-content -->
</div><!-- content -->
{% endblock %}
<!-- JavaScript -->
{% block js_import %}
{{ block.super }}
<script type="text/javascript" src="{% static 'hashcut/lib/underscore-min.js' %}"></script>
<script type="text/javascript" src="{% static 'hashcut/lib/popcorn-complete.min.js' %}"></script>
<script type="text/javascript" src="{% static 'hashcut/lib/ZeroClipboard.js' %}"></script>
<script type="text/javascript" src="{% static 'hashcut/js/hashcut.js' %}"></script>
<script type="text/javascript">
    IriSP.endpoints = {
   		content: "{% url api_dispatch_list api_name='1.0' resource_name='contents' %}",
        project: "{% url api_dispatch_list api_name='1.0' resource_name='projects' %}",
        segment: "{% url api_dispatch_list api_name='1.0' resource_name='segments' %}",
        ldt: "{% url projectjson_id id='' %}",
        media_page: "media.html?media="
    };
    
    $(function() {
    	IriSP.video_url_transform = function(oldurl) {
            var newurl = oldurl.replace(/mp4:/i,'');
            newurl = newurl.replace(/ddc_player\//i,'');
            newurl = newurl.replace(/rtmp/i,'http');
            return newurl;
        };
        IriSP.mashupplayer({
            id: "{{ldt_id}}"
        });
        IriSP.social();
    });
</script>
{% endblock %}