/*
	Ce script Javascript permet d'ajouter des bords arrondis à n'importe quel bloc de la page, de facon trés simple.
	
	L'idée de base, l'algorithme, et les petites astuces sont de :
	Nifty Corners Cube - rounded corners with CSS and Javascript
	Copyright 2006 Alessandro Fulciniti (a.fulciniti@html.it)
	
	Je n'ai fait que réécrire le code à ma façon pour pouvoir mieux le comprendre, l'annoter et le modifier, mais tout le mérite revient à son auteur premier.
	
	Le principe est d'ajouter dans chacun des coins du bloc une suite de "barres" de plus en plus petites pour simuler une courbe.
	On detecte automatiquement la couleur des bandes en fonction de la couleur de l'arriere plan (ou transparent)
	Et on ajoute une bordure entre les bandes et le bloc d'une couleur mix entre les deux pour la transition soit 
	
	Il y a deux types de bords arrondis, les classiques, issus du script de bases qui lissent les coin d'un block d'une couleur A pour les arrondir sur un fond de couleur B
	Et les blocs avec une bordure uniquement dont les coins sont arrondis
*/



/*
	Name : makeRoundCorners
	Param : obj
	Rajoute des lignes de couleurs dans les coins du block pour faire un effet arrond
	On ajoute en fait un div en haut et en bas, collé aux bords. 
	Dans chaque de ces blocs on va faire une suite de lignes de plus en plus écartées/rapprochées du bord pour donner l'impression de courbe

*/
function makeRoundCorners(obj) {
	if (!obj) return false;
	fixIE(obj);
		
	//Je regarde quels coins arrondir (topleft, topright, bottomleft, bottomright)
	var tl, tr, bl, br;
	tl = isOfClass(obj, "tl");
	tr = isOfClass(obj, "tr");
	bl = isOfClass(obj, "bl");
	br = isOfClass(obj, "br");
	//Si tout est faux, alors c'est comme si tout était vrai
	if (!(tl || tr || bl || br)) tl = tr = bl = br = true;
	//On regarde si haut ou bas
	var is_top, is_bottom;
	is_top = (tl || tr);
	is_bottom = (br || bl);
	

	//On ajoute des barres en haut et en bas
	if (is_top) {
		var top = document.createElement("b");
		setClass(top, "roundCorner");
		top.style.backgroundColor = getBackgroundColor(obj.parentNode);
		top.style.marginRight = "-"+getStyleInfo(obj, "paddingRight");
		top.style.marginLeft = "-"+getStyleInfo(obj, "paddingLeft");
		
		//top.style.marginTop = "-"+getStyleInfo(obj, "paddingTop");
	}
	if (is_bottom) {
		var bottom = document.createElement("b");
		setClass(bottom, "roundCorner");
		bottom.style.backgroundColor = getBackgroundColor(obj.parentNode);
		bottom.style.marginRight = "-"+getStyleInfo(obj, "paddingRight");
		bottom.style.marginLeft = "-"+getStyleInfo(obj, "paddingLeft");
		//bottom.style.marginBottom = "-"+getStyleInfo(obj, "paddingBottom");
	}

	//On lui ajoute plusieurs lignes de même couleur que le div
	var b, margin, borderWidth, height, lignes=7;
	var bgcolor = getBackgroundColor(obj);

	var bordercolor = bgcolor;
	/*
		Pour faire un bel arrondi il faut que, selon l'emplacement
			- La première/denière ligne doit etre un peu plus décallée que les autres
			- Les deux premières/dernières lignes aient un dégradé plus long
			- Les deux dernières/premieres lignes soient plus hautes
	*/
	for (var i=0;i!=lignes;i++) {
	
		//TOP
		if (is_top) {
			margin = (i==0) ? (lignes - i ) : (lignes - i - 1);
			borderWidth = (i==0 || i==1) ? 2 : 1;
			height = (i==(lignes-1) || i==(lignes-2)) ? 2 : 1;
			b = document.createElement("b");
			//TOP RIGHT
			if (tr) {
				b.style.marginLeft = margin+"px";
				b.style.borderLeftWidth = borderWidth+"px";
				b.style.borderLeftColor = bordercolor;
			}
			//TOP LEFT
			if (tl) {
				b.style.marginRight = margin+"px";
				b.style.borderRightWidth = borderWidth+"px";
				b.style.borderRightColor = bordercolor;
			}
			
			b.style.height = height+"px";
			b.style.backgroundColor = bgcolor;
			top.appendChild(b);
			b = null;
		}

		
		if (is_bottom) {
			//BOTTOM
			margin = (i==lignes-1) ? i+1 : i;
			borderWidth = (i==(lignes-1) || i==(lignes-2)) ? 2 : 1;
			height = (i==0 || i==1) ? 2 : 1;
			 b = document.createElement("b");
			//BOTTOM RIGHT
			if (br) {
				b.style.marginLeft = margin+"px";
				b.style.borderLeftWidth = borderWidth+"px";
				b.style.borderLeftColor = bordercolor;
			}
			//BOTTOM LEFT
			if (bl) {
				b.style.marginRight = margin+"px";
				b.style.borderRightWidth = borderWidth+"px";
				b.style.borderRightColor = bordercolor;
			}
	
			b.style.height = height+"px";
			b.style.backgroundColor = bgcolor;
			bottom.appendChild(b);
			b = null;
		}
		
	}
	//Attention, voila la partie difficile pour pouvoir ajouter les bords avec multiples imbrications sans avoir de padding en trop
	//On vire les nodes de texte vides
	removeEmptyTextNodesChild(obj);
	//On créé un div pour selectionner tout le contenu
	var contenu = document.createElement("div");
	//On va y mettre tout le contenu de obj
	var node, txt_node;
	while (obj.firstChild) {
		contenu.appendChild(obj.firstChild);
	}
	//Et on l'ajoute au début de obj, on a donc mis tout ce que contenait obj dans un div, qu'on va pouvoir déplacer
	obj.insertBefore(contenu,obj.firstChild);
	//On ajoute ensuite le top et bottom
	if (is_top) obj.insertBefore(top, obj.firstChild);
	//Je remonte le contenu au dessus du haut (position:relative, mise en static en ajout jscript, passe en dessous)
	contenu.style.position = "relative";
	contenu.style.zIndex = "9990"; //au dessus de bcp de choses mais en dessous des fausses pop-up
	//Je remonte a dessus du top
	if (is_top) {
		//Je sauvegarde le padding de l'élement
		var paddingTop = getStyleInfo(obj,"paddingTop");
		//Puis le passe à 0
		obj.style.paddingTop = "0px";
		//Si padding:auto, alors on mets à 0
		if (paddingTop=="auto") paddingTop = 0;
		//Si retourne un string avec px au bout, on enleve
		else paddingTop = paddingTop.removePx();		
		//la hauteur du top
		var topHeight = top.offsetHeight;
		//On remonte donc le contenu tout en haut (top) et on le descend du padding
		contenu.style.marginTop = (-topHeight+paddingTop)+"px";
	}	
	//J'ajoute le bas
	if (is_bottom) {
		//J'ajoute le bottom en bas
		obj.appendChild(bottom);
		//Je choppe le paddingBottom
		var paddingBottom = getStyleInfo(obj,"paddingBottom");
		//Si padding:auto, alors on mets à 0
		if (paddingBottom=="auto") paddingBottom = 0;
		//Si retourne un string avec px au bout, on enleve
		else paddingBottom = paddingBottom.removePx();		
		//Je le mets à 0
		obj.style.paddingBottom = "0px";
		//Je choppe la hauteur du bottom
		var bottomHeight = bottom.offsetHeight;
		//Je remonte donc bottom de sa hauteur, et le redescend du paddingBottom
		bottom.style.marginTop = (-bottomHeight+paddingBottom)+"px";
	}
	
	return true;
	
}


/*
	name : makeRoundBorders
	param : obj
	Arrondi les bords d'un bloc qui possede des bordures d'une certaine taille sur fond blanc, en ajoutant des images contenant les contours
*/
function makeRoundBorders(obj) {
	var path_images = "../images/interface/";
	
	//Je regarde quels coins arrondir (topleft, topright, bottomleft, bottomright)
	var tl, tr, bl, br;
	tl = isOfClass(obj, "tl");
	tr = isOfClass(obj, "tr");
	bl = isOfClass(obj, "bl");
	br = isOfClass(obj, "br");
	//Si tout est faux, alors c'est comme si tout était vrai
	if (!(tl || tr || bl || br)) tl = tr = bl = br = true;
	//On regarde si haut ou bas
	var is_top, is_bottom;
	is_top = (tl || tr);
	is_bottom = (br || bl);
	
	
	tmp = obj.innerHTML; //On sauvegarde le contenu pour le replacer
	obj.innerHTML = ""; //Corrige un bug sur certains version d'IE et Safari
	//On ajoute les divs dans cette ordre et avec cette séparation (pas tout d'un coup) pour que les différentes tailles soient bien gérées
	if (is_top) {
		var top = '<div class="borderTop">';
		if (tr) top+= '<div class="borderRight"><img src="'+path_images+'corner-top-right.png"></div>';
		if (tl) top+= '<div class="borderLeft"><img src="'+path_images+'corner-top-left.png"></div>';
		top+='</div>';	
		obj.innerHTML+=top;
	}
	obj.innerHTML+= '<div class="borderContenu">'+tmp+'</div>';
	if (is_bottom) {
		var bottom = '<div class="borderBottom">';
		if (br) bottom+= '<div class="borderRight"><span><img src="'+path_images+'corner-bottom-right.png"></span></div>';
		if (bl) bottom+= '<div class="borderLeft"><img src="'+path_images+'corner-bottom-left.png"></div>';
		bottom+='</div>';
		obj.innerHTML+=bottom;
	}
}


/*
	Name : fixIE
	Param : obj
	Mets l'objet en inline-block si IE
*/
function fixIE(obj) {
	if(obj.currentStyle!=null && obj.currentStyle.hasLayout!=null && obj.currentStyle.hasLayout==false) obj.style.display="inline-block";
}

