jQuery(function($){

    //Adjust panel height
    $.fn.adjustPanel = function(){
        $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset subpanel and ul height

    	var windowHeight = $(window).height(); //Get the height of the browser viewport
    	var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel
    	var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)
    	var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)

    	if ( panelsub >= panelAdjust ) {	 //If subpanel is taller than max height...
    	    $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height
    		$(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size
    	}
    	else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height...
    		$(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size)
    	}
    };

    //Execute function on load
    $("#profilePanel,#messagingPanel,#settingPanel, #logoutPanel").adjustPanel(); //Run the adjustPanel function on #chatpanel

    //Each time the viewport is adjusted/resized, execute the function
    $(window).resize(function () {
        $("#profilePanel,#messagingPanel,#settingPanel").adjustPanel();
    });

    //Click event on Chat Panel + Alert Panel
    $("#toolPanel, #profilePanel, #messagingPanel, #settingPanel").hover(
		function() { //If clicked on the first link of #chatpanel and #alertpanel...
			$(".subpanel").hide(); //Hide all subpanels
			$(this).children(".subpanel").toggle(); //Toggle the subpanel to make active
			$("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
			$(this).children('a:first').toggleClass('active'); //Toggle the active class on the subpanel trigger
		},
		function() {
			$(".subpanel").hide();
			$("#footpanel li a").removeClass('active');
		}
	);

    //Click event outside of subpanel
    $(document).click(function() { //Click anywhere and...
        $(".subpanel").hide(); //hide subpanel
    	$("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
    });
    $('.subpanel ul').click(function(e) {
        e.stopPropagation(); //Prevents the subpanel ul from closing on click
    });

});