jQuery(document).ready(function() {
    var $ = window.jQuery;
        
    var sites = {
        "http://twol.haykranen.nl"                             : "The Twol - instant info via Twitter",
        "http://www.haykranen.nl/projects/backuptweets/demo/"  : "BackupTweets",
        "http://www.haykranen.nl/projects/flickrstreamr/demo"  : "FlickrStreamr",
        "http://www.haykranen.nl/projects/jsonviewer/demo"     : "JSON Viewer",
        "http://www.haykranen.nl/projects/markov/demo/"        : "PHP Markov chain text generator",
        "http://www.haykranen.nl/projects/reaction/demo/"      : "ReactionJS - measure reaction times"
    };
    
    for (var url in sites) {
        var name = sites[url];
        var html = '<li class="nav-item"><a href="' + url + '">' + name + '</a></li>';
        $("#hknl-nav-list-1").append(html);
    }
    
    $("#hknl-nav-list-1").append('<li class="bottom"></li>');
    
    $("#hknl-nav .nav-wrap").hover(
        function() {
            $(this).find(".nav-button").addClass('hover');            
            // $(this).find(".nav-list").fadeIn("fast");
            $(this).find(".nav-list").show();
        },
        function() {
            $(this).find(".nav-button").removeClass('hover');            
            // $(this).find(".nav-list").fadeOut("fast");
            $(this).find(".nav-list").hide();
        }
    );
});