(function($) {
	$.fn.footerMenu = function() {
		
		// Toggles the overlays on the frontpages when clicking in the footer menu
		var itIsOpen = false;
		$('.section-box a').click(function(e) {
			// Get the clicked on section and find the target section
			var $this = $(this),
				context = $this.parent().data('section'),
				target = '.sections .'+context+' a',
				thisHtml = $this.clone(),
				initialHtml = $this.closest('.menu>li');

			switch(context) {
				case 'kursist':
					var contextColor = 'orange';
					break;
				case 'erhverv':
					var contextColor = 'green';
					break;
				case 'kommune':
					var contextColor = 'purple';
					break;
				}
			// If there is a target we are on a front page, and we trigger the overlays
			// If there isn't we are on a sub page, and we add the active section link
			if ($(target).length) {
				e.preventDefault();
				if (itIsOpen) {
					$('#lean_overlay').trigger('click');
					itIsOpen = false;
				} else {
					$(target).trigger('click');
					itIsOpen = true;
					$('.menu-item').trigger('mouseleave');
					//$this.parent().parent().parent().removeClass('orange green purple').addClass(contextColor).children('a:first').text(context);
				}
			} else {
				var activeLink = $('.section-box .act').html();
				$('.section-box').parent().prepend(activeLink);
			}
		});
		// Handles and adds styling to the menu popups
		return this.each(function() {
			
			// Remove the active section link from the popup, because it is already visible (we cloned it above)
			$('.section-box .act').remove();

			// Cache some stuff
			var $this = $(this),
				$thisParent = $this.parent(),
				$parentSiblings = $thisParent.siblings(),
				box = $this.attr('id'),
				$box = $('.'+box),
				timer,
				clicked = 0,
				boxHeight = $box.height(),
				bgImage = 'url("fileadmin/templates/main/images/dot.png")';
				
				// add the white up arrow
				$this.append('<img src="fileadmin/templates/main/images/arrow-up-white.png" />');
				
				// Do this to get smooth animation on the first slideup of the menu popups on each pageload
				$box.height(0);

			function showBox() {
				// Add style insanity to surrounding elements first
				if ($thisParent.not('.orange, .green, .purple').length) {
					$this.cssBg( bgImage, 'repeat-y', 'right top' );
					$thisParent.cssBg( bgImage, 'repeat-y', 'left top' ).addClass('active');
				}
				if ($this.is('.about, .search, .meet')) {
					$parentSiblings.cssBg( bgImage, 'repeat-x', 'left top' );
					$('.footer').css('background-color', '#AE1A28').cssBg( bgImage, 'repeat-x', 'left top' );
				}
				if ($this.is('.about')) {
					$thisParent.addClass('red');
				}
				if ($this.is('.meet')) {
					$thisParent.addClass('beige');
					$this.find('img').attr('src', 'fileadmin/templates/main/images/arrow-down-red.png');
				} else {
					$this.find('img').attr('src', 'fileadmin/templates/main/images/arrow-down-white.png');
				}
				if ($this.is('.search')) {
					$thisParent.addClass('black');
				}
				// Now show it
				$box.show().animate({ height : boxHeight }, { duration: 300, easing:'easeOutCubic', complete: function() {
					if ($this.is('.meet, .about, .search')) {
						$('.left, .right', this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1});
					}
				}});
			}
			function hideBox() {
				// Hide it first
				$box.animate({ height: 0 }, { duration: 300, easing:'easeOutCubic', complete: function () {
				        $box.hide();
				      } 
				    });
				// Then remove style insanity from surrounding elements
				$this.css('background-image', 'none');
				$thisParent.css('background-image', 'none').removeClass('active');
				if ($this.is('.about, .search, .meet')) {
					$parentSiblings.css('background-image', 'none');
					$('.footer').css('background-image', 'none');
					$('.left', $box).css({opacity: 0});
				}
				if ($this.is('.about')) {
					$thisParent.removeClass('red');
				}
				if ($this.is('.meet')) {
					$thisParent.removeClass('beige');
					$('.right', $box).css({opacity: 0});
				}
				if ($this.is('.search')) {
					$thisParent.removeClass('black');
				}
				$this.find('img').attr('src', 'fileadmin/templates/main/images/arrow-up-white.png');
			}
			
			// Timer is to delay the popping of the popups
			function startHide() {
				timer = setTimeout(function() {
					hideBox();
					clicked = 0;
				}, 300);
			}
			function stopHide() {
				clearTimeout(timer);
			}

			$this.click(function(e) {

				e.preventDefault();

				if (clicked == 0) {
					showBox();
					clicked = 1;
				} else {
					hideBox();
					clicked = 0;
				}
			});

			// Stop and start the timer on hover events on menu items
			$this.mouseenter(stopHide).mouseleave(startHide);
			// Stop and start the timer on hover events on menu popup
			$box.mouseenter(stopHide).mouseleave(startHide);
		});
	};
}(jQuery));