// JavaScript Document
<!-- //

//var folder = "temp_image/";
var t;
var timeout;
var playing = false;
var loadedImages = new Array();
var imagesComplete = new Array();
var imagesLoaded = false;
//larger delay implies SLOWER animation
var delay = 5;
var MAX_DELAY = 9;
var MIN_DELAY = 2;
//var MAX_SPEED = 7;
var pause=40;
//var maxPause=setInterval("cycle()",5000);

function changeAnimationInfo(index) {
	//assumes image name has specific format
	/* var imgYr = ImageArray[index].substring(0,4);
	var imgMo = ImageArray[index].substring(4,6);
	var imgDy = ImageArray[index].substring(6,8);
	var imgHr = ImageArray[index].substring(8,10);
	var imgMn = ImageArray[index].substring(10,12);
	var imgNo = (+index + 1);
	document.getElementById('animation-info').innerHTML=
		imgYr + '-' + imgMo + '-' + imgDy + ', ' + 
		imgHr + ':' + imgMn + ' UTC, ' + 
		imgNo + '/' + NumImages; */
	var insert = "<b>"+animationInfo[index]+"</b>";
	document.getElementById('imageDate').innerHTML=insert;
}

function imageOnLoad() {
	var i = 0;
	while (imagesComplete[i]) i++;
	imagesComplete[i] = true;
	var loading;
	if (window.location.pathname.match('_e')) 
		loading = 'Loading image '+(i+1)+' of '+NumImages;
	else
		loading = 'Chargement de l\'image '+(i+1)+' de '+NumImages;
	document.getElementById('animation-info').innerHTML=loading;
	if (i+1 == NumImages){
		imagesLoaded=true;
		animate();
	}
}

function loadImages() {
	var parentDiv = document.getElementById('rradarImage');
	var hiddenDiv = document.createElement('div');
	var info = document.getElementById('animation-info');
	hiddenDiv.style.visibility='hidden';
	hiddenDiv.style.display='none';
	parentDiv.appendChild(hiddenDiv);
	for (var i=0; i < NumImages; i++) {
		imagesComplete[i] = false;
		loadedImages[i] = new Image();
		loadedImages[i].onload = function() { imageOnLoad(); };
		loadedImages[i].src=blobArray[i];
		document.write(loadedImages[i]);
		hiddenDiv.appendChild(loadedImages[i]);
	}
}

function checkButtons() {
	var playButton = document.getElementById('play');
	var stopButton = document.getElementById('stop');
	var firstButton = document.getElementById('firstimage');
	var prevButton = document.getElementById('previousimage');
	var nextButton = document.getElementById('nextimage');
	var lastButton = document.getElementById('lastimage');
	if (playing) {
		playButton.onclick = function(){};
		playButton.src="animation_buttons/play_greyed.gif";
		stopButton.onclick = function(){ stopPlay(); };
		stopButton.src="animation_buttons/pause.gif";
		firstButton.onclick = function(){};
		firstButton.src="animation_buttons/first_greyed.gif";
		prevButton.onclick = function(){};
		prevButton.src="animation_buttons/prev_greyed.gif";
		nextButton.onclick = function(){};
		nextButton.src="animation_buttons/next_greyed.gif";
		lastButton.onclick = function(){};
		lastButton.src="animation_buttons/last_greyed.gif";
	} else {
		if (NumImages == 1) {
			playButton.onclick = function(){};
			playButton.src="animation_buttons/play_greyed.gif";
		}
		else {
			playButton.onclick = function(){ cycle(); };
			playButton.src="animation_buttons/play.gif";
		}
		stopButton.onclick = function(){};
		stopButton.src="animation_buttons/pause_greyed.gif";
		if (index_start == 0) { 
			firstButton.onclick = function(){};
			firstButton.src="animation_buttons/first_greyed.gif";
			prevButton.onclick = function(){};
			prevButton.src="animation_buttons/prev_greyed.gif";
		} else {
			firstButton.onclick = function(){ processFirst(); };
			firstButton.src="animation_buttons/first.gif";
			prevButton.onclick = function(){ processPrevious(); };
			prevButton.src="animation_buttons/prev.gif";
		}
		if (index_start == index_end) { 
			nextButton.onclick = function(){};
			nextButton.src="animation_buttons/next_greyed.gif"; 
			lastButton.onclick = function(){};
			lastButton.src="animation_buttons/last_greyed.gif"; 
		} else {
			nextButton.onclick = function(){ processNext(); };
			nextButton.src="animation_buttons/next.gif";
			lastButton.onclick = function(){ processLast(); };
			lastButton.src="animation_buttons/last.gif";
		}
	}
	document.getElementById('minus').src = (delay == MAX_DELAY) ? "animation_buttons/slowdown_greyed.gif" : "animation_buttons/slowdown.gif";
	document.getElementById('plus').src = (delay == MIN_DELAY) ? "animation_buttons/speedup_greyed.gif" : "animation_buttons/speedup.gif";
}

function cycle() {
	if (document.images) {
		if (!playing) timeout=setTimeout("stopPlay()",300000);
		playing = true;
		checkButtons();
		//if (!imagesLoaded) loadImages();
		animate();
	}
}


function animate() {
	index_start++;
	if (index_start == NumImages) index_start = 0;
	changeAnimationInfo(index_start);
	//document.getElementById('radar').src='get_image.php?img='+ImageArray[index_start];
	//document.getElementById('radar').innerHTML=blobArray[index_start];
	var radarNum = 'radar' + index_start;
	displayClear(index_start);
	document.getElementById(radarNum).style.display = "block";
	t=setTimeout("cycle()", (delay * 100));
}


/********************************************************************************
* Name:        displayClear
*
* Description: changes the style of all images not currently to be displayed to none
* Arguments:   num - The image that will be displayed
*
*********************************************************************************/

function displayClear(num) {
	var img;
	for (img=0; img < NumImages; img++) {
		if (img != num) {
			var radarNum = 'radar' + img;
			document.getElementById(radarNum).style.display = "none";
		}
	}
}

function setPause() {
	//
	// setPause: set the end of loop pause based on
	//           the number of frames in the animation
	//
	//if (NumImages > maxPause) {
	if (ImageArray[index_end] > NumImages +1) {
		//pause = maxPause;
		//clearTimeout(t)
		delay = pause;
		t=setTimeout("cycle()", (delay * 100))
	} 
	else {
		pause = 5;
	}
}


function speedReset() {
   // speedReset: reset the frame delay to its initial value
	clearTimeout(t);
	delay = 5;
	if (playing) { t=setTimeout("cycle()", (delay * 100)); }
	checkButtons();
}


function slower() {
   // slower: increase the delay between images
   if (delay < MAX_DELAY) {
		clearTimeout(t);
		delay = (delay + 1);
		if (playing) { t=setTimeout("cycle()", (delay * 100)); }
		checkButtons();
   }
}

function faster() {
   // faster: decrease the delay between images
   if (delay > MIN_DELAY) {
		clearTimeout(t);
		delay = (delay - 1);
		if (playing) { t=setTimeout("cycle()", (delay * 100)); }
   	checkButtons();
	}
}

function stopPlay() {
    // stopPlay: turn off the animation loop
	if (document.images) {
		clearTimeout(t);
		clearTimeout(timeout);
		playing = false;
		imagesLoaded = false;
		changeAnimationInfo(index_start);
		checkButtons();
	}
}

function processPrevious() {
	if (document.images && index_start > 0) {
		index_start--;
		changeAnimationInfo(index_start);
		//document.getElementById('radar').innerHTML =blobArray[index_start];
		var radarNumNext = 'radar' + (index_start + 1);
		document.getElementById(radarNumNext).style.display = "none";
		var radarNumPrev = 'radar' + index_start;
		document.getElementById(radarNumPrev).style.display = "block";
		checkButtons();
	}
}

function processNext(){
	if (document.images && index_start < index_end) {
		index_start++;
		changeAnimationInfo(index_start);
		//document.getElementById('radar').innerHTML =blobArray[index_start];
		var radarNumPrev = 'radar' + (index_start - 1);
		document.getElementById(radarNumPrev).style.display = "none";
		var radarNumNext = 'radar' + index_start;
		document.getElementById(radarNumNext).style.display = "block";
		checkButtons();
	}
}

function processFirst(){
	if (document.images) {
		index_start=0;
		changeAnimationInfo(index_start);
		//document.getElementById('radar').innerHTML =blobArray[index_start];
		displayClear(0);
		var radarNum = 'radar0';
		document.getElementById(radarNum).style.display = "block";
		clearTimeout(t);
		checkButtons();
	}
}

function processLast(){
	if (document.images) {
		index_start = index_end;
		changeAnimationInfo(index_end);
		//document.getElementById('radar').innerHTML =blobArray[index_start];
		displayClear(index_end);
		var radarNum = 'radar' + index_end;
		document.getElementById(radarNum).style.display = "block";
		clearTimeout(t);
		checkButtons();
	}
}
// End hiding script from old browsers -->