// Background Image Fader Script by James Brocklehurst 2010
// Licensed under the MIT License:
// http://www.opensource.org/licenses/mit-license.php

// For full instructions visit http://www.mightymeta.co.uk/blog/

// Version 0.0.1

//Configuration:

var selector = "#main-menu li li a"; // CSS Selector/s for element/s you want to apply fade effect to.
var hoverOverSpeed = "500"; // Hover over fade speed (in milliseconds)
var hoverOutSpeed = "300"; // Hover out fade speed (in milliseconds)

// Start JQuery

jQuery(document).ready(function($) {  

// Background Opacity Plugin by Nick Obrien (http://www.nickobrien.nl)

	jQuery.fn.backOpacity = function(settings){
		// Default and argument settings
		settings = jQuery.extend({background: '#000000', opacity: 0.5}, settings);

		// Loop through each element given and add an opacity element
		jQuery(this).each(function(intIndex){
			// For fixing background element's positions/sizes these variables are needed
			var pt = parseInt($(this).css('paddingTop'));
			var pb = parseInt($(this).css('paddingBottom'));
			var pl = parseInt($(this).css('paddingLeft'));
			var pr = parseInt($(this).css('paddingRight'));
			var fixedleft = parseInt($(this).css('marginLeft'));
			var fixedright = parseInt($(this).css('marginRight'));

			// Element offset width
			var parentow = $(this).width();

			// Fixed variables
			var fixedwidth, fixedheight, fixedleft, fixedright = 0;

			// Calculate fixing positions/sizes
			fixedwidth = parentow + pl + pr;
			fixedheight = $(this).height() + pt + pb;

			// Add background element
      var $span = $('<span class="original-link"></span>').css({
        position:'relative',
        zIndex:((20)+intIndex*20)
      });
      $(this).wrapInner($span);
			$(document.createElement('div'))
      .css({backgroundColor:settings.background, opacity:settings.opacity, 
        position:'absolute', left:0, top:0, width:'100%', height:'100%', zIndex:((10)+intIndex*10)})
      .appendTo($(this)); //insertAfter

			// Set positions for the content element
//			$(this).css({width: parentow, position:'absolute', zIndex:((20)+intIndex*20)});
      
			$(this).css({zIndex:((20)+intIndex*20), position: 'relative'});
		});

		// Return
		return jQuery;
	};


// Animate Fade Effects
	
	$(selector).css({background:'none'}); //removes default CSS :hover effect

	$(selector).backOpacity({background: '#c8c8c8', opacity: '1'}); // Initiate default background opacity
	
	$(selector).hover(
		
		function() {
			$(this).children('div').stop().animate({'opacity':0},hoverOverSpeed); //fade out on hover
		},
		
		function() {
			$(this).children('div').stop().animate({'opacity':1}, hoverOutSpeed); //fade in on mouseout
	
		});

});//end