<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aix - Back office > Edition</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet">
<link href="lib/CLEditor/jquery.cleditor.css" rel="stylesheet">
<link href="lib/tag-it/css/jquery.tagit.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<div class="container">
<div class="row">
<div class="span3"><h1><a class="clearfix" href="">
<img src="img/60x40.gif" alt="">
<span>
Doc<br/>Cliquable
</span>
</a></h1></div>
<div class="span9">
<ul class="breadcrumb nav-bar">
<li>
<a href="#">
<i class="icon-file"></i> Projets
</a>
<li><span class="divider">></span></li>
</li>
<li class="active"><i class="icon-folder-close-alt"></i> <span class="project-title-nav">Titre du projet azerty</span></li>
<li><span class="divider">/</span></li>
<a href=""><li class="active"><i class="icon-folder-close-alt"></i> Ressources</li></a>
</ul>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row project-head">
<div class="span7">
<div class="project-title-editor">
<i class="icon-folder-close-alt"></i>
<span class="project-title">Titre du projet</span> <i class="icon-pencil"></i>
</div>
</div>
<div class="span5 text-right project-action">
<a href="#" class="btn disabled btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</a>
<a href="#" class="btn btn-success btn-save-project"><i class="icon-save"></i> Sauvegarder le projet</a>
</div>
</div>
<div class="row">
<div class="span6">
<div class="video-wrap">
<div class="main-video"></div>
<div class="annotations-display">
<div class="annotation-display-view"></div>
<ul class="list-current-annotations">
</ul>
</div>
</div>
<div class="timeline-annotations-wrap">
<div class="indicateur-annotation"></div>
<!--<div class="timeline-annotations"></div>-->
<ul class="timeline-annotations">
</ul>
</div>
<!-- chapter-widget -->
<div class="chapter-widget">
<div class="row">
<div class="span6 chapitre-cut-wrap">
<div class="indicateur-chapter"></div>
<ul class="chapter-segments"></ul>
<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i><br/>
<span class="info-time">0:00</span>
</a>
</div>
</div>
<div class="chapter-widget-info">
<!--
<form action="#" class="form-chapter-edit">
<div class="row">
<div class="span3 text-right">
<input name="title" type="text">
<input name="tags" type="text" class="tag-it">
</div>
<div class="span3">
<input type="hidden" name="begin">
<input type="hidden" name="duration">
<input type="hidden" name="end">
<table class="table text-right">
<thead>
<tr>
<th class="span1">Début</th>
<th class="span1">Durée</th>
<th class="span1">Fin</th>
</tr>
</thead>
<tbody>
<tr>
<td class="span1 begin">4:20</td>
<td class="span1 duration">4:20</td>
<td class="span1 end">4:20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 text-center">
<textarea class="" name="description" id=""></textarea>
</div>
</div>
</form>
-->
</div>
<div class="list-chapter-wrap">
<h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4>
<table class="table" width="5000">
<thead>
<tr>
<th>Titre</th>
<th>Tags</th>
<th class="wDuration">Début</th>
<th class="wDuration">Durée</th>
<th class="wDuration">Fin</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="list-chapter-rows-wrap">
<!--
<tr id="row-list-chapter-id1">
<td>Titre d'un chapitre</td>
<td>Tags, Tags, Tags</td>
<td>79:55</td>
<td>79:55</td>
<td>79:55</td>
<td>
<table>
<tr>
<td>
<a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
</td>
<td>
<a data-title="Chapitre 1" href="#row-list-chapter-id1" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
</td>
</tr>
</table>
</td>
</tr>
-->
</tbody>
</table>
</div>
</div><!-- /.chapter-widget -->
</div>
<div class="span6 col-right">
<!-- tab -->
<ul class="nav nav-tabs" id="onglet-annotations">
<li class="active"><a data-toggle="list-annotations" id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
<!--<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">×</span></a> </li>-->
</ul>
<div class="tab-content">
<!-- liste annotations -->
<div class="tab-pane active" id="list-annotations">
<div class="add-annotation-wrap section">
<h4 class="title-section"><i class="icon-bookmark"></i> <i class="icon-plus"></i> Ajouter une annotation de type</h4>
<div class="text-center">
<a href="#" title="Son" data-type="audio" class="btn open-tab"><i class="icon-volume-up"></i> Son</a>
<a href="#" title="Vidéo" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
<a href="#" title="Diaporama" data-type="slideshow" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
<a href="#" title="Texte" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a>
<a href="#" title="Lien" data-type="links" class="btn open-tab"><i class="icon-link"></i> Liens</a>
</div>
</div>
<div class="list-annotation-wrap">
<h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4>
<table class="table ">
<thead>
<tr>
<th>Titre</th>
<th>Type</th>
<th>Début</th>
<th>Durée</th>
<th>Fin</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="list-annotations-rows">
<!--
<tr id="row-list-annotation-id1">
<td>Titre annotation</td>
<td>Vidéo</td>
<td>4:26</td>
<td>4:26</td>
<td>4:26</td>
<td>
<a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video">
<i class="icon-pencil"></i></a>
<a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
<i class="icon-trash delete-annotation"></i>
</a>
</td>
</tr>
<tr id="row-list-annotation-id2">
<td>Titre annotation</td>
<td>Diaporama</td>
<td>4:26</td>
<td>4:26</td>
<td>4:26</td>
<td>
<a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
<i class="icon-pencil "></i></a>
<a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
<i class="icon-trash delete-annotation"></i>
</a>
</td>
</tr>
-->
</tbody>
</table>
</div>
</div>
<!-- exemple annotation all -->
<div class="tab-pane" id="annotation-azerty">
<!-- head -->
<form action="#" class="form-info-general-annotation">
<div class="row">
<div class="span3 text-right">
<input type="text" placeholder="Titre de l'annotation..">
<textarea name="" id=""></textarea>
</div>
<div class="span3">
<input type="text" placeholder="Titre de l'annotation..">
<table class="table text-right">
<thead>
<tr>
<th class="span1">Début</th>
<th class="span1">Durée</th>
<th class="span1">Fin</th>
</tr>
</thead>
<tbody>
<tr>
<td id="id741-begin" class="span1">4:20</td>
<td id="id741-duration" class="span1">4:20</td>
<td id="id741-end" class="span1">4:20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 text-center">
<div data-id="id741" id="id741" class="slider-duration"></div>
</div>
<div class="span6 text-right">
<button data-id="id741" type="submit" class="btn btn-primary btn-save-annotation">
<i class="icon-save"></i> Enregistrer l'annotation
</button>
</div>
</div>
</form>
<!-- Liens -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-link"></i> Liens</h3>
</div>
<div class="row annotation-links-content">
<div class="span6">
<form class="form-horizontal">
<table class="table">
<thead>
<tr>
<th>URL</th>
<th>Titre du lien</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="input-medium" type="text" placeholder="http://"></td>
<td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
<td>
<a class="btn" href="#"><i class="icon-trash"></i></a>
<a class="btn" href="#"><i class="icon-plus"></i></a>
</td>
</tr>
<tr>
<td><input class="input-medium" type="text" placeholder="http://"></td>
<td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
<td>
<a class="btn" href="#"><i class="icon-trash"></i></a>
<a class="btn" href="#"><i class="icon-plus"></i></a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<!-- Son -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
</div>
<div class="row annotation-audio-content">
<div class="span6">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="url-source">URL source :</label>
<div class="controls">
<input type="text" id="url-source" placeholder="http://">
</div>
</div>
<div class="control-group">
<label class="control-label" for="embed">Code embed :</label>
<div class="controls">
<textarea name="" id="embed" cols="30" rows="10"></textarea>
</div>
</div>
</form>
</div>
</div>
<!-- vidéo -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
<span class="span3">
Ajouter une vidéo
<a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
</span>
</div>
<div class="row annotation-video-content">
<div class="span6">
<img src="img/460x345.gif" alt="">
<table class="table">
<tbody>
<tr>
<th>Titre</th>
<td>Titre de la vidéo Azerty</td>
</tr>
<tr>
<th>Date</th>
<td>14 / 05 / 2016</td>
</tr>
<tr>
<th>Durée</th>
<td>25 m 35 s</td>
</tr>
<tr>
<th>Description</th>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- html -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-link"></i> Html</h3>
</div>
<div class="row edit-annotation-html">
<div class="span6">
<textarea class="" name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="span6 text-right">
<a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
</div>
<div class="html-apercu span6"></div>
</div>
<!-- text -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
</div>
<div class="row">
<div class="span6 wysiwyg-wrap">
<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
<!-- diaporama -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
<span class="span3">
Ajouter une image
<a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
</span>
</div>
<div class="row config-diaporama">
<form action="">
<div class="span3">
<label for="">Diaporama :</label>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Manuel</button>
<button type="button" class="btn btn-primary active">Auto</button>
</div>
</div>
<div class="span3">
<label for="">Durée image : </label>
<input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
</div>
</form>
</div>
<div class="row">
<div class="span6">
<table class="table">
<thead>
<tr>
<th>Aperçu</th>
<th>Titre</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="diaporama-id1" class="list-image-diaporama ui-sortable">
<tr id="rid-id1" class="row-image-diaporama">
<td><img src="img/60x60.gif" alt=""> </td>
<td>Titre annotation 1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
<td>
<table>
<tr>
<td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
<td><a data-title="une image" href="#rid-id1" class="btn btn-delete"><i class="icon-trash"></i></a></td>
</tr>
<tr>
<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
</tr>
</table>
</td>
</tr>
<tr id="rid-id2" class="row-image-diaporama">
<td><img src="img/60x60.gif" alt=""> </td>
<td>Titre annotation 2</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
<td>
<table>
<tr>
<td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
<td><a href="" class="btn"><i class="icon-trash"></i></a></td>
</tr>
<tr>
<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
</tr>
</table>
</td>
</tr>
<tr id="rid-id3" class="row-image-diaporama">
<td><img src="img/60x60.gif" alt=""> </td>
<td>Titre annotation 3</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
<td>
<table>
<tr>
<td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
<td><a href="" class="btn"><i class="icon-trash"></i></a></td>
</tr>
<tr>
<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!-- /exemple annotation all -->
</div><!-- /.tab-content -->
</div><!-- /.col-right -->
</div>
</div><!-- /.container -->
</section>
<footer>
<a href="#" class="log-annotations">Log annotations</a> - <a href="#" class="log-chapters">Log chapitres</a>
</footer>
</div>
<!-- modal -->
<div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3></h3>
</div>
<div class="modal-body">
</div>
</div>
<div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="icon-warning-sign"></i> Confirmation de la suppression</h3>
</div>
<div class="modal-body">
<p>Êtes-vous sûr de vouloir supprimer <strong class="titleMedia"></strong> ?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
<a id="btn-delete-modal" class="btn btn-primary">Supprimer</a>
</div>
</div>
<div id="templates">
<script id="tpl-head" type="text/html">
<form action="#" class="form-info-general-annotation" data-id="{{id}}">
<div class="row">
<div class="span3 text-right">
<input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
<textarea id="" name="description">{{description}}</textarea>
</div>
<div class="span3">
<input type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
<table class="table text-right">
<thead>
<tr>
<th class="span1">Début</th>
<th class="span1">Durée</th>
<th class="span1">Fin</th>
</tr>
</thead>
<tbody>
<tr>
<td id="{{id}}-begin" class="span1">{{begin}}</td>
<td id="{{id}}-duration" class="span1">{{getDuration}}</td>
<td id="{{id}}-end" class="span1">{{end}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 text-center">
<div data-id="{{id}}" id="" class="slider-duration"></div>
</div>
<div class="span6 text-right">
<a class="btn btn-danger btn-delete btn-delete-annotation" data-id="{{id}}" data-no-render>
<i class="icon-trash"></i> Delete
</a>
<a class="btn btn-primary btn-save-annotation" data-id="{{id}}">
<i class="icon-ok"></i> Ok
</a>
</div>
</div>
</form>
</script>
<script id="tpl-onglet" type="text/html">
<li id="onglet-{{id}}">
<a data-id="{{id}}" data-toggle="annotation" href="#tab-annotation-{{id}}">
<i class="icon-{{iconTab}}"></i>
<span id="onglet-title-{{id}}">{{title}}</span>
<span class="close-tab">×</span>
</a>
</li>
</script>
<script id="tpl-audio" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
</div>
<div class="row annotation-audio-content">
<div class="span6">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="url-source-{{id}}">URL source :</label>
<div class="controls">
<input type="text" value="{{content.url}}" name="url" id="url-source-{{id}}" placeholder="http://">
</div>
</div>
<div class="control-group">
<label class="control-label" for="embed-{{id}}">Code embed :</label>
<div class="controls">
<textarea name="embedcode" id="embed-{{id}}" cols="30" rows="10">{{content.embedcode}}</textarea>
</div>
</div>
</form>
</div>
</div>
</script>
<script id="tpl-video" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
<span class="span3">
Ajouter une vidéo
<a data-id="annotation-{{id}}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-plus"></i></a>
</span>
</div>
<div class="row annotation-video-content">
</div>
</script>
<script id="tpl-html" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-link"></i> Html</h3>
</div>
<div class="row edit-annotation-html">
<div class="span6">
<textarea class="" name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="span6 text-right">
<a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
</div>
<div class="html-apercu span6"></div>
</div>
</script>
<script id="tpl-text" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
</div>
<div class="row">
<div class="span6 wysiwyg-wrap">
<textarea class="wysiwyg" name="" id="" cols="30" rows="10">{{content.text}}</textarea>
</div>
</div>
</script>
<script id="tpl-slideshow" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
<span class="span3">
Ajouter une image
<a data-type-media="image" data-diaporama="diaporama-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html" data-hide-add-new><i class="icon-plus"></i></a>
</span>
</div>
<div class="row config-diaporama">
<form action="">
<div class="span3">
<label for="">Diaporama :</label>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" data-autostart="false" class="{{^content.autostart}}active{{/content.autostart}} btn btn-primary btn-autostart">Manuel</button>
<button type="button" class="{{#content.autostart}}active{{/content.autostart}} btn btn-primary btn-autostart" data-autostart="true">Auto</button>
</div>
</div>
<div class="span3">
<label for="">Durée image : </label>
<input pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="{{content.slideduration}}"> sec
</div>
</form>
</div>
<div class="row">
<div class="span6">
<table class="table table-striped">
<thead>
<tr>
<th>Aperçu</th>
<th>Titre</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="diaporama-{{id}}" class="list-image-diaporama ui-sortable">
</tbody>
</table>
</div>
</div>
</script>
<script id="tpl-links" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-link"></i> Liens</h3>
</div>
<div class="row annotation-links-content">
<div class="span6">
<form class="form-horizontal">
<table class="table">
<thead>
<tr>
<th>URL</th>
<th>Titre du lien</th>
<th>Actions</th>
</tr>
</thead>
<tbody data-id="{{id}}" class="links-rows">
</tbody>
<tfoot>
<tr>
<td colspan="3"><a class="btn btn-success add-link" href="#"><i class="icon-plus"></i> Ajouter un lien</a></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
</script>
<script id="tpl-links-row" type="text/html">
<tr>
<td><input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://"></td>
<td><input class="input-medium title-link" type="text" value="{{title}}" placeholder="Titre du lien"></td>
<td>
<a class="btn delete-link" href="#"><i class="icon-trash"></i> </a>
</td>
</tr>
</script>
<script id="tpl-diaporama-row" type="text/html">
<tr id="rid-{{ridid}}" class="row-image-diaporama">
<td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}" alt=""> </td>
<td class="title-slideshow-row" data-input="input" data-name="title">
<span>{{title}}</span> <i class="icon-pencil"></i>
</td>
<td class="description-slideshow-row" data-input="textarea" data-name="description">
<span>{{description}}</span> <i class="icon-pencil"></i>
</td>
<td>
<table>
<tr>
<td>
<a data-title="une image" href="#rid-{{id}}" class="btn btn-delete-image"><i class="icon-trash"></i></a>
</td>
<td><a href="#" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
</tr>
<tr>
<td></td>
<td><a href="#" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
</tr>
</table>
</td>
</tr>
</script>
<script id="tpl-video-row" type="text/html">
<div class="span6">
<div class="video-container"></div>
<!--
<table class="table">
<tbody>
<tr>
<th>Titre</th>
<td class="video-title-edit" data-input="input" data-name="title">
<span>{{title}}</span> <i class="icon-pencil"></i>
</td>
</tr>
<tr>
<th>Description</th>
<td class="video-description-edit" data-input="textarea" data-name="description">
<span>{{description}}</span> <i class="icon-pencil"></i>
</td>
</tr>
</tbody>
</table>
-->
</div>
</script>
<script id="tpl-list-annotation-row" type="text/html">
<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};">
<td>{{title}}</td>
<td><i class="icon-{{iconTab}}"></i></td>
<td>{{begin}}</td>
<td>{{getDuration}}</td>
<td>{{end}}</td>
<td>
<a href="#" data-id="{{id}}" title="Editer l'annotation" class="btn btn-edit-annotation" data-type="{{type}}">
<i class="icon-pencil"></i></a>
<a data-id="{{id}}" title="Supprimer l'annotation" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation">
<i class="icon-trash delete-annotation"></i>
</a>
</td>
</tr>
</script>
<script id="tpl-chapter-row" type="text/html">
<tr id="row-list-chapter-{{id}}" style="background-color : {{color}};">
<td class="list-chapter-title">{{title}}</td>
<td class="list-chapter-tags">{{keywords}}</td>
<td class="begin">{{begin}}</td>
<td class="duration">{{getDuration}}</td>
<td class="end">{{end}}</td>
<td>
<table>
<tr>
<td>
<a href="#" title="Editer le chapitre" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>
</td>
<td>
<a data-title="{{title}}" title="Supprimer le chapitre" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
</td>
</tr>
</table>
</td>
</tr>
</script>
<script id="tpl-chapter-edit" type="text/html">
<form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}">
<h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
<div class="row">
<div class="span3 text-right">
<input name="title" type="text" value="{{title}}">
<input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}">
</div>
<div class="span3">
<table class="table text-right">
<thead>
<tr>
<th class="span1 ">Début</th>
<th class="span1">Durée</th>
<th class="span1">Fin</th>
</tr>
</thead>
<tbody>
<tr>
<td class="span1"><span {{#beginTangle}}class="time-tangle tangle-start begin" data-milliseconds="{{begin.milliseconds}}"{{/beginTangle}}>{{begin}}</span></td>
<td class="span1"><span>{{getDuration}}</span></td>
<td class="span1"><span {{#endTangle}}class="time-tangle tangle-end end" data-milliseconds="{{end.milliseconds}}"{{/endTangle}}>{{end}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span6 text-center">
<textarea class="" name="description" id="">{{description}}</textarea>
</div>
</div>
</form>
</script>
</div><!-- /#templates -->
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery-migrate-1.1.1.js"></script>
<script src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/spin/jquery.spin-1.0.2.js"></script>
<script src="lib/cleditor/jquery.cleditor.min.js"></script>
<script src="lib/tag-it/js/tag-it.min.js"></script>
<script src="lib/mustache.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="js/metadataplayer-core.js"></script>
<script src="js/ldt-serializer.js"></script>
<script src="js/common.js"></script>
<script src="js/tangle.js"></script>
<script src="js/edition.js"></script>
<script>
var spinParam = {
imageBasePath :'lib/spin/img/',
max:60,
min:0
};
var urlSaveProject = '';
var textCurrentAnnotationEditT = "en cours d'édition";
/* Initialisation du metadataplayer avec un projet vide */
var myDir = new IriSP.Model.Directory(),
myProject = myDir.remoteSource({
url: "data/rigoletto.json",
serializer: IriSP.serializers.ldt
});
</script>
</body>
</html>