/*
 * Droppy 0.1.2
 * (c) 2008 Jason Frame (jason@onehackoranother.com)
 */
$.fn.droppy = function(options) {
	
	options = $.extend({speed: 250}, options || {});
	
	var sMenuName = this[0].id;
	
	this.each(function() {
		
		var root = this, zIndex = 1000;
		
		function getSubnav(ele) {
			if (ele.nodeName.toLowerCase() == 'li') {
				var subnav = $('> ul', ele); // Finds all ul children of the li element 
				return subnav.length ? subnav[0] : null;
			} else {
				return ele;
			}
		}
		
		function getActuator(ele) {
			if (ele.nodeName.toLowerCase() == 'ul') {
				return $(ele).parents('li')[0];
			} else {
				return ele;
			}
		}

	
		function show() {						
			var subnav = getSubnav(this);
			if (!subnav) return;	
						
			$.data(subnav, 'cancelHide', true);
			//$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
			$(subnav).css({zIndex: zIndex++}).fadeIn(options.speed);
			if (this.nodeName.toLowerCase() == 'ul') {
				var li = getActuator(this);
				$(li).addClass('hover');
				$('> a', li).addClass('hover');
			}
		}
		
		function hide() {
			var subnav = getSubnav(this);
			if (!subnav) return;

			$.data(subnav, 'cancelHide', false);
			$(subnav).fadeOut(options.speed);
			/*
			setTimeout(function() {
				if (!$.data(subnav, 'cancelHide')) {
					//$(subnav).slideUp(options.speed);
					$(subnav).fadeOut(options.speed);
				}
			}, 250);
			*/
		}

		
		
		// Whenever the mouse cursor is moved over a ul or li, the first function is fired. Whenever the mouse moves off of the element, the second function fires
		$('ul, li', this).hover(show, hide);
		
		$('li', this).hover(
			function() {
				$(this).addClass('hover'); 
				$('> a', this).addClass('hover'); 
			},
			function() { 
				$(this).removeClass('hover'); 
				$('> a', this).removeClass('hover'); 
			}
		);
		
		
		// als je met je muis in het menu zit, wordt de gele bg getoond
		$(this).hover(
			function() {
				showBg();
			},
			function() {
				hideBg();					
			}
		);
		
		// Zolang je met je muis over de gele bg hovert, blijft deze in beeld
		$('#bgmainmenu').hover(
			function(){
				showBg();
			},
			function(){
				hideBg();
			}
		);
		
		function showBg() {
			if(sMenuName == 'subnavigation'){
				$('#bgmainmenu').css('background-color','#004489');
			} else {
				$('#bgmainmenu').css('background-color','#fbc34e');
			}
			
			$('#bgmainmenu').css('height','246px'); // eigenlijk moet de hoogte afhankelijk van de hoogte van de ul worden						
			$('#bgmainmenu').fadeIn(options.speed);
			bCancelBgHide = true;
		}
		
		function hideBg() {
			bCancelBgHide = false;
			
			setTimeout(function() {
				if (!bCancelBgHide) {
					$('#bgmainmenu').fadeOut(options.speed);
				}
			}, 250);
			
		}
	
				
		
	});
	
};