$(document).ready(function () {
    var arr, iEmployeeCount;

    function init() {
		// employees sorted by year of employment (more logical when adding people afterwords)
		arr = new Array();
		arr.push( new Array("Peter Disselkoen","Directeur Vixion BV","peter") );
		arr.push( new Array("Sander Meilink","Manager Marketing sinds 2006","sander") );
		arr.push( new Array("Swen Meinert","IT-programmeur sinds 2006","swen") );
		arr.push( new Array("Yuri Petersen","Projectmanager sinds 2006","yuri") );
		arr.push( new Array("Remko Verbeek","Projectmanager sinds 2006","remko") );
		arr.push( new Array("Cor van Doorn","IT-programmeur sinds 2007","cor") );
		arr.push( new Array("Lieke Galbraith","Marketing & Communicatie sinds 2007","lieke") );
		arr.push( new Array("Michal Masiarek","CTO sinds 2007","michal") );
		arr.push( new Array("Thieme van Selm","Projectmanager sinds 2007","thieme") );
		arr.push( new Array("Henk Appelo","IT-programmeur sinds 2008","henk") );
		arr.push( new Array("Sebastian Tweehuysen","Projectmanager sinds 2008","sebas") );
		arr.push( new Array("Marcel Dumoulin","Systeembeheerder sinds 2009","marcel") );
		arr.push( new Array("Kees van Boekel","Sales sinds 2010","kees") );
		arr.push( new Array("Chris Kloeze","CFO sinds 2011","chris") );
		arr.push( new Array("Eline Middelburg","Farmaceutisch consulent sinds 2011","eline") );
		arr.push( new Array("Sytse-Jan van Spronsen","IT consultant sinds 2011","sytse-jan") );
		arr.push( new Array("Richard Westwood","IT-programmeur sinds 2011","ryk") );
		arr.push( new Array("Ewart ten Brink","IT-programmeur sinds 2011","ewart") );
		arr.push( new Array("Karen Bal","HR medewerker sinds 2011","karen") );
		arr.push( new Array("Marco de Tiege","IT-programmeur sinds 2011","marco") );
		arr.push( new Array("Martin Schillemans","Teamleider / accountmanager sinds 2011","martin") );
        arr.push( new Array("Qamar Nazir","IT-programmeur sinds 2011","qamar") );
        arr.push( new Array("Bogdan Tatomir","IT-programmeur sinds 2011","bogdan") );
		
        iEmployeeCount = arr.length;

        // Get a number between 0 to arr.lenght
        dislayEmployee(Math.floor(Math.random() * iEmployeeCount));
    }

    var intervalID;
    function startTimer() {
        // Create timer to update the face every 10 sec
        intervalID = window.setInterval("$('a.pDown').click()", 10000);
    }

    function stopTimer() {
        clearInterval(intervalID);
    }

    function dislayEmployee(iEmployeeIndex) {

        // Add 4 items
        for (var i = 0; i < 4; i++) {
            // Stel we selecteren 8
            // Dan willen we een lijst van 7 [8] 9 10 genereren
            // Stel we selecteren 0
            // Dan willen we een lijst van 10 [0] 1 2 genereren
            var pos = (iEmployeeIndex - 1) + i;
            if (pos < 0) {
                pos = pos + iEmployeeCount;
            } else if (pos > (iEmployeeCount - 1)) {
                pos = pos - iEmployeeCount;
            }
            $('#list').append($("<li id=\"pos" + pos + "\">" + arr[pos][0] + "<em>" + arr[pos][1] + "</em></li>"));
        }
        // Show face image, fadeIn only works when the image is hiden. So the first time it doesn't fadeIn. Thats want we want. Else, whe have to add hide(1). ect
        $('#employeeFrame').css("background-image", "url(/files/images/faces/" + arr[iEmployeeIndex][2] + ".jpg)").stop(true, true).fadeIn("slow");
        $('#list').children("li").eq(1).toggleClass("active");
        startTimer();
    }

    function change_dislayEmployee(iEmployeeIndex) {
        stopTimer();
        if (iEmployeeIndex < 0) {
            iEmployeeIndex = iEmployeeCount + iEmployeeIndex;
        } else if (iEmployeeIndex >= iEmployeeCount) {
            iEmployeeIndex = iEmployeeCount - iEmployeeIndex;
        }
        // Remove list items
        $('#list li').remove();
        // Hide face image, so we can fade in.
        $('#employeeFrame').hide();
        // Display employee
        dislayEmployee(iEmployeeIndex);
    }

    /*
    Assign click actions
    */
    $('a.pUp').click(function () {
        // Get id that looks like 'pos4'
        var id = $('#list .active').attr('id');
        // Get ride of 'pos' and hold the number, example 4
        var iEmployeeIndex = parseInt(id.substring(3));
        // Change eyecatcher
        change_dislayEmployee(iEmployeeIndex - 1);
    });


    $('a.pDown').click(function () {
        // Get id that looks like 'pos4'
        var id = $('#list .active').attr('id');
        // Get ride of 'pos' and hold the number, example 4
        var iEmployeeIndex = parseInt(id.substring(3));
        // Change eyecatcher
        change_dislayEmployee((iEmployeeIndex + 1));
    });

    // Bind click event on list items
    $('#list li:not(.active)').live('click', function () {
        // Get id that looks like 'pos4'
        var id = $(this).attr('id');
        // Get ride of 'pos' and hold the number, example 4
        var iEmployeeIndex = parseInt(id.substring(3));
        // Change eyecatcher
        change_dislayEmployee(iEmployeeIndex);
    });


    $('#list li:not(.active)').live('mouseover mouseout', function (event) {
        if (event.type == 'mouseover') {
            $(this).addClass("hover");
        } else {
            $(this).removeClass("hover");
        }
    });

    init();
});