var width = 48;
var height = 64;
var margin = 2;
var numberofphotos = new Array(15,8);
var basey = 202;

function setPosition($emp, i, j)
{
    $emp.css("left",i*width+2*margin);
    $emp.css("top",basey+j*height);
    $emp.attr("class", $emp.attr("class")+" "+i+"-"+j);
    return new Array(i*width+2*margin, j*height);
}
function setEmpDesc($desc, $img)
{
    $("#overons-plaat #wdesc").html($desc).hide().fadeIn();
    $("#overons-plaat #wimage").html($img).hide().fadeIn();
}
function setSelected($emp)
{
    $("#werknemer-plaat .selected").removeClass("selected");
    $emp.addClass("selected");
    setEmpDesc($emp.find('.desc').html(),$emp.find('a').html());
}
function isBemp($emp)
{
    if($emp.find('.desc').html() == "")
    {
        return false;
    }
    $desc = $emp.find('.desc').hide();
    $emp.hover(
       function()
       {
           setSelected($(this));
       },
       function()
       {
       }
    );
    return true;
}
function makeTable($emps)
{
    var xalign = new Array(numberofphotos[0]);
    for (var e = 0; e < numberofphotos[0]; e++) xalign[e]=new Array(numberofphotos[1]);
    var i = 0;
    var j = 0;
    var firstbemp = false;
    $emps.each(function(){
        $emp = $(this);
        $emp.click(function(){return false;});
        while (xalign[i][j] != null) {
            if(i+1 < numberofphotos[0])
            {
                i++;
            } else {
                i = 0;
                j++;
            }
        }
        var position = setPosition($emp, i, j);
        xalign[i][j] = 1;
        if(isBemp($emp))
        {
            if(!firstbemp)
            {
                setSelected($emp);
                firstbemp = true;
            }
            xalign[i+1][j] = 1;
            xalign[i][j+1] = 1;
            xalign[i+1][j+1] = 1;
        }
    });
}
$(document).ready(function()
{
    if ($("#werknemer-plaat").length > 0) {
        $emps = $("#werknemer-plaat .werknemer");
        makeTable($emps);
    }
    
});