﻿ /* jQuery Image Gallery
 * Copyright (c) 2011 Baldgorilla
 * Version: 1.00
 */
;(function($) {
	$.fn.FerstenSideMenu = function() {
        
		// MAIN MENU CLASS
		function FerstenSideMenu($obj) {

            var $mainmenu = 		$(">ul", $obj);	
            var $mainButtons =      $mainmenu.find(">li");
            var $buttonsSub =      $mainmenu.find(">li.arrow");//main menu button with submenus
            var $baseArrow;
            var $overArrow;
            var submenuMaxWidth =   700;
            var submenuPadding =   20;


            this.init = function() {
            $mainmenu.css('visibility', 'hidden');
                $buttonsSub.removeClass("arrow").append('<div class="arrow" /><div class="arrow-hover" />');
                //INITIALIZE ALL SUBMENUS BUTTON TYPE
                var i=0;
                var $submenuWidth = 0;
                $buttonsSub.each(function () {
                    //ADJUST POSITION OF ARROWS
                    var posArrow = Math.round($(this).outerHeight()/2 - 9);
                    $(this).find('>.arrow-hover').css('top',posArrow+'px');
                    $(this).find('>.arrow').css('top',posArrow+'px');
                });
                $buttonsSub.find('.submenu').each(function(){
                    //ADJUST THE WIDTH EACH COLUMNS OF THE SUBMENU
                    i=0;
                    $submenuWidth = 0;
                    $(this).find('>ul').each(function() {
                        var $columnWidth = 0;
                        $(this).find('>li').each(function() {
                            if($columnWidth < $(this).find('>a').outerWidth())
                                $columnWidth = $(this).find('>a').outerWidth();
                            //alert($(this).find('>a').html() + '   ' + $(this).find('>a').outerWidth());
                        });

                       if($columnWidth > submenuMaxWidth)
                            $columnWidth = submenuMaxWidth;

                        if(i != $(this).find('>ul').length -1)
                            $columnWidth = $columnWidth + submenuPadding;
                            
                        $(this).css('width',$columnWidth+'px');
                        //$(this).find('>li').css('width',$columnWidth+'px');
                        $submenuWidth += $(this).outerWidth();
                        i++;
                    });
                    //ADJUST THE WIDTH OF THE WHOLE SUBMENU
                    var submenuscol = $(this).find('>ul');
                    $(this).css('width',$submenuWidth + $(this).find('img').width() +'px');
                    $(this).css('height',$(this).find('img').height() +'px');
                    //alert($(this).find('img').outerWidth() + $(this).find('>ul:first').outerWidth());
                });

                //INITIALIZE ALL MAIN BUTTON
                $mainButtons.each(function(){
                    if($(this).find('.submenu').length == 0)
                    {
                        //INITIALIZE ALL REGULAR BUTTON
                        $(this).find('a').addClass('label');
                        //adding click so the link is applyed to the complete button .... not just the a tag
                        $(this).click(function() {
                            $(location).attr('href', $(this).find('a').attr('href'));
                        });
                    }
                    else
                    {
                        //Removing a tag from button for submenus (shouldnt have a click)
                        $(this).css('cursor', 'text');
                        $(this).prepend('<span class="label">'+$(this).find('a').html()+'</span>');
                        $(this).find('>a').remove();
                    }
                });
            $buttonsSub.find('.arrow').css('visibility', 'visible');
            $buttonsSub.find('.arrow-hover').css('visibility', 'visible');
            $mainmenu.css('visibility', 'visible');
            $buttonsSub.find('.submenu').css('visibility', 'visible');

                $buttonsSub.find('.submenu').fadeOut(0);
                $buttonsSub.find('.arrow-hover').fadeOut(0);
                
                //SETTING MOUSE ENTER ON BUTTON THAT HAS SUB MENUS
                $buttonsSub.mouseenter(function(){
                
                    var $text = $(this).find('>.label');
                    var $arrow = $(this).find('.arrow');
                    var $arrowHover = $(this).find('.arrow-hover');
                    
                    $(this).css({'width': '145px', 'border-right': 'none'});

                    $(this).find('.submenu').stop(true,true).animate({"opacity": "show"},250);
                    
                    $text.stop(true,true).animate({"padding-left": '15px', "padding-right": "0px"},250);

                    $arrow.stop(true,true).animate({right: '-20px', "opacity": "hide"},250);
                    
                    $arrowHover.stop(true,true).animate({left: '10px', "opacity": "show"},250);

                });

                //SETTING MOUSE LEAVE ON BUTTON THAT HAS SUB MENUS
                $buttonsSub.mouseleave(function(){
                
                    var $text = $(this).find('>.label');
                    var $arrow = $(this).find('.arrow');
                    var $arrowHover = $(this).find('.arrow-hover');
                    
                    $(this).css({'width': '144px', 'border-right': '1px solid #000'});

                    $(this).find('.submenu').stop(true,true).animate({"opacity": "hide"},250);
                    
                    $text.stop(true,true).animate({"padding-left": '0px', "padding-right": "15px"},250);

                    $arrow.stop(true,true).animate({right: '5px', "opacity": "show"},250);
                    
                    $arrowHover.stop(true,true).animate({left: '00px', "opacity": "hide"},250);
                });
            }
        }
        // OTHER CLASSES

        //Main Button Classes
        var mainButton = function(){
            
        }

        return this.each(
			function() {
				var menu = new FerstenSideMenu($(this));
				menu.init();
			}
		);
    }
})(jQuery);
