Event.observe(document,"dom:loaded",initCategoryMenu);

function initCategoryMenu(event){
    if($('categorymenu')){
        $('categorymenu').select('li').each(function(li){
            li.observe("click",hideThumbs);          
        });
        initThumbs();
    }
    var thumbs = $$('.projectthumb','.clientthumb');   
    $$('.projectthumb','.clientthumb').each(function(t){
        var img = $(t).select('img')[0];
        $(t).observe("mouseenter",showInfo);
        $(t).observe("mouseleave",hideInfo);
        $(t).observe("mouseover",addThumbHover);
        $(t).observe("mouseout",removeThumbHover);
    });
}

var activecat;
var showthumbs;
var hidethumbs;
var rowwidth;
var rowheight;

function initThumbs(){
   
    $('projectthumbs').setStyle({position:'relative'});
    $('projectthumbs').setStyle({height:$('projectthumbs').offsetHeight + "px"})
    var thumbs = $('projectthumbs').select('.projectthumb');
    for(var i = thumbs.length;i>0;i--){
        var t = thumbs[i-1];
        var id = "thumb" + i;
        t.id = id;        
        t.style.display = "block";       
        $(t).setStyle({position:'absolute','left':t.offsetLeft + "px",'top':t.offsetTop + "px"});
    }   
}

function hideThumbs(event){
    var li = event.target;
    
    while(li.tagName!="LI")li = li.parentNode;
    $('categorymenu').select('li').each(function(l){
       l.removeClassName("active");
    });
    li.addClassName("active");
    var cat = li.id;
    activecat = cat;
    var disappear = false;
    showthumbs = [];
    hidethumbs = [];
    $('projectthumbs').select('.projectthumb').each(function(t){
       if(cat=="all" || t.className.match(cat)){
           if(!t.hasClassName("show"))$(t).addClassName("show");
           showthumbs.push(t);
       }else if(t.style.display!="none"){
           $(t).removeClassName("show");
           hidethumbs.push(t);
       }
    });
   
    if(hidethumbs.length > 0){
        for(var n = 0;n<hidethumbs.length;n++){        
            var t = hidethumbs[n];            
            new Effect.Fade(t);
             
        }
        if(showthumbs.length > 0)repositionThumbs();
    }else if(showthumbs.length > 0){
        repositionThumbs();
    }else{
        showThumbs();
    }
}

function repositionThumbs(){
    
    for(var i = 0;i<showthumbs.length;i++){
        var t = showthumbs[i];
        var row = Math.floor(i / 4);
        var col = i % 4;
        var newx = col * 195;
        var newy = row * 195;
        new Effect.Move(t, { x: newx, y: newy, mode: 'absolute' });
        if(t.style.display=="none") new Effect.Appear($(t),{duration:0.5});
    }    
}

function addThumbHover(event){
    var t = event.target;
    while(!$(t).hasClassName("projectthumb") && !$(t).hasClassName("clientthumb")){
        t = t.parentNode;
    }
}

function removeThumbHover(event){
    var t = event.target;
    while(!$(t).hasClassName("projectthumb") && !$(t).hasClassName("clientthumb")){
        t = t.parentNode;
    }
    $(t).removeClassName("hover");
    
}

function showInfo(event){
    
    var info = $(this).select('div.info')[0];
    
    new Effect.Move(info, { x: 0, y: 120, mode: 'absolute', duration:0.3});
}

function hideInfo(event){
    
    var info = $(this).select('div.info')[0];
    new Effect.Move(info, { x: 0, y: 180, mode: 'absolute', duration:0.3});
}

function output(value){
    if(!$('output')){
        var ta = new Element('textarea',{'id':'output'});
        document.body.insert(ta);
    }
    var oldvalue = $('output').value;
    var newvalue = oldvalue + "\n" + value;
    $('output').value = newvalue;
    $('output').focus();
    $('output').setStyle({'height':'200px'});
}