// WP uses a 'no conflict' version of jQuery; let's
// grab a reference to the 'jQuery' function
var $j = jQuery.noConflict();
$j('document').ready(function()
{
	var img = new Image();
	var imgPath = getPluginUrl() + 'ajax-loader.gif';
	var loadingImg = 
		$j(img).attr('src', imgPath).css('margin-left', '10px');

	$j('a.more-link').each
	(
		function(index)
		{	
			anchorEl = $j(this);
			setRedirectRequest(anchorEl);
		}
	);
	
	/**
	 *	Return the url to our plugin directory
	 *	<br>
	 *	@return string plugin url
	 */
	function getPluginUrl()
	{
		var loc = window.location;
		return loc.protocol + '//' + loc.host + loc.pathname + 
			   'wp-content/plugins/read-more-right-here/';
	}
	
	/**
	 *	Return the id of the post we want using the
	 *	'more' href value.
	 *	<br>
	 *	@param string href value of 'more' anchor element
	 *	@return string the target post id
	 */
	function getPostId(path)
	{
		var pos = path.lastIndexOf('-');
		return path.substr(++pos);
	}
	
	/**
	 *	Add our ajax request action to the 'click' event
	 *	of the 'more' anchor element.
	 *	<br>
	 *	@param Element the 'more' anchor element
	 */
	function setRedirectRequest(el)
	{
		var url = el.attr('href');
		el.bind('click', 
				{"el":el, "url":url, "postid":getPostId(url)}, 
			 	ajaxClick);
	}
	
	/**
	 *	The 'more' element's 'click' event handler
	 *	<br>
	 *	@param event data set as part of 
	 *		   <code>setRedirectRequest</code>
	 */
	function ajaxClick(event)
	{
		var theEl = event.data.el;
		var theImg = loadingImg.clone();
		
		// append and display the loading image 
		// after the 'more' anchor element
		theEl.after(theImg);
		theImg.show();
		
		// perform the ajax request
		$j.ajax
		({
			type: "POST",
			url: event.data.url,
			dataType: "html",
			cache: false,
			data: {'wt-rmrh-redirect':'1', 'postid':event.data.postid},
			error: function(request, textStatus, errorThrown)
			{
				data = "<b><font color=\"red\">Sorry! There was an error retrieving content.<br>Click again to be taken to this entry's page.</font></b>";
				ajaxFinished(theEl, theImg, data, true);
			},
			success: function(data, textStatus)
			{
				ajaxFinished(theEl, theImg, data, false);
			}

		});
		// keep anchor 'click' event propagating
		return false; 
	}
	
	/**
	 *	Handles the completion of our ajax request. If the
	 *	request resulted in an error, the 'more' anchor 
	 *	element will revert to its normal use (i.e. click
	 *	results in loading the post's single page display).
	 *	<br>
	 *	@param Element 'more' anchor element
	 *	@param Image loading image
	 *	@param String ajax request result data
	 *	@param boolean true if request resulted in error; 
	 *		   false otherwise 
	 */
	function ajaxFinished(theEl, theImg, result, bError)
	{
		var theParent = theEl.parent().get(0);
		var newEl = $j("<p>" + result + "</p>");
		$j(theParent).after(newEl);
		$j(theParent).nextAll().toggle();
		theEl.unbind('click', ajaxClick);
		newEl.slideDown(1000, function(){theImg.fadeOut(500);});
		
		// if no error, 'more' link slides the content in and
		// out of view; otherwise future clicks behave normally
		// and take user to the single post page
		if(!bError)
		{
			theEl.click(function()
			{
				theEl.after(theImg);
				theImg.show();				
				newEl.slideToggle(1000, function(){theImg.fadeOut(500);});
				// keep anchor 'click' event propagating
				return false;
			});
		}
	}
		
});