//#####################################################################################
//#####################################################################################

// 						StretchBox v3.0 - F.TROTEL - 11/08/2010

// Sur base  jQuery JavaScript Library v1.4 (requiert l'appel préalable à JQUERY)
// Compatibilité vérifiée : IE7, IE8+, Firefox 3.0+, Safari 4.0+, Chrome 1.0+
//#####################################################################################
//#####################################################################################

/*
##############################################################################################################
##############################################################################################################
DOCUMENTATION
##############################################################################################################
##############################################################################################################

	stretchBox permet de gérer l'habillage de n'importe quel élément du DOM HTML par une image étirable 
	mais qui ne se déforme pas dans les angles (très utile pour les coins arrondis par ex.)
	
	Une fonction Jquery unique permet de gérer tous les types d'habillage : 
	- horizontal / vertical / dans les 2 axes en même temps
	- Devant / derrière l'élément (en général, DEVANT pour une image, DERRIERE pour une DIV)

	Liste des paramètres à passer à la fonction :

		"img_url"			// OBLIGATOIRE. URL relative ou absolue de l'image d'habillage.
		"width", "height", 	// OBLIGATOIRE. Dimensions de l'image d'habillage
		"x1", "x2",			// OPTIONNEL.   positions des lignes verticales de la grille de déformation de l'image d'habillage. (ne pas les mettre en cas de stretch vertical )
		"y1", "117",		// OPTIONNEL.   positions des lignes horizontales de la grille de déformation de l'image d'habillage. (ne pas les mettre en cas de stretch horizontal )
		"position"			// OPTIONNEL.   position de l'image d'habillage par rapport à l'objet ciblé dans le DOM : "DEVANT"/"DERRIERE"
		"padding"		 	// OPTIONNEL.   paramètre optionnel pour forcer le padding APRES application du stretchBox. Utiliser la syntaxe CSS (haut/droite/bas/gauche).
		"margin"		 	// OPTIONNEL.   paramètre optionnel pour forcer le margin APRES application du stretchBox. Utiliser la syntaxe CSS (haut/droite/bas/gauche).
	
	Types de déformation possibles de l'image d'habillage :
	- Pour faire un stretch complet (cas général) : indiquer les paramètres x1,x2,y1,y2.
	- Pour faire un stretch horizontal : ne pas indiquer les paramètres x1 et x2.
	- Pour faire un stretch horizontal : ne pas indiquer les paramètres x1 et x2.
	- Pour faire un stretch vertical : ne pas indiquer les paramètres y1 et y2.
	- Pour faire un étirement simple de l'image par rapport au dimensions de l'élément ciblé (sans grille de déformation) : ne pas indiquer les paramètres x1,x2,y1,y2.



	NOTAS IMPORTANT : 
	1) les paramètres sont à passer à la fonction sous la forme d'un tableau de propriétés.
		Exemple d'appel de la fonction :
		$('a.cadre img').stretchBox({ img_url:"images/cadre_image.png", width:496 , height:452, x1:40, x2:440 ,y1:40, y2:400 ,position:"DEVANT", padding:"7px 15px 15px 8px" });

	2) Toutes les dimensions sont à indiquer en PIXELS et pas en pourcentage,
		car le stetchbox ne peut pas suivre dynamiquement, et de plus les pourcentages génèrent des arrondis dans les calculs, qui ne tombent plus juste.

	Remarque : il est possible de combiner stretchBox avec FancyBox (voir exemple)

##############################################################################################################
##############################################################################################################
DOCUMENTATION
##############################################################################################################
##############################################################################################################
*/






// #####################################################################################################################################################
// #####################################################################################################################################################
// FONCTIONS PUBLIQUES DE LA CLASSE stretchBox
// #####################################################################################################################################################
// #####################################################################################################################################################


// ##############################################################################################################
// fonction PUBLIC appelée en syntaxe Jquery, qui éxécute le Stretch complet sur les éléments désignés :
$.fn.stretchBox = function(param)
{
	tab_defaut = {
		img_url:"http://serv-lfdt/03_developpement/site_xpres/site_xpres_v6/libraries/dev/js/stretchbox/demo/images/fond_encart.png", 	
		width:621, height:222, 	
		position:"DERRIERE"		
	};
	
	
	// cas particuliers de déformation : Horizontal ou vertical :
	if (param.x1==undefined) { param.x1=0; }
	if (param.x2==undefined) { param.x2=param.width; }

	if (param.y1==undefined) { param.y1=0; }
	if (param.y2==undefined) { param.y2=param.height; }

	
	// affectation des valeurs par défaut pour les paramètres non précisés :
	param = valeurs_par_defaut(param, tab_defaut); 


	// sécurisation des données :
	if (param.x1>param.x2) { var tampon=param.x1; param.x1=param.x2; param.x2=tampon; }
	if (param.y1>param.y2) { var tampon=param.y1; param.y1=param.y2; param.y2=tampon; }
	
	if ( (param.x2<=0) || (param.x2>param.width))  { param.x2=param.width; }
	if ( (param.x1<=0) || (param.x1>param.width))  { param.x1=0; }
		
	if ( (param.y2<=0) || (param.y2>param.height))  { param.y2=param.height; }
	if ( (param.y1<=0) || (param.y1>param.height))  { param.y1=0; }
	

	// application de la fonction de Stretch complet à l'ensemble des éléments sélectionnés :
	$(this).each( function() { $(this).stretchBox_un_element(param); } );
	
} // fin function
// ##############################################################################################################



// #####################################################################################################################################################
// #####################################################################################################################################################
// FONCTIONS PRIVEES DE LA CLASSE stretchBox
// #####################################################################################################################################################
// #####################################################################################################################################################



// ##############################################################################################################
// fonction PRIVATE appelée en syntaxe Jquery, qui écécute le Stretch complet sur UN SEUL des éléments désignés :
$.fn.stretchBox_un_element = function(param)
{
 
	 //---------------------------------------------------------------------------------------------------
	 // D'abord, on entoure l'objet ciblé avec une DIV, à laquelle on ré-attribue les attributs de l'objet ciblé.
	 //---------------------------------------------------------------------------------------------------
	 $(this).wrap('<div />'); // on crée une div parent de l'objet ciblé.
	
	// on mémorise le type de 'position', hauteur et largeur CSS de l'élément ciblé, pour le réattibuer plus tard à son parent: 
	var maposition = $(this).css('position');
	var malargeur = $(this).css('width');
	var mahauteur = $(this).attr('height');
	
		 
	 var tab_attributs = new Array('style', 'class', 'id'); // liste des attributs à transférer de l'enfant vers la DIV parent qui vient d'être créée.
	 for(i in tab_attributs)
	 {
	 	var attribut = tab_attributs[i];
		$(this).parent().attr(attribut, $(this).attr(attribut)); 	// on recopie les attributs de l'enfant vers son parent.
		$(this).removeAttr(attribut);								// on supprime l'attribut de l'enfant.
	 }


	//---------------------------------------------------------------------------------------------------
	// on réattibue les dimensions : 
	//---------------------------------------------------------------------------------------------------
		$(this).parent().css('width', malargeur);
		$(this).parent().css('height', mahauteur);
		$(this).css('width', malargeur);
		$(this).css('height', mahauteur);

	 //---------------------------------------------------------------------------------------------------
	 // Ensuite, on supprime les styles de bordure, couleur de fond ET image de fond :
	 //---------------------------------------------------------------------------------------------------
		$(this).parent().css('backgroundColor' ,'transparent'); $(this).css('backgroundColor' ,'transparent');
		$(this).parent().css('backgroundImage' ,'none');		$(this).css('backgroundImage' ,'none');
		$(this).parent().css('border' ,0);						$(this).css('border' ,0);

	 //---------------------------------------------------------------------------------------------------
	 // On définit les propriétés de positionnement de l'élément ciblé par rapport à son parent :
	 //---------------------------------------------------------------------------------------------------
		if (maposition=='absolute')  { $(this).parent().css('position' , 'absolute'); } else { $(this).parent().css('position' , 'relative'); }
		$(this).css('position' , 'relative');
		
		$(this).css('display' , 'block');
		$(this).parent().css('display' , 'block');
		

	//---------------------------------------------------------------------------------------------------
	// ensuite on réattribue le PADDING et le MARGIN si ils sont forcés dans le passage des paramètres :
	//---------------------------------------------------------------------------------------------------
		if (param.padding!=undefined) { $(this).parent().css('padding', param.padding); };
		if (param.margin!=undefined) { $(this).parent().css('margin', param.margin); };




	 //---------------------------------------------------------------------------------------------------
	 // CALCUL DES IMAGES DE LA GRILLE DE DEFORMATION :
	 //---------------------------------------------------------------------------------------------------
	
	
	// on récupère les dimensions de l'élément ciblé :
	var largeur_objet = $(this).parent().attr('offsetWidth');
	var hauteur_objet = $(this).parent().attr('offsetHeight');

	// calcul des données pour les images dans la colonne du centre :
	var largeur_initiale = param.x2 - param.x1 ;
	var largeur_finale = largeur_objet - param.x1 - (param.width - param.x2);
	var echelle_largeur = largeur_finale / largeur_initiale;
	var largeur_affichage_image = Math.round(param.width * echelle_largeur);
	var clip_gauche = Math.round(param.x1 * echelle_largeur);
	var clip_droite = clip_gauche + largeur_finale;
	
	// calcul des données pour les images dans la ligne du milieu :
	var hauteur_initiale = param.y2 - param.y1 ;
	var hauteur_finale = hauteur_objet - param.y1 - (param.height - param.y2);
	var echelle_hauteur = hauteur_finale / hauteur_initiale;
	var hauteur_affichage_image = Math.round(param.height * echelle_hauteur);
	var clip_haut = Math.round(param.y1 * echelle_hauteur);
	var clip_bas = clip_haut + hauteur_finale;


	// on définit les images de la grille de déformation :
	//-----------------------------------------------------------
	var code_image_stretchee =""; // init
	var style_commun = "position:absolute;display:block;border:0;";
	var image = param.img_url;
	
	// Images de la colonne de gauche :
	//-----------------------------------------------------------
	if (param.x1>0)
	{
		if (param.y1>0)
		{
			// image à GAUCHE en HAUT :
			code_image_stretchee+= '<img style="'+style_commun+';clip: rect(0px,'+param.x1+'px,'+param.y1+'px,0px);left:0px;top:0px;" src="'+image+'" width="'+param.width+'" height="'+param.height+'" >';
		}
	
		// image à GAUCHE au MILIEU
		code_image_stretchee+= '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+param.x1+'px,'+clip_bas+'px,0px);left:0px;top:'+(param.y1-clip_haut)+'px;" src="'+image+'" width="'+param.width+'" height="'+hauteur_affichage_image+'" >';

		if (param.y2<param.height)
		{
			// image à GAUCHE en BAS :
			code_image_stretchee+= '<img style="'+style_commun+';clip: rect('+param.y2+'px,'+param.x1+'px,'+param.height+'px,0px);left:0px;bottom:0px;" src="'+image+'" width="'+param.width+'" height="'+param.height+'" >';
		}
	} // fin colonne gauche


	// Images de la colonne centrale :
	//-----------------------------------------------------------
		if (param.y1>0)
		{
			// image au CENTRE en HAUT :
			code_image_stretchee+= '<img style="'+style_commun+';clip: rect(0px,'+clip_droite+'px,'+param.y1+'px,'+clip_gauche+'px);left:'+(param.x1-clip_gauche)+'px;top:0px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+param.height+'" >';
		}
		
		// image au CENTRE au milieu :
		code_image_stretchee+= '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+clip_droite+'px,'+clip_bas+'px,'+clip_gauche+'px);left:'+(param.x1-clip_gauche)+'px;top:'+(param.y1-clip_haut)+'px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+hauteur_affichage_image+'" >';

		if (param.y2<param.height)
		{
			// image au CENTRE en BAS :
			code_image_stretchee+= '<img style="'+style_commun+';clip: rect('+param.y2+'px,'+clip_droite+'px,'+param.height+'px,'+clip_gauche+'px);left:'+(param.x1-clip_gauche)+'px;bottom:0px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+param.height+'" >';
		}


	// Images de la colonne de DROITE :
	//-----------------------------------------------------------
	if (param.x2<param.width)
	{
		if (param.y1>0)
		{
			// image à DROITE en HAUT :
			code_image_stretchee+= '<img style="'+style_commun+';clip: rect(0px,'+param.width+'px,'+param.y1+'px,'+param.x2+'px);right:0px;top:0px;" src="'+image+'" width="'+param.width+'" height="'+param.height+'" >';
		}
	
		// image à DROITE au MILIEU
		code_image_stretchee+= '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+param.width+'px,'+clip_bas+'px,'+param.x2+'px);right:0px;top:'+(param.y1-clip_haut)+'px;" src="'+image+'" width="'+param.width+'" height="'+hauteur_affichage_image+'" >';

		if (param.y2<param.height)
		{
			// image à DROITE en BAS :
			code_image_stretchee+= '<img style="'+style_commun+';clip: rect('+param.y2+'px,'+param.width+'px,'+param.height+'px,'+param.x2+'px);right:0px;bottom:0px;" src="'+image+'" width="'+param.width+'" height="'+param.height+'" >';
		}
	} // fin colonne gauche


	 //---------------------------------------------------------------------------------------------------
  	// prise en compte de la position de l'image stretchée :
	 //---------------------------------------------------------------------------------------------------
	  if (param.position=="DERRIERE")
	  {
			$(this).parent().prepend(code_image_stretchee);
	  }
	  else
	  {
			$(this).parent().append(code_image_stretchee);
	  }


} // fin function
// ##############################################################################################################





// ##############################################################################################################
// fonction PRIVATE qui assigne les valeurs par défaut à l'objet des paramètres passés aux fonctions :
function valeurs_par_defaut(param, tab_defaut)
{
	if (param==undefined) { param = {}; }; // si on n'a passé AUCUN paramètre à la fonction
	
	for (prop in tab_defaut)
	{
		if (param[prop]==undefined)
		{
			param[prop] = tab_defaut[prop];
		}
	}
	
	return param;
} // fin function
// ##############################################################################################################