function menu_clicked(e)
{
    $("#video-panel").remove();
    $("#wetransfer").remove();
    $("#map_canvas").remove();
    $("#motivcheck-gallery").remove();
    
    if (animating) return;
    animating = true;
    
    if (old_menu != null)
    {
        var css_image_hover = "url('/images/menu/" + old_menu.attr('id') + ".png') bottom";
        old_menu.css("background",css_image_hover);
        
        if (old_menu.attr("id") == "portfolio" || old_menu.attr("id") == "about")
        {
            remove_portfolio_description();
        }
        if (old_menu.attr("id") == "netze")
        {
            remove_netz_description();
        }
    }
    if (old_submenu != null)
    {
        old_submenu.css("opacity","0.5");
    }
    
    var css_image_hover = "url('/images/menu/" + e.attr('id') + "_over.png') bottom";
    e.css("background",css_image_hover);
    
    animate_submenu(e,old_menu);
    set_active_image(e);
    set_info_panel(e,old_menu);
    
    old_menu = e;
}

function submenu_clicked(e)
{
    $("#video-panel").remove();
    $("#wetransfer").remove();
    $("#map_canvas").remove();
    $("#motivcheck-gallery").remove();
    
    if (animating) return;
    animating = true;
    
    if (old_submenu != null)
    {
        old_submenu.css("opacity","0.5");
    }
    
    if (old_menu.attr("id") == "portfolio")
    {
        set_active_image(e);
        remove_portfolio_description();
    }
    if (old_menu.attr("id") == "about")
    {
        remove_portfolio_description();
    }
    if (old_menu.attr("id") == "netze" && e.attr("id") != "selektor")
    {
        remove_netz_description();
        set_active_image(e);
    }
    
    if (e.attr("id") == "transfer")
    {
    	var wetransfer = $("<div id='wetransfer' style='width:100%; height:100%;'><iframe src='https://boomerangmedia.wetransfer.com/' width='100%' height='100%' style='border:0px'></iframe></div>");
    	
    	$("#about-image").before(wetransfer);
    }
    
    if (e.attr("id") == "finden")
    {
        var map_canvas = $("<div id='map_canvas' style='width:100%; height:100%; top:29px; visibility:hidden;opacity:0.0;'></div>");
        $("#about-image").before(map_canvas);
        show_map();
        $("#map_canvas").css("visibility","visible");
        $("#map_canvas").animate(
            {
                opacity:1.0
            },300,function(){
            }
        );
    }

    e.css("opacity","1.0");

    set_active_submenu_box(e,old_submenu);
    
    old_submenu = e;
}

function animate_submenu(n,o)
{
    if (o != null)
    {
        $("#"+o.attr('id')+"-submenu").animate(
            {
                opacity:0.0
            },300,function() {
                $("#"+o.attr('id')+"-submenu").css("display","none");
                $("#"+n.attr('id')+"-submenu").css("display","block");
                $("#"+n.attr('id')+"-submenu").animate(
                    {
                        opacity:1.0
                    },300,function() {}
                );
            }
        );
    } else {
        $("#"+n.attr('id')+"-submenu").css("display","block");
        $("#"+n.attr('id')+"-submenu").animate(
            {
                opacity:1.0
            },300,function() {}
        );
    }
}

function set_active_image(e)
{
    $(active_image).animate(
        {
            opacity:0.0
        },300,function() {
            $(active_image).css("display","none");
            
            active_image = "#" + e.attr("id") + "-image";
            $(active_image).css("display","block");
            fitImage();
            $(active_image).animate(
                {
                    opacity:1.0
                },300,function(){}
            );
        }
    );
}