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

// 									 StretchBox

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





//#####################################################################################
// fonction qui applique le stretchBox à tous les éléments d'une classe donnée
//---------------------------------------------------------------------------
// Valeur des paramètres :
// element : baliseHTML.classe (ex : "div.rectangle", "rectangle" étant la class CSS appliquée à la DIV) 
//           Désigne toutes les balises de type "baliseHTML" sur lesquels la classe en question est aplliquée.

// image : URL de l'image qui servira d'image de fond à l'élément (en chemin relatif par rapport à la page ou chemin absolu)
// largeur_image : largeur REELLE de l'image d'origine (et non pas la largeur de l'élément auquel le stretchBox est appliqué
// hauteur_image : hauteur REELLE de l'image d'origine (et non pas la largeur de l'élément auquel le stretchBox est appliqué

// Les paramètres suivants définissent la grille à 9 cases de décomposition et de déformation de l'image.
// Comportement de la grille :
//  - image 1 (en haut à gauche) : Non déformée
//  - image 2 (en haut au centre) : Etirée en largeur
//  - image 3 (en haut à droite) : Non déformée
//  - image 4 (au milieu à gauche) : Etirée en hauteur
//  - image 5 (au milieu au centre) : Etirée en largeur ET en hauteur
//  - image 6 (au milieu à droite) : Etirée en hauteur
//  - image 7 (en bas à gauche) : Non déformée
//  - image 8 (en bas au centre) : Etirée en largeur
//  - image 9 (en bas à droite) : Non déformée
// Ces 9 images sont définies par les 4 paramètres suivants :
// - colonne1 : abscisse de délimitation de la colonne 1 de la grille
// - colonne2 : abscisse de délimitation de la colonne 2 de la grille
// - ligne1 : Ordonnée de délimitation de la ligne 1 de la grille
// - ligne2 : Ordonnée de délimitation de la ligne 2 de la grille
// NOTA : pour déterminer ces 4 critères, utiliser 2 repères horizontaux et 2 repères verticaux dans l'image Photoshop
// de l'image de fond, puis noter leurs abscisses et ordonnées.

// NOTA : Les éventuelles couleurs de fond et bordures précédemment appliquées à l'élément en CSS
// sont supprimés automatiquement, car c'est l'image de fond qui est censée gérer tout cela.


function stretchBox(element,image,colonne1,colonne2,largeur_image,ligne1,ligne2,hauteur_image)
{
	if ((colonne1>0) && (colonne1<colonne2) && (colonne2<largeur_image) && (ligne1>0) && (ligne1<ligne2) && (ligne2<hauteur_image) )
	{
		$(document).ready(function() {
			$(element).stretchBox_tous_elements(image,colonne1,colonne2,largeur_image,ligne1,ligne2,hauteur_image);
		})
	}
}
//#####################################################################################








//#####################################################################################
// fonction qui applique le stretchHorizontal à tous les éléments d'une classe donnée
//---------------------------------------------------------------------------
// Valeur des paramètres :
// element : baliseHTML.classe (ex : "div.rectangle", "rectangle" étant la class CSS appliquée à la DIV) 
//           Désigne toutes les balises de type "baliseHTML" sur lesquels la classe en question est aplliquée.

// image : URL de l'image qui servira d'image de fond à l'élément (en chemin relatif par rapport à la page ou chemin absolu)
// largeur_image : largeur REELLE de l'image d'origine (et non pas la largeur de l'élément auquel le stretchBox est appliqué
// hauteur_image : hauteur REELLE de l'image d'origine (et non pas la largeur de l'élément auquel le stretchBox est appliqué

// Les paramètres suivants définissent la grille à 3 cases de décomposition et de déformation de l'image.
// Comportement de la grille :
//  - image 1 (à gauche) : Non déformée
//  - image 2 (au centre) : Etirée en largeur
//  - image 3 (à droite) : Non déformée
// Ces 3 images sont définies par les 2 paramètres suivants :
// - colonne1 : abscisse de délimitation de la colonne 1 de la grille
// - colonne2 : abscisse de délimitation de la colonne 2 de la grille
// NOTA : pour déterminer ces 2 critères, utiliser 2 repères verticaux dans l'image Photoshop
// de l'image de fond, puis noter leurs abscisses.

// NOTA : Les éventuelles couleurs de fond et bordures précédemment appliquées à l'élément en CSS
// sont supprimés automatiquement, car c'est l'image de fond qui est censée gérer tout cela.

function stretchHorizontal(element,image,colonne1,colonne2,largeur_image,hauteur_image)
{
	if ((colonne1>0) && (colonne1<colonne2) && (colonne2<largeur_image) &&  (hauteur_image>0) )
	{
		$(document).ready(function() {
			$(element).stretchHorizontal_tous_elements(image,colonne1,colonne2,largeur_image,hauteur_image);
		})
	}
}
//#####################################################################################






//#####################################################################################
// fonction qui applique le stretchVertical à tous les éléments d'une classe donnée
//---------------------------------------------------------------------------
// Valeur des paramètres :
// element : baliseHTML.classe (ex : "div.rectangle", "rectangle" étant la class CSS appliquée à la DIV) 
//           Désigne toutes les balises de type "baliseHTML" sur lesquels la classe en question est aplliquée.

// image : URL de l'image qui servira d'image de fond à l'élément (en chemin relatif par rapport à la page ou chemin absolu)
// largeur_image : largeur REELLE de l'image d'origine (et non pas la largeur de l'élément auquel le stretchBox est appliqué
// hauteur_image : hauteur REELLE de l'image d'origine (et non pas la largeur de l'élément auquel le stretchBox est appliqué

// Les paramètres suivants définissent la grille à 3 cases de décomposition et de déformation de l'image.
// Comportement de la grille :
//  - image 1 (en haut) : Non déformée
//  - image 2 (au milieu) : Etirée en hauteur
//  - image 3 (en bas) : Non déformée
// Ces 3 images sont définies par les 2 paramètres suivants :
// - ligne1 : ordonnée de délimitation de la ligne 1 de la grille
// - ligne2 : ordonnée de délimitation de la ligne 2 de la grille
// NOTA : pour déterminer ces 2 critères, utiliser 2 repères horizontaux dans l'image Photoshop
// de l'image de fond, puis noter leurs ordonnées.

// NOTA : Les éventuelles couleurs de fond et bordures précédemment appliquées à l'élément en CSS
// sont supprimés automatiquement, car c'est l'image de fond qui est censée gérer tout cela.

function stretchVertical(element,image,largeur_image,ligne1,ligne2,hauteur_image)
{
	if ( (largeur_image>0) && (ligne1>0) && (ligne1<ligne2) && (ligne2<hauteur_image) )
	{
		$(document).ready(function() {
			$(element).stretchVertical_tous_elements(image,largeur_image,ligne1,ligne2,hauteur_image);
		})
	}
}
//#####################################################################################








//----------------------------------------------------------------------------------------------------------------------------









//##################################################################################################################
//##################################################################################################################
// FONCTIONS INTERNES DE STRETCHBOX - NE PAS UTILISER DIRECTEMENT DANS LES SCRIPTS DES PAGES HTML
//##################################################################################################################
//##################################################################################################################


//#####################################################################################
// fonction qui lance la fonction, qui applique le fond en Stretch poun TOUS les éléments HTML concernés:
//---------------------------------------------------------------------------
$.fn.stretchBox_tous_elements = function(image,colonne1,colonne2,largeur_image,ligne1,ligne2,hauteur_image) {
	for(var i=0; i<$(this).length; i++)
	{
		// Affichage du fond en "stretch" pour chaque élément dans la classe concernée : 
		appliquer_stretchBox($(this)[i],image,colonne1,colonne2,largeur_image,ligne1,ligne2,hauteur_image);
	}
}
//#####################################################################################





//#####################################################################################
// fonction qui applique le fond en Stretch poun UN élément HTML :
//---------------------------------------------------------------------------
function appliquer_stretchBox(objet,image,colonne1,colonne2,largeur_image,ligne1,ligne2,hauteur_image)
{
	// on commence par supprimer la couleur de fond de l'objet :
	objet.style.backgroundColor="transparent";
	objet.style.border=0;

	
	var largeur_objet = objet.offsetWidth;
	var hauteur_objet = objet.offsetHeight;
	
	
	// calcul des données pour les images dans la colonne du centre :
	var largeur_initiale = colonne2 - colonne1 ;
	var largeur_finale = largeur_objet - colonne1 - (largeur_image-colonne2);
	var echelle_largeur = largeur_finale / largeur_initiale;
	var largeur_affichage_image = Math.round(largeur_image * echelle_largeur);
	var clip_gauche = Math.round(colonne1 * echelle_largeur);
	var clip_droite = clip_gauche + largeur_finale;
	
	// calcul des données pour les images dans la ligne du milieu :
	var hauteur_initiale = ligne2 - ligne1 ;
	var hauteur_finale = hauteur_objet - ligne1 - (hauteur_image-ligne2);
	var echelle_hauteur = hauteur_finale / hauteur_initiale;
	var hauteur_affichage_image = Math.round(hauteur_image * echelle_hauteur);
	var clip_haut = Math.round(ligne1 * echelle_hauteur);
	var clip_bas = clip_haut + hauteur_finale;
	
	

	// on mémorise le contenu de l'élément visé :
	//----------------------------------------
	var code_inner = objet.innerHTML;

	// on affiche l'image de fond :
	//----------------------------------------
	var style_commun = "position:absolute;display:block;border:0;";
	
	var image_haut_centre = '<img style="'+style_commun+';clip: rect(0px,'+clip_droite+'px,'+ligne1+'px,'+clip_gauche+'px);left:'+(colonne1-clip_gauche)+'px;top:0px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+hauteur_image+'" >';
	var image_bas_centre  = '<img style="'+style_commun+';clip: rect('+ligne2+'px,'+clip_droite+'px,'+hauteur_image+'px,'+clip_gauche+'px);left:'+(colonne1-clip_gauche)+'px;bottom:0px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+hauteur_image+'" >';

	var image_gauche_milieu = '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+colonne1+'px,'+clip_bas+'px,0px);left:0px;top:'+(ligne1-clip_haut)+'px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_affichage_image+'" >';
	var image_droite_milieu = '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+largeur_image+'px,'+clip_bas+'px,'+colonne2+'px);right:0px;top:'+(ligne1-clip_haut)+'px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_affichage_image+'" >';
	var image_centre        = '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+clip_droite+'px,'+clip_bas+'px,'+clip_gauche+'px);left:'+(colonne1-clip_gauche)+'px;top:'+(ligne1-clip_haut)+'px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+hauteur_affichage_image+'" >';
	
	var image_haut_gauche = '<img style="'+style_commun+';clip: rect(0px,'+colonne1+'px,'+ligne1+'px,0px);left:0px;top:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';
	var image_haut_droite = '<img style="'+style_commun+';clip: rect(0px,'+largeur_image+'px,'+ligne1+'px,'+colonne2+'px);right:0px;top:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';
	var image_bas_gauche  = '<img style="'+style_commun+';clip: rect('+ligne2+'px,'+colonne1+'px,'+hauteur_image+'px,0px);left:0px;bottom:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';
	var image_bas_droite  = '<img style="'+style_commun+';clip: rect('+ligne2+'px,'+largeur_image+'px,'+hauteur_image+'px,'+colonne2+'px);right:0px;bottom:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';

	// enfin on renvoie le code HTML généré :
	objet.innerHTML = image_haut_centre+image_bas_centre+image_gauche_milieu+image_droite_milieu+image_centre+image_haut_gauche+image_haut_droite+image_bas_gauche+image_bas_droite+'<div style="position:relative;">'+code_inner+'</div>';
}
//#####################################################################################







//##################################################################################################################
//##################################################################################################################
// FONCTIONS INTERNES DE STRETCHHORIZONTAL - NE PAS UTILISER DIRECTEMENT DANS LES SCRIPTS DES PAGES HTML
//##################################################################################################################
//##################################################################################################################


//#####################################################################################
// fonction qui lance la fonction, qui applique le fond en Stretch poun TOUS les éléments HTML concernés:
//---------------------------------------------------------------------------
$.fn.stretchHorizontal_tous_elements = function(image,colonne1,colonne2,largeur_image,hauteur_image) {
	for(var i=0; i<$(this).length; i++)
	{
		// Affichage du fond en "stretch" pour chaque élément dans la classe concernée : 
		appliquer_stretchHorizontal($(this)[i],image,colonne1,colonne2,largeur_image,hauteur_image);
		
	}
}
//#####################################################################################





//#####################################################################################
// fonction qui applique le fond en Stretch poun UN élément HTML :
//---------------------------------------------------------------------------
function appliquer_stretchHorizontal(objet,image,colonne1,colonne2,largeur_image,hauteur_image)
{
	// on commence par supprimer la couleur de fond de l'objet :
	objet.style.backgroundColor="transparent";
	objet.style.border=0;
	
	var largeur_objet = objet.offsetWidth;
	
	
	// calcul des données pour les images :
	var largeur_initiale = colonne2 - colonne1 ;
	var largeur_finale = largeur_objet - colonne1 - (largeur_image-colonne2);
	var echelle_largeur = largeur_finale / largeur_initiale;
	var largeur_affichage_image = Math.round(largeur_image * echelle_largeur);
	var clip_gauche = Math.round(colonne1 * echelle_largeur);
	var clip_droite = clip_gauche + largeur_finale;
	
	
	

	// on mémorise le contenu de l'élément visé :
	//----------------------------------------
	var code_inner = objet.innerHTML;

	// on affiche l'image de fond :
	//----------------------------------------
	var style_commun = "position:absolute;display:block;border:0;";
	
	var image_centre = '<img style="'+style_commun+';clip: rect(0px,'+clip_droite+'px,'+hauteur_image+'px,'+clip_gauche+'px);left:'+(colonne1-clip_gauche)+'px;top:0px;" src="'+image+'" width="'+largeur_affichage_image+'" height="'+hauteur_image+'" >';

	var image_gauche = '<img style="'+style_commun+';clip: rect(0px,'+colonne1+'px,'+hauteur_image+'px,0px);left:0px;top:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';
	var image_droite = '<img style="'+style_commun+';clip: rect(0px,'+largeur_image+'px,'+hauteur_image+'px,'+colonne2+'px);right:0px;top:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';

	// enfin on renvoie le code HTML généré :
	objet.innerHTML = image_centre + image_gauche + image_droite + '<div style="position:relative;">'+code_inner+'</div>';
}
//#####################################################################################







//##################################################################################################################
//##################################################################################################################
// FONCTIONS INTERNES DE STRETCHVERTICAL - NE PAS UTILISER DIRECTEMENT DANS LES SCRIPTS DES PAGES HTML
//##################################################################################################################
//##################################################################################################################


//#####################################################################################
// fonction qui lance la fonction, qui applique le fond en Stretch poun TOUS les éléments HTML concernés:
//---------------------------------------------------------------------------
$.fn.stretchVertical_tous_elements = function(image,largeur_image,ligne1,ligne2,hauteur_image) {
	for(var i=0; i<$(this).length; i++)
	{
		// Affichage du fond en "stretch" pour chaque élément dans la classe concernée : 
		appliquer_stretchVertical($(this)[i],image,largeur_image,ligne1,ligne2,hauteur_image);
		
	}
}
//#####################################################################################





//#####################################################################################
// fonction qui applique le fond en Stretch poun UN élément HTML :
//---------------------------------------------------------------------------
function appliquer_stretchVertical(objet,image,largeur_image,ligne1,ligne2,hauteur_image)
{
	// on commence par supprimer la couleur de fond de l'objet :
	objet.style.backgroundColor="transparent";
	objet.style.border=0;
	
	var hauteur_objet = objet.offsetHeight;
	
	// calcul des données pour les images  :
	var hauteur_initiale = ligne2 - ligne1 ;
	var hauteur_finale = hauteur_objet - ligne1 - (hauteur_image-ligne2);
	var echelle_hauteur = hauteur_finale / hauteur_initiale;
	var hauteur_affichage_image = Math.round(hauteur_image * echelle_hauteur);
	var clip_haut = Math.round(ligne1 * echelle_hauteur);
	var clip_bas = clip_haut + hauteur_finale;
	
	

	// on mémorise le contenu de l'élément visé :
	//----------------------------------------
	var code_inner = objet.innerHTML;

	// on affiche l'image de fond :
	//----------------------------------------
	var style_commun = "position:absolute;display:block;border:0;";
	
	var image_milieu = '<img style="'+style_commun+';clip: rect('+clip_haut+'px,'+largeur_image+'px,'+clip_bas+'px,0px);left:0px;top:'+(ligne1-clip_haut)+'px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_affichage_image+'" >';
	
	var image_haut = '<img style="'+style_commun+';clip: rect(0px,'+largeur_image+'px,'+ligne1+'px,0px);left:0px;top:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';
	var image_bas  = '<img style="'+style_commun+';clip: rect('+ligne2+'px,'+largeur_image+'px,'+hauteur_image+'px,0px);left:0px;bottom:0px;" src="'+image+'" width="'+largeur_image+'" height="'+hauteur_image+'" >';

	// enfin on renvoie le code HTML généré :
	objet.innerHTML = image_milieu + image_haut + image_bas + '<div style="position:relative;">'+code_inner+'</div>';
}
//#####################################################################################