//global
var fader = { 'clock' : null, 'fade' : true, 'count' : 1, 'duration' : 1 }

//image data
fader.data = [
            '../portfolio/AdAndMailer.jpg',         'dataselect',
            '../portfolio/Brochure.jpg',            'surefoot',      
            '../portfolio/Brochure2.jpg',           'surefoot',       
            '../portfolio/DirectMail3.jpg',         'dataselect',    
            '../portfolio/Advertising.jpg',         'dataselect', 
            '../portfolio/Exhibition.jpg',          'surefoot',     
            '../portfolio/HTMLEmails.jpg',          'dataselect',
            '../portfolio/Journal.jpg',             'surefoot',         
            '../portfolio/Leaflet.jpg',             'surefoot',         
            '../portfolio/Newsletter.jpg',          'surefoot',      
            '../portfolio/Packaging1.jpg',          'surefoot',
            '../portfolio/PromotionalCampaign.jpg', 'dataselect',      
            '../portfolio/ReportAccounts.jpg',      'surefoot',
            '../portfolio/WeddingStationery.jpg',   'Hand finished invites, order of services and table planners'
    ];

//store images from data array
fader.imgs    = [];
fader.comment = [];
    
for(var i=0; i<(fader.data.length/2); i++)
{
    fader.imgs[i]    = fader.data[i*2];
    fader.comment[i] = fader.data[(i*2)+1];
}

//cache images
fader.imgsLen = fader.imgs.length;
fader.cache = [];

for(var i=0; i<fader.imgsLen; i++)
{
    fader.cache[i] = new Image;
    fader.cache[i].src = fader.imgs[i];
}

//call portfolio transition gallery function
window.onload = function()
{ 
    // Get current time    
    var date = new Date();
    var curDate = null;
  
    // make image links invisible
    elemLinks = document.getElementById("linksToHide");
    elemCurtain = document.getElementById("curtain");
         
    // remove curtain message
    elemCurtain.style.visibility="visible";   
    elemLinks.style.visibility="hidden";
           
    if(document.getElementById && document.createTextNode)
    {
        document.body.onmouseover=function()
        {
            //load portfolio transition gallery
            portfolioGallery(); 
        }                                                               
    }
     
    // Get current time so we know how long to put "loading" message up for
    curDate = new Date(); 
    
    // Longer than 2 seconds to load images, so effectively set timeout to zero
    if(curDate-date>2000) { date = curDate; }   
    
    // This will delay the loading message if the images loaded instantly, to 
    // avoid a nasty "flash" in the screen
    var t=setTimeout(function()
    {
        // remove curtain message
        elemCurtain.style.visibility="hidden";
        
        // make links visible
        elemLinks.style.visibility="visible";
        
    },2000-(curDate-date));
}

// Return comment associated with the image name
function getComments(txt)
{
    var imageName = txt.substring(txt.lastIndexOf('/')+1,txt.length);
    var cacheName = '';
    
    for(var i=0; i<fader.imgs.length; i++)
    {
        cacheName = fader.imgs[i].substring(fader.imgs[i].lastIndexOf('/')+1,fader.imgs[i].length);
        
        if(cacheName == imageName) 
        { 
            if(fader.comment[i] == 'surefoot')
            {
                return 'Work completed at Surefoot communications';
            }
            else if(fader.comment[i] == 'dataselect')
            {
                return 'Work completed at Data Select';
            }            
            else
            {
                return fader.comment[i]; 
            }
        }
    }
    return '';
}

//portfolio transition gallery function
function portfolioGallery()
{
    //retrieve the div tags we need to use
    var eleImage=document.getElementById('portfolioMain');
    var eleLinks=document.getElementById('portfolioLinks');
    
    if(!eleLinks){return;}
    if(!eleImage){return;}
    
    //get all links in the div
    var piclinks=eleLinks.getElementsByTagName('a');
    
    //cycle through all links defining the click action
    for(var i=0;i<piclinks.length;i++)
    {
        piclinks[i].onclick=function()
        {
            //Retrieve the current portfolio image element
            var elePortfolio=document.getElementById('portfolioImage');
            var eleText     =document.getElementById('portfolioText');
            
            var comments = getComments(this.href);
            
            //place new text below the image
            eleText.innerHTML = '<strong>' + this.title + '</strong><br />' + comments;
            
            //if the timer is not already going
            if(fader.clock == null)
            {
                //copy the image object 
                fader.obj = elePortfolio;
                
                //set the image source
                fader.src = this.href;
                
                //opacity settings
                fader.type = 'none';
                
                if     (typeof fader.obj.style.opacity      != 'undefined'){ fader.type = 'w3c';   }
                else if(typeof fader.obj.style.MozOpacity   != 'undefined'){ fader.type = 'moz';   }
                else if(typeof fader.obj.style.KhtmlOpacity != 'undefined'){ fader.type = 'khtml'; }
                else if(typeof fader.obj.filters == 'object')
                {
                    //weed out win/ie5.0 by testing the length of the filters collection (where filters is an object with no data)
                    //then weed out mac/ie5 by testing first the existence of the alpha object (to prevent errors in win/ie5.0)
                    //then the returned value type, which should be a number, but in mac/ie5 is an empty string
                    fader.type = (fader.obj.filters.length > 0 && typeof fader.obj.filters.alpha == 'object' && typeof fader.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none';
                }
                
                //set the image alternative text
                fader.obj.alt = this.innerHTML;
                
                //opacity supported
                if(fader.type != 'none')
                {
                    //copy and convert fade duration argument 
                    //the duration specifies the whole transition
                    //but the swapfade is two distinct transitions
                    fader.length = parseInt(fader.duration, 10) * 500;
                    
                    //create fade resolution argument as 20 steps per transition
                    //again, split for the two distrinct transitions
                    fader.resolution = parseInt(fader.duration, 10) * 10;
                    
                    //start the timer
                    fader.clock = setInterval('fader.swapfade()', fader.length/fader.resolution);
                }
                
                //otherwise if opacity is not supported
                else
                {
                    //just do the image swap
                    fader.obj.src = fader.src;
                }
                
            }
    
            return false;
        }
    }       
}


//swapfade timer function
fader.swapfade = function()
{
    //increase or reduce the counter on an exponential scale
    fader.count = (fader.fade) ? fader.count * 0.9 : (fader.count * (1/0.9)); 
    
    //if the counter has reached the bottom
    if(fader.count < (1 / fader.resolution))
    {
        //clear the timer
        clearInterval(fader.clock);
        fader.clock = null;

        //do the image swap
        fader.obj.src = fader.src;

        //reverse the fade direction flag
        fader.fade = false;
        
        //restart the timer
        fader.clock = setInterval('fader.swapfade()', fader.length/fader.resolution);

    }
    
    //if the counter has reached the top
    if(fader.count > (1 - (1 / fader.resolution)))
    {
        //clear the timer
        clearInterval(fader.clock);
        fader.clock = null;

        //reset the fade direction flag
        fader.fade = true;
        
        //reset the counter
        fader.count = 1;
    }

    //set new opacity value on element
    switch(fader.type)
    {
        case 'ie'    : fader.obj.filters.alpha.opacity = (fader.count * 100                         ); break;
        case 'khtml' : fader.obj.style.KhtmlOpacity    = (fader.count                               ); break;   
        case 'moz'   : fader.obj.style.MozOpacity      = (fader.count == 1 ? 0.9999999 : fader.count); break;  
        default      : fader.obj.style.opacity         = (fader.count == 1 ? 0.9999999 : fader.count);
    }
};