/**
 * react.js
 *
 * add functionality to the react links so that people can react on the reaction
 */
function CountLeft(field, count, max, lang) {

	if (field.value.length > max)
	{
	   count.innerHTML = ('<font color="red">' )
	   + (lang == 'fr' ? 'la longueur maximale est dépassée de ': 'max. lengte overschreden met ' )
	   + (field.value.length - max) 
	   + (lang == 'fr' ? ' caractère': ' karakter') 
	   + ((field.value.length - max) == 1 ? '':'s') 
	   + ('</font>');
	}
	else
	{
		if (lang == 'fr')
			count.innerHTML = (max - field.value.length) + ((max - field.value.length == 1) ? ' caractère restant' : ' caractères restants');
		else
			count.innerHTML = (max - field.value.length) + ((max - field.value.length == 1) ? ' resterend karakter' : ' resterende karakters');
	}
}

function trim(value) {
  value = value.replace(/^\s+/,'');
  value = value.replace(/\s+$/,'');
  return value;
}

function checkLength(field,max, lang) {

	if (trim(field.value).length == 0)
	{
		alert(lang == 'fr' ? 'Veuillez donner une réaction' : 'Voer een reactie in.');            
	   return false;
	}

   if (field.value.length > max)
   {
	  alert(lang == 'fr' ? 'Votre texte ne peut pas dépasser 1000 caractères' : 'Je ingevoerde tekst mag niet langer zijn dan 1000 karakters.');   	  return false;
   }
   return true;
}
 
var react = Class.create({
	
	/*
	 * CONSTRUCTOR
	 */
	initialize: function ( wrapperId , linkClass , lang , logon, blockstatus, enabled ) {
		// delivered variables
		this.root 			= $( wrapperId );
		this.linkClass		= linkClass;
		this.lang 			= lang;
		this.logon			= logon;
		this.blockstatus    = blockstatus;
		this.enabled		= enabled;
		this.counter		= 0;
		
		
		// language definitions react
		this.err 			= new Array();
		this.err['nl'] 		= "Gelieve een reactie te geven";
		this.err['fr'] 		= "Veuillez donner une réaction";		
	
		this.yur 			= new Array();
		this.yur['nl'] 		= "Uw reactie";
		this.yur['fr'] 		= "Votre réaction";	
		
		this.rul 			= new Array();
		this.rul['nl'] 		= "Spelregels";
		this.rul['fr'] 		= " Règles du jeu";				

		this.rea 			= new Array();
		this.rea['nl'] 		= "Reageer";
		this.rea['fr'] 		= "Confirmer";
		
		this.lin 		= new Array();
		this.lin['nl'] 	= "/service/disclaimer#spelregels";
		this.lin['fr'] 	= "/service/mentions_legales#reglesdujeu";		

		this.stp 		= new Array();
		this.stp['nl'] 	= "Annuleren";
		this.stp['fr'] 	= "Annuler";	

		// language definitions logon
		this.reg 			= new Array();
		this.reg['nl'] 		= "Bent u nog niet geregistreerd? ";
		this.reg['fr'] 		= "Vous n'êtes pas encore enregistré(e)? ";
		
		this.pas 			= new Array();
		this.pas['nl'] 		= "Bent u uw wachtwoord vergeten? ";
		this.pas['fr'] 		= "Vous avez oublié votre mot de passe? ";

		this.now 			= new Array();
		this.now['nl'] 		= "Registreer nu!";
		this.now['fr'] 		= "Enregistrez-vous dès maintenant!";
		
		this.lnow 			= new Array();
		this.lnow['nl'] 	= "/registratie/nieuw";
		this.lnow['fr'] 	= "/enregistrement/enregistrement";		
	
		this.clc 			= new Array();
		this.clc['nl'] 		= "Klik hier.";
		this.clc['fr'] 		= "Cliquez ici pour le demander.";
		
		this.lclc 			= new Array();
		this.lclc['nl'] 	= "/registratie/wachtwoord";
		this.lclc['fr'] 	= "/enregistrement/motpasse_oublie";	
	
		this.tit 			= new Array();
		this.tit['nl'] 		= "Aanmelden";
		this.tit['fr'] 		= "Se connecter";	
		
		this.but 			= new Array();
		this.but['nl'] 		= "Aanmelden";
		this.but['fr'] 		= "Envoyer";						

		this.labl 			= new Array();
		this.labl['nl'] 	= "E-mail of login";
		this.labl['fr'] 	= "E-mail ou login:";
		
		this.errl 			= new Array();
		this.errl['nl'] 	= "Gebruiker niet gevonden";
		this.errl['fr'] 	= "Mauvais utilisateur";		

		this.labp 			= new Array();
		this.labp['nl'] 	= "Wachtwoord:";
		this.labp['fr'] 	= "Mot de passe:";

		this.errp 			= new Array();
		this.errp['nl'] 	= "Foutief wachtwoord";
		this.errp['fr'] 	= "Mauvais mot de passe";
	
		this.remp 			= new Array();
		this.remp['nl'] 	= "Wachtwoord onthouden";
		this.remp['fr'] 	= "Connexion automatique";	

		this.qtit 			= new Array();
		this.qtit['nl'] 	= "Voor automatisch aanmelden. NIET aanvinken indien ook anderen deze computer gebruiken.";
		this.qtit['fr'] 	= "n'activez PAS cette option si plusieurs personnes utilisent votre ordinateur";
		
		this.maxlength       = new Array();
		this.maxlength['nl'] = "maximale lengte: 1000 karakters";
		this.maxlength['fr'] = "longueur maximale: 1000 caractères";
		
		this.initLinks();
	},


	/*
	 * INITIALIZE LINKS
	 */
	initLinks: function() {
		var reactLinks = this.root.getElementsByClassName( this.linkClass );
				
		for( var i = 0 ; i < reactLinks.length ; i++) {			
			Event.observe( reactLinks[i] , 'click' , this.showReact.bindAsEventListener( this , reactLinks[i].up( 'div' ) , reactLinks[i].up( 'li' ) ) , false );			
		}
	},

	/*
	 * BUILD THE REACT BOX
	 */
	buildReact: function( ref , root , reportUrl , nickName) {
		
		this.counter++;
		
		var upWrap = new Element( 'div' , { 'id': 'reactForm_' + this.counter , 'class': 'art_react clearfix' , 'style':'display:none;' } );
		
		var upForm = new Element ( 'form' , { 'name': 'comment_f' , 'method': 'POST' , 'action': reportUrl , 'class': 'chck_f style_f clearfix' } );	
			
		var upField = new Element ( 'fieldset' );
				
		var upHidden = new Element ( 'input' , { 'type': 'hidden' , 'name': 'comment.submit' } );
		upField.appendChild(upHidden);			

		var upDivDbl = new Element ( 'div' , { 'class': 'double' } );
		upField.appendChild(upDivDbl);			

		var upTitle = new Element ( 'h4' , { 'class': 'alert' , 'style': 'display:none;' } );
		upTitle.appendChild(document.createTextNode(this.err[this.lang]));
		upDivDbl.appendChild(upTitle);
		
		var comment_b_id = 'comment_b_' + this.counter;
		var charsLeftId = 'chars_left_' + this.counter;

		if (this.enabled) {
			var upLabel = new Element ( 'label' , { 'for': comment_b_id , 'class': 'alert' } );
			upLabel.appendChild(document.createTextNode(this.yur[this.lang]));
		
			var upSpan = new Element ( 'span' , { 'style': 'display:none;' } );
			upSpan.appendChild(document.createTextNode('*'));
			upLabel.appendChild(upSpan);

			upDivDbl.appendChild(upLabel);
		}
		var upArea = new Element ( 'textarea' , { 'class': 'var_f' , 'tabindex': '3' , 'id': comment_b_id , 'name': 'comment.body' , 'cols': '10' , 'rows': '10', onKeyDown:"CountLeft($('" + comment_b_id + "'),$('"+ charsLeftId +"'),1000,'"+ this.lang+"');", onKeyUp:"CountLeft($('" + comment_b_id + "'),$('"+ charsLeftId +"'),1000,'"+ this.lang+"');" } );
		
		upArea.appendChild(document.createTextNode(nickName));
		upDivDbl.appendChild(upArea);		

		
		var charsLeft = new Element ( 'div', { 'id' : charsLeftId } );		
		charsLeft.appendChild(document.createTextNode(this.maxlength[this.lang]));
		upDivDbl.appendChild(charsLeft);

		var upDivR = new Element ( 'div' , { 'class': 'tright' } );
		upField.appendChild(upDivR);			

		var upAref = new Element ( 'a' , { 'class': 'fleft nuhover' , 'href': this.lin[this.lang] } );
		upAref.appendChild(document.createTextNode(this.rul[this.lang]));
		upDivR.appendChild(upAref);

		var upBut = new Element ( 'input' , { 'type': 'submit', 'class': 'blackbtn clearfix', 'tabindex': '4', 'value': this.rea[this.lang] } );
		var tmpLang = this.lang;
		Event.observe(upBut, 'click', function (e) {
			if (checkLength($(comment_b_id),1000, tmpLang) == false) {
				Event.stop(e);
			}
		});
		
		//upBut.appendChild(document.createTextNode(this.rea[this.lang]));
		upDivR.appendChild(upBut);

		var upBtnA = new Element ( 'button' , { 'type': 'button' , 'class': 'blackbtn clearfix' } );
		Event.observe(upBtnA, 'click', this.hideReact.bindAsEventListener(this, upWrap), false);
		upDivR.appendChild(upBtnA);
		
		var upBtnASpan = new Element ( 'span' );
		upBtnASpan.appendChild(document.createTextNode(this.stp[this.lang]));
		upBtnA.appendChild(upBtnASpan);		

		upForm.appendChild(upField);
		
		if (this.blockstatus == 1)
		{
			var upRestrictedBlock = new Element( 'div' );
			upRestrictedBlock.innerHTML = $('reaction_restricted').innerHTML;
			upWrap.appendChild(upRestrictedBlock);
		}
			
		upWrap.appendChild(upForm);
		
		root.appendChild(upWrap);		
		
		return(upWrap);
	
	},
	
	/*
	 * BUILD THE LOGIN BOX
	 */
	buildLogon: function( ref , root ) {
		
		this.counter++;
		
		var upWrap = new Element( 'div' , { 'id': 'art_login_' + this.counter , 'class': 'art_login clearfix' , 'style':'display:none;' } );

		var upUl = new Element ( 'ul' , { 'class': 'logintoplist lst_bul clearfix' } );
		upWrap.appendChild(upUl);
		
		var upLi = new Element ( 'li' );
		upLi.appendChild(document.createTextNode(this.reg[this.lang]));		
		upUl.appendChild(upLi);
		
		var upAref = new Element ( 'a' , { 'class': 'nuhover nowrap' , 'href': this.lnow[this.lang] } );
		upAref.appendChild(document.createTextNode(this.now[this.lang]));		
		upLi.appendChild(upAref);					

		var upLi = new Element ( 'li' );
		upLi.appendChild(document.createTextNode(this.pas[this.lang]));		
		upUl.appendChild(upLi);	
		
		var upAref = new Element ( 'a' , { 'class': 'nuhover nowrap' , 'href': this.lclc[this.lang] } );
		upAref.appendChild(document.createTextNode(this.clc[this.lang]));		
		upLi.appendChild(upAref);		
	
		var upTitle = new Element ( 'h1' , { 'class': 'tbar' } );
		upWrap.appendChild(upTitle);
		
		var upSpan = new Element ( 'span' );
		upSpan.appendChild(document.createTextNode(this.tit[this.lang]));
		upTitle.appendChild(upSpan);				
	
		var upForm = new Element ( 'form' , { 'name': 'login' , 'method': 'POST' , 'action': '' , 'class': 'chck_f style_f clearfix' } );	
							
		var upHidden = new Element ( 'input' , { 'type': 'hidden' , 'name': 'mediafin.login' } );
		upForm.appendChild(upHidden);	
		
		var upHidden = new Element ( 'input' , { 'type': 'hidden' , 'name': 'mediafin.loginform' , 'value': 'login' } );
		upForm.appendChild(upHidden);					

		var upDiv = new Element ( 'div' , { 'class': 'clearfix' } );
		upForm.appendChild(upDiv);	

		var upTitle = new Element ( 'h4' , { 'class': 'alert' , 'style': 'display:none;' } );
		upTitle.appendChild(document.createTextNode(this.errl[this.lang]));
		upDiv.appendChild(upTitle);
		
		var upLabel = new Element ( 'label' , { 'for': 'username' } );
		upLabel.appendChild(document.createTextNode(this.labl[this.lang]));		
		upDiv.appendChild(upLabel);
		
		var upInput = new Element ( 'input' , { 'type': 'text' , 'maxlength': '50' , 'class': 'var_f' , 'id': 'username' , 'name': 'username' } );
		upDiv.appendChild(upInput);		
				
		addInputChange(upInput);		
				
		var upDiv = new Element ( 'div' , { 'class': 'clearfix' } );
		upForm.appendChild(upDiv);	
		
		var upTitle = new Element ( 'h4' , { 'class': 'alert' , 'style': 'display:none;' } );
		upTitle.appendChild(document.createTextNode(this.errp[this.lang]));
		upDiv.appendChild(upTitle);	
		
		var upLabel = new Element ( 'label' , { 'for': 'password' } );
		upLabel.appendChild(document.createTextNode(this.labp[this.lang]));		
		upDiv.appendChild(upLabel);			

		var upInput = new Element ( 'input' , { 'type': 'password' , 'maxlength': '50' , 'class': 'var_f' , 'id': 'password' , 'name': 'password' } );
		upDiv.appendChild(upInput);	
		
		addInputChange(upInput);
				
		var upDiv = new Element ( 'div' , { 'class': 'notes clearfix' } );
		upForm.appendChild(upDiv);
		
		var upInput = new Element ( 'input' , { 'type': 'checkbox' , 'name': 'autologin' , 'id': 'autologin' , 'value': 'y' } );
		upDiv.appendChild(upInput);			
		
		var upLabel = new Element ( 'label' , { 'for': 'autologin' } );		
		upDiv.appendChild(upLabel);	
		
		var upBold = new Element ( 'b' );		
		upBold.appendChild(document.createTextNode(this.remp[this.lang]));		
		upLabel.appendChild(upBold);			
		
		var upAref = new Element ( 'a' , { 'class': 'lnk_info uline' , 'href': '#' , 'title': this.qtit[this.lang] } );		
		upDiv.appendChild(upAref);	

		var upStrong = new Element ( 'strong' );		
		upStrong.appendChild(document.createTextNode('?'));										
		upAref.appendChild(upStrong);	

		var upDiv = new Element ( 'div' , { 'class': 'clearfix' } );
		upForm.appendChild(upDiv);

		var upBut = new Element ( 'button' , { 'type': 'submit', 'class': 'blackbtn clearfix' } );
		upBut.observe('click', function(event) {
			var fe = Form.getElements(upForm);
			var ab = true;
			fe.each(function(fec) {
				fev = fec.value.strip();
				if (!(fieldChck(fec, fev))) {ab = false; alertIt('error', fec);}					
			});
			if (!(ab)) {
				Event.stop(event);
			}
			else {
				upForm.submit();
			}
		});		
		
		upDiv.appendChild(upBut);
		
		var upButSpan = new Element ( 'span' );
		upButSpan.appendChild(document.createTextNode(this.but[this.lang]));
		upBut.appendChild(upButSpan);
		
		var upBtnA = new Element ( 'button' , { 'type': 'button' , 'class': 'blackbtn clearfix' } );
		Event.observe(upBtnA, 'click', this.hideReact.bindAsEventListener(this, upWrap), false);
		upDiv.appendChild(upBtnA);
		
		var upBtnASpan = new Element ( 'span' );
		upBtnASpan.appendChild(document.createTextNode(this.stp[this.lang]));
		upBtnA.appendChild(upBtnASpan);	
			
		upWrap.appendChild(upForm);
		
		root.appendChild(upWrap);		
		
		return(upWrap);
	
	},	
	
	/*
	 * BUILD THE REACT BOX
	 */
	buildDeny: function( ref , root ) {
		
		this.counter++;
		
		var upWrap = new Element( 'div' , { 'id': 'react_deny_' + this.counter , 'class': 'art_deny clearfix' , 'style':'display:none;' } );
		upWrap.innerHTML = $('reaction_blocked').innerHTML;
		
		root.appendChild(upWrap);		
		
		return(upWrap);
		
	},
	
	/*
	 * SHOW THE REACTION BOX
	 */
	showReact: function(e, i, j) {
		Event.stop(e);
		
		if (this.blockstatus == 2) {
			var theForm = $A(arguments)[2].down('.art_deny');
			
			if (theForm == undefined) {
				theForm = this.buildDeny($A(arguments)[1], $A(arguments)[2]);
			}
		} else if (this.logon) {
			var theForm = $A(arguments)[2].down('.art_react');
			
			if(theForm == undefined) {
				var reportUrl = $A(arguments)[2].down('a.art_reactlnk').readAttribute('rel');	

				var nameAttr = $A(arguments)[2].down('a.art_reactlnk').readAttribute('name');			
				var nickArr = nameAttr.split('_')
				var nickName = '@' + nameAttr.replace(nickArr[0] + '_','');
				
				theForm = this.buildReact($A(arguments)[1], $A(arguments)[2] , reportUrl , nickName);
			}		
								
		} else {
			var theForm = $A(arguments)[2].down('.art_login');			
			
			if (theForm == undefined) {
				theForm = this.buildLogon($A(arguments)[1], $A(arguments)[2]);
			}
		}
		
		if (openItem) {
			Effect.BlindUp($(openItem));
		}
		
		if(!theForm.visible()) {
			$(theForm).setStyle({
				height: ''
			});				
			Effect.BlindDown(theForm);
			openItem = $(theForm).id;
		} else {
			Effect.BlindUp(theForm);
			openItem = null;
		}
	},
	
	/*
	 * HIDE THE REACTION BOX
	 */
	hideReact: function(e, i) {
		Event.stop(e);
		Effect.BlindUp($A(arguments)[1]);
		openItem = null;
	}	
	
});