/***************************************************************************************************
	 * get data from server using XMLHttpRequest
	 * call_back_func : function that will be call after request to the server is completed
	 * method 		  : GET or HEAD or POST
	 * url 			  : Request url
	 * field_id 	  : id of the <tag> to display the content
	 * form_id  	  : is need if the method use is POST , to get all the value of form elements
	*****************************************************************************************************/
	function callAjax(call_back_func, method, url, field_id, form_id) {
	  
		var requester 	= createXmlObject();
			method 		= method.toUpperCase();

		// Event handler for an event that fires at every state change,
		// for every state , it will run callback function.
		// Set the event listener
		requester.onreadystatechange = 	function() { stateHandler(requester, url, call_back_func,  field_id)}

		switch (method) {
			case 'GET':
			case 'HEAD':
				requester.open(method, url);
				//requester.overrideMimeType("text/html; charset=ISO-8859-1");
				requester.setRequestHeader("Content-Type", "text/html; charset=ISO-8859-1");
				requester.send(null);
				break;
			case 'POST':
				query = generate_query(form_id);
				requester.open(method, url);
				// In order to get the request body values to show up in $_POST 
				requester.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
				requester.send(query);
				break;
			default:
				alert('Error: Unknown method or method not supported');
				break;
		}
	}
	
	/***************************************************************************************************
	 * instantiate an XMLHttpRequest object 
	*****************************************************************************************************/
	function createXmlObject() {
		var xmlhttp = false;

		// create object in mozilla, safari, Internet Explorer version >= 7
		try{xmlhttp = new XMLHttpRequest();} 
		catch (e) {
			// create object in Internet Explorer version >= 5
			try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
			catch (e) {
				// create object in Internet Explorer	
				try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
				catch (e) {
					// create object in Ice Browser
					try {xmlhttp = window.createRequest();}
					catch(e){}
				}
			}
		}
		return xmlhttp;
	}
	
	
	/***************************************************************************************************
	 * httpReqest status
	*****************************************************************************************************/
	function stateHandler(requester, url, call_back_func, field_id) {
		/*  status of the object's connection, (requester.readyState)
		0 - not initialized.
		1 - connection etablished.
		2 - request received.
		3 - answer in process.
		4 - Completed 
		*/ 
		
		if (requester.readyState == 4) { 
			 if (requester.status == 200) { 
				http_header = requester.getAllResponseHeaders();
				http_data   = requester.responseText;
				//alert(http_header+http_data);
				eval(call_back_func + "(http_data, field_id)");
			 } else if (requester.status == 404){
         		alert("Request URL does not exist : " + url);
		 	 } else {
         		alert("Error: Status code is " + request.status);
			 }
		} else {
			http_data = show_loading_image();
			change_Loading_part(http_data, field_id + 1);
		}
	}
	
	/***************************************************************************************************
	 * get all the form elements and make it as query string
	 * this function will be use if the ajax httpRequest method = post 
	*****************************************************************************************************/
	function generate_query(form_id){
		var objForm = document.getElementById(form_id);
		var query 	= '';
		for (i=0; i<objForm.elements.length; i++){
			if (document.getElementById(objForm.elements[i].name)) { /* check if the id is exist - for mozilla*/
				if (document.getElementById(objForm.elements[i].name).getAttribute('id') != '') { /* check if the id is exist - for IE */
					query += (i > 0 ? "&" : "");
            		query += escape(objForm.elements[i].name) + "=" + escape(objForm.elements[i].value);
				}
			}
		}
		//alert(query);
		return query;
	}
		
	/***************************************************************************************************
	 *change the div content *
	 * http_data is in string format 
	*****************************************************************************************************/
	function change_text(http_data, field_id) {
 		document.getElementById(field_id + '1').innerHTML = http_data;
		//alert(document.getElementById(field_id).innerHTML);
 	}
	
	/***************************************************************************************************
	 *change the div content to loading content*
	 * http_data is the loading image 
	*****************************************************************************************************/
	function change_Loading_part(http_data, field_id) {
 		document.getElementById(field_id).innerHTML = http_data;
 	}

	/***************************************************************************************************
	 *change the selection box option *
	 *
	 * http_data must in this format : 
	 *  	KEY=>VALUE,KEY=>VALUE,KEY=>VALUE
	 *		OR
	 *		VALUE,VALUE,VALUE  
	 *		(if the key do not pass in , the key will be same as the value)
	*****************************************************************************************************/
	
	function change_selection(http_data, field_id){

		if (http_data != '') {
			document.getElementById(field_id).options.length = 0;

			var key;
			var value;
			var word  = http_data.split(',');
			
			for(i=0; i< word.length; i++){
				value = word[i]. split('=>');
				key   = value[0];
				if (value.length > 1) { /* got pass in the key */
					value = value[1];
				} else {
					value = value[0]; /* do not pass in the key */
				}
				document.getElementById(field_id).options[i] = new Option(value,key);
				//alert(key + '=' + value);
			}
		}
	}
	
	
	
	/***************************************************************************************************
	 * CUSTOMIZE FUNCTION
	*****************************************************************************************************/
	/* in the video page , when click on video , change flash and video detail*/
	function change_video(http_data, field_id) {

		data = http_data.split('#####');
		document.getElementById(field_id + '1').innerHTML = data[0];
		document.getElementById(field_id + '2').innerHTML = data[1];

	}
	
	/* in the product page , show the loading icon */
	function show_loading_image () {
		strLoading ='<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:10px;background-color:#FFFFFF;height:280px;"><tr><td align="center"><b>PATIENTEZ UN INSTANT</b></td></tr><tr><td align="center" valign="top">Votre requ&ecirc;te est en cours de traitement...</td></tr></table>';
		return strLoading;
	}