$(document).ready(function () {
    //Get panel ID from data attr and then show
    $(".toggle").click(function () {
        $('.toggles .toggle').removeClass("selected");
        $(this).addClass("selected");
        
        var panelid = $(this).attr("data-panelid");

        $('#mainNav').fadeOut(300, function () {
            if ($(".droppanel").hasClass("active")) {
                $('.droppanel').removeClass("active");
                $('.droppanel').hide();
                $('#' + panelid).fadeIn(1000);
                $('#' + panelid).addClass("active");
            }
            else {
                $(".close").hide();
                $(".droppanel").hide();
                $('#' + panelid).children().hide();
                $('#' + panelid).slideDown("slow", function () {
                    $('#' + panelid).addClass("active");
                    $('#' + panelid).children().fadeIn();
                    $(".close").fadeIn("slow");
                });
                return false;
            }

        });
        //$('#mainNav').delay(1000).fadeOut('slow');
    });
    $(".close").click(function () {
        $('.toggles .toggle').removeClass("selected");
        $(".close").fadeOut("slow");
        $(this).parents('.droppanel').children().fadeOut("slow", function() {
            $('.droppanel').slideUp("slow", function () {
                $('#mainNav').fadeIn("slow");
                $('.droppanel').removeClass("active");
            });    
        });
    });
});