/***************************************************************************************************
	 * 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
	*****************************************************************************************************/
	var path = (document.domain.indexOf('wongchoi') == 0) ? '/orange/hyperlivre' : '/hyperlivre';
	function callAjax(call_back_func, method, url, field_id, form_id, loading_func) {

		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, loading_func)}

		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;
		}
	}
	
		///////////////////////////////////////////////////////////////////////////////////////////////////
	// JSON
	///////////////////////////////////////////////////////////////////////////////////////////////////
	/***************************************************************************************************
	 * 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 callAjaxJson(call_back_func, method, url, field_id, form_id, loading_func) {
	
		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() { stateHandlerJson(requester, url, call_back_func,  field_id, loading_func)}

		switch (method) {
			case 'GET':
			case 'HEAD':
				requester.open(method, url);
				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, loading_func) {
		/*  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 {
			if(loading_func != ''){
				eval(loading_func + "(field_id)");
			} else {
				if(field_id != ''){//added by twong
					http_data = show_loading_image();
					change_Loading_part(http_data, field_id);
				}
			}
		}
	}
	
	
	/***************************************************************************************************
	 * httpReqest status Json
	*****************************************************************************************************/
	function stateHandlerJson(requester, url, call_back_func, field_id, loading_func) {
		/*  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();
				//The eval function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues.
				//data_object = eval('(' + requester.responseText + ')');
				//ref to http://www.json.org/js.html
				// include json.js (JSON parse)
				//When security is a concern it is better to use a JSON parser. A JSON parser will only recognize JSON text and so is much safer:
				text 		= requester.responseText;
				data_object = text.parseJSON();

				eval(call_back_func + "(data_object, field_id)");
			 } else if (requester.status == 404){
         		alert("Request URL does not exist : " + url);
		 	 } else {
         		alert("Error: Status code is " + request.status);
			 }
		} else {
			if(loading_func != ''){
				eval(loading_func + "(field_id)");
			} else {
				http_data = show_loading_image();
				change_Loading_part(http_data, field_id);
			}
		}
	}
	
	
	/***************************************************************************************************
	 * 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);
				}
			}
		}
		
		return query;
	}
	
	
	/* 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;"><tr><td align="center"><b>PATIENTEZ UN INSTANT</b></td></tr><tr><td align="center" style="padding-top:10px;">Votre requ&ecirc;te est en cours de traitement...</td></tr></table>';
		return strLoading;
	}
	
	/***************************************************************************************************
	 *change the div content to loading content*
	 * http_data is the loading image 
	*****************************************************************************************************/
	function change_Loading_part(http_data, field_id) {
		if(document.getElementById(field_id)){
 			document.getElementById(field_id).innerHTML = http_data;
		}
 	}
	
	/***************************************************************************************************
	 *change the div content *
	 * http_data is in string format 
	*****************************************************************************************************/
	function change_text(http_data, field_id) {
 		document.getElementById(field_id).innerHTML = http_data;
		//alert(document.getElementById(field_id).innerHTML);
 	}



	/********************************************************************************************************************************
	// CUSTOMIZE FUNCTION
	//
	//*********************************************************************************************************************************


	/***************************************************************************************************
	 *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);
			}
		}
	}

	
	function change_selection_json(data_object, field_id){
		if(data_object.Drivers.length > 0){
			document.getElementById(field_id).options.length = 0;
		}
		
		for(i=0; i<data_object.Drivers.length; i++){
			document.getElementById(field_id).options[i] = new Option(data_object.Drivers[i].name, data_object.Drivers[i].value);
		}
	}
	
	
	/***************************************************************************************************
	 * use in bo , to preview the channel image
	 *
	*****************************************************************************************************/
	function preview_channel_img(data_object, field_id) {

		document.getElementById(field_id).innerHTML = data_object.image;
		//document.getElementById(field_id).value 		  = data_object.name;

	}
	
	/***************************************************************************************************
	 * to change tv part
	 *
	*****************************************************************************************************/
	function change_home_video(data_object, field_id) {
		document.getElementById(field_id).innerHTML 				= data_object.video;
		document.getElementById(field_id + '_channel').innerHTML 	= data_object.channel;
		document.getElementById(field_id + '_title').innerHTML 		= data_object.title;
		document.getElementById(field_id + '_views').innerHTML 		= data_object.views;
		document.getElementById(field_id + '_date').innerHTML 		= data_object.videodate;
		document.getElementById(field_id + '_content').innerHTML 	= data_object.content;
		//document.getElementById(field_id + '_button').style.display	= 'inline';
		document.getElementById(field_id + '_link').href 			= data_object.detaillink;
		document.getElementById(field_id + '_qlink').href 			= data_object.questionlink;
		document.getElementById('send_to_fren_video_id').value		= data_object.videoid;
	}
	
	function loading_video(field_id){
		strLoading ='<table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:10px;"><tr><td align="center" style="padding-top:150px;"><b>PATIENTEZ UN INSTANT</b></td></tr><tr><td align="center" style="padding-top:10px;">Votre requ&ecirc;te est en cours de traitement...</td></tr></table>';
		document.getElementById(field_id).innerHTML = strLoading;
	}
	
	/***************************************************************************************************
	 * send to fren , change the content when send success or fail
	*****************************************************************************************************/
     // LOADING
	function loading_send_fren(field_id){
		document.getElementById(field_id).style.display 			 = 'inline';
		document.getElementById(field_id).innerHTML     			 = show_loading_image();
		document.getElementById(field_id + '_content').style.display ='none';
	}
	// CONTENT
	function change_send_to_fren(data_object, field_id){
		
		document.getElementById(field_id + '_content').style.display ='inline';
	
		if(data_object.status == 'success'){
			
			strContent   = '<div style="float:left;padding : 0px 0px 0px 10px;">' + data_object.msg + '</div>';
			strContent  += '<div style="float:right;padding-top:0px;">' + data_object.button + '</div>';
			
			document.getElementById(field_id).style.display 		= 'none';
			document.getElementById(field_id + '_content').innerHTML= strContent;
														  
		} else {
			document.getElementById(field_id).innerHTML     = data_object.msg;
		}
	}
	
	// CONTENT
	function change_send_to_fren2(data_object, field_id){
		if(data_object.status == 'success'){
			document.getElementById(field_id + '_content').style.display ='inline';
			
			strContent   = '<div style="float:left;padding : 5px 0px 0px 10px;">' + data_object.msg + '</div>';
			strContent  += '<div style="float:right;padding : 5px 10px 0px 0px; cursor:pointer" onclick="javascript:ShowVideoDetail(); void(0);"><img src="' +path+ '/templates/default/allsection/alllanguage/bttn_close.png" alt="" class="PNG"></div>';
			strContent  += '<div style="float:right;padding : 5px 0px 0px 0px; cursor:pointer" onclick="javascript:ShowVideoDetail(); void(0);">Fermer</div>';

			
			document.getElementById(field_id).style.display 		= 'none';
			document.getElementById(field_id + '_content').innerHTML= strContent;
			setTimeout ("ShowVideoDetail()", 5000);
														  
		} else {
			strContent   = '<div style="float:left;padding : 5px 0px 0px 10px;">&nbsp;</div>';
			strContent  += '<div style="float:right;padding : 5px 10px 0px 0px; cursor:pointer" onclick="javascript:ShowVideoDetail(); void(0);"><img src="' +path+ '/templates/default/allsection/alllanguage/bttn_close.png" alt="" class="PNG"></div>';
			strContent  += '<div style="float:right;padding : 5px 0px 0px 0px; cursor:pointer" onclick="javascript:ShowVideoDetail(); void(0);">Fermer</div><br style="clear: both;" />';
			strContent += '<div style="padding: 5px 5px 5px 10px;">' +data_object.msg+ '</div>';
			strContent += '<div style="padding: 5px 5px 5px 10px; text-align:center;"><a href="javascript:show_send_to_fren_form();"><img src="' +path+ '/templates/default/allsection/alllanguage/bttn_hyperlivre_ok.jpg" border="0"></a></div>';

			document.getElementById(field_id).innerHTML     = strContent;
		}
	}
	
	/***************************************************************************************************
	 * video seach result
	*****************************************************************************************************/
	// LOAGING
	function loading_video_search_pagination(field_id){
		document.getElementById(field_id).style.display 			 = 'inline';
		document.getElementById(field_id).innerHTML     			 = '<div style = "padding : 150px 0px 150px 0px;"> '+ show_loading_image() + '</div>';
		document.getElementById(field_id + '_content').style.display ='none';
	}

	// CHANGE CONTENT
	function video_search_pagination(data_object, field_id){

		document.getElementById(field_id).style.display  					= 'none';
		document.getElementById(field_id + '_content').style.display  		= 'inline';
		
		// hide all the video block
		for(i=1; i<=6; i++){
			document.getElementById(field_id + '_block_' + i).style.display  = 'none';
		}
		
		document.getElementById(field_id + '_pagination').innerHTML	 = data_object.pagination;

		for(i=1; i<=data_object.records.length; i++){
			document.getElementById(field_id + '_block_' + i).style.display  		 = 'inline';
			document.getElementById(field_id + '_block_' + i + '_title').innerHTML	 = data_object.records[i-1].title;
			document.getElementById(field_id + '_block_' + i + '_date').innerHTML	 = data_object.records[i-1].date;
			document.getElementById(field_id + '_block_' + i + '_link').href		 = data_object.records[i-1].videolink;
			document.getElementById(field_id + '_block_' + i + '_pic').src 	 		 = data_object.records[i-1].picture;
		}
	}
	
	/***************************************************************************************************
	 * theque seach result
	*****************************************************************************************************/

	// CHANGE CONTENT
	function theque_search_pagination(data_object, field_id){

		document.getElementById(field_id).style.display  					= 'none';
		document.getElementById(field_id + '_content').style.display  		= 'inline';
		
		// hide all the video block
		for(i=1; i<=2; i++){
			document.getElementById(field_id + '_table_' + i).style.display  = 'none';
		}
		
		document.getElementById(field_id + '_pagination').innerHTML	 = data_object.pagination;

		for(i=1; i<=data_object.records.length; i++){
			document.getElementById(field_id + '_table_' + i).style.display  		 = 'inline';
			document.getElementById(field_id + '_block_' + i + '_title').innerHTML	 = data_object.records[i-1].title;
			document.getElementById(field_id + '_block_' + i + '_brief').innerHTML	 = data_object.records[i-1].brief;
			document.getElementById(field_id + '_block_' + i + '_date').innerHTML	 = data_object.records[i-1].date;
			document.getElementById(field_id + '_block_' + i + '_link').href		 = data_object.records[i-1].thequelink;
			document.getElementById(field_id + '_block_' + i + '_pic').src 	 		 = data_object.records[i-1].picture;
		}
	}