/* #####  define parameter variables -> most of these depened 
on the type of slideshow that we want ----->  ##### */	

//total number of images for the slideshow
var total_number_of_images;
//number of event we want to view
var selected_event; 
//the path to the images
var path_to_images;


//an array holding the images for the current event	
var image_array;
//the selected event
var selected_event_str;
//the current day number
var image_num;

//initially show is not active so timer can be started	
var show_active = false; 
//this var controls the direction of playback -> forward by default
var advanceForward = true;
//the speed at which the slides advance
var showSpeed;
//the timer that calls the next or previous image function at the above show speed 
var showTimer;


//declare global variables for loadShow -> required for I.E.!
var mode;
var event_num;
var height_level;

var slideshow_name;
var show_size;
var mode;
var pressure_level;



/* ##### start generic slideshow code ----->  ##### */

/* slideshow constructor - calls callback function when loading is complete */
function Slideshow(image_src_array){

	//initialize class variables--->

	//number of images for the slideshow
	this.number_of_images = image_src_array.length;
	//number of images pre-loaded
	this.number_loaded = 0;
	//number of images processed (not all of these may have been preloaded successfully)
	this.number_processed = 0;
	//if the slideshow images actually exist
	this.slideshow_images_exist = 0;
	//array to hold the pre-loaded images
	image_array = new Array;
	
	//initialize a status box to display a loading message
	this.status_bar = document.getElementById('status_box_js');
	this.status_bar.innerHTML = "<br /><br /><br />Loading Images <=> Please Wait";

	//preload each image
	for (var i = 0; i < image_src_array.length; i++) 
		this.preload(image_src_array[i]);
}


/* preload member function - preloads an individual image */
Slideshow.prototype.preload = function(image_src){

	//create new Image object
	var objImage = new Image;

	//add this image object to the Slideshow image_array 
	image_array.push(objImage);
	
	//set up an onload handler for the Image object
	objImage.onload = Slideshow.prototype.image_onload;

	//set up an onerror handler for the Image object
	objImage.onerror = Slideshow.prototype.image_onloaderror;

	//set up an onabort handler for the Image object
	objImage.onabort = Slideshow.prototype.image_onloaderror;
	
	//assign a pointer to a Slideshow object (so that we can access the member variables)
	objImage.objSlideshow = this;
	
	//this field indicates whether the image has been preloaded
	objImage.preloaded = false;
	
	//set the src of our Image object
	objImage.src = image_src;
}


/* checkProgress member function - checks if all the images have been processed and calls
the callback if this is the case */
Slideshow.prototype.checkProgress = function(){
	this.number_processed++;
	if(this.number_processed == this.number_of_images){
		
		//check if images exist
		exist_var = document.getElementById('slideshow_images_exist_js');
		this.slideshow_images_exist = exist_var.value;

		if(this.number_loaded == this.number_processed){
			this.status_bar.innerHTML = "";
		}
		else{
			if(this.slideshow_images_exist != 0)
				this.status_bar.innerHTML = "<br />Slideshow Loaded, but with Errors";
			else{
				this.status_bar.innerHTML = "<br /><br /><br />We are sorry, but we currently do not <br> have the plots for the settings you have selected.";
			}
		}
		//reset the show if all images have been processed
		resetShow();
		if(this.slideshow_images_exist != 0){
			showImage();
			showControls();
		}

	}
	else{
		num_processed_str = this.number_processed + '';
		num_images_str = this.number_of_images + '';
		this.status_bar.innerHTML = "<br /><br /><br />Loading Images <=> Please Wait (" + num_processed_str + " / " + num_images_str + ")";
	}
}


/* image onload member function - called for each image that has been preloaded */
Slideshow.prototype.image_onload = function(){
	this.preloaded = true;
	this.objSlideshow.number_loaded++;
	this.objSlideshow.checkProgress();
}


/* image onloaderror member function - called for each image that has failed to preload properly */
Slideshow.prototype.image_onloaderror = function(){
	this.preloaded = false;
	this.objSlideshow.checkProgress();
}


/* ##### start specific slideshow code ----->  ##### */


/* wrapper load function -> calls the load function for the slideshow we want */
function loadShow(){

	//hide image and controls before loading has finished
	hideImage();
	hideControls();

	//get the requested slideshow name identifier
	slideshow_name_elem = document.getElementById('slideshow_name_js');
	slideshow_name = slideshow_name_elem.value;

	//convert name to string
	slideshow_name_str = slideshow_name + '';

	//call the proper load function
	if(slideshow_name_str == "geopotential_slideshow"){
		loadGeopotentialShow();
	}
	else if(slideshow_name_str == "laitpv2d_slideshow"){
		loadLiat2DShow();
	}
	else if(slideshow_name_str == "laitpv3d_slideshow"){
		loadLiat3DShow();
	}
	else
		alert("There was a problem loading the slideshow");

}




/* load function for the geopotential show */
function loadGeopotentialShow(){
	
	//get show size
	show_size_elem = document.getElementById('slideshow_size_js');
	show_size = show_size_elem.value;

	//get mode (only era is available here)
	mode_elem = document.getElementById('slideshow_mode_js');
	mode = mode_elem.value;

	//get event number
	event_num_elem = document.getElementById('slideshow_event_js');
	event_num = event_num_elem.value;

	//get height level
	pressure_elem = document.getElementById('slideshow_pressure_level_js');
	pressure_level = pressure_elem.value;


	//convert the above to strings
	show_size_str = show_size + '';
	mode_str = mode + '';
	event_num_str = event_num + '';
	pressure_level_str = pressure_level + '';
	

	//initialize base image path
	if(show_size_str == "large")
		path_to_images = "component_images_large/";
	else
		path_to_images = "component_images/";

	if(mode_str == "ncep")
		path_to_images = path_to_images + "geopotential/" + pressure_level_str + "hpa/";
	else
		path_to_images = path_to_images + "geopotential_era/" + pressure_level_str + "hpa/";

	//set up image src array
	image_src_array = new Array;
	total_number_of_images = 61;

	//preload the images for the selected event
	for(image_num=1; image_num<=total_number_of_images; image_num++){
		image_num_str = image_num+'';

		image_src = path_to_images + "height_" + pressure_level_str + "hPa_event" + event_num_str + "_day" + image_num_str + ".png";

		image_src_array.push(image_src);
	}

	//hideControls();
	hideImage();
	var objShow = new Slideshow(image_src_array);

}

/* reloads the geopotential slideshow */
function reloadGeopotentialShow(){

	//free elements
	for(image_num=1; image_num<=total_number_of_images; image_num++){
		delete image_array[image_num];
	}
	
	//delete current image array
	image_array.length = 0;

	//get new pressure level from dropdown box
	pressure_elem = document.getElementById('pressure_level_js');
	pressure_level = pressure_elem.options[pressure_elem.selectedIndex].value;

	//update height level slideshow variable
	pressure_elem = document.getElementById('slideshow_pressure_level_js');
	pressure_elem.value = pressure_level;

	//load the slideshow again
	loadGeopotentialShow();
}



/* load function for the Liat 2D show */
function loadLiat2DShow(){
	
	//get show size
	show_size_elem = document.getElementById('slideshow_size_js');
	show_size = show_size_elem.value;

	//get mode (only era is available here)
	mode_elem = document.getElementById('slideshow_mode_js');
	mode = mode_elem.value;

	//get event number
	event_num_elem = document.getElementById('slideshow_event_js');
	event_num = event_num_elem.value;

	//get height level
	height_elem = document.getElementById('slideshow_height_level_js');
	height_level = height_elem.value;	


	//convert the above to strings
	show_size_str = show_size + '';
	mode_str = mode + '';
	event_num_str = event_num + '';
	height_level_str = height_level + '';
	

	//initialize base image path
	if(show_size_str == "large")
		path_to_images = "component_images_large/lait2d_era/";
	else
		path_to_images = "component_images/lait2d_era/"

	//set up image src array
	image_src_array = new Array;
	total_number_of_images = 160;

	//preload the images for the selected event
	for(image_num=1; image_num<=total_number_of_images; image_num++){
		image_num_str = image_num+'';

		image_src = path_to_images + "lait_pv_2d_event" + event_num_str + "_height" + height_level_str + "K_image" + image_num_str + ".jpg";

		image_src_array.push(image_src);
	}

	//hideControls();
	hideImage();
	var objShow = new Slideshow(image_src_array);

}

/* reloads the lait 2d slideshow */
function reloadLiat2DShow(){

	//free elements
	for(image_num=1; image_num<=total_number_of_images; image_num++){
		delete image_array[image_num];
	}
	
	//delete current image array
	image_array.length = 0;

	//get new pressure level from dropdown box
	height_elem = document.getElementById('height_level_js');
	height_level = height_elem.options[height_elem.selectedIndex].value;

	//update height level slideshow variable
	height_elem = document.getElementById('slideshow_height_level_js');
	height_elem.value = height_level;

	//load the slideshow again
	loadLiat2DShow();
}


/* load function for the Liat 3D show */
function loadLiat3DShow(){

	//get show size
	show_size_elem = document.getElementById('slideshow_size_js');
	show_size = show_size_elem.value;

	//get mode (only era is available here)
	mode_elem = document.getElementById('slideshow_mode_js');
	mode = mode_elem.value;

	//get event number
	event_num_elem = document.getElementById('slideshow_event_js');
	event_num = event_num_elem.value;

	//convert the above to strings
	show_size_str = show_size + '';
	mode_str = mode + '';
	event_num_str = event_num + '';
	height_level_str = height_level + '';
	

	//initialize base image path - only era mode is available
	if(show_size_str == "large")
		path_to_images = "component_images_large/lait3d_era/";
	else
		path_to_images = "component_images/lait3d_era/";

	//set up image src array
	image_src_array = new Array;
	total_number_of_images = 160;

	//preload the images for the selected event
	for(image_num=1; image_num<=total_number_of_images; image_num++){
		image_num_str = image_num+'';

		image_src = path_to_images + "lait_pv_3d_event" + event_num_str + "_image" + image_num_str + ".jpg";

		image_src_array.push(image_src);
	}

	//hideControls();
	hideImage();
	var objShow = new Slideshow(image_src_array);

}


/* reloads the Liat 3D slideshow */
function reloadLiat3DShow(){
	//free preloaded images
	for(image_num=1; image_num<=total_number_of_images; image_num++){
		delete image_array[image_num];
	}
	
	//delete current image array
	image_array.length = 0;

	//reload slideshow (this one has one height only)
	loadLiat3DShow();
}




/* ##### start generic slideshow control code ----->  ##### */


function advanceImage(){
	if(image_num > total_number_of_images || image_num < 1){
		stopShow();
		return;
	}
	if(advanceForward && image_num < total_number_of_images){ image_num++; }
	else if(!advanceForward && image_num > 1){ image_num--; }
	setPicture(image_num);
}

/* plays the show; check for show_active to prevent starting more than one timer */
function playShow(){
	if(!show_active){
		showTimer = setInterval("advanceImage()",showSpeed);
		show_active = true;
	}
}


function setPicture(image_num){
	current_picture = image_array[image_num-1].src;
	//update image
	slide_show_image_elem = document.getElementById('slide_show_image_js');
	slide_show_image_elem.src = current_picture;
	//update frame number
	current_frame_elem = document.getElementById('current_frame_js');
	current_frame_elem.value = image_num + ' / ' + total_number_of_images;
}


function startShow(){
	advanceForward = true;
	fps_rate_elem = document.getElementById('fps_rate_js');
	if(!show_active){
		user_speed = fps_rate_elem.value;
		showSpeed = 1000.0/user_speed;
		playShow();
	}
}


function startShowBackward(){
	advanceForward = false;
	fps_rate_elem = document.getElementById('fps_rate_js');
	if(!show_active){
		user_speed = fps_rate_elem.value;
		showSpeed = 1000.0/user_speed;
		playShow();
	}
}


function stepForward(){
	if(show_active){ stopShow(); }
	if(image_num < total_number_of_images){ setPicture(++image_num); }
}


function stepBackward(){
	if(show_active){ stopShow(); }
	if(image_num > 1){ setPicture(--image_num); }
}


function stepToBeginning(){
	image_num = 1;
	if(show_active){ stopShow(); }
	setPicture(image_num);
}


function stepToEnd(){
	image_num = total_number_of_images;
	if(show_active){ stopShow(); }
	setPicture(image_num);
}


function stopShow(){
	show_active = false;
	clearInterval(showTimer);
}


function resetShow(){
	stopShow();
	image_num = 1;
	setPicture(image_num);
}


function gotoFrame(){
	frame_num_elem = document.getElementById('frame_number_js');
	frame_num = frame_num_elem.value;
	if(show_active){ stopShow(); }
	if(frame_num <= total_number_of_images){
		image_num = frame_num;
		setPicture(image_num);
	}
	else{ alert("Sorry, but there are only " + total_number_of_images + " frames"); }
}


function increaseFPS(){
	fps_rate_elem = document.getElementById('fps_rate_js');
	user_speed = fps_rate_elem.value;
	user_speed++;
	fps_rate_elem.value = user_speed;
	showSpeed = 1000.0/user_speed;
	if(show_active){
		stopShow();
		if(advanceForward)
			startShow();
		else
			startShowBackward();
	}
}


function decreaseFPS(){
	fps_rate_elem = document.getElementById('fps_rate_js');
	user_speed = fps_rate_elem.value;
	//only decrease speed if it makes it >= 1fps
	if(user_speed > 1){
		user_speed--;
		fps_rate_elem.value = user_speed;
		showSpeed = 1000.0/user_speed;
		if(show_active){
			stopShow();
			if(advanceForward)
				startShow();
			else
				startShowBackward();
		}
	}
}


function hideControls(){
	control1 = document.getElementById('slide_show_controls_js1');
	control2 = document.getElementById('slide_show_controls_js2');
	control1.style.visibility = 'hidden';
	control2.style.visibility = 'hidden';
}


function showControls(){
	control1 = document.getElementById('slide_show_controls_js1');
	control2 = document.getElementById('slide_show_controls_js2');
	control1.style.visibility = 'visible';
	control2.style.visibility = 'visible';
}


function hideImage(){
	image_box = document.getElementById('slide_show_image_div_js');
	image_box.style.visibility = 'hidden';
}


function showImage(){
	image_box = document.getElementById('slide_show_image_div_js');
	image_box.style.visibility = 'visible';
}