<script type="text/javascript" src="data/javascript/jquery.min.js"> </script>
<script type="text/javascript" src="data/javascript/jquery.tools.min.js"> </script>
<script type="text/javascript" src="data/javascript/jquery.ui.min.js"> </script>

<div class="tab-content container px-2 py-2 border">
	<div class="box">
		<mx:bloc id="slideshow">
		<div id="pageContainer">
			<div id="slideshow">
				<div id="slidesContainer">
					<mx:bloc id="slideshowlastnewsthreads">
					<div class="slide">
						<mx:bloc id="newsBloc">
						<div class="leftBloc">
						<h2><mx:text id="slideshowlastnewstitle"/></h2>
						<p>
							<mx:bloc id="lastnews">
								<mx:text id="lastnewsdate"/> <b><a mXattribut="href:newslink"><mx:text id="lastnewstitle"/></a></b><br />
							</mx:bloc id="lastnews">
						</p>
						</div>
						</mx:bloc id="newsBloc">
						<mx:bloc id="threadsBloc">
						<div class="rightBloc">
						<h2><mx:text id="slideshowlastpoststitle"/></h2>
						<p>
							<mx:bloc id="activethreads">
								<mx:text id="activethreadsdate"/> <b><a mXattribut="href:threadlink"><mx:text id="activethreadstitle"/></a></b><br />
							</mx:bloc id="activethreads">
						</p>
						</div>
						</mx:bloc id="threadsBloc">
					</div>
					</mx:bloc id="slideshowlastnewsthreads">
					<mx:bloc id="slideshowlastmovies">
					<div class="slide">
						<mx:bloc id="moviesBloc">
						<div class="leftBloc">
						<h2><mx:text id="slideshowlastmoviestitle"/></h2>
						<p>
							<mx:bloc id="lastmovies">
								<mx:text id="lastmoviesdate"/> <b><mx:text id="lastmoviestitle"/></b><br />
							</mx:bloc id="lastmovies">
						</p>
						</div>
						</mx:bloc id="moviesBloc">
					</div>
					</mx:bloc id="slideshowlastmovies">
				</div>
			</div>
		</div>
		</mx:bloc id="slideshow">
		<div id="lastestsnews">
			<mx:bloc id="news">
				<div class="news">
					<div class="newshead">
						<span class="newstitle"><mx:bloc id="iconBloc"><mx:image id="icon"/></mx:bloc id="iconBloc"><a mXattribut="href:newslink"><mx:text id="newstitle"/></a></span>
						<span class="newsdate"><mx:text id="newsdate"/></span><br/>
					</div>
					<div class="newscontent">
						<div class="newscontent"><mx:text id="newscontent"/></div>
					</div>
					<div class="newsbottom">
						<div class="newscomments"><mx:text id="newscomments"/><mx:text id="lblnewscomments"/></div>
						<div class="newscommentslink"><mx:text id="lblnewscommentslink"/></div>
					</div>
				</div>
			</mx:bloc id="news">
		</div>
		<mx:bloc id="blocCharte">
			<script type="text/javascript">
			//<![CDATA[
				$(document).ready(function() {
					$("#facebox").overlay({
						closeOnClick: false,
						api:true
					})<mx:text id="loadcharte"/>;
					var dataString = 'rules='+ 1;
					$("#checkrules").change(function () {
						$.ajax
						({
							type: "POST",
	// 						url: "",
							data: dataString,
							cache: false
						});
	// 					alert("Rules accepted");
						$("#facebox").toggle();
					});
				});
			// ]]>
			</script>
			<div id="facebox" class="apple_overlay">
				<div class="contentWrap">
					<div class="chartes">
						<mx:text id="textCharteLegion"/>
						<div class="action">
							<input id="checkrules" type="checkbox" class="checkbox"> I accept the rules</input><!--<button class="close">Close</button>-->
						</div>
					</div>
				</div>
			</div>
		</mx:bloc id="blocCharte">
	</div>
</div>
<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
	//Configuration
		  var retour = true;
		  var tempsTransition = 1000;
		  var affichePlayPause = true;
		  var lectureAutomatique = true;
		  	var tempsAttente = 8000;
			
		  var icones = new Array();
		  		icones['play'] = 'data/image/slideshow/play_slider.png';
		  		icones['pause'] = 'data/image/slideshow/pause_slider.png';	
			
		  var currentPosition = 0;
		  var slideWidth = '890';
		  var slides = $('.slide');
		  var numberOfSlides = slides.length;
		  var interval;
		  var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow').prepend('<span class="control" id="leftControl">Précédent</span>');
  if( numberOfSlides > 1 ){
	$('#slideshow').append('<span class="control" id="rightControl">Suivant</span>');
  }

  
  // Hide left arrow control on first load
  manageControls(currentPosition);

  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
		
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}
	
	// Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });

  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
  function suivant(){
	$('#rightControl').click();
	}
  function start() {
  	lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
  	lectureEnCours = false;
   clearInterval(interval);
  }
  
 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}
if(affichePlayPause == true && numberOfSlides > 1){
	$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
	if(lectureAutomatique == true){
		$('#navDiapo').attr('src',icones['pause']);
	}else{
		$('#navDiapo').attr('src',icones['play']);	
	}
	$('#navDiapo').bind('click', function(){
		if(lectureEnCours == true){
			$(this).attr('src',icones['play']);
			pause();
		}else{
			$(this).attr('src',icones['pause']);
			start();
		}
	});
}


  	
});
// ]]>
</script>
