$(function(){
    var peopleName = $('<span class="peopleName"></span>')
    var peopleDescription = $('div.boardsBox');
    
    var peopleInTable = $('table.boardsTable tr td');
    
    peopleInTable.hover(
        function(){
            var currentPeople = $(this).find('img');
            
            if(!$(this).is('.aktiv')) currentPeople.fadeTo('fast', 1)
            $(this).find('span.peopleName').show();
        },
        function(){
            if($(this).is('.aktiv')) return;
            $(this).find('img').fadeTo('fast', 0.5)
            $(this).find('span.peopleName').hide();
        }
    )
    
    peopleInTable.click(function(){
        $('table.boardsTable tr td.aktiv').
            removeClass('aktiv').
            find('img').
            fadeTo('fast', 0.5).
            parent().
            find('span.peopleName').
            hide();
        $(this).addClass('aktiv').find('img').fadeTo('fast', 1);
        $(this).find('span.peopleName').show();
        
        peopleDescription.filter(function(index){ return $(this).is(':visible')}).hide();
        
        var descElement = peopleDescription.get($(peopleInTable).index(this))
        descElement ? $(descElement).show() : '';
        
    })
    
    peopleInTable.each(function(){
        $(this).find('img').fadeTo('fast', 0.5)
    
        if(!$(this).find('span.peopleName').get(0)){
            var currentPeople = $(this).find('img');
            var pName = peopleName.clone();
            $(this).append(pName);
            var infoText = currentPeople.attr('alt').replace('(','<br />(');
            pName.html(infoText);
        }    
    })
   
    $(peopleInTable.get(0)).click();
    
})