(function($) {
	$(document).ready(function(){
		var DefaultWidthLayer2 = 185; /* initial width for layer2 menu */
		var ExpandedWidthLayer2 = 555;
		var DefaultMorphTime = 500; /* miliseconds*/
		var ajaxLang = $('#nfcpageextended_l').text();
		var ajaxUrl = 'index.php?id=141&type=777&no_cache=1';		
		var mainmenu = $('#main_menu');
		var selectorLayer1 = '.item1,.item2,.item3';
		var selectorLayer2 = 'ul.menu2';
		var selectorTogglePageInfo = 'li[class*="layer2"][id^="nav-"]';
		var selectorPageInfo = 'div[id*="page-info-"]';
		var timer = null;
		var activeElement = null;
		
		/* stop animations and reset width */
		var resetLayer2 = function(layer2){
			$(layer2).stop(true);
			$(layer2).width(DefaultWidthLayer2);
			$(layer2).height('auto');
		};
		
		/* hide all info container in given layer2 */
		var hidePageInfoContainer = function(layer2){
			$(selectorPageInfo,$(layer2)).hide();
		};
		
		/* animate given layer2 to new size */
		var morphLayer2 = function(layer2,options){
			/*console.log(options);*/
			$(layer2).animate(options,DefaultMorphTime);
		};

		
		var positionPageInfoAndMorph = function(el){
			var pageInfo = $(selectorPageInfo,el).children();
			var parentMenu = $(el).parent('ul.menu2');

			var elPosition = $(el).position();
			var topOffset = 0-elPosition.top;
			
			var pageInfoHeight = 0;
			/* restore data from object, as its closed */
			/* after initial display, so no calculation is possible */
			var pageInfoData = $(pageInfo).data();
			if(pageInfoData.height > 0){
				pageInfoHeight = pageInfoData.height;
			} else {
				
				pageInfoHeight = $(pageInfo).outerHeight(true);
				$(pageInfo).data('height',pageInfoHeight);
			}
			
			
			
			var morphMenuOptions = {};
			var cssPageInfoOptions = {'top':topOffset};
			
			
			var menuHeight = $(parentMenu).outerHeight(true);
			var menuWidth = $(parentMenu).outerWidth(true);
			var morphMenuOptions = {};
			
			//console.log(pageInfoWidth);
			if(pageInfoHeight > menuHeight){
				morphMenuOptions.height = pageInfoHeight;
			} else if(menuHeight > pageInfoHeight){
				cssPageInfoOptions.height = menuHeight;
			}
			if(ExpandedWidthLayer2 > menuWidth){
				morphMenuOptions.width = ExpandedWidthLayer2;
			}

			pageInfo.css(cssPageInfoOptions);
			if($j(morphMenuOptions).length > 0){
				morphLayer2(parentMenu,morphMenuOptions);
			}
			//console.log(morphMenuOptions.length());
		};
		
		var displayPageInfo = function(el){
			
			
			$(selectorPageInfo,el).show();
			positionPageInfoAndMorph(el);
		};
		
		/* fetch page info via ajax */
		var fetchPageInfo = function(el){
			var page = $(el).attr('id').replace("nav-","");
			var ajaxHash = {'a':'page-info','page':page,'lang':ajaxLang};
			$.getJSON(ajaxUrl,
					ajaxHash,
					function(result){
						if(result.state == 1){
							var content = $(result.payload);
							var container = $('<div id="page-info-'+page+'" class="page-info"></div>').append(content);
							$(el).append(container);
							$(el).data('fetchedData',1);
							if(content.length == 0){
								$(el).data('emptyContent',1);
							/* only display if the current element is selected due to async requests */
							} else if(el == activeElement) {
								displayPageInfo(el);
							} else {
								$(container).hide();
							}
						}			
			        }
			);
		};
		
		var startTimer = function(el){
			timer = window.setTimeout(function(){fetchPageInfo(el);},300);
		};
		
		var stopTimer = function(){
			window.clearTimeout(timer);
		};
		

		
		/*event mouseenter layer1, hide all pageinfos */
		$(selectorLayer1,mainmenu).mouseleave(function(){
			stopTimer();
			activeElement = null;
			var Layer2 = $(selectorLayer2,this);
			resetLayer2(Layer2);
			hidePageInfoContainer(Layer2);
			
			
		});
				
		/* mouseenter for fetching pageinfo */
		$(selectorTogglePageInfo,$(selectorLayer1)).mouseenter(function(){
			stopTimer();
			
			var el = $(this);
			activeElement = el;
			
			var Layer2 = $(el).parent('ul');
			hidePageInfoContainer(Layer2);
			var elData = $(el).data();
			if(elData.fetchedData != 1){
				/* start delayed ajax */
				startTimer(el);
			/* display if its real content, and if its the current element that is selected*/
			} else if(elData.emptyContent != 1 && activeElement == el) {
				displayPageInfo(el);
			}
		});
	});
})(jQuery);