<!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 alerts">
					<div class="save-load alert alert-info fade in">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
	    				<i class="icon-spinner icon-spin"></i> Enregistrement du projet en cours...
	    			</div>
    			    <div class="save-ok  alert alert-success fade in">
    			    	<button type="button" class="close" data-dismiss="alert">&times;</button>
				    	<i class="icon-save"></i> Le projet a bien été sauvegardé !
				    </div>
				    <div class="save-error alert alert-error fade in">
				    	<button type="button" class="close" data-dismiss="alert">&times;</button>
				    	<i class="icon-warning-sign"></i> Une erreur est survenue lors de la sauvegarde du projet.
				    </div>
    			</div>
				<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 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>
							<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" title="Nouveau chapitre"><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">
							</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">
									</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>
						</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 audio"><i class="icon-volume-up"></i> Son</a>
										<a href="#" title="Vidéo" data-type="video" class="btn open-tab video"><i class="icon-film"></i> Vidéo</a>
										<a href="#" title="Diaporama" data-type="slideshow" class="btn open-tab slideshow"><i class="icon-picture"></i> Diaporama</a>
										<a href="#" title="Texte" data-type="text" class="btn open-tab text"><i class="icon-align-left"></i> Texte</a>
										<a href="#" title="Lien" data-type="links" class="btn open-tab links"><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">

										</tbody>
									</table>
								</div>
							</div><!-- /.liste annotations -->
						</div><!-- /.tab-content -->
					</div><!-- /.col-right -->
				</div>
			</div><!-- /.container -->
		</section>
		<footer>

		</footer>
	</div>

<!-- modal -->
	<div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" 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-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="modal-alert" class="modal hide fade" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h3 id="myModalLabel"><i class="icon-warning-sign"></i> Attention</h3>
	</div>
	<div class="modal-body">
		<p class="alert-message" id="alert-chapter-duration">Les chapitres doivent durer au moins <strong></strong> secondes.</p>
		<p class="alert-message" id="alert-chapter-number">Le projet doit contenir au moins un chapitre.</p>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	</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">
			<label class="label-left" for="head-title-{{id}}">Titre :</label>
			<input class="label-left head-title" id="head-title-{{id}}" type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
			<label class="label-left" for="head-description-{{id}}">Description :</label>
			<textarea id="head-description-{{id}}" name="description">{{description}}</textarea>
		</div>
		<div class="span3">
			<label  for="head-tags-{{id}}">Tags :</label>
			<input id="head-tags-{{id}}" 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">
							<span data-milliseconds="{{begin.milliseconds}}" class="time-tangle tangle-start slider-tangle">{{begin}}</span>
						</td>
						<td id="{{id}}-duration" class="span1">{{getDuration}}</td>
						<td id="{{id}}-end" class="span1">
							<span data-milliseconds="{{end.milliseconds}}" class="time-tangle tangle-end slider-tangle">{{end}}</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="span6 text-center">
			<label class="label-left" for="slider-{{id}}">Durée :</label>
			<div data-id="{{id}}" id="slider-{{id}}" class="slider-duration"></div>
		</div>
		<div class="span6 text-right">
			<a class="btn btn-danger btn-delete btn-delete-annotation" data-title="{{title}}" 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">&times;</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">
		<span class="label-add-video">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>
		<span class="label-modify-video">Modifier la vidéo <a data-id="annotation-{{id}}" data-type-media="video" data-title="Modifier la vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-pencil"></i></a></span> 
	</span>
</div>
<div class="row annotation-video-content"></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" 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-slideshow="slideshow-{{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-slideshow">
	<form action="#">
		<div class="span3">
			<label>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="duration-slideshow-{{id}}">Durée image : </label>
			<input id="duration-slideshow-{{id}}" 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="slideshow-{{id}}" class="list-image-slideshow 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 class="control-group">
		<input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://">
		<div class="help-inline"><i class="icon-unlink"></i> Le lien est incorrect.</div>
	</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-slideshow-row" type="text/html">
<tr id="rid-{{ridid}}" class="row-image-slideshow">
	<td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}?width=60&height=60" alt="{{title}}"> </td>
	<td class="title-slideshow-row" data-input="input" data-name="title">
		<span>{{#limitLength}}{{title}}{{/limitLength}}</span> <i class="icon-pencil"></i>
	</td>
	<td class="description-slideshow-row" data-input="textarea" data-name="description">
		<span>{{#limitLength}}{{description}}{{/limitLength}}</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>
</div>
</script>

<script id="tpl-list-annotation-row" type="text/html">
<tr data-id="{{id}}" 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 class="row-list-chapter" data-id="{{id}}" 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-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">
			<label class="label-left" for="chapter-title-{{id}}">Titre :</label>
			<input id="chapter-title-{{id}}" class="chapter-title" name="title" type="text" value="{{title}}">
			<label class="label-left" for="chapter-keywords-{{id}}">Tags :</label>
			<input id="chapter-keywords-{{id}}" 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 class="duration">{{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">
			<label class="label-left" for="chapter-description-{{id}}">Description :</label>
			<textarea name="description" id="{{title}}">{{description}}</textarea>
		</div>
	</div>
	<div class="row">
		<div class="span6 text-right">
			<a data-title="{{title}}" title="Supprimer le chapitre" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-danger btn-delete-chapter">
				<i class="icon-trash"></i> Delete
			</a>
			<a class="btn btn-primary btn-ok-chapter" href="#" data-id="{{id}}">
				<i class="icon-ok"></i> Ok
			</a>
		</div>
	</div>
</form>
</script>	

<script id="tpl-annotation-in-timeline" type="text/html">
<a title="{{title}}" style="left:{{left}}px; width:{{width}}px; background-color:{{color}};" data-id="{{id}}" id="annotation-timeline-{{id}}" class="annotation">
	<i class="icon-pencil"></i> <span>{{title}}</span>
</a>
</script>	

<script id="tpl-item-annotation-display" type="text/html">
<li data-id="{{id}}">
	<a id="item-current-annotation-{{id}}" class="item-display-annotation" data-id="{{id}}" style="background-color: {{color}};" data-id="{{id}}" href="#">
		<i class="icon-{{iconTab}}"></i>
		<span>{{title}}</span>
	</a> 
</li>
</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/edition.js"></script>
    <script>
    
    var spinParam = {
	    imageBasePath :'lib/spin/img/',
	    max:60,
	    min:0
	};

	var urlSaveProject = '';

    /* 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>