// Custom Fading Image Sequence PHP JavaScript Generator
// For use with Mootools Javascript Library
// Developed by 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(5000, this);
    }

});

function nextImage() {

	var oldImage = currentImage;
    if (currentImage == 'imgOne') { 
    	currentImage='imgTwo'; 
    } else { 
    	currentImage='imgOne'; 
    }

    $(oldImage).setStyle('zIndex','1');
    $(currentImage).setStyle('zIndex','2');
	
	this.fadeEffect = new Fx.Style($(currentImage), 'opacity', { duration: 1500 } );
     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 = 'imgOne';

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

	if ($('imgOne') && $('imgTwo')) {
        var count = 0;
        $('imgTwo').setStyle('opacity',0);
        $('imgTwo').setStyle('display','block');
        headerPhotos = new Asset.images(['/images/index/npws-2.jpg','/images/index/Flat-roof-array-2.jpg','/images/index/2.1Kw-Array.jpg','/images/index/4Kw-solar-array.jpg','/images/index/3Kw-grid-connect-system.jpg','/images/index/Shed-array.jpg'], {  
            onProgress: function() {
                if (count == 0) {
                    $('imgOne').setStyle('background-image', 'url('+this.getProperty('src')+')');
                } else if (count == 1) {
                    $('imgTwo').setStyle('background-image', 'url('+this.getProperty('src')+')');
                }
                count++;
            },
            onComplete: function() { startSequence(); }
        });
	}
    
});