var commentaires = [];

var get_commentaires = function(){
	commentaires.push({
			id:		1,
			auteur:	'toto',
			texte:		'Ceci est un commentaire',
			commentaires :	[{
				id:		3,
				auteur:		'tata',
				texte:		'Ceci est un commentaire',
				},{
				id:		4,
				auteur:		'Tutu',
				texte:		'Ceci est un 2e commentaire',
				commentaires :	[{
					id:		10,
					auteur:		'tata',
					texte:		'33333',
					commentaires : [{
						id:		10,
						auteur:		'tata',
						texte:		'33333',
						},{
						id:		9,
						auteur:		'Tutu',
						texte:		'33333333e',
					}]},{
					id:		9,
					auteur:		'Tutu',
					texte:		'33333333e',
				}]
			}]
		},{
			id:		2,
			auteur:	'toto',
			texte:		'Ceci est un commentaire2',
			commentaires :	[{
				id:		5,
				auteur:		'tata',
				texte:		'Ceci est une réponse au commentaire2',
				},{
				id:		6,
				auteur:		'tata',
				texte:		'Ceci est une 2e réponse au commentaire2',
				},{
				id:		6,
				auteur:		'Tutu',
				texte:		'Ceci est une 3e reponse au commentaire2',
			}]
	});
}
var get_formulaire_HTML = function(id_parent){
	var form = "<form class='form_reponse' name='reponse' action='envoie.php' method='POST'>"
					+"<input type='hidden' name='parent' value='"+id_parent+"' /><br/><br/>"
					+"<table border='0'>"
						+"<tr><th>Auteur :</th><td><input type='text' name='nom' id='nom' value=''/></td></tr>"
						+"<tr><th>Mail :<br/></th><td><input type='text' name='mail' id='mail' value='' style='width:250px;'/><br /></td></tr>"
						+"<tr><th colspan='2'><textarea rows='2' cols='30' name='question'>Votre question...</textarea></td></tr>"
						+"<tr><td colspan='2'>"
							+"<p><input type='checkbox' name='avert' id='avert' value=''/><small>&nbsp;Je souhaite être avertis en cas de réponse.</small></p>"
								+"<div class='boutons' style='float:right;'>"
									+"<button id='envoyer'>C\'est partit !</button>"
								+"</div></td></tr>"
                    +"</table>"
                +"</form>";
	return form;
}

var get_commentaires_HTML = function(commentaires){
	var html = '';
	for (comm in commentaires){
		var form = get_formulaire_HTML(commentaires[comm].id);
		html += '<div class="commentaire"><p><small><i>'+commentaires[comm].auteur+'</small></i><br/>'+commentaires[comm].texte
					+'<div class="repondre">'
					+'	<h4 class="lien_repondre"><small>Répondre à ce message.</small></h4>'
					+form
					+'</div>';
		if (commentaires[comm].commentaires) {	
			nb_reponse = commentaires[comm].commentaires.length.toString();
			html += 	'<div class="affiche_reponses"><h4><small>Afficher les réponses</small> ('+nb_reponse+')</h4></div>'
                        +'<div class="liste_reponses">';
			html += get_commentaires_HTML(commentaires[comm].commentaires) + '</div>';
		}
		html += '</div>';
	}
	return html;
}
var initialise_messages = function(){
	get_commentaires();
	var html = "";
	html += get_commentaires_HTML(commentaires);
	return html;
}
$(document).ready(function(){
	var commentaires_HTML = initialise_messages();
	$('#liste_commentaires').html(commentaires_HTML);
	
	$("#commenter").hover(function(){
		$(this).css('background','rgba(39, 28, 108, 0.9)').css('color','#a19bc8');		
	},function(){
		if (!$(this).find('h2').hasClass("deroule")){
			$(this).css('background','rgba(39, 28, 108, 0.5)').css('color','#fff');
		}
	});
	$("#commenter h2").click(function(){
		if (!$(this).hasClass("deroule")){	
			$(this).addClass("deroule");
			$("#form_commentaire").show("slow");	
			$("#commenter").animate({
				height : '300px',
				width:	 '600px'
			});	
		} else {
			$(this).removeClass("deroule");
			$("#form_commentaire").hide("slow");	
			$("#commenter").animate({
				height : '35px',
				width:	 '400px'
			});
		}
	});
	
	$(".repondre, .affiche_reponses").hover(function(){
		$(this).css('background','rgba(39, 28, 108, 0.9)').css('color','#a19bc8');		
	},function(){
		if (!$(this).find('h4').hasClass("deroule")){
			$(this).css('background','rgba(39, 28, 108, 0.5)').css('color','#fff');
		}
	});
	$(".repondre h4").click(function(){
		if (!$(this).hasClass("deroule")){	
			$(this).addClass("deroule").next(".repondre .form_reponse").show("slow");	
			$(this).parent('.repondre').animate({
				height : '245px',
			});	
		} else {
			$(this).removeClass("deroule").next(".repondre .form_reponse").hide("slow");	
			$(this).parent('.repondre').animate({
				height : '20px',
			});
		}
	});
	
	$(".affiche_reponses").click(function(){
		var isvisible = $(this).next(".liste_reponses").is(":visible");
		$(this).next(".liste_reponses").toggle("slow");
        $(this).find('h4 small').html((isvisible ? 'Afficher les réponses' : 'Masquer les réponses'));
	});
});