// chemin du répertoire où sont stockées les images
var chemin = "http://zombieinc.naniesan.net/ressources/rpscale/images/";

$(document).ready(function() {

	// initialisation des variables
	var i = 0;
	var h = 0;
	var bg = "";

	// traitement effectué pour chaque échelle de la page
	$(".rpscale").each(function() {
	
		// on récupère la valeur (normalement sur 50)
		i = $(this).attr("id");
		if (i == "") i = 50;
		
		// on créé les sous classes et leur css ici (pour simplifier la création de l'échelle dans les fichiers html et css)
		$(this).html("<div class=\"i\"></div><div class=\"image\"></div><div class=\"layout\"></div><div class=\"rouge\"></div>");
		
		$(this).css({ "width" : "75px", "height" : "400px", "background-color" : "#329532"});
		$(this).children(".rouge").css({ "width" : "75px", "background-color" : "#b73232", "position" : "absolute"});
		$(this).children(".rouge").css("height","400px");
		$(this).children(".layout").css({ "width" : "75px", "height" : "400px", "background-image" : "url(\""+chemin+"rpscale.png\")", "position" : "absolute", "z-index" : "100"});
		
		// on créé l'image sans sa position verticale et non affichée pour commencer
		$(this).children(".image").css({ "width" : "40px", "height" : "40px", "position" : "absolute", "z-index" : "150", "margin-left" : "17px", "display" : "none"});
		
		// on teste les valeurs de i, et d'une part on affiche l'image correspondante, le fond (i) correspondant, et d'autre part on la place à la bonne hauteur
		if (i>=50) {
			h = 0;
			bg = "url(\""+chemin+"i3.png\")";
			$(this).children(".image").css("background-image","url(\""+chemin+"50.jpg\")");
			$(this).children(".image").css("margin-top","25px");
		}
		else {
			h = 400-i*8;
			if (i>=45) {
				$(this).children(".image").css("background-image","url(\""+chemin+"45.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-10+"px");
				bg = "url(\""+chemin+"i3.png\")";
			}
			else if (i>=40) {
				$(this).children(".image").css("background-image","url(\""+chemin+"40.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i3.png\")";
			}
			else if (i>=35) {
				$(this).children(".image").css("background-image","url(\""+chemin+"35.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i3.png\")";
			}
			else if (i>=30) {
				$(this).children(".image").css("background-image","url(\""+chemin+"30.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i3.png\")";
			}
			else if (i>=25) {
				$(this).children(".image").css("background-image","url(\""+chemin+"25.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i3.png\")";
			}
			else if (i>=20) {
				$(this).children(".image").css("background-image","url(\""+chemin+"20.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i2.png\")";
			}
			else if (i>=15) {
				$(this).children(".image").css("background-image","url(\""+chemin+"15.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i2.png\")";
			}
			else if (i>=10) {
				$(this).children(".image").css("background-image","url(\""+chemin+"10.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i2.png\")";
			}
			else if (i>=5) {
				$(this).children(".image").css("background-image","url(\""+chemin+"5.jpg\")");
				$(this).children(".image").css("margin-top",(400-i*8)-20+"px");
				bg = "url(\""+chemin+"i1.png\")";
			}
			else {
				$(this).children(".image").css("background-image","url(\""+chemin+"1.jpg\")");
				$(this).children(".image").css("margin-top","342px");
				bg = "url(\""+chemin+"i1.png\")";
			}
		}
		
		// on met à jour les classes avec les valeurs calculées
		$(this).children(".i").css({ "width" : "75px", "height" : "400px", "background-image" : bg, "position" : "absolute", "z-index" : "50"});
		$(this).children(".rouge").animate({ height: h }, 4000);
		
		// on affiche finalement l'image avec un fondu
		$(this).children('.image').fadeIn(3000);
		
	});
	
});