/*
 * sur iPad le position:fixed ne fonctionne pas, pour le faire on met un position:absolute et on fixe le top en javascript
 *
 * pour centrer les div.box on utilise :
 *  $(this).css( 'top' , ( $(window).height() - $(this).height() ) /2 + $(window).scrollTop() ); 
 *
 *  $(this) est la div.box qui est affichee
 *   remplacez $(this) par $('#box-portfolio') ou $(href) fonctionne aussi, this etant reserve pour les .each() 
 *
 *  $(window) est la fenetre d'affichage du site,
 *    on utilise $(window).height() renvoyant la hauteur de la fenetre
 *    et $(window).scrollTop() renvoyant le decalage dans la page
 *
 *  $(window).height() renvoi 1208 en portrait et 661 en paysage.
 *  bizarrement $(window).width() renvoi toujours 980 !
 */


var load;
var section;
var index_image_courante;
var nbImagesPortfolio = 4;

/*
 * image_light est appelee pour mettre une image dans la lightform et placer
 * des handlers sur les event click des liens suivant et precedent
 */
function image_light(href) {
		$("#img-portfolio").hide().attr('src',href).fadeIn('fast');

		if(navigator.userAgent.match('iPad')) {
			$("#opaque").show().css('opacity',"0.6");
			$("#box-portfolio") .addClass('displayed')
				//.css('top', ($(window).height()-$("#box-portfolio").height())/5+$(window).scrollTop()  )
				.show();
		} else {
			$("#opaque").show().animate({opacity:"0.6"},1000);          // Effet d'apparition de #opaque
			$('#box-portfolio').addClass('displayed').fadeIn("slow");  // Effet d'apparition de la div.box
		}

		var suivant =
		$("#ul-portfolio li a[href="+href+"]")	// recupere le <A> contenant le href
				.parent()		// remonte au <LI> conteneur
				.next()			// LI suivant
				.find('a')		// A dans le LI suivant
				.attr('href')           // attribut href du A du LI suivant.
				;

		if(!suivant) suivant = $("#ul-portfolio li:first a").attr('href'); // boucle si pas de suivant

		$("#portfolio-suivant").unbind('click').click( function() { return image_light(suivant); } );	

		var precedent =
		$("#ul-portfolio li a[href="+href+"]")	// recupere le <A> contenant le href
				.parent()		// remonte au <LI> conteneur
				.prev()			// LI suivant
				.find('a')		// A dans le LI suivant
				.attr('href')           // attribut href du A du LI suivant.
				;
		if(!precedent) precedent = $("#ul-portfolio li:last a").attr('href'); // boucle si pas de precedent

		$("#portfolio-precedent").unbind('click').click( function() { return image_light(precedent); } );	

		return false;
}

/*
 * image_loaded est appelee quand une image est lue, ce qui permet de chainee le chargement des images
 * en fait la liste ne contient que des liens vers les images... A chaque image lue, on met le tag img
 * dans le lien, 
 */
function image_loaded() {
	var a = $("#ul-portfolio li a.vignette");
	if(load==a.length) return;

	var current = $(a[load]);
	var href = $(current).attr('href');
	var info = href + ".txt";

	href = href.replace('/print/','/print/310x195/')
		   .replace('/web/','/web/310x195/')
		   .replace('/illustrations/','/illustrations/310x195/')
		   .replace('/photos/','/photos/310x195/');

	$(a[load]).click( function() { return image_light($(this).attr('href')); } )
		  .html("<span><img src='"+href+"' onload='image_loaded()' /></span>");

	/* animation pour l'apparition des image */

	$(current) .find('img')
		   .css( { position:'relative', opacity:0, width:0, height:0,top:'100px',left:'155px' } )
                   .animate( { opacity:1, width:'310px', height:'195px',top:0, left:0 },700,'easeOutBounce', function() {
			$.get(info,function(d) {
				$("<a class='info' style='display:none'><img src='/imgs/infos.png'></a><div class='info'><div class='texte-info'>"+d+"</div></div>")
					.appendTo( $(current).parent() );
				

				$(current).parent().find('a.info').fadeIn().click( function() {
					$("#ul-portfolio li div.info").fadeOut();
					$(this).parent().find('div.info').fadeIn()
						.hover( function(){},
							function(){ $(this).fadeOut(); } );
					} );
				});
			} );

	load++;
}


function loadlist(name) {
	section=name;

	$.getJSON("/json.cgi?R="+section,function(data){
		var i;
		var html = '';

		load=0;

		for(i=0;i<data.length;i++) {
			html = html + "<li><a class='vignette' href='/"+section+"/"+data[i]+"'><span></span></a></li>";
			}
		$("#list-portfolio").html(html);

		index_image_courante=0;
		$("#ul-portfolio").html( $("#list-portfolio li:lt("+nbImagesPortfolio+")").clone() );
		image_loaded();
		});
		
		$('div.infosbas').hide();
			$('#infos_'+ name).show();
	}

function load4images() {
	var i;
	var list = $("#list-portfolio li");

	load=0;
	$("#ul-portfolio").html('');
	for(i=0;i<nbImagesPortfolio;i++) {
		if(list[index_image_courante+i])
			$("#ul-portfolio").append( "<li>" + $(list[index_image_courante+i]).html() + "</li>" );
		}
	image_loaded();
}

// Bouton next des portfolio
function loadprec(event) {
	event.preventDefault();

	index_image_courante = index_image_courante - nbImagesPortfolio;
	if(index_image_courante < 0) index_image_courante = 0;
	load4images();
}
function loadnext(event) {
	event.preventDefault();

	index_image_courante = index_image_courante + nbImagesPortfolio;
	if( $("#list-portfolio li").length < index_image_courante + nbImagesPortfolio - 1)
		index_image_courante = index_image_courante - nbImagesPortfolio;

	load4images();
}

/* 2 fonction pour la lecture du cookie de session */
function arguments_cookies(offset){
  var endstr=document.cookie.indexOf (";", offset);
  if (endstr==-1) endstr=document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr)); 
}

function lire_cookie(nom) {
  var arg=nom+"=";
  var alen=arg.length;
  var clen=document.cookie.length;
  var i=0;

  while (i<clen){
    var j=i+alen;
    if (document.cookie.substring(i, j)==arg)
       return arguments_cookies(j);
    i=document.cookie.indexOf(" ",i)+1;
    if (i==0) break;
  }
  return null; 
}

/* selection est utilise sur l'event KeyUp du champ de recherche. 
   on prend la valeur du champ (que l'on met en minuscule pour ne pas tenir compte de la casse)
   et on compare au contenu textuel de toutes les div.vignettes (toujours mis en minuscule).
 */
function selection() {
	var val = $("#recherche").val().toLowerCase();

	if(val) {
		$('#allvideos div.vignette').each( function(i,e) {
			var html = $(e).text().toLowerCase();

			if(html.search(val)!=-1) $(e).show(); else $(e).hide();
			} );
		}
	else    $('#allvideos div.vignette').show();
}

/* all_selection permet d'afficher toutes les vignettes.
   Le return false permet de ne pas suivre le lien qui nous emmenerait en haut de la page
	cette fonction est appele quand on clique sur le lien tout
 */
function all_selection() {
	$('#allvideos div.vignette').show();
	return false;
}

/* switch_selection(id) permet de n'afficher que les vignettes de la section choisie
 */
function switch_selection(id) {
	$('#allvideos div.vignette').hide();
	$('#allvideos div.'+id).show();
	return false;
}

$(document).ready( function() {
	var name; // variable globale 

//alert(navigator.userAgent);

	$("#prec a").click( loadprec );
	$("#suiv a").click( loadnext ); 

	/* gestion du fixed sur iPad*/
	if(navigator.userAgent.match('iPad')) {

		$('#opaque').css('position','absolute').css('height','100%');

		$(window).scroll( function() {
			$('div.box.displayed').each( function(i,e) {
				//$(e).css('top', ($(window).height()-$(e).height())/2+$(window).scrollTop()  )
			} );
		} );
	}

	/** GESTION DE LA SELECTION DES VIDEOS **/
	/* Les fonctions retournent toutes FALSE, pour que le htref='#' ne soit pas suivi */
	$('#tout').click(    function() { return all_selection(); } );
	$('#famille').click( function() { return switch_selection('famille'); } );
	$('#copain').click(  function() { return switch_selection('copain'); } );
	$('#escrime').click( function() { return switch_selection('escrime'); } );
	$('#manu').click(    function() { return switch_selection('manu'); } );
	/*********/


		
	var login_name = lire_cookie('session');
	/* Lit si il y a un cookie session, si oui, il contient le nom de login pour faire des trucs */
	if(login_name) {
		// Fait disparaitre le lien login
		$("#menusite li a.login").hide();
		// ajoute le lien logout (j'ai mis la class login, parceque la classe logout n'existe pas)
		$("<li><a class='logout' href='logout.cgi'><span>Logout</span></a></li>").appendTo("#menusite");
		// ajoute le lien videos a la fin de #menusite
		$("<li class='protect'><a href='videos.html'><span>Videos</span></a></li>").prependTo('#menusite');
	}

	/*
 	 * handle pour chaque click sur un lien de classe lightform
 	 */
	if(navigator.userAgent.match('iPad')) {

		$("div.box").css('position','absolute')

		$('a.lightform').click( function() {
               		// on recupere le href du lien qui doit etre le lien local vers la div.box contenant le formulaire
			var href = $(this).attr('href');

			$("#opaque").show().css('opacity',"0.6");
			$(href) .addClass('displayed')
				.css('top', ($(window).height()-$(href).height())/2  )
				.fadeIn("slow");     // Effet d'apparition de la div.box
			return false;
		});
	} else {
		$('a.lightform').click( function() {
               		// on recupere le href du lien qui doit etre le lien local vers la div.box contenant le formulaire
			var href = $(this).attr('href');

			$("#opaque").show().animate({opacity:"0.6"},500); // Effet d'apparition de #opaque
			$(href) .addClass('displayed').fadeIn("slow");    // Effet d'apparition de la div.box
		return false;
		});
	}

	/*
 	 * Handle pour le click sur #opaque, donc a l'exerieur de la div.box
 	 */
	$("#opaque").click( function() {
		// Fait disparaitre #opaque et toutes les div.box
		$("#opaque,div.box,#divideo").removeClass('displayed').fadeOut("slow"); 
	 });

	// gestion des titre des champs dans les champs
	$('#form-contact input[type=text]')
		.focusin( function() {                               // gestion de l'event focus clavier
			if($(this).is('.champ_vide')) {                  // si on est dans un champs non remplit
				$(this).attr('vide',$(this).val());          // sauvegarde le titre (qui est dans val)
				$(this).removeClass('champ_vide').val('');   // et vide val() pour remplir
			}
		} )
		.focusout( function() {                              // gestion de l'event perte de focus clavier
			if($(this).val()=='')                           // si le champ n'est pas remplit
				$(this).val( $(this).attr('vide') )          // remet le titre depuis l'attribut sauvegarder
				       .addClass("champ_vide");
		} )
		.addClass('champ_vide');                             // Les champs sont vide au départ

	// gestion des titres du textarea
	$('#form-contact textarea')
		.focusin( function() {                               // gestion de l'event focus clavier
			if($(this).is('.champ_vide')) {                  // si on est dans un champs non remplit
				$(this).attr('vide',$(this).text());         // sauvegarde le titre (qui est dans val)
				$(this).removeClass('champ_vide').text('');  // et vide val() pour remplir
			}
		} )
		.focusout( function() {                              // gestion de l'event perte de focus clavier
			if($(this).text()=='')                          // si le champ n'est pas remplit
				$(this).text( $(this).attr('vide') )        // remet le titre depuis l'attribut sauvegarder
				       .addClass('champ_vide');
		} )
		.addClass('champ_vide');                   

	// gestion du submit du formulaire de contact en AJAX 
	$('#form-contact').submit( function() {

		var email = $(this).find('input[name=email]').val();
		var message = '';

		// Ajoute le contenue du textarea dans la variable message 
		message = message + "\n=-------=\n\n";
		message = message + $('#form-contact textarea:first').val();
		message = message + "\n\n=-------=\n\n";

		// boucle sur tous les input[text] et met les dans la variable message 
		$(this).find('input[type=text]').each( function(index,element){
			message = message + " - " + $(element).attr('name') + " = " + $(element).val() + "\n";
			} );

		// appel AJAX en post avec NOROBOT=1 pour éviter les robots 
		$.post("/contact.cgi",{ email:email, message:message,NOROBOT:1 },function(data) {
			// ICI le CGI a répondu 
			if(data.substring(0,2)=='OK') { // Si le CGI répond OK tout va bien 
				$("#box-form-contact").fadeOut('fast');
				$("#box-merci").fadeIn('slow');
			} else {
			alert(data); // Si le CGI ne repond pas OK, c'est un message d'erreur ! 
			}
		} );
		// On retourne false pour que le submit se finissent ICI 
		return false;
	} );

	/* Lien sur la div#logo , ce n'est pas un A alors il faut le faire en JavaScript, mais Ăa marche */
	$("#logo img").click( function() { window.location = "/"; } );

/******************************************************************* INDEX ********************************************/

	if(document.location.href.match(/index.html/) ||
	   document.location.href.match(/\.com\/$/) ||
	   document.location.href.match(/\/#/) ) {
	
			$('#print img').css({ width:'4px',height:'4px',opacity:0});
			$.getJSON("/json.cgi?R=print",function(data){
				$('#print img').attr('src','/print/310x195/'+data[Math.floor(Math.random()*data.length)])
					       .css('position','absolute').css('top','100px').css('left','155px')
				               .animate({ top:0, left:0, width:'310px',height:'195px', opacity:1},500,'swing',
							function() { $('#print span').animate( {opacity:1},2500 ); } );
			 } );	

			$('#web img').css({ width:'4px',height:'4px',opacity:0});
			$.getJSON("/json.cgi?R=web",function(data){
				$('#web img').attr('src','/web/310x195/'+data[Math.floor(Math.random()*data.length)])
					       .css('position','absolute').css('top','100px').css('left','155px')
				             .animate({ top:0, left:0, width:'310px',height:'195px',opacity:1},500,'swing',
							function() { $('#web span').animate( {opacity:1},2500 ); } );
			 } );	

			$('#illustrations img').css({ width:'4px',height:'4px',opacity:0});
			$.getJSON("/json.cgi?R=illustrations",function(data){
				$('#illustrations img').attr('src','/illustrations/310x195/'+data[Math.floor(Math.random()*data.length)])
					       .css('position','absolute').css('top','100px').css('left','155px')
				                       .animate({ top:0, left:0, width:'310px',height:'195px',opacity:1},500,'swing',
							function() { $('#illustrations span').animate( {opacity:1},2500 ); } );
			 } );	

			$('#photos img').css({ width:'4px',height:'4px',opacity:0});
			$.getJSON("/json.cgi?R=photos",function(data){
				$('#photos img').attr('src','/photos/310x195/'+data[Math.floor(Math.random()*data.length)])
					       .css('position','absolute').css('top','100px').css('left','155px')
				                .animate({ top:0, left:0, width:'310px',height:'195px',opacity:1},500,'swing',
							function() { $('#photos span').animate( {opacity:1},2500 ); } );
			 } );	

					$('div.infosbas').not('#one').hide();											
					$('div.infosbas a.infosbas') .click(function(){
						$('div.infosbas') .hide();
						$( $(this).attr('href') ).fadeIn(1500);	
					});
	}

/******************************************************************* VIDEOS ********************************************/

	else if(document.location.href.match(/videos.html/)) {
		if(login_name == '') {  // verifie qu'on est authorized
			document.location = '/';                  // sinon on retourne a l'accueil
		} else {
		$.get(login_name+'.txt',function(data) {

			name = data.split(/\n/); // get les noms des fichiers sans extentions (videos/cache.sh)

			// Les 3 dernieres videos (elles sont triees dans le fichier videos.txt) misent dans la div#lastvideos
			var html = "";

			if(name[0])
				html = html + "<div class='vignette' id='"+name[0]+"'><a class='lightvideo' href='"+name[0]+".mp4'><img src='videos/310x194/"+name[0]+".png'/><span></span></a></div>" ;
			if(name[1])
				html = html + "<div class='vignette' id='"+name[1]+"'><a class='lightvideo' href='"+name[1]+".mp4'><img src='videos/310x194/"+name[1]+".png'/><span></span></a></div>" ;
			if(name[2])
				html = html + "<div class='vignette' id='"+name[2]+"'><a class='lightvideo' href='"+name[2]+".mp4'><img src='videos/310x194/"+name[2]+".png'/><span></span></a></div>" ;

			$('#lastvideos').html(html);
			
			// Les autres videos mise dans div#allvideos
			var i;
			for(i=3;i<name.length;i++) {
				var val = name[i].split(/-/);
				
				if(val[1]) {
					var classe = '';
					if(val[1].search(/C/)!=-1) { classe = classe + " copain" ;  }
					if(val[1].search(/F/)!=-1) { classe = classe + " famille" ; }
					if(val[1].search(/E/)!=-1) { classe = classe + " escrime" ; }
					if(val[1].search(/M/)!=-1) { classe = classe + " manu" ; }

					$("<div class='vignette"+classe+"' id='"+name[i]+"'><a class='lightvideo' href='"+name[i]+".mp4'><img src='videos/310x194/"+name[i]+".png'/><span></span></a></div>" ).appendTo('#allvideos');
				}
			}

			// Pour toutes les div.vignette (generees au dessus)
			$('#allvideos div.vignette, #lastvideos div.vignette').each( function(index,value) {

				var name = $(value).attr('id');	// on recupere l'id de la div.vignette qui doit etre le nom du fichier sans extension

				if(name.length > 4) { // on verifie juste que l'id contient une valeur

					$.get("videos/"+name+".txt", function(data) { // AJAX, recupere le fichier txt (dans la variable data)

						// on prend le contenu du fichier que l'on entoure d'une div.explication
						// puis on ajoute la div.explication dans la div.vignette (a la fin)
						$("<div class='explication'>"+data+"</div>").appendTo(value);

						// gestion de hover sur la div.vignette
						$(value).hover( function() { // function appelee lorsque la souris entre dans la zone
								$(value).addClass('over')      // ajoute la class .over a la div.vignette
									.find("div.repli")     // trouve la div.repli dans la div.vignette
									.slideDown('fast');    // effet slideDown sur la div.repli
								$(value).find('img')           // trouve l'img dans la div vignette
									.css('opacity','1');   // img { opacity:1 }
							},function() {
								$(value).removeClass('over')   // enleve la classe over de la div.vignette
									.find("div.repli")     // trouve la div.repli dans la div.vignette
									.slideUp('fast');      // effet slideUp sur la div.repli
								$(value).find('img')           // trouve l'img dans la div vignette
									.css('background',"url(../imgs/play.png)"); // img { opacity:0.9 }
							});
						});
				}
			} );
			// Gestion des liens pour le player...

		
			if(navigator.userAgent.match('iPhone') ||
			   navigator.userAgent.match('iPad')) {
				$('a.lightvideo').each( function(index,element) {
					var href  = $(element).attr('href'); 
					var beforeLink = "videos/"; 
					$(element).attr({ 
					href: (beforeLink + href) 
					});

				});
			}
			else $('a.lightvideo').click( function() {
				//var href = $(this).attr('href').replace(/.mp4/,".flv"); // plus de FLV !!! Eric veut pas
				var href = $(this).attr('href');
				var player = '<div>'
					+'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="768" height="432" id="blaster" align="middle" >'
					+' <param name="movie" value="videos/NonverBlaster.swf"/>'
					+' <param name="allowScriptAccess" value="always" />'
					+' <param name="quality" value="standard" />'
					+' <param name="scale" value="noscale" />'
					+' <param name="salign" value="lt" />'
					+' <param name="allowFullScreen" value="yes" />'
					+' <param name="bgcolor" value="#000000"/>'
					+' <param name="counterType"" value="skip" />'
					+' <param name="animSequence" value="sync" />'
					+' <param name="continuous" value="true"/>' 
					+' <param name="FlashVars" value="mediaURL='+ href  +'&autoPlay=true&buffer=30&teaserURL=../videos/310x194/default.jpg"/>'
					
					+' <embed src="videos/NonverBlaster.swf" bgcolor="#000000" allowFullScreen="true" width="768"'
					+'        FlashVars="mediaURL='+ href  +'&amp;buffer=30&controlColor=0xFFFFFF&teaserURL=../videos/310x194/default.jpg&autoPlay=true"'
					+'        height="432" name="blaster" quality="standard" align="middle" allowScriptAccess="always" animSequence="sync" counterType="skip" continuous="true"'
					+'        type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' 
					+'</object>'
					+'</div>';
				$("#opaque").show().animate({opacity:"0.6"},500);
				$('#divideo').html(player).fadeIn("slow");
				return false;
			});

			// fin de la gestion de la video

			});
		}
	}

/******************************************************************* PORTFOLIO ********************************************/

	else if(document.location.href.match(/portfolio.html/))
	{
			
	/*
  	 * recupere le lien local (le diese suivi du nom de l'ancre) puis lit la liste correspondante
  	 */
	loadlist(location.hash.replace(/#/,''));
	$("<li><a class='smenu' href='portfolio.html' ><span>Portfolio</span></a></li>").prependTo('#menusite');
	}

	
/******************************************************************* DIVERS DEBUT********************************************/

/**** apparition du menu, qui doit etre en opacity:0 dans la CSS ****/
//$("#menusite > li > span > a").animate( { queue: true, opacity:0.7},500 )
//	.hover(
//		function() { $(this).stop().animate( {opacity:1,queue: true},1500).addClass('hoverOn'); },
//		function() { $(this).stop().animate( { opacity:0.9,queue: true},1500).removeClass('hoverOn'); }
//	);

								
									$("a.smenu") .click(function(event) {
										event.preventDefault();;
										if($(this).is('.afficher')) {
											$(this).removeClass('afficher');
												$("#sousmenu").animate({ 
													marginTop:"-66px"
												}, 1000);
										} else {
											$(this).addClass('afficher');
											$("#sousmenu").animate({ 
												marginTop:"66px"
											}, 1000);
										}
									
									});
								
								
							
											$('a').hover(
												function() {
													$(this).fadeTo("slow", 0.2);
														},
												function() { 
													$(this).fadeTo("fast", 1);
															}
												 );
										
							
								
/******************************************************************* DIVERS FIN ********************************************/		
	});