/**
 * CaptionBlur.js
 * A useful jQuery plugin for an image hover caption effect.
 * 
 * Created: 09/18/2013
 * Website: http://erwanlent.com/captionblur
 * Email: erwanlent@gmail.com
 * Description: Adds a captioning system for images with a blur effect.
 * 
 *
 * Special thanks to Neil Carpenter for the CSS guidance.
 */


$(document).ready(function() 
{
	/*=====================================================================================
	Main Logic - Calls CSS on Mouseover
	=======================================================================================*/

	var containers = $("[class=caption-blur-container]")

	$.each(containers, function(i, val)
	{
		var container = $(val).children();
		var caption = $(container[0]);
		var image = $(container[1]);

		// Add <i> tag to each character
		splitCaption(caption);

		container.mouseover(function() 
		{
			$.each(caption.children(), function(i, tag) 
		    {
		    	$(tag).addClass('fly-in-out');
		    });

		    image.addClass('blur');

		});

		container.mouseleave(function() 
		{
			$.each(caption.children(), function(i, tag) 
		    {
		    	$(tag).removeClass('fly-in-out');
		    });

		    image.removeClass('blur');

		});

	});

	function splitCaption(caption)
	{
		// Split each character into separate tag
		var text = $(caption).html(),
		chars = text.length,
		newText = '',
		animation = 'fly-in-out',
		char,
		i;

		for (i = 0; i < chars; i += 1) 
		{
			newText += '<i>' + text.charAt(i) + '</i>';
		}

		$(caption).html(newText);
	} 
     

	/*=====================================================================================
	Firefox Filter Implementation
	=======================================================================================*/

	// New browser detection  - jQuery 1.9 doesn't support $.browser
	 if (navigator.userAgent.match(/Firefox/i) )
	 {
        // Append firefox filter to end of document
		$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height:0;"><filter id="image-filter"><feGaussianBlur stdDeviation="3" /></filter></svg>');

		// Set up mouse events for each image
		var images = $("[id=caption-blur]");
		$.each(images, function(i, val) 
		{
			// Remove filter css from object
			$(val).mouseleave(function()
		    {
		   		$(this).css("filter", "");
		    });  

			// Add filter css to object
		   $(val).mouseover(function()
		   {
		       $(this).css("filter", "url('#image-filter')");
		   });  
		}); 
     }
});
