<div id="tagNavigator-list">
<?php if($film):?>
	<h3>Tags associés à cet extrait</h3>
	<ul>
	<?php $i=0; ?>
	<?php foreach($film->getDistinctTags() as $tag):?>
	<li>			
		<div class="tag"><?php echo $tag; ?></div>
		<div class="tagSlider"><input id="Slider_<?php echo $i; ?>" type="slider" name="percent" value="5" /></div>
		<div class="tagActivated"><a id="tag_link_<?php echo $i; ?>" href="<?php echo url_for('@searchReflex?distance=5&film_uniqueid='.$film->uniqueid.'&tag='.$tag); ?>">+</a></div>
	</li>
	<script type="text/javascript" charset="utf-8">
	  //scale: ['-100%', '|', -50, '|', '0', '|', 50, '|', '100%'
      $(document).ready(function() {
    	    var url_<?php echo $i; ?> = "<?php echo url_for('@searchReflex?distance={0}&film_uniqueid='.$film->uniqueid.'&tag='.$tag); ?>";
    	    var urlTest_<?php echo $i; ?> = "<?php echo url_for('@testReflex?distance={0}&film_uniqueid='.$film->uniqueid.'&tag='.$tag); ?>";
	        $("#Slider_<?php echo $i; ?>")
	              .slider({ 
	                  from: -100, 
	                  to: 100,
	                  step: 1,
	                  smooth: true,
	                  round: 1,
	                  dimension: "&nbsp;%",
	                  limits: false,
	                  callback: function(value) {
	                      $("#tag_link_<?php echo $i; ?>").attr("href",url_<?php echo $i; ?>.replace("%7B0%7D", value.toString())); 
	                      $.getJSON(urlTest_<?php echo $i; ?>.replace("%7B0%7D", value.toString()), function(json){
	                           color =  json.length==0?"#990000":"#32cd32";
	                           if(json.length == 0) {
	                               $("#tag_link_<?php echo $i; ?>").parent().hide("fast");
	                           }
	                           else {
	                               $("#tag_link_<?php echo $i; ?>").parent().show("fast");
	                           }
	            	                           
	                           $("#tag_link_<?php echo $i; ?>").parent().css("background",color);
	                      });
	                  },
	                  });    	          
    	  value = $("#Slider_<?php echo $i; ?>").val();
          $("#tag_link_<?php echo $i; ?>").attr("href",url_<?php echo $i; ?>.replace("%7B0%7D", value.toString())); 
          $.getJSON(urlTest_<?php echo $i; ?>.replace("%7B0%7D", value.toString()), function(json){
               color = json.length==0?"#990000":"#32cd32";
               if(json.length == 0) {
                   $("#tag_link_<?php echo $i; ?>").parent().hide("fast");
               }
               else {
            	   $("#tag_link_<?php echo $i; ?>").parent().show("fast");
               }
               $("#tag_link_<?php echo $i; ?>").parent().css("background",color);
          });    	  
      });
    </script>
    <?php $i+=1; ?>
	<?php endforeach; ?>
    </ul>
<?php endif;?>
</div>
