// JavaScript Document
// Building Fade Version 1.0 for Grimm Commercial

var currentOpacity = 0;
var opacityChange = 1; //% of change 0 - 10
var animationTimeout = 20;
var imageTimeout = 3000;
var currentImage = '';
var imageDirectory = '/images/buildings/';
var imageType = '.jpg';
var imageNames='gc_building';
var numberOfImages = 4;
var transitionTimeout;
var advanceImage = true;
var filename='';

function displayBuildings(startWith, advance){
	currentImage = startWith;
	advanceImage = advance;
	loadImage(currentImage);
}

function loadImage(imageNumber){
	clearTimeout(transitionTimeout);
	currentImage = imageNumber;
	filename = imageDirectory+imageNames+imageNumber+imageType;
	
	if(window.XMLHttpRequest){
	   fileRequested = new XMLHttpRequest();
   	}else{
	   fileRequested = new ActiveXObject("Microsoft.XMLHTTP");
   	} 
	fileRequested.onreadystatechange = function(){
		if(fileRequested.readyState == 3){
			//document.getElementById('slideContent').innerHTML = '<p style="text-align:center;">Loading</p>';
		}
		if(fileRequested.readyState == 4 && fileRequested.status == 200){
			containerDiv = document.getElementById('buildingArea');
			containerDiv.innerHTML = "<img src='"+filename+"' id='topImage' alt='placeholder' class='building' />";
			targetImage = document.getElementById('topImage');
			currentOpacity = 0;
			targetImage.style.opacity = 0;	
			targetImage.style.filter = '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";alpha(opacity = 0)';
			fadeIn();
		}
	}
	fileRequested.open("GET", filename, true);
    fileRequested.send('');
}

function fadeIn(){
	clearTimeout(transitionTimeout);
	currentOpacity += opacityChange;
	var fadeTarget = document.getElementById('topImage');
	fadeTarget.style.opacity = (currentOpacity/100);
	targetImage.style.filter = '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity='+currentOpacity+')"; alpha(opacity ='+currentOpacity+');';
	if(currentOpacity < 100){
		transitionTimeout = setTimeout("fadeIn()",animationTimeout); 
	}else if(currentOpacity >= 100 && advanceImage){
		transitionTimeout = setTimeout("fadeOut()",imageTimeout); 
	}
}

function fadeOut(){
	clearTimeout(transitionTimeout);
	currentOpacity -= opacityChange;
	var fadeTarget = document.getElementById('topImage');
	fadeTarget.style.opacity = (currentOpacity/100);
	targetImage.style.filter = '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity='+currentOpacity+')"; alpha(opacity ='+currentOpacity+');';
	if(currentOpacity > 0){
		transitionTimeout = setTimeout("fadeOut()",animationTimeout); 
	}else if(currentOpacity <= 0 && advanceImage){
		var nextImage = currentImage + 1;
		if(nextImage > numberOfImages){
			nextImage = 1;
		}
		//transitionTimeout = setTimeout("loadImage("+nextImage+")",imageTimeout);
		loadImage(nextImage);
	}
}