// Portfolio Image Code

// Requires JQuery

// Codah 2008

var animating = false;

// this function determines whether the event is the equivalent of the microsoft 
// mouseleave or mouseenter events. 
function isMouseLeaveOrEnter(e, handler) 
{ 
    if (e.type != 'mouseout' && e.type != 'mouseover') return false; 
    
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; 

    while (reltg && reltg != handler) 
    
    reltg = reltg.parentNode; return (reltg != handler); 
}

// Info   : Foreach Iterator : For the ThumbNails
// Param0 : the Start Element in which to begin searching
// Param1 : A callback, raised with each found portfolio_thumb
function ForEachThumbElement(startelement, callback)
{
    for(var i = 0; i < startelement.childNodes.length; i++)
    {
        if(startelement.childNodes[i].className == 'portfolio_thumb')
        {
           callback(startelement.childNodes[i]);
        }
        
        ForEachThumbElement(startelement.childNodes[i], callback);
    }
}

// Info        : Application Entry Point
// Description : Sets up the runtime events for the Thumbs in the Graph
function SetupThumbGraph(atElement)
{
    var containerElement = document.getElementById(atElement);
    
    ForEachThumbElement(containerElement, function(thumbElement)
    {
        // Info        : Handles the Mouse Over Event
        // Description : Works back to the parent node to set
        //               the siblings of the selected node to
        //               the appropiate 'small' width
        thumbElement.onmouseover = function(event)
        {
            if (isMouseLeaveOrEnter((event) ? event : window.event, thumbElement))
            {
                thumbElement.style.backgroundColor = 'rgb(240, 240, 240)';
            
                var rowElement = thumbElement.parentNode;
                
                var count = 0;
                
                for(var i = 0; i < rowElement.childNodes.length; i++) { if(rowElement.childNodes[i].className == 'portfolio_thumb') count++; }
                var small      = (98 - (100 / count - 2)) + "px";

                for(var i = 0; i < rowElement.childNodes.length; i++)
                {
                    if(rowElement.childNodes[i]           != thumbElement && 
                       rowElement.childNodes[i].className == 'portfolio_thumb')
                    {
                       $(rowElement.childNodes[i]).stop();
                       $(rowElement.childNodes[i]).animate ({   width : small  }, { duration: 200 } );
                    }
                }
                $(thumbElement).stop();
                $(thumbElement).animate ({   width: "166px"  }, {duration: 200});
            }
            
          
        }
        // Info        : Handles the Mouse Out Event
        // Description : Works back to the parent node to set
        //               the siblings of the selected node to
        //               the appropiate 'normal' width.
        thumbElement.onmouseout = function(event)
        {
            if (isMouseLeaveOrEnter((event) ? event : window.event, thumbElement))
            {
                thumbElement.style.backgroundColor = 'rgb(255, 255, 255)';
            
                var rowElement = thumbElement.parentNode;
            
                for(var i = 0; i < rowElement.childNodes.length; i++)
                {
                    if(rowElement.childNodes[i]           != thumbElement && 
                       rowElement.childNodes[i].className == 'portfolio_thumb')
                    {
                        $(rowElement.childNodes[i]).stop();
                        $(rowElement.childNodes[i]).animate ({   width: "98px"  }, 200 );
                    }
                }
                $(thumbElement).stop();
                $(thumbElement).animate ({   width: "98px"  }, 200 );
            }
           
        }
    });
}

//var szNormal = 98,  szFull   = 166; szSmall  = Dynamic,
// Division is by 68 for the 
window.onload = function()
{
    var elementContainer = 'portfolio-wrapper';
    
    var containerElement = document.getElementById(elementContainer);
    
    if(containerElement != null)
    {
        SetupThumbGraph(elementContainer);
        
        containerElement.onmouseover = function()
        {
            SetupThumbGraph(elementContainer);
        };
    }
    
    $('a[@rel*=content-lightbox]').lightBox();
}