// 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 
		imgPath = RMRH_VALUES.pluginUrl + RMRH_VALUES.loadImageName,
		LOADING_IMAGE =// GIF "loading" image 
			$j(new Image()).attr('src', imgPath).css('margin-left', '10px');	
			

	$j('a.more-link').each
	(
		function(index)
		{	
			anchorEl = $j(this);
			setRedirectRequest(anchorEl);
			
		}
	);
	
	
	/**
	 *	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,
			theImg = LOADING_IMAGE.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);
				theEl.html("Read less &laquo;");
			}

		});
		// 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 newEl = $j("<p>").html(result).hide(),
			tempFunc,
			funcObjToggle = 
				function()
				{
					newEl.find('object').each
					(
						function(){$j(this).toggle();}
					);				
				},					
			funcArray = 
				new Array
				(
					function()
					{
						funcObjToggle();						
						newEl.slideToggle(1000, function()
								{ 
									theEl.html('Read more &raquo;');
									theImg.fadeOut(500);
														
								});						
					},
					function()
					{
						newEl.slideToggle(1000, function()
								{ 
									theEl.html('Read less &laquo;');
									theImg.fadeOut(500);
									funcObjToggle();
								});							
					}
				);
		
		
		theEl.unbind('click', ajaxClick);
		
		// If IE 7 and newer, and the new content has an 
		//	embedded object (e.g. flash video), we have 
		//	to just re-direct to the single page entry.
		//	The object will NOT display.
		if($j.browser.msie && (parseInt($j.browser.version) > 6))
		{
			if(hasEmbed(newEl))
			{
				window.location = theEl.attr('href');
				return;
			}
		}
		
		newEl.find('object').each
		(
				function()
				{
					$j(this).hide();
				}
		);		
		
		// the loading gif is after the more link, so
		// put the new content after that image
		theImg.after(newEl);
		
		newEl.slideDown(1000, function()
				{ 
					theImg.fadeOut(500);			
					funcObjToggle();
				});		

		// 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();
				funcArray[0]();
				
				// Swap functions to execute. When 'collapse'
				//	want object to hide first. When expand want
				//	object to show last.
				tempFunc = funcArray[0];
				funcArray[0] = funcArray[1];
				funcArray[1] = tempFunc;

				// keep anchor 'click' event propagating
				return false;
			});
		}
	}
	
	function hasEmbed(el)
	{
		var result = false;
		el.find('object').each(
				function()
				{	
					result = true;
					console.log(this);
					return;
				});
		
		return result;
	}

		
});