/*
	This small function is the one that either shows or hides the entire set of comments, all event bound functions in 
	jquery have a normalized event object as default parameter
	*/
	toggleAll = function(e){
		if($(e.target).attr('showing')=='true'){									//We search for the showing attribute, if it is false it is because things aren't showing 
			$("div[id^='comments-reply']").slideUp(500); 							//We search for all divs which id starts with comments-reply and hide them
			$(e.target).attr('showing','false');  									//We change the attribute value so next time this function is called it shows them instead of hiding them
			$(e.target).html('Expand all comments replies');						//And we change the text just for kicks
		}else{
		/*
		Now we need to add more functionality beause if something isn't loaded we need to load it, not just show it
		*/
			$("div[id^='comments-reply']").each(function (i){						//Here we iterate through all elements
				if($(this).attr('loaded')==null){ 									//And if it it has not been loaded, we load the info
					new toggleDisplay($(this).attr('id').substring(15)).ajaxFn(); 	//Calling the function, we create an anonymous instance and call the ajax of that object
				}else{
					$("div[id^='comments-reply']").slideDown(500); 					//Here we just show them instead
				}
			});
			$(e.target).attr('showing','true'); 									//change to make this function hide them next time
			$(e.target).html('Hide all comments'); 									//change text just for kicks
		}
	}
	/*
	This function is a wrapper to use when toggling and we do not have the comment index (id), 
	we need to retrieve the actual element to call toggleDisplay function
	*/
	toggleDisplayWrapper = function(e){
		commentId = e.target.id.substring(14);								//Here we retrieve the click event target or source (the wording here is not that 
																			//clear), and split the index
		var o =new toggleDisplay(commentId);								//We create a new instance of the object that toggles the visibility
		o.ajaxFn();															//And we call its ajax function (actually it is an ajax function when data is not loaded, 
																			//else it just hides the div (see below)
	}
	
	/*
	This function toggles the status of a particular element.
	Becasue this function is called several times simultaneously in some cases, we had to make sure that our instances were local. 
	Hence the creation of local variables
	*/
	toggleDisplay = function(commentId){
		this.commentId = commentId;						
		this.destinationId = "#comments-reply-" + this.commentId; 
		if($(this.destinationId).attr('loaded')==null){ 					//We check if the data inside the div has already been loaded if not,		
			this.ajaxFn = function(){										//We create a function to wrap the ajax call, if this has been loaded 
																			//this same function will only toggle the visibility, see below
				var self = this;											//We make sure to keep a reference to the instance
				$.ajax({ 														
					url: "replies.php", 									//URL to call
					dId : this.destinationId,							    //We add this parameter to prevent confussion (by the success function, when processing the response
					cache: false, 						
					data: "commentId="+commentId, 							//Data to be sent (this is the comment id which will be used on the replies.php to retrieve the proper comments		
					success: function(data){								//Here we process the response and show the contents	
						$(this.dId).html(data); 				
						$(this.dId).attr('loaded','true'); 					//We set the parameter to avoid reloading each time this is shown
						$(this.dId).slideDown(500); 			
					},
					dataType:'html',										
					error: function (request, textStatus, errorThrown) { 	//Function executed in case of an error		
						$(this.destinationId).html("Could not load content, ajax error");
					}
				});
			}
		}else{		
			this.ajaxFn = function(){										//Here we have already loaded the data, so we simply toggle the visibility
				this.self = this;										
				$(self.destinationId).slideToggle(500);
			} 
		}	
	}
	/*
	This function checks for a cookie named 'defaultState' if it is set to show it will show all comments as default, else they will be hidden
	*/
	getDefaultState = function(e){
		console.log('def');
		value = $.cookie('defaultState');
		if(value=='show'){
			console.log('show');	
			$("#expand-all-replies").trigger('click');						//This makes it simpler, we simply make as if the show all comments link has been clicked
		}
		
	}
	/*
	This is the function that actually checks if the url contains any specific comment to be shown (#2 for example), if so, it will show it
	*/
	checkShownComment = function(e){
		var queryString = window.location.href.split('#')[1];				//We split the url and see if there is a number		
		if(queryString != null){
			if($('#comments-reply-'+queryString)!=null){
				new toggleDisplay(queryString).ajaxFn();					//We create an instance and call it's ajax function
			}
		}
	}
	/* 
	this function is the one that is in charge of actually loading the comments from the comments.php page 
	(off course you can change that url, this is just for the example).
	What it does is: puts a loading message on the comments div, then sends the ajax request, once it gets its response,
	if it is succesful, it will first hide the comments div, then replace the html with the response info and then bind the action to the "view replies" buttons
	*/
	loadComments = function(e){
		$('#comments').html("Loading comments..."); 							//Loading message
		var ajaxUrl = document.location.href.substring(0,document.location.href.lastIndexOf('/'));
		    ajaxUrl = ajaxUrl + '/commentes.php';
		    $.ajax({
		    url: ajaxUrl,         //URL, change it to suit your needs
			url: "http://csedev.songmeanings.net/client_components/songs/comments.php", 												//URL, change it to suit your needs
			cache: false, 														//Prevent caching of the page by the server
			success: function(data){											//This function gets executed if the ajax response is ok
				$('#comments').hide(); 											//Hiding the div
				$('#comments').html(data); 										//Replace html (data holds the response from our ajax query)
				/*
				All the functionality that was previously bound to events at startup is done here now, which is when we actually load the html into the page
				*/
				$("a[id^='show-comments']").bind('click',toggleDisplayWrapper); //We bind toggleDisplayWrapper function to all show-comments- links 
				$("a[id^='post-reply']").bind('click',showPostReply);			//We bind the function that shows the reply div to all post reply links																
				$("form[id^='reply-form']").bind('submit',submitNewPost);		//We bind the ajax submitting function to all the submit buttons
				$("#expand-all-replies").bind('click',toggleAll);				//We bind the toggle all comments to the toggle all link 
				$('#comments').fadeIn(500); 									//We show the comments, with a fadeIn effect
				getDefaultState();												//We check if comments must be loaded by default
				checkShownComment();											//We check if any specific comment has been called
			},
			dataType:'html', 													//This is the data type for the ajax response, can be html, json, xml, etc. 
																				//HTML fits our needs best, we could have gotten the data as a json array and then 
																				//just spit the html out with js, but that would make it harder to maintain I think
			error: function (request, textStatus, errorThrown) { 				//This gets executed if there is an error
				$('#comments').html("Could not load content, ajax error"); 		//We replace the html from the comments div to inform that there is an error
			}
		});
	}
	/*
	This function shows the post reply div (which is by default hidden)
	*/
	
	showPostReply = function(e){
		commentId = "#post-reply-div-"+e.target.id.substring(11); 				//We get the proper div id
		$(commentId).slideDown(200);											//And we simply show it
	}
	
	/*
	This function is the one that submits the new reply form with Ajax, much nicer than having the whole page reload
	*/
	submitNewPost = function(e){
		var index = e.target.id.substring(11);									//We get the proper index from the event source
		formId = "#reply-form-"+index;											//Fetch the form
		var formData = $(formId).serialize();									//This method (serialize) is from jquery and creates a querystring from the form
		$.ajax({
			url: $(formId).attr('action'), 										//This is the original form url
			cache: false, 														//Prevent caching of the page by the server
			data: formData,														//This is the data that was serialized a few lines above
			success: function(data){											//This function gets executed if the ajax response is ok
				repliesDivId = "#comments-reply-"+index;						//We get the replies Div
				$(repliesDivId).removeAttr('loaded');							//and remove the attribute so when shown again it will reload the data
				$(repliesDivId).hide();											//and we hide it
				divId = "#post-reply-div-"+index;								//Fetch the replies div
				$(divId).hide();												//We hide the post reply comment
				var toggleObj = new toggleDisplay(index);						//Here we create a toggleDisplay instance (as done before in several places)
				toggleObj.ajaxFn();												//And call it's ajax function so the new data is reloaded
			},
			dataType:'html', 													//This is the data type for the ajax response, can be html, json, xml, etc. 
																				//HTML fits our needs best, we could have gotten the data as a json array and then 
																				//just spit the html out with js, but that would make it harder to maintain I think
			error: function (request, textStatus, errorThrown) { 				//This gets executed if there is an error
				$(divId).html("Could not load content, ajax error"); 			//We replace the html from the comments div to inform that there is an error
			}
		});
		
		return false;															//This prevents the actual form from submitting 
																				//(we already did that with jquery throught ajax)
	}