window.addEvent("domready", function() {
	var container = $('flash');
	var imgTotal = 4;
	var baseurl = "http://www.maplerockdesign.co.uk/";
	var pos = 0;
	var playing = true;
	var imgSrcs = new Array();
	var periodicalID = null;
	
	var control = new Element('a', {
		'html':'Pause',
		'class':'control play',
		'events': {
			'click': function() {
				controlMove();
			}
		}
	})
	
	control.inject(container);
	
	function controlMove() {
		
		if(playing==true) {
			$clear(periodicalID);
			playing=false;
			control.set('text','Play')
			control.set('class','control play')
		}
		else {
			periodicalID = fadeImages.periodical(5000)
			playing=true;
			control.set('text','Pause')
			control.set('class','control pause')
		}
	}
	
	for (var i = 2; i < imgTotal+2; i++) {
		var replaceImg = new Element('img', {
			'src': baseurl+'images/homeanimation2/image'+i+'.jpg',
			'styles' : {
				'opacity':0
			}
		})
		
		replaceImg.inject(container);
	}
	

	
	
	var images = $$('#flash img')
	images.each(function (el,l) {
		imgSrcs[l] = images[l].src;
	});
	
	var myImages = new Asset.images(imgSrcs, {
	    onComplete: function(){
			periodicalID = fadeImages.periodical(5000);
	    }
	});

	
	function fadeImages() {
		//if we are at the end of list of images fade out last 1 fade in 1st else we fade current and fade in the next
		if (pos == imgTotal) {
			fadeImgOut=imgTotal;
			fadeImgIn =0;
			pos = 0;
		}
		else {
			fadeImgOut=pos;
			fadeImgIn =pos+1;
			pos ++;
		}
	
		//do the fading stuff
		var fadeOut = new Fx.Tween(images[fadeImgOut], {duration: 2000});
		var fadeIn = new Fx.Tween(images[fadeImgIn], {duration: 2000});
		fadeOut.start('opacity',[1,0]);
		fadeIn.start('opacity',[0,1]);
	}

});