/*!
 * jQuery Posimis Hovermenu Plugin
 * version: 0.0.2
 *
 * Load a page via ajax into a div container or show/hide a div container with the right content
 *
 * Usage: 
 * <script type="text/javascript" src="jquery.poshovermenu.js"></script>
 * <script>
 *		$(document).ready(function() {
 * 			$('li.ajaxmenuitem').poshovermenu({
 *				ajaxMethod: 'POST',
 *				ajaxUrl: 'index.php',
 *				ajaxEvent: 'hover',
 *				ajaxLoadOn: 'hover',	// load content on hover or when page is loading
 *				animEffect: 'fade',
 *				animOptions: {direction: "up"},
 *				animSpeed: 200,
 *				menuWidth: 500,		// you can use an integer pixel value (e.g. 100) if you want to set a fix height
 *				menuHeight: 300		// or you can use a min-height and min-width by setting an "m" after the value (e.g.: '100m')
 *			});
 *		});
 * </script>
 *
 * <ul class="ajaxmenu">
 *		<li class="ajaxmenuitem">
 *			<!-- rel: id of the page which will be loaded into the content container -->
 * 			<a class="ajaxlink" id="ajaxitem-2195" rel="2000" title="...">Products</a>
 *			<div class="ajaxmenuitem-inner">
 *				<div class="ajaxcontent">
 *					<div class="loader"><!-- loader icon will be shown in this container --></div>
 * 					<div class="content"><!-- content will be loaded into this container --></div>
 *				</div>
 *			</div>
 *		</li>
 * </ul>
 *
 * Copyright 2010, Posimis Internet GmbH
 * http://www.posimis.com
 */
 
 (function($){	
	$.fn.poshovermenu = function(options){
		// initialise default values	
		var defaults = {
			ajaxMethod: 'POST',
			ajaxUrl: 'index.php',
			ajaxEvent: 'hover',		// only hover is available now!
			ajaxLoadOn: 'hover',
			animEffect: 'fade',
			animOptions: {direction: "up"},
			ajaxErrorPageId: '',
			animSpeed: 200,
			menuWidth: 500,
			menuHeight: 300
		};
			
		// loaded ajax pages
		var loadedMenuItemsArr = [];
		
		// merge default values with given options
		var options = $.extend(defaults, options);
		
		// get default height and width of the menu
		var menuHeight = options.menuHeight;
		var menuWidth = options.menuWidth;

		// set menu container to display none		
		$(this).find('.ajaxcontent').css({
			'display': 'none',
		});
		$(this).find('.ajaxcontent').addClass('left');
		
		
		// set style for ajaxmenuitem-inner to position the menu absolute
		$(this).find('.ajaxmenuitem-inner').css({
			'position': 'relative'
		});
		
		// hide the content container by default
		$(this).find('.content').css({
			'display': 'none'
		});
		
		// calculate height and width
		if(typeof(menuHeight) == 'string' && menuHeight.substring(menuHeight.length - 1, menuHeight.length) == 'm')
		{
			menuHeight = menuHeight.substring(0, menuHeight.length - 1);
			$(this).find('.ajaxcontent').css({'min-height': Number(menuHeight)});
			$(this).find('.ajaxcontent .loader').css({'min-height': Number(menuHeight)});
		}
		else
		{
			$(this).find('.ajaxcontent').css({'height': Number(menuHeight)});
			$(this).find('.ajaxcontent .loader').css({'height': Number(menuHeight)});
		}
		
		if(typeof(menuWidth) == 'string' && menuWidth.substring(menuWidth.length - 1, menuWidth.length) == 'm')
		{
			menuWidth = menuWidth.substring(0, menuWidth.length - 1);
			$(this).find('.ajaxcontent').css({'min-width': Number(menuWidth)});
			$(this).find('.ajaxcontent .loader').css({'min-width': Number(menuWidth)});
		}
		else
		{
			$(this).find('.ajaxcontent').css({'width': Number(menuWidth)});
			$(this).find('.ajaxcontent .loader').css({'width': Number(menuWidth)});
		}
		
		// set display none for loader container
		$(this).find('.ajaxcontent .loader').css({'display': 'none'});
	
		// set ajaxmenu for all given menu elements
		return this.each(function() {	
			var menuitem = $(this);
			var ajaxMenuId = menuitem.find('.ajaxlink').attr('rel');
			var ajaxMenuLang = menuitem.find('.ajaxlink').attr('lang');
			
			// check, if an id is given. in this case, try to load the page with the given id
			if(ajaxMenuId != '')
			{
				if(options.ajaxEvent == 'hover')
				{
					if(options.ajaxLoadOn == 'hover')
					{
						loadAjaxOnHover(ajaxMenuId,ajaxMenuLang,menuitem,options,loadedMenuItemsArr);
					}
					else if(options.ajaxLoadOn == 'page')
					{
						loadAjaxOnPage(ajaxMenuId,ajaxMenuLang,menuitem,options,loadedMenuItemsArr);
					}
				}
			}
		});
	};
	
	function loadAjaxOnPage(ajaxMenuId, ajaxMenuLang, menuitem, options, loadedMenuItemsArr){
	
		var ajaxData = 'id=' + ajaxMenuId + '&L=' + ajaxMenuLang + '&type=101';
		// if menu isn't already loaded, get it via ajax 
		if(jQuery.inArray(menuitem.find('.ajaxlink').attr('id'), loadedMenuItemsArr) < 0)
		{
			menuitem.find('.loader').css({'display': 'block'});
		
			// try to get the page with the give id
			$.ajax({
				type: 'GET',
				url: options.ajaxUrl,
				data: ajaxData,
				success: function(data) {
					// set content of choosen menuitem, hide loader-icon container, show content container
					// and push the id of the menuitem into the loaded MenuItemsArr (load item only once)
					menuitem.children('.ajaxmenuitem-inner').find('.content').html(data);
					menuitem.children('.ajaxmenuitem-inner').find('.content').css({'display': 'block'});
					menuitem.children('.ajaxmenuitem-inner').find('.loader').css({'display': 'none'});
					loadedMenuItemsArr.push(menuitem.children('.ajaxlink').attr('id'));
				},
				error: function(data) {
					// if the selected page can't be loaded, try to load the error page
					// and if this page can't be loaded set an error text
					options.ajaxErrorPageId;
					ajaxData = 'id=' + options.ajaxErrorPageId + '&type=101';
					
					$.ajax({
						type: options.ajaxMethod,
						url: options.ajaxUrl,
						data: ajaxData,
						success: function(data) {
							menuitem.children('.ajaxmenuitem-inner').find('.content').html(data);
							menuitem.children('.ajaxmenuitem-inner').find('.content').css({'display': 'block'});
							menuitem.children('.ajaxmenuitem-inner').find('.loader').css({'display': 'none'});
							loadedMenuItemsArr.push(menuitem.children('.ajaxlink').attr('id'));
						},
						error: function(data) {
							menuitem.children('.ajaxmenuitem-inner').find('.content').html('an error occured while getting the correct menu entry');
						}
					});
				}
			});
		}
	
		menuitem.hover(
			function(){
									
				// show the box
				var tempWidth = menuitem.find('.ajaxcontent').width();
				var tempPosition = menuitem.find('.ajaxmenuitem-inner').offset();
				// if there isn't enough space for the box, move it left
				if(tempWidth + tempPosition.left > $(window).width())
				{
					var moveWith = tempWidth + tempPosition.left - $(window).width(); 
					menuitem.find('.ajaxcontent').removeClass('left');
					menuitem.find('.ajaxcontent').addClass('adapted');
					menuitem.find('.ajaxcontent').css('left', -moveWith);
				}
				
				menuitem.find('.ajaxcontent').show(options.animEffect, options.animOptions, options.animSpeed);
			},
			function(){
				// hide menuitem on mouse out event
				$(this).find('.ajaxcontent').css({'display': 'none'});
			}
		);
 	};
	
	function loadAjaxOnHover(ajaxMenuId, ajaxMenuLang,menuitem, options, loadedMenuItemsArr){
		menuitem.hover(
			function(){
		 		var ajaxData = 'id=' + ajaxMenuId + '&L=' + ajaxMenuLang + '&type=101';
									
				// show the box
				var tempWidth = menuitem.find('.ajaxcontent').width();
				var tempPosition = menuitem.find('.ajaxmenuitem-inner').offset();
				// if there isn't enough space for the box, move it left
				if(tempWidth + tempPosition.left > $(window).width())
				{
					var moveWith = tempWidth + tempPosition.left - $(window).width(); 
					menuitem.find('.ajaxcontent').removeClass('left');
					menuitem.find('.ajaxcontent').addClass('adapted');
					menuitem.find('.ajaxcontent').css('left', -moveWith);
				}
				
				menuitem.find('.ajaxcontent').show(options.animEffect, options.animOptions, options.animSpeed, function(){
					// if menu isn't already loaded, get it via ajax 
					if(jQuery.inArray(menuitem.find('.ajaxlink').attr('id'), loadedMenuItemsArr) < 0)
					{
						menuitem.find('.loader').css({'display': 'block'});
					
						// try to get the page with the give id
						$.ajax({
							type: options.ajaxMethod,
							url: options.ajaxUrl,
							data: ajaxData,
							success: function(data) {
								// set content of choosen menuitem, hide loader-icon container, show content container
								// and push the id of the menuitem into the loaded MenuItemsArr (load item only once)
								menuitem.children('.ajaxmenuitem-inner').find('.content').html(data);
								menuitem.children('.ajaxmenuitem-inner').find('.content').css({'display': 'block'});
								menuitem.children('.ajaxmenuitem-inner').find('.loader').css({'display': 'none'});
								loadedMenuItemsArr.push(menuitem.children('.ajaxlink').attr('id'));
							},
							error: function(data) {
								// if the selected page can't be loaded, try to load the error page
								// and if this page can't be loaded set an error text
								options.ajaxErrorPageId;
								ajaxData = 'id=' + options.ajaxErrorPageId + '&type=101';
								
								$.ajax({
									type: options.ajaxMethod,
									url: options.ajaxUrl,
									data: ajaxData,
									success: function(data) {
										menuitem.children('.ajaxmenuitem-inner').find('.content').html(data);
										menuitem.children('.ajaxmenuitem-inner').find('.content').css({'display': 'block'});
										menuitem.children('.ajaxmenuitem-inner').find('.loader').css({'display': 'none'});
										loadedMenuItemsArr.push(menuitem.children('.ajaxlink').attr('id'));
									},
									error: function(data) {
										menuitem.children('.ajaxmenuitem-inner').find('.content').html('an error occured while getting the correct menu entry');
									}
								});
							}
						});
					}
				});
			},
			function(){
				// hide menuitem on mouse out event
				$(this).find('.ajaxcontent').css({'display': 'none'});
			}
		);
 	};
	
})(jQuery);