(function($){
    $.fn.extend({ 
        MerionFlyoutMenu: function(options) {
        
            var defaults = {
                initialMenuTitleDisplayStyle: "InitialMenuTitleStyle",
                initialMenuTitleBackgroundImg: "",
                onClickMenuTitleDisplayStyle: "onClickMenuTitleStyle",
                onClickMenuTitleBackgroundImg: "",
                displayMenuContentInterval: 200
                };
                
            var options = $.extend(defaults, options);    

            return this.each(function() {

                //Creating a reference to the object
                var obj = $(this);    
                var menuTitleAndWidth = 0;
                
                obj.addClass("MerionFlyoutMenu");
                 
                //apply style to menu title                 
                ApplyMenuTitleCss(obj,options);
    
                        $(obj).children('li').children('a').each(
                                    function(){
                                    var menuTitle = $(this);                
                               
                                    if( $(this).next().is("div") )                 
                                        {  
                                            var menuContent  = $(this).next();
                                                           
                                            //get actual width of the content
                                            menuContent.css("left","0"); 
                                            var menuContentActualWidth = menuContent.width();                                       
                                            menuContent.css("left","auto")
                                            
                                            var configHoverIntent = {    
                                                             sensitivity: 1, 
                                                             interval: options.displayMenuContentInterval, 
                                                             over: function(){ DisplayMenuContent(obj,menuTitle,menuContent,menuContentActualWidth,options,menuTitleAndWidth); }, 
                                                             timeout: 500, 
                                                             out: function() {HideMenuContent(obj,menuContent,options,menuTitle);}
                                                                  };

                                                //incorporate hover functionality
                                                var menuTitleParent = $(menuTitle).parents('li');
                                                $(menuTitleParent).hoverIntent(configHoverIntent);                                                                                                           
                                                                                                
                                               //incorporate onlclick functionality
                                                $(menuTitle).click (function() { 
                                                DisplayMenuContent(obj,menuTitle,menuContent,menuContentActualWidth,options,menuTitleAndWidth);
                                                                });                                                                               
                                                    
                                                 //originally hide all the menucontents                                                                        
                                                 $(menuContent).hide();                                                                    
                                     }
                                else
                                    {
                                            //when there is no content                                            
                                            var configHoverIntent = {    
                                                             sensitivity: 3, 
                                                             interval: options.displayMenuContentInterval, 
                                                             over: function(){ ApplyMenuTitleHoverOverCss (obj,menuTitle,options); }, 
                                                             timeout: 500, 
                                                             out: function() { ApplyOriginalMenuTitleStyle(menuTitle,options,'false'); } 
                                                                  };

                                                 var menuTitleParent = $(menuTitle).parents('li');
                                                 $(menuTitleParent).hoverIntent(configHoverIntent);
                                                                                             
                                                
                                                $(menuTitle).click (function() {                                                  
                                                        ApplyMenuTitleHoverOverCss (obj,menuTitle,options);                                                     
                                                  }) //end click function                                                  
                                         
                                    }
                    }
        );


    //spread all the munus equally
    menuTitleAndWidth = AdjustTopMenuColumns(obj);

            });
        }
    });
})(jQuery);


function ApplyOriginalMenuTitleStyle(menuTitle,options, isContentExists)
{
    $(menuTitle).removeClass();
    $(menuTitle).addClass(options.initialMenuTitleDisplayStyle);  
   
   if (isContentExists == 'true')  
        { $(menuTitle).addClass(options.initialMenuTitleBackgroundImg); }
}

function HideMenuContent(obj,menuContent,options,menuTitle)
{
    $(menuContent).hide();    
    ApplyOriginalMenuTitleStyle(menuTitle,options,'true')                                 
}

function DisplayMenuContent(obj,menuTitle,menuContent,menuContentActualWidth,options,menuTitleAndWidth)
{

    //first hide all other div's 
     $(obj).children('li').children('a').next('div').hide();   
                                        
   //apply general style to all menu-titles.
     ApplyMenuTitleCss(obj,options); 
                     
   //apply appropriate style to user selected menu-title.                       
     $(menuTitle).addClass(options.onClickMenuTitleDisplayStyle);    
     $(menuTitle).addClass(options.onClickMenuTitleBackgroundImg);
                                        
   //add new clas to the bottom div inorder to move it to the next line
     if ($(menuContent).children('div').size() >0)
         {
          var bottomdiv = $(menuContent).children('div:last');
          $(bottomdiv).addClass("clear-left");                                                
         }
                                        
   //show user clicked menu-content
      $(menuContent).show();
                                                        
   //get equally divided menu-title width
     AdjustTopMenuColumns(obj);  
     var menuTitleWidth =$(menuTitle).outerWidth();
    //if the content width is less than menutitle width then assign content's mim-width as menutitle width                                        
    if (menuContentActualWidth < menuTitleWidth)
       {
            menuContentActualWidth = menuTitleWidth  ;
            $(menuContent).css("min-width",menuTitleWidth);
        }
                                                        
    //display menucontent accordingly    
    AdjustTopMenuContent(obj,menuTitle,menuTitleWidth,menuContent,menuContentActualWidth,menuTitleAndWidth);                
    
}

function ApplyMenuTitleHoverOverCss(obj,menuTitle,options)
{
    //first hide all other div's 
    $(obj).children('li').children('a').next('div').hide();
                                                        
    //apply general style to all menu-titles.
    ApplyMenuTitleCss(obj,options); 
                                                             
    AdjustTopMenuColumns(obj);
    $(menuTitle).addClass(options.onClickMenuTitleDisplayStyle); 
}

//this function spreads all the menu titles equally across the page width
function AdjustTopMenuColumns(objMenu) {         

    $(objMenu).css({ 'width' : "100%"});
	var colWrap =  $(objMenu).width();	
	var menuTitleAndWidth = new Array();	     	
	
	var currentAllMenuTitleWidth;
	currentAllMenuTitleWidth = 0;
	var eachMenuTitleWidth = Array(); 
    $(objMenu).children('li').each(
                 function(index){
                          eachMenuTitleWidth [index]  = $(this).width();
                         currentAllMenuTitleWidth = currentAllMenuTitleWidth + $(this).width();                                  
                            });
                                   
      if  (currentAllMenuTitleWidth  > 0 && currentAllMenuTitleWidth <  colWrap)                             		
        {
           var remainingWidth = colWrap - currentAllMenuTitleWidth;
           var additionalWidth = Math.floor(remainingWidth / $(objMenu).children('li').size());           
           var lastMenuTitleIndex = $(objMenu).children('li').size() - 1;
           var totalAdjustedWidth = 0 ;
           $(objMenu).children('li').each(
                 function(i){                                         
                  totalAdjustedWidth = totalAdjustedWidth + eachMenuTitleWidth[i] + additionalWidth;
                        if (i != parseInt(lastMenuTitleIndex))
                          { 
                            $(this).css({'width' : eachMenuTitleWidth[i] + additionalWidth });                             
                           }
                          else
                          {$(this).css({'width' : eachMenuTitleWidth[i] + additionalWidth + (colWrap - totalAdjustedWidth) });}
                                                    
                          menuTitleAndWidth [i] = ($(this).children('a')[0].innerHTML).replace(' ', '')+ '|' + $(this).width();
                 });
            
        }
		
	return menuTitleAndWidth;
}

//this function applies to style clas to menutitles
function ApplyMenuTitleCss(objMenu,options) {

    $(objMenu).children('li').children('a').removeClass();
    $(objMenu).children('li').children('a').each(
            function(){
            
            $(objMenu).children('li').children('a').addClass(options.initialMenuTitleDisplayStyle); 
            if ($(this).next().is("div")) 
                {
                    $(this).addClass(options.initialMenuTitleBackgroundImg);
                }            
            });
}


//this function positions the mecontent accordingly [middle, right, left]
function AdjustTopMenuContent(objMenu,topMenuTitle,topmenuTitleWidth,topMenuContent,topMenuContentWidth, menuTitleAndWidth) {    
    if ($(objMenu) != null && $(topMenuTitle) != null && $(topMenuContent) != null) 
    {       
        var subPadding = 0;                               
        var leftTopMenuTitle = 0;
        for (var i in menuTitleAndWidth) {
        
            var titleAndWidth = new Array();
            titleAndWidth = menuTitleAndWidth[i].split("|");
            
            if ( (i == 0) && (titleAndWidth.length >=2) && (titleAndWidth[titleAndWidth.length - 2] == ($(topMenuTitle)[0].innerHTML).replace(' ', '')))
                {
                    leftTopMenuTitle = 0; 
                    break;
                }
            else if ( (i != 0) && (titleAndWidth.length >=2) && (titleAndWidth[titleAndWidth.length - 2] == ($(topMenuTitle)[0].innerHTML).replace(' ', ''))) 
                {
                    break;
                }
            else if ( (titleAndWidth.length >=2) && (titleAndWidth[titleAndWidth.length - 2] != ($(topMenuTitle)[0].innerHTML).replace(' ', '')))
                {
                   leftTopMenuTitle  = parseInt(leftTopMenuTitle) + parseInt(titleAndWidth[titleAndWidth.length - 1]);
                }         

        }        
        
        var widthTopMenuTitle = topmenuTitleWidth; 
        var widthTopMenuContent = topMenuContentWidth; 
        var rightTopMenuTitle = Math.floor(leftTopMenuTitle + widthTopMenuTitle);
        var widthWindow = $(objMenu).width();  
        var rightTopMenuContent = Math.floor(leftTopMenuTitle + widthTopMenuContent);
        var rightTopMenuContentDiff = widthWindow - rightTopMenuContent;        
        var rightMarginTopMenuContent = Math.floor(widthTopMenuContent - widthTopMenuTitle);
        var middleMarginTopMenuContent = Math.floor(rightMarginTopMenuContent / 2);
        var leftMiddleTopMenuContent = Math.floor(leftTopMenuTitle + (middleMarginTopMenuContent * -1));
        var rightMidleTopMenuContent = Math.floor(rightTopMenuTitle + middleMarginTopMenuContent);        
        
	            // Check if the content can be centered first else right; otherwise it will always aligns left
		        if(leftMiddleTopMenuContent > 0 && rightMidleTopMenuContent < widthWindow)
		        {
		            subPadding = Math.floor(middleMarginTopMenuContent * -1);
		        }
		        else if (leftTopMenuTitle > rightMarginTopMenuContent)
		        {
		            subPadding = Math.floor(rightMarginTopMenuContent * -1);
		        }			                
		       
	        
	        if($(topMenuContent).css('margin-left') == "")
		        $(topMenuContent).css({'margin-left':'0px'});        
		        
		        
	        if(parseInt($(topMenuContent).css('margin-left')) != parseInt(subPadding))
		        $(topMenuContent).css({'margin-left': subPadding + 'px' });
		       
       
    }
}