var imageArray = new Array();
var numImages = 7;
var activeImage = Math.floor(Math.random()*numImages);
var opacity = 0;
var max_opacity = 100
var min_opacity = 0;
var transitionActive = 1;
var fchangeImage;

function createImages() {
		var imageIndex = 0;
	for ( imageIndex = 1; imageIndex <= numImages; imageIndex ++ ) {
		imageArray[imageIndex-1] = 'front-rotating-image-' + imageIndex;
	}
	document.getElementById("debugButton").value = "createImages Complete";
}

function loadImage() {
	if ( transitionActive == 1 ) {
		opacity = opacity + 1;
		//document.getElementById('txt').value=opacity;
		if ( opacity >= 100 ) {
			opacity = 100;
			transitionActive = 0;
			fchangeImage = setTimeout('changeImage()',1000);
		}
		draw();
	}
	if ( transitionActive == -1 ) {
		opacity = opacity - 1;
		//document.getElementById('txt').value=opacity;
		if ( opacity <= min_opacity ) {
			opacity = min_opacity;
			transitionActive = 1;
			activeImage = ( activeImage + 1 ) % numImages;
		}
		draw();
	}
}

function changeImage() {
	if ( opacity >= 100 ) {
		transitionActive = -1;
		clearTimeout(fchangeImage);
	}
}	

function draw() {  
	var canvas = document.getElementById('front-rotating-canvas');
	
	if (canvas.getContext){  
		var ctx = canvas.getContext('2d');
		var curveHeight = 40;
		var textRectWidth = 300;
		
		try {
			var image = document.getElementById(imageArray[activeImage]);
			ctx.clearRect(0,0,canvas.width-textRectWidth,canvas.height);
			ctx.globalAlpha = opacity/100.0;
			ctx.drawImage(image,0,0,Math.min(image.width,canvas.width-textRectWidth),Math.min(image.height,canvas.height),0,0,canvas.width-textRectWidth,canvas.height);
			ctx.globalAlpha = 1;
		} catch ( e ) {
			document.getElementById("debugButton").value = e + ": " + activeImage;
			numImages = Math.min(0,numImages-1);
			clearTimeout(fchangeImage);
		}
		
		var image = document.getElementById('front-rotating-text');
		ctx.drawImage(image, 0, 0, Math.min(image.width,canvas.width), Math.min(image.height,canvas.height),canvas.width-textRectWidth+5,0,textRectWidth,canvas.height );
		
		/*
		ctx.fillStyle = "#3C5D19";
		ctx.fillRect( canvas.width-textRectWidth+5, 0, canvas.width, canvas.height );
		ctx.fillStyle = "#1a1a1a";
		
		
		ctx.fillStyle = "black";
		ctx.font = "30px Constantia bold";
		var textHeight = 30;
		var textHeightOffset = canvas.height/3;
		ctx.fillText( "Planning,", canvas.width-textRectWidth+10,textHeightOffset);
		ctx.fillText( "Transforming,", canvas.width-textRectWidth+10+30,textHeightOffset+textHeight);
		ctx.fillText( "and Nurturing", canvas.width-textRectWidth+10+30+30,textHeightOffset+textHeight+textHeight);
		ctx.fillText( "Native Landscapes", canvas.width-textRectWidth+10, textHeightOffset+textHeight+textHeight+textHeight);
		*/
		
		// This section draws the curves.
		ctx.beginPath();
		ctx.lineTo(0,curveHeight);
		ctx.quadraticCurveTo(canvas.width/2,-curveHeight,canvas.width,curveHeight);
		ctx.lineTo(canvas.width,0);
		ctx.lineTo(0,0);
		
		ctx.moveTo(0,canvas.height);
		ctx.lineTo(0,canvas.height-curveHeight);
		ctx.quadraticCurveTo(canvas.width/2,canvas.height+curveHeight, canvas.width, canvas.height-curveHeight);
		ctx.lineTo(canvas.width,canvas.height);
		ctx.lineTo(0,canvas.height);
		
		ctx.closePath();
		ctx.fillStyle = "#0F0F0F";
		ctx.fill();
	}
	else {
		alert("Failed to Load Canvas?");
	}
}