// Fading Image Sequence PHP JavaScript Generator
// For use with Mootools Javascript Library
// WrightWay Design - www.wrightwaydesign.com.au

periodicalCycle = new Class({

    initialize: function(dateString){ this.startTimer(); },
    updateCount: function(){ nextImage(); },
    stopTimer: function(){ $clear(this.periodicalTimer); },
    startTimer: function(){
        this.periodicalTimer = this.updateCount.periodical(7000, this);
    }

});

function nextImage() {

	var oldImage = currentImage;
    if (currentImage == 'side-img-1') { 
    	currentImage='side-img-2'; 
    } else { 
    	currentImage='side-img-1'; 
    }

    $(oldImage).setStyle('zIndex','1');
    $(currentImage).setStyle('zIndex','2');
	
	this.fadeEffect = new Fx.Style($(currentImage), 'opacity', { duration: 2000 } );
     this.fadeEffect.addEvent('onComplete', function() {

        if (headerCount == (headerPhotos.length - 1)) { 
            headerCount = 0; } else { headerCount++; }

        $(oldImage).setStyle('opacity','0');
        $(oldImage).setStyle('background-image', 'url('+headerPhotos[headerCount].src+')');
     
     });   
     this.fadeEffect.start(0,1);
		
}

function startSequence() { imgTimer = new periodicalCycle; }

var headerPhotos;
var headerCount = 0;
var imgTimer;
var currentImage = 'side-img-1';

window.addEvent('domready', function() {

	var count = 0;
    $('side-img-2').setStyle('opacity',0);
    $('side-img-2').setStyle('display','block');
	headerPhotos = new Asset.images(['/images/side/global-3.jpg','/images/side/global-12.jpg','/images/side/global-10.jpg','/images/side/global-11.jpg','/images/side/global-14.jpg','/images/side/global-16.jpg','/images/side/global-15.jpg','/images/side/global-1.jpg','/images/side/global-2.jpg','/images/side/global-17.jpg','/images/side/global-13.jpg','/images/side/global-18.jpg','/images/side/global-7.jpg','/images/side/global-5.jpg','/images/side/global-19.jpg','/images/side/global-6.jpg','/images/side/global-9.jpg','/images/side/global-8.jpg','/images/side/global-4.jpg'], {  
		onProgress: function() {
        	if (count == 0) {
            	$('side-img-1').setStyle('background-image', 'url('+this.getProperty('src')+')');
            } else if (count == 1) {
            	$('side-img-2').setStyle('background-image', 'url('+this.getProperty('src')+')');
            } else if (count == 2) {
            	startSequence();
            }
            count++;
        }
	});
    
});