/*
 * Copyright (c) 2009 ReactivOn SAS
 * All rights reserved.
 *
 * Author: Guillaume BERNARD
 * Date: 30 mai 2009
 * 
 * Passage des éléments des formulaires en mode STYLED
 */

var checkboxHeight = "16";
var radioHeight = "16";


/**
 * Recherche les champs INPUT présents dans la page en cours ayant leur CLASS=STYLED afin de pouvoir changer leur apparence
 */
function initFormStyled() {
	
	var inputs = $$(".styled"), span = Array(), label_mouseup = Array(), textnode, option, active;

	for(var i = 0; i < inputs.length; i++) {
		var input_type = inputs[i].type;
		
		// Seulement les INPUT CHECKBOX ou RADIO avec la classe CSS = STYLED
		if (input_type == "checkbox" || input_type == "radio") {

			// Détermine la position de l'image BACKGROUND en fonction de l'état de la checkbox
			if (inputs[i].get('checked') == true) {
				if (input_type == "checkbox") {
					position = "0 -" + (checkboxHeight*2) + "px";
				} else {
					position = "0 -" + (radioHeight*2) + "px";
				}
			} else {
				position = "0 0px";	
			}
			
			// Objet de remplacement permettant d'obtenir le visuel attendu pour les CHECKBOX et les RADIO
			// Sur l'appui de l'INPUT, la fonction PUSHED change l'image par l'image défaut avec un fond de sélection mais sans la croix
			// Sur le levé, CHECK change l'image en image avec FOND + CROIX
			span[i] = new Element('span', {
				'class': input_type,
				'styles': {'background-position': position}
			});

    		
    		// Rajoute le SPAN créé devant le INPUT initial
			span[i].inject(inputs[i], 'before');
			
			var input2find = span[i].getParent('label').getChildren('input');
			var input2find_name = input2find.get('name');
			var input2find_id = input2find.get('id');
			
			// Force ID du label afin de faciliter le positionnement des ADDEVENT
			$(inputs[i]).getParent('label').setProperty('id', 'label_'+input2find_id);

			// Appel instantane a une fonction rajoutant les ADDEVENT sur le LABEL en cours de traitement
			// Evite les problemes de persistence des variables de JE
			(function (id,name) {
				
				$('label_'+id).addEvent('mouseup', function() {
					pushed(id,name);
				});
				
			}) (input2find_id,input2find_name);
			
			// Lorsque l'utilisateur clique sur le fond ou sur un autre INPUT alors l'image est changée (si sur document alors CROIX sans fond sinon image defaut)
			//document.addEvent('mouseup', function() { clear(); });
		}
	}
	
	// Même chose pour les SELECT avec la classe CSS = STYLED
	/*inputs = $$("select");
	for(var i = 0; i < inputs.length; i++) {
		var content_class = inputs[i].getProperty('class');
		
		if (inputs[i].hasClass("styled")) {
			option = inputs[i].getElementsByTagName("option");
			active = option[0].childNodes[0].nodeValue;
			textnode = document.createTextNode(active);
			
			for(var j = 0; j < option.length; j++) {
				if(option[j].selected == true) {
					textnode = document.createTextNode(option[j].childNodes[0].nodeValue);
				}
			}
			
			if (inputs[i].hasClass("mini")) {
				span[i] = new Element('div', {'class': 'select_mini', 'id': 'select' + inputs[i].id});
			} else {
				span[i] = new Element('div', {'class': 'select', 'id': 'select' + inputs[i].id});
			}
			span[i].appendChild(textnode);
			
			var coord = inputs[i].getCoordinates();
			span[i].style.width = (coord.width - 38) + 'px'; // 38 = current paddings + borders
			
			// Inject customized object in current HTML code
			span[i].inject(inputs[i], 'before');

			var old_onchange="";
			if (inputs[i].getProperty('onchange') != null) {
				old_onchange = inputs[i].getProperty('onchange');
			}
			var on_change = "choose(this);"+old_onchange;
			
			// Sur un changement de la valeur du SELECT, le DIV de remplacement doit récupérer la nouvelle valeur
			// La récupération du ONCHANGE du input oblige une évaluation JS de la chaine pour que le contenu soit interprété
			inputs[i].addEvent('change', function() { eval(on_change); });
		}
	}*/
}


/**
 * Sélectionne REELLEMENT le INPUT sur lequel l'utilisateur a cliqué (change image par croix + fond de sélection)
 * 
 * @param element : SPAN (remplacant le INPUT) qui a été choisi par l'utilisateur
 */
function pushed(element,name) {
	
	// Reinitialise tous les inputs appartenant au meme groupe (accessible par l'attribut NAME)
	//clear(element,name);
	
	var elem_input = $('label_'+element).getFirst('input');
	element = $('label_'+element).getFirst('span');

	// Changement de la position du BACKGROUND en fonction de la hauteur de l'image et du TYPE (checkbox ou radio)
	if (elem_input.get('type') == "checkbox") {
		
		if ( !elem_input.checked ) {
			element.setStyle('background-position', '0 -' + checkboxHeight*3 + 'px');	// 4° image = cochee avec le fond
		} else {
			element.setStyle('background-position', '0 -' + checkboxHeight + 'px');
		}
		
	} else if (elem_input.get('type') == "radio") {
		element.setStyle('background-position', '0 -' + radioHeight*3 + 'px');
	}
}



function clear(id2exclude,group_name) {

	inputs = $$(".styled");
	
	for(var i = 0; i < inputs.length; i++) {
		var get_name = inputs[i].getProperty('name');
		var get_id = inputs[i].getProperty('id');

		if (get_name == group_name) {
			inputs[i].getParent().getFirst("span").setStyle('background-position', '0 0');
			
			if (get_id != id2exclude) {
				inputs[i].set('checked', false);
			}
		}
	}
}


/**
 * Met à jour le contenu du SPAN avec la nouvelle valeur du SELECT qui a été sélectionnée
 * 
 * @param elem : SELECT dont le SPAN a été choisi par l'utilisateur
 */
function choose(elem) {
	// Récupère la liste des OPTIONS du SELECT
	option = elem.getElementsByTagName("option");
	
	for(var i = 0; i < option.length; i++) {
		// Lorsque la nouvelle option est identifiée alors le SPAN de recouvrement est MAJ avec cette nouvelle valeur
		if(option[i].selected == true) {
			$("select" + elem.getProperty('id')).childNodes[0].nodeValue = option[i].childNodes[0].nodeValue;
		}
	}
}


/**
 * Recherche les champs INPUT FILE présents dans la page en cours pour activer
 * l'astuce visant à changer le style de l'input. Le input file est passé en
 * invisible sur une couche supérieure à l'input afficher mais il reste
 * cependant actif.
 */
function init_file_inputs() {
	var fakeFileUpload = new Element('div', {'class': 'fakefile'});
	
	// Ajout du faux input qui sera le seul visible en complément du bouton 'parcourir'
	var input_over = new Element('input', {'class': 'overfile'});
	input_over.inject(fakeFileUpload);
	
	// Recherche l'ensemble des éléments de type FILE pour effectuer le changement de style CSS
	$$('.fileinputs').each(function(elem,i) {
		var text_browse = elem.getFirst('.fileinputs_browseButton').get('text');
		var browse = new Element('div', {'class': 'browse', 'html': text_browse});
		browse.inject(fakeFileUpload);
		
		// Injecte dans la zone affichée le faut input
		fakeFileUpload.inject(elem);
		
		// Le INPUT FILE est mis en invisible par JS (donc si problème de JS alors le INPUT reste utilisable)
		var input_elem = elem.getFirst("input");
		input_elem.addClass('hidden_file_input');
		input_elem.setProperty('size', '15');

		// Lorsqu'un fichier est choisi par l'utilisateur à travers le INPUT
		//invisible alors sa valeur doit être répercutée dans le INPUT stylisé
		input_elem.addEvent('mouseleave', function() {
			input_over.set('value', input_elem.get('value'));
		});
	});
}





// Chargement JS quand la page HTML est prete
window.addEvent('domready', function() {
	
	// Au démarrage de chaque page, tous les INPUT FILE sont remplacés par le
	// changement de style CSS 
	//init_file_inputs();
	
	// Tous les INPUT et SELECT à styliser (class=styled) sont traités
	// (= rajout d'un SPAN au dessus de l'objet à styliser)
	//initFormStyled();
	
	
	// LANCE BOXOVERALL depuis une URL
	// Verifie si une BOA doit etre lancee immediatement au chargement de la page
	// Ex : ouvrir un formulaire suite à un clic sur lien en dur dans un email
	// Fonction du contenu du parametre OPBOA (OPenBoxOverAll)
	var opboa = getParamValue('opboa');
	var opboa_opt1 = getParamValue('p1');
	var opboa_opt2 = getParamValue('p3');
	var opboa_opt3 = getParamValue('p4');
	if( opboa != "" ) {
		if( opboa == "" ) opboa = "1";
		var request = new Request({method: 'get', url: '/index.php?m=makeurl&p1='+escape(opboa)+'&p2='+escape(opboa_opt1)+'&p3='+escape(opboa_opt2)+'&p4='+escape(opboa_opt3)});
	 
		 request.addEvent('success', function(responseText, responseXML) {
			 eval(responseText);
		 });
		 request.send();
	}
	
});