// JavaScript Document

var fontSizeArray = new Array();
var tableauSizeArray = new Array();
var z = 1000;
var imageSize;
var fontSizeLinkArray = new Array();

// Lightbox function
$(document).ready(function(){
	if ($('#gallery1').get(0) == undefined && $('.content').get(0) == undefined) return
	if ($('#gallery1').get(0) != undefined) {
		$('#gallery1 a').lightBox();
		$('#gallery2 a').lightBox();
		$('#gallery3 a').lightBox();
		$('#gallery4 a').lightBox();
		$('#gallery5 a').lightBox();
		$('#gallery6 a').lightBox();
		$('#gallery7 a').lightBox();
		$('#gallery8 a').lightBox();
		$('#gallery9 a').lightBox();
		$('#gallery10 a').lightBox();
		$('#gallery11 a').lightBox();
		$('#gallery12 a').lightBox();
		$('#gallery13 a').lightBox();
		$('#gallery14 a').lightBox();
		$('#gallery15 a').lightBox();
		$('#gallery16 a').lightBox();
		$('#gallery17 a').lightBox();
		$('#gallery18 a').lightBox();
		$('#gallery19 a').lightBox();
		$('#gallery20 a').lightBox();
		$('#gallery21 a').lightBox();
		$('#gallery22 a').lightBox();
	}

	if ($('.content').get(0) != undefined) {
		$('.content').each(function(index) {
    			var position = $(this).position();
				$("#"+$(this).attr('id').replace(/c/, 's')).css('top', position.top);
				$("#"+$(this).attr('id').replace(/c/, 's')).css('left', position.left);
				
				//AJOUTE POUR QUE LES POPUP PRENNENT LA BONNE TAILLE DES LE DEPART
				$("#"+$(this).attr('id').replace(/c/, 's')).css('width', $(this).width()+25);
				$("#"+$(this).attr('id').replace(/c/, 's')).css('height', $(this).height()+25);
				////////////////////////////////////////////////////////////////////
				
				//ON STOCK LA LARGEUR DE l'ELEMENT EN COURS DANS LE TABLEAU A L'INDEX DE SON ID
				var key = $(this).attr('id');
				tableauSizeArray[key] = $(this).width();
				////////////////////////////////////////////////////////////////////
				
				fontSizeArray[key] = parseInt($(this).children('p').css('font-size'));
				$("#"+$(this).attr('id').replace(/c/, 's')).show();
				
				fontSizeLinkArray[key] = parseInt($(this).children('p').children('a').css('font-size'));
				$("#"+$(this).attr('id').replace(/c/, 's')).show();
  	});
			$(".content").draggable({
				drag: function(event, ui) {
				//document.title = this; Permet de mettre le nom de la div en question dans le title
					var position = $(this).position();
					$("#"+$(this).attr('id').replace(/c/, 's')).css('top', position.top);
					$("#"+$(this).attr('id').replace(/c/, 's')).css('left', position.left);
				},
				stop: function(event, ui) {
					var position = $(this).position();
					$("#"+$(this).attr('id').replace(/c/, 's')).css('top', position.top);
					$("#"+$(this).attr('id').replace(/c/, 's')).css('left', position.left);
				}
				
			}).resizable({
				aspectRatio: true, 
				resize: function(event, ui) {
					var actualWidth = ui.element.width();
					var actualHeight = ui.element.height();
					
					//ON rˇcup¸re le clef du tableau (id de l'ˇlˇment)
					var key = ui.element.attr('id');
					
					//On utilise la taille du tableau plut™t que w
					//pour le ratio de la font
					var newFontSize = (fontSizeArray[key]*actualWidth)/tableauSizeArray[key];
					ui.element.children('p').css({'font-size': newFontSize+'px'}); 
					var newFontSizeLink = (fontSizeLinkArray[key]*actualWidth)/tableauSizeArray[key];
					ui.element.children('p').children('a').css({'font-size': newFontSizeLink+'px'}); 
					
					$("#"+ui.element.attr('id').replace(/c/, 's')).css('width', ui.element.width()+25);
					$("#"+ui.element.attr('id').replace(/c/, 's')).css('height', ui.element.height()+25);
					
					//pour la taille max/min
					/*ui.element.maxHeight: 500,
					ui.element.maxWidth: 250,
					ui.element.minHeight: 50,
					ui.element.minWidth: 25

					$("#"+ui.element.attr('id').css('max-width', (actualWidth*1.3)+'px';
					$("#"+ui.element.attr('id').css({'max-width': (actualWidth*1.3+'px'};
					$("#"+ui.element.attr('id').css({'min-width': (actualWidth*1.3+'px'};
					$("#"+ui.element.attr('id').css({'max-height': (ui.element.width()+25)*1.3+'px'};
					$("#"+ui.element.attr('id').css({'min-height': (ui.element.width()+25)*1.3+'px'};*/
					
					//pour le ratio de l'image
					ui.element.children('img').css('width', ui.element.width());
					ui.element.children('img').css('height', ui.element.height());
					
					//pour la taille max/min
					/*ui.element.attr('id').css('min-width', ui.element.width());
					ui.element.attr('id').css('min-width', ui.element.width()+25*0.7;
					ui.element.css('max-height', ui.element.height()+25)*1.3;
					ui.element.css('min-height', ui.element.minWidth: 50);*/
				}, 
				stop: function(event, ui) {
					var actualWidth = ui.element.width();
			
					//ON rˇcup¸re le clef du tableau (id de l'ˇlˇment)
					var key = ui.element.attr('id');
			
					//On utilise la taille du tableau plut™t que w
					var newFontSize = (fontSizeArray[key]*actualWidth)/tableauSizeArray[key];
					ui.element.children('p').css({'font-size': newFontSize+'px'}); 
					$("#"+ui.element.attr('id').replace(/c/, 's')).css('width', ui.element.width()+25);
					$("#"+ui.element.attr('id').replace(/c/, 's')).css('height', ui.element.height()+25); 
					
					//pour le ratio de l'image
					ui.element.children('img').css('width', ui.element.width());
					ui.element.children('img').css('height', ui.element.height());
				}	
			}).each(function() {
				$(this).children('div').css('z-index', 0);
			});
			
			// Permet de gˇrer les z-index
			$(".postIt").click(function(){
				//Le param¸tre c'ˇtait z-index et pas zIndex car c'est le nom css
				//Je change pas le .postIt mais les deux divs (ombre et content) car la div postIt n'est pas positionnˇe
				//Il faudrait juste mettre des PNG transprents pour l'ombre. ;-)
				$(this).children('div').css('z-index', z);
				//$(this).children('div.content').css('z-index', z++);
				//$(this).children('div.ui-resizable-handle').css('z-index', z+2);
				z++;
			});
			
			// Permet de gˇrer le recto/verso
			$(".content").click(function(){
				$(this).children("img").toggle();
				$(this).children("p").toggle();
			});
	}
});