$(document).ready(function() {   
    
    var navBar = ("#topnav>.ul-horizontal");
    $(navBar).find("li").hover(function() {
        $(this).find(".ul-vertical:first").show();
    }, function(){
        $(this).find(".ul-vertical:first").hide();
    });
    
    // verlinke auf erstes element aus liste programm
    var firstPage = $(navBar).find('li:first').find('li:first').find('a').attr('href');
    $(navBar).find('li:first').find('a:first').attr('href', firstPage);
    
    //bei leerem content wird automatisch auf das erste element verlinkt
    var ctnt = $('#content').children().get();
    if(ctnt == ""){
        window.location = ($(".ul-vertical:first").find("li:first a").attr("href"));
    }
    
    
    //
    $(navBar).children().each(function(i, item){
        $(this).addClass('item' + (i+1));
    });
    $(navBar).find('li:last').addClass('last');
    
    $(navBar).find('li').not('li:first').each(function(i, item){
        $(this).hover(function() { 
            $(this).toggleClass('li-hover');
            $(this).children('a').toggleClass('a-hover'); 
        });
        
        var ref = $(this).children('a').attr('href');
        if(ref) {
            $(this).click(function() { window.location = ref; });   
        }
    });
    $(navBar).find('li:first').hover(function() { 
        $(this).toggleClass('li-hover');
        $(this).children('a').toggleClass('a-hover'); 
    });
    
    // grössenanpassung wenn selbst kleiner als parent
    $(".ul-vertical").each(function(){
        if($(this).width() < $(this).parent().outerWidth()){
            $(this).width($(this).parent().outerWidth() + 1)  // +1 wegen überschneidung mit nächstem element
        }
    });
    
    // nur die ersten elemente
    $(navBar).children().find(".ul-vertical:first").each(function(i, item){
        
        $(item).css({left: ($(item).parent().position().left), top: ($(navBar).find("li").outerHeight() - 1)});
                
        // alle unterelemente
        $(item).find(".ul-vertical").each(function(i2, item2){
            // position berechnen
            var leftOff = $(item2).parent().outerWidth();
            var rightOff = $(item2).parent().position().top;
            // richtung wenn nötig umkehren
            if($(navBar).hasClass("expand-left")){ leftOff = -leftOff; }
            // apply
            $(item2).css({left: leftOff, top: rightOff });
        });
    });
    
    // vertikale elemente mussten für die berechnung sichtbar sein
    $(".ul-vertical").hide();
});