var projectBoxes;
var projectImages;
var projectTitles;
var projects = new Array();
var currentProj = 0;
var allTags;
var periodicalExecuter;

Event.observe(window, 'load', function() {
    
    projectBoxes = $$(".ProjectBox");
    projectImages = $$(".ProjectBox img");
    projectTitles = $$(".ProjectBox .projectCaption");    
    allTags = $$("#" + cloadID + " a");
    initProjects();
    startExecution();

    getProject();
});

function initProjects() {
    var projectExtra = $$(".ProjectBox .hiddenWholeText");    
    for (var i=0; i<projectBoxes.length; i++) {
        projects[i] = { name:projectTitles[i].innerHTML,
                        id:projectBoxes[i].id,
                        image:projectImages[i].src,
                        tags: projectExtra[i].innerHTML.split(", ")}
    }

}

function startExecution() {
    periodicalExecuter = new PeriodicalExecuter(getProject, 3);
}

function getProject() {
    var shownProjectsList = "";
    for (var i=0;i<projects.length; i++) {
        if (i > 0)
            shownProjectsList += ",";            
        shownProjectsList += projects[i].id;
    }
    new Ajax.Request("AjaxService/ProjectData.aspx?shown=" + shownProjectsList, {      
      onSuccess: function(transport) {
        //alert("YYY"); 
            var project = transport.responseJSON; 
            projects[currentProj] = project;
             //alert(project.name); 
            changeDisplay();
      }, 
      method: "get" 
    });
}

function changeDisplay() {

    var imgPreloader = new Image();
    
    imgPreloader.onload = (function(){
        projectBoxes[currentProj].fade({to:0.1, duration:0.5, afterFinish: function() {  
            projectImages[currentProj].src = projects[currentProj].image; 
            projectBoxes[currentProj].id = projects[currentProj].id;
            projectTitles[currentProj].innerHTML = projects[currentProj].name;
            hiliteProject(projects[currentProj],currentProj);
            projectBoxes[currentProj].fade({ from:0.1, to:1, duration:0.2 });
            currentProj = (currentProj + 1) % 4;
         } });
    });
    imgPreloader.src =  projects[currentProj].image;
        
}

function overImage(thumbDiv)    
{
    periodicalExecuter.stop();
    var index = projectBoxes.indexOf(thumbDiv);
    hiliteProject(projects[index],index);
}

function outImage()
{
    startExecution();
}


function hiliteProject(project,index) {

    projectBoxes.invoke("removeClassName",'captionHilite');
    projectBoxes[index].addClassName('captionHilite');
        
    allTags.invoke("removeClassName",'tagHilite');
    for (var i=0; i<project.tags.length; i++)
        if ($(cloadID + "_Tag_" + project.tags[i]) != null)
            $(cloadID + "_Tag_" + project.tags[i]).addClassName('tagHilite');
    
}