<script type="text/javascript">

    // Charge le player

    flowplayer("player", "../flashes/flowplayer-3.1.2.swf",

               {

                   clip: {url: "http://embryon/videos/001009_l-humanite.f4v",

                          autoPlay: false,

                          autoBuffering: true,

                          onSeek: function() {

                              playerSeek();

                          }

                         },

                   plugins: {

                       content: {url: "flowplayer.content-3.1.0.swf",

                                 backgroundColor: 'transparent',

                                 display: 'none',

                                 style: {p: {fontSize: 15}}

                                }

                   },

                   onLoad: function() {

                       playerLoaded(this);

                   },

                   onUnload: function() {

                       playerUnloaded(this);

                   },

                   onError: function(code,msg) {

                       alert(msg);

                   },

               });

               function loadSegments() {

                   if ($f().getClip() == undefined) {

                       window.setTimeout("loadSegments()",2000);

                       return false;

                   }

                   var duration = Math.round($f().getClip().fullDuration*10) * 100;

                   var segments = tagTool.segments;

                   for (seg in segments) {

                       var segd = segments[seg].sout - segments[seg].sin;

                       var percent = Math.round(segd * 100 / duration);

                       var offset = Math.round(segments[seg].sin * 100 / duration);

                       var c = $('#seg_container_template').clone().removeAttr("id");

                       $("#segments").append(c);

                       $("span", c).html('<strong>' + tagTool.segments[seg].tag +'</strong> par ' + segments[seg].user);

                       $("#seg_0", c).css({'margin-left': offset+'%', 'width': percent+'%'})

                       .attr('id', 'seg_' + seg)

                       .click(function() {

                           seg_id = $(this).attr("id");

                           seg_id = seg_id.substr(seg_id.indexOf('_') + 1);

                           tagTool.playSegment(seg_id, $("#pauseAfter").val());

                       });

                       c.show();

                   }

               }

               function playerSeek() {

                   tagTool.rebuildCurrentTags(tagTool.player.getTime() * 1000);

               }

               function playerLoaded(player) {

                   // Charge les tags

    				$("#segmentMarkerButtons").css("opacity",1);

                    $("#btMarkIn").removeAttr("disabled");

                    $.getJSON("<?php echo url_for("@segmentListJson?film_slug=anna-m");?>", "", function(data) {

                        tagTool.segments = data;

                        tagTool.setupHandlers($f("player"));                        

                        window.setTimeout("loadSegments()", 2000);

                    });

                   tagTool.player = $f("player");

                   tagTool.showTagInPage = false;

               }

    </script>

<div id="editor">

	<h2>Anna M <span class="ost">{}</span><span class="film-infos">De Michel Spinosa</span></h2>

	<div class="section">

		<div id="player" class="player-ba"></div>		

		<p id="segmentMarkerButtons" style="text-align:center;opacity:0.5">

			<button type="button" id="btMarkIn"  disabled onClick="segmentMarker.markIn()">

			  Marquer le début

			</button>

			<button type="button" id="btMarkOut" disabled onClick="segmentMarker.markOut()">

			  Marquer la fin

			</button>

			<button type="button" id="btPlaySegment" disabled onClick="segmentMarker.playSegment()">

			  Lire la séquence

			</button>

		 </p>

		 <form action="<?php echo url_for("@addFilmSegment?film_slug=anna-m");?>" method="post" id="segmentForm" class="ajax" style="display: none;">

		    <h3>Enregistrer votre segment</h3>

		    <p>Vous aller créer un segment, entre <span id="mkin">0</span> et <span id="mkout">0</span>.</p>

		    <p style="text-align: center;">

		      Votre tag : <input type="text" id="usertag" name="usertag" />&nbsp;

		      Nom d'utilisateur : <input type="text" id="username" name="username" value="visiteur" />

		      <input type="hidden" name="xtid" value="<?php echo extract.id;?>" />

		      <input type="hidden" name="timein" id="frmIn" value="0" />

		      <input type="hidden" name="timeout" id="frmOut" value="0" />

		      <input type="submit" value="Enregistrer" />

		    </p>

		 </form>

	</div>	

</div>