<?php
/**
* @version		1.0
* @package		Joomla
* @subpackage	Module Diapo
* @link 		http://monsieur-theatre.com
* @autor		Simon Gourfink
* @license		GNU/GPL
*/

defined( '_JEXEC' ) or die( 'Restricted access' );

$document = &JFactory::getDocument();
$document->addScript('http://code.jquery.com/jquery-1.8.2.js');
$document->addScript('http://code.jquery.com/ui/1.9.1/jquery-ui.js');
$document->addStyleSheet('/modules/mod_diapo/css/css.css');
?>


<?php
$select=array(
				$params->get('image1'),
				$params->get('image2'),
				$params->get('image3'),
				$params->get('image4'),
				$params->get('image5'),
				$params->get('image6'),
				$params->get('image7'),
				$params->get('image8'),
				$params->get('image9'),
				$params->get('image10')
				);
$array=array();
foreach($select as $key => $value) {
	if (isset($value)){
  $array[$key] =  $value ;
  }
  }
				
	$i_gal=1;
foreach ($array as $donnes){
	
	$img=$donnes;
	$idimg=$i_gal;
	
	if($i_gal==1){
	$premier=$idimg;	
	}
	
	$magallerie.='<li class="imgslide" style="height:'.$params->get('hauteur').';width:'.$params->get('largeur').'" id="'.$idimg.'"><a class="modal" rel="{handler: \'image\'}" href="'.$img.'"><div style="width:'.$params->get('largeur').'; height:'.$params->get('hauteur').'; background-image:url('.$img.'); background-size:cover; background-repeat:no-repeat; background-position:center;"></div></a></li>';

	$menuimg.='<li class="menslide"><a id="a'.$idimg.'" style="color:'.$params->get('couleur').'; text-decoration:none; font-size:24px;" href="javascript:slideshow('.$idimg.');">&#8226;</a></li>';
	
	$imgsdial.='<div id="dial'.$idimg.'" style="border-radius:3px;background-color:#eee;display:none;"><img  src="'.$img.'" style=" margin-left:auto;margin-right:auto;"/></div>';
	$i_gal++;
}

?>
<?php  if (!empty($idimg)&&0==0){?>
   
	<script>
	var gotime;
	function slideshow(clic){
	clearTimeout(gotime);
		var courant=document.getElementById("courant").value;
		var futur=clic;			
		var nombretoph=<?php  echo $idimg ?>;	
		if (futur<=nombretoph){
		document.getElementById("courant").value=futur;
		$("#"+courant).hide();
		$("#"+futur).show("fade",500);
		var plus=Math.ceil(parseInt(futur)+parseInt(1));
		gotime=setTimeout("slideshow("+plus+")",<?php echo $params->get('dure') ?>000);	
		}
		else{
		document.getElementById("courant").value=<?php  echo $idimg ?>;
		slideshow(<?php  echo $premier ?>);
		}
		document.getElementById("a"+courant+"").style.color="<?php echo $params->get('couleur') ?>";
		document.getElementById("a"+futur+"").style.color="<?php echo $params->get('couleurhover') ?>";
		
	
		}
	$(document).ready(function() {
		document.getElementById("a"+<?php  echo $premier ?>).style.color="<?php echo $params->get('couleurhover') ?>";
		slideshow(<?php  echo $premier ?>);
		});
		
		
		
	function dialogimg(iddlimg){
		$( "#dial"+iddlimg ).dialog({
			top:"0",
			width:500,			
			show: "fade",
            hide: "fade",
            modal: true,
			resizable: false,
			draggable:false,
			buttons: {
				"Fermer": function() {$( this ).dialog( "close" );}
			}
			});			
		}
	</script>
    
<div id="slideshow" class="slideshow">
<div id="slide" class="imgslide" style="height:<?php echo ($params->get('hauteur')+25)."px"; ?>;width:<?php echo $params->get('largeur') ?>" >
<ul class="imgslide" style="height:<?php echo $params->get('hauteur') ?>;width:<?php echo $params->get('largeur') ?>; " >
<?php  echo $magallerie ?>
</ul>
</div>
<div style="width:<?php echo $params->get('largeur') ?>; height:25px;" id="men">
<input id="courant" type="hidden" value="" />
<input id="futur" type="hidden" value="" />
<ul style="display:inline;list-style-type:none;margin-top:5px;">
<?php  echo $menuimg?>
</ul>
</div>
</div>
<?php  echo $imgsdial ?>
<?php  }?>