/* ###################################
INITIALISATION DES BOÎTES DE DIALOGUE
################################### */

function createDialBox(jump) {
	/* BOÎTE DE DIALOGUE RÉDUITE */
	var reducedBox = document.createElement("table")
	reducedBox.id = "reducedBox";
	reducedBox.style.visibility = "hidden";
	var ligne = document.createElement("tr");
	var cellule = document.createElement("td");
	reducedBox.onclick = function() {
		dialReduce(false);
	}
	var texte = document.createTextNode("Cliquez pour restaurer l'onglet");
	cellule.appendChild(texte);
	ligne.appendChild(cellule);
	reducedBox.appendChild(ligne);
	document.body.appendChild(reducedBox);
	/* BOÎTE DE DIALOGUE RESTAURÉE */
	var dialBox = document.createElement("table");
	dialBox.id = "dialBox";
	for(var i = 0 ; i < 10 ; i++) {
		switch(i) {
			case 0 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("td");
				cellule.id = "askText";
				cellule.colSpan = 2;
				var texte = document.createTextNode("Voulez-vous activer l'animation ?");
				cellule.appendChild(texte);
				break;
			case 1 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("td");
				var bouton = document.createElement("input");
				cellule.className = "celTable";
				bouton.value = "Oui";
				bouton.type = "button";
				bouton.className = "celBouton";
				bouton.id = "Oui";
				bouton.onclick = function() {
					initScript(1);
				}
				cellule.appendChild(bouton);
				break;
			case 2 :
				var cellule = document.createElement("td");
				var bouton = document.createElement("input");
				cellule.className = "celTable";
				bouton.value = "Non";
				bouton.type = "button";
				bouton.className = "celBouton";
				bouton.id = "Non";
				bouton.onclick = function() {
					initScript(2);
				}
				cellule.appendChild(bouton);
				i = i + jump;
				break;
			case 3 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("td");
				cellule.id = "askText";
				cellule.colSpan = 2;
				var texte = document.createTextNode("Changez les param\350tres de l'animation");
				cellule.appendChild(texte);
				break;
			case 4 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("td");
				var texte = document.createTextNode("Nombre d'objets : ");
				cellule.className = "celTable";
				cellule.appendChild(texte);
				break; 
			case 5 :
				var cellule = document.createElement("td");
				var param = document.createElement("input");
				cellule.className = "celTable";
				param.type = "text";
				param.className = "Param";
				param.id = "ParamNb";
				param.style.fontStyle = "italic";
				param.placeholder = "(Actuellement " + getNbImages + ")";
				param.onfocus = function () {
					ClrBox(document.getElementById(this.id));
				}
				param.onblur = function() {
					AfterClrBox(document.getElementById(this.id), getNbImages);
				}
				paramArray[0] = param;
				cellule.appendChild(param);
				break;
			case 6 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("td");
				var texte = document.createTextNode("Taille moyenne : ");
				cellule.className = "celTable";
				cellule.appendChild(texte);
				break;
			case 7 :
				var cellule = document.createElement("td");
				var param = document.createElement("input");
				cellule.className = "celTable";
				param.type = "text";
				param.className = "Param";
				param.id = "ParamTaille";
				param.style.fontStyle = "italic";
				param.placeholder = "(Actuellement " + getTailleImages + ")";
				param.onfocus = function () {
					ClrBox(document.getElementById(this.id));
				}
				param.onblur = function() {
					AfterClrBox(document.getElementById(this.id), getTailleImages);
				}
				paramArray[1] = param;
				cellule.appendChild(param);
				break; 
			case 8 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("input");
				ligne.style.textAlign = "center";
				cellule.value = "Valider";
				cellule.type = "button";
				cellule.className = "celBouton";
				cellule.id = "Valider";
				cellule.onclick = function() {
					getValue();
				}
				break;
			case 9 :
				var ligne = document.createElement("tr");
				var cellule = document.createElement("td");
				cellule.id = "celReduce";
				cellule.colSpan = 2;
				cellule.onclick = function() {
					dialReduce(true);
				}
				var texte = document.createTextNode("Cliquez pour r\351duire cet onglet");
				cellule.appendChild(texte);
				break;
		}
		ligne.appendChild(cellule);
		dialBox.appendChild(ligne);
	}
	document.body.appendChild(dialBox);
}

/* #########################################
INITIALISATION OU SUPPRESSION DE L'ANIMATION
######################################### */
function initScript(testScript) {
	switch(testScript) {
		case 1 :
			if(!document.getElementById("imgDiv")) {
				DelObj("dialBox");
				DelObj("reducedBox");
				createDialBox(0);
				runRain();
			}
			break;
		case 2 :
			if(document.getElementById("imgDiv")) {
				clearTimeout(timer);
				DelObj("imgDiv");
				DelObj("dialBox");
				DelObj("reducedBox");
				createDialBox(6);
			}
			break;
		case 3:
			clearTimeout(timer);
			DelObj("imgDiv");
			runRain();
			break;
	}
}

function DelObj(idObj) {
	var delObj = document.getElementById(idObj);
	delObj.parentNode.removeChild(delObj);
}

/* ##############################################
REDUCTION OU RESTAURATION DE LA BOÎTE DE DIALOGUE
############################################## */
function dialReduce(testReduce) {
	if(testReduce == true) {
		document.getElementById("dialBox").style.visibility="hidden";
		document.getElementById("reducedBox").style.visibility="visible";
	}
	else {
		document.getElementById("dialBox").style.visibility="visible";
		document.getElementById("reducedBox").style.visibility="hidden";
	}
}

/* #######################################
FORMATAGE DES CELLULES LORS DU REMPLISSAGE
####################################### */
function ClrBox(obj) {
	if(obj.value == obj.defaultValue) {
		obj.style.fontStyle = "normal";
		obj.placeholder = "";
	}
}

/* ###############################
REFORMATAGE DES CELLULES SI BESOIN
############################### */
function AfterClrBox(obj, temp) {
	if((obj.value != parseInt(obj.value)) && (obj.value != obj.defaultValue)) {
		alert("Veuillez entrer un nombre entier, s'il vous pla\356t");
		obj.style.background = "red";
	}
	else {
		obj.style.background = "white";
	}
	if(obj.value == "") {
		obj.style.fontStyle = "italic";
		obj.placeholder = "(Actuellement " + temp + ")";
	}
}

/* #######################################
MAJ DES NOUVEAUX PARAMETRES DE L'ANIMATION
####################################### */
function getValue() {
	for(var i = 0 ; i < paramArray.length ; i++) {
		if(paramArray[i].value > 0 && !isNaN(paramArray[i].value)) {
			switch(i) {
				case 0 :
					getNbImages = paramArray[i].value;
					break;
				case 1 : 
					getTailleImages = paramArray[i].value;
					break;
			}
		}
		else if(paramArray[i].value != ""){
			switch(i) {
				case 0 :
					paramArray[i].value = 100;
					getNbImages = paramArray[i].value;
					break;
				case 1 : 
					paramArray[i].value = 75;
					getTailleImages = paramArray[i].value;
					break;
			} 
		}
		else {
			switch(i) {
				case 0 :
					paramArray[i].value = getNbImages;
					break;
				case 1:
					paramArray[i].value = getTailleImages;
					break;
			}
		}
		var temp = paramArray[i].value;
		paramArray[i].value = "";
		AfterClrBox(paramArray[i], temp);
	}
	initScript(3);
}

/* ########
L'ANIMATION
######## */
function runRain() {
	/* Configuration du script */
	var nbImages = getNbImages; /* Nombre de cadeaux a afficher sur la page */
	var imgRot = true; /* Rotation des images (true => oui, false => non) */
	var imgMAX = 60; /* Taille max des images (pourcentage) */
	var imgMIN = 30; /* Taille min de l'image (pourcentage) */
	var speedMAX = 20;
	var speedMIN = 3; /* Vitesse MAX | MIN */
	var rotSpeedMAX = 20;
	var rotSpeedMIN = 0; /* Vitesse Rotation MIN / MAX */
	var vent = 5; /* Vent de droite > 0, de gauche < 0 */
	var height = document.getElementById("background").offsetHeight;
	var width = document.getElementById("background").offsetWidth;

	/* Tableau des images de petit cadeaux */
	var imgArray = new Array(2);
	imgArray[0] = new Image();
	imgArray[0].src = 'http://ekladata.com/a-cartable-ouvert.eklablog.fr/perso/Petale-verte.png';
	imgArray[0].width = getTailleImages;
	imgArray[0].height = getTailleImages;
	imgArray[1] = new Image();
	imgArray[1].src = 'http://ekladata.com/a-cartable-ouvert.eklablog.fr/perso/Petale-Rose.png';
	imgArray[1].width = getTailleImages;
	imgArray[1].height = getTailleImages;
	var xPos = new Array(nbImages);
	var yPos = new Array(nbImages);
	var imgAngle = new Array(nbImages);
	var imgAngularSpeed = new Array(nbImages);
	var imgSpeed = new Array(nbImages);

	/* On charge les cadeaux sur la page :) */
	/* Initialisation de la div */
	var imgDiv = document.createElement('div');
	imgDiv.id = 'imgDiv';
	imgDiv.style.position = 'absolute';
	imgDiv.style.left = document.getElementById("background").offsetLeft + "px";
	imgDiv.style.top = document.getElementById("background").offsetTop + "px";
	imgDiv.style.pointerEvents = 'none';
	imgDiv.style.display = 'block';
	imgDiv.style.overflow = 'hidden';
	imgDiv.style.height = height + 'px';
	imgDiv.style.width = width + 'px';
	document.body.appendChild(imgDiv);
	
	/* # Ajout des images et mise en place des paramètres # */
	for (var i = 0; i < nbImages; i++){
		var img = document.createElement('img');
		var actImg = Math.floor(Math.random()*2);
		img.id = 'img'+i;
		img.src = imgArray[actImg].src;
		img.style.height = Math.floor(((Math.random()*(imgMAX-imgMIN+1)+imgMIN) * imgArray[actImg].height)/100)+'px';
		img.style.position = 'absolute';
		yPos[i] = Math.floor(Math.random()*(height - 120));
		img.style.top = yPos[i]+'px';
		xPos[i] = Math.floor(Math.random()*(width - 100));
		img.style.left = xPos[i]+'px';
		img.alt = 'Cadeau';
		if (imgRot == true){
			imgAngle[i] = Math.floor(Math.random()*360);
			imgAngularSpeed[i] = Math.floor(Math.random()*(rotSpeedMAX-rotSpeedMIN+1)+rotSpeedMIN);
			if(navigator.userAgent.match("Chrome")){
				img.style.WebkitTransform = "rotate("+imgAngle[i]+"deg)";
			} else if(navigator.userAgent.match("Firefox")){
				img.style.MozTransform = "rotate("+imgAngle[i]+"deg)";
			} else if(navigator.userAgent.match("MSIE")){
				img.style.msTransform = "rotate("+imgAngle[i]+"deg)";
			} else if(navigator.userAgent.match("Opera")){
				img.style.OTransform = "rotate("+imgAngle[i]+"deg)";
			}
			else {
				img.style.transform = "rotate("+imgAngle[i]+"deg)";
			}
		}
		imgDiv.appendChild(img);
		imgSpeed[i] = Math.floor(Math.random()*(speedMAX-speedMIN+1)+speedMIN);
	}

	/* LA PLUIE */
	function pluie() {
		for(var i = 0; i < nbImages; i++){
			var img = document.getElementById("img"+i);
			yPos[i] = (yPos[i] < height ? yPos[i] + imgSpeed[i]: -120);
			xPos[i] = (xPos[i] < width ? xPos[i] + vent : 0); 
			img.style.top = yPos[i]+'px';
			img.style.left = xPos[i]+'px';
			if (imgRot == true){
				imgAngle[i] += imgAngularSpeed[i];
				if(navigator.userAgent.match("Webkit")){
					img.style.WebkitTransform = "rotate("+imgAngle[i]+"deg)";
				}
				else if(navigator.userAgent.match("Firefox")){
					img.style.MozTransform = "rotate("+imgAngle[i]+"deg)";
				}
				else if(navigator.userAgent.match("MSIE")){
					img.style.msTransform = "rotate("+imgAngle[i]+"deg)";
				}
				else if(navigator.userAgent.match("Opera")){
					img.style.OTransform = "rotate("+imgAngle[i]+"deg)";
				}
				else {
					img.style.transform = "rotate("+imgAngle[i]+"deg)";
				}
			}
		}
		height = document.getElementById("background").offsetHeight;
		imgDiv.style.height = height + 'px';
		timer = setTimeout(function(){pluie();}, 50);
	}
	pluie();
}

var getNbImages = 100;
var getTailleImages = 75;
var paramArray = new Array();
var timer;
createDialBox(6);