//number of available components
var num_components = 12;

//an array that holds 1 or 0 for each component correspoding to its state (selected or unselected)
var components_array = new Array(num_components);

//timer for processing cookies - repeatedly calls processCookie()
var cookieTimer;

//define colors for selection browser
var componentSelectColorOver = "#0C2078";
var componentSelectColor = "#ddeeff";
var componentFontColorOver = "#ffffff";
var componentFontColor = "#000077";


//initially, set all components to be unselected
for (i=0; i<num_components; i++){
	components_array[i] = 0;
}


/* unselects all of the slideshow components instead of num_not_to_unselect */
function unselectSlideshowComponents(num_not_to_unselect){
	box = document.getElementById('selected_components_js');
	for(i=0; i<=2; i++){
		if( i != (num_not_to_unselect-1) ){
			box.options[i].selected = false;
			components_array[i] = 0;
			comp_id = 'component_' + box.options[i].value + '';
			component = document.getElementById(comp_id);
			component.style.backgroundColor = componentSelectColor;
			component.style.color = componentFontColor;
		}
	}
}


/* unselects the static components */
function unselectStaticComponents(){
	box = document.getElementById('selected_components_js');
	for(i=3; i<num_components; i++){
		box.options[i].selected = false;
		components_array[i] = 0;
		comp_id = 'component_' + box.options[i].value + '';
		component = document.getElementById(comp_id);
		component.style.backgroundColor = componentSelectColor;
		component.style.color = componentFontColor;
	}
}


/* processes a component click and adjust the components array accordingly */
function processComponentClick(component, num){

	ind = num-1;
	box = document.getElementById('selected_components_js');

	//first of all unselect the slideshow components, this is valid in every case
	//if there is a click on one the slideshows, this will insure only one is selected
	//and every other one gets unselected
	//otherwise, if there is a click on a static, any slideshow gets unselected
	unselectSlideshowComponents(num);

	//Also, if there is a slideshow click unselect all the statics
	if(num <= 3)
		unselectStaticComponents();
		

		
	//box = document.getElementById('selected_components_js');
	comp_id = 'component_' + box.options[ind].value + '';
	component = document.getElementById(comp_id);

	if( components_array[ind] == 0 ){ //if unselected, select
		component.style.backgroundColor= componentSelectColorOver;
		component.style.color = componentFontColorOver;
		components_array[ind] = 1;
		box.options[ind].selected = true;
	}
	else if( components_array[ind] == 1 ){ //if selected, unselect
		component.style.backgroundColor = componentSelectColor;
		component.style.color = componentFontColor;
		components_array[ind] = 0;
		box.options[ind].selected = false;
	}
}


/* changes component style on mousover */
function processComponentMouseOver(component, num){
	ind = num-1;

	//change color if unselected
	if( components_array[ind] == 0 ){
		component.style.backgroundColor= componentSelectColorOver;
		component.style.color = componentFontColorOver;
	}
}


/* changes component style on mouseout */
function processComponentMouseOut(component, num){
	ind = num -1;
	//change color if unselected
	if( components_array[ind] == 0 ){
		component.style.backgroundColor = componentSelectColor;
		component.style.color = componentFontColor;
	}
}


/* updates the components and components array according to the state of the components in the box */
function updateComponents(){
	//set cookie for zoom page if needed
	requested_page_elem = document.getElementById('requested_page_name_js');
	page_name = requested_page_elem.value;
	if(page_name == "use_program_zoom"){
		setCookie("refresh_use_program_page", "yes", 1);
	}

	//set timer to process the cookie every third of a second
	cookieTimer = setInterval("processCookie()",300);
	
	//update component box to reflect user settings
	box = document.getElementById('selected_components_js');
	for (i=0; i<num_components; i++){
		if( box.options[i].selected == true ){
			components_array[i] = 1;
			comp_id = 'component_' + box.options[i].value;
			component = document.getElementById(comp_id);
			component.style.backgroundColor = componentSelectColorOver;
			component.style.color = componentFontColorOver;
		}
		else{
			components_array[i] = 0;
			comp_id = 'component_' + box.options[i].value;
			component = document.getElementById(comp_id);
			component.style.backgroundColor = componentSelectColor;
			component.style.color = componentFontColor;
		}
	}
}


/* reads the cookie and refreshes the page if we are not zoomed in to force update settings */
function processCookie(){
	//read cookie
	my_cookie = getCookie("refresh_use_program_page");

	//get page name
	requested_page_elem = document.getElementById('requested_page_name_js');
	page_name = requested_page_elem.value;

	//if cookie set to yes and we are not zoomed in, refresh
	if(my_cookie == "yes" && page_name == "use_program"){
		setCookie("refresh_use_program_page", "no", 1);
		comp_to_zoom_elem = document.getElementById('component_to_zoom_js');
		comp_to_zoom_elem.value = "";
		processLink("use_program");
	}
}


/* unselects all items from the component box and updates the components array to reflect the clean state */
function clearBox(){
	box = document.getElementById('selected_components_js');
	for (i=0; i<num_components; i++){
		box.options[i].selected = false;
		components_array[i] = 0;
		comp_id = 'component_' + box.options[i].value;
		component = document.getElementById(comp_id);
		component.style.backgroundColor = componentSelectColor;
		component.style.color = componentFontColor;
	}
}


/* selects all ths static components and updates the components array to reflect the new state - for era mode */
function selectAllStatics(my_mode){
	//since we are selecting all the statics, unselect the slideshows
	unselectSlideshowComponents(5);

	//get reference to component box
	box = document.getElementById('selected_components_js');

	//select all statics (in ncep the first static, equiv lat, is missing)
	var start_i = 3;
	if( my_mode == 'ncep' ){
	    //start_i = 4;
            start_i = 3;
        }
	for (i=start_i; i<num_components; i++){
		box.options[i].selected = true;
		components_array[i] = 1;
		comp_id = 'component_' + box.options[i].value;
		component = document.getElementById(comp_id);
		component.style.backgroundColor = componentSelectColorOver;
		component.style.color = componentFontColorOver;
	}
}


/* sets up the slideshow - there is one slideshow script for all three slideshows */
function slideshowLauncher(){
	//update the components
	updateComponents();

	//call wrapper function for loading the show; this will call the corresponding loadX function..
	loadShow();
}


/* processes a link */
function processLink(page_name){
	requested_page_elem = document.getElementById('requested_page_name_js');
	requested_page_elem.value = page_name;
	submitForm();
}


/* handles a mouseover over a component */
function mouseoverComponent(component_num){
	//nothing yet
}


/* handles a mouseout out of a component */
function mouseoutComponent(component_num){
	//nothing yet
}


/* zooms in a specific component - reloads the page with a bigger version of it */
function zoomComponent(component_num){
	comp_zoom_box = document.getElementById('component_to_zoom_js');
	comp_zoom_box.value = component_num;
	processLink("use_program");
}


/* unzooms back a specific component - reloads the page with the original component list */
function unzoomComponent(component_num){
	//go back by clearing the component_to_zoom element and submitting
	//all the settings are saved since we have the selection browser hidden below the page
	comp_zoom_box = document.getElementById('component_to_zoom_js');
	comp_zoom_box.value = "";
	processLink("use_program");
}


/* when the mode is changed this changes the hidden form element change_mode to yes for php to know */
function changeMode(){
	change_mode_elem = document.getElementById('change_mode_js');
	change_mode_elem.value = "yes";
	clearBox();
	processLink("use_program");
}


/* hides the block with the citatins for the current event */
function hideCitationBlock(){
	citation_block_elem = document.getElementById('citation_block_js');
	citation_block_elem.style.visibility = 'hidden';
}


/* when the previous button is pressed is this changes the hidden form element to yes for php to know */
function showPreviousEvent(){
	previous_event_elem = document.getElementById('previous_event_js');
	previous_event_elem.value = "yes";
	processLink("use_program");
}


/* when the next button is pressed is this changes the hidden form element to yes for php to know */
function showNextEvent(){
	next_event_elem = document.getElementById('next_event_js');
	next_event_elem.value = "yes";
	processLink("use_program");
}


/* submits the component browser form to the php script */
function submitForm(){
	document.forms['page_form_js'].submit();
	//document.component_browser_form.submit();
}



//cookie functions -------------->

function getCookie(NameOfCookie)
{

	// First we check to see if there is a cookie stored.
	// Otherwise the length of document.cookie would be zero.
	
	if (document.cookie.length > 0)
	{
	
	// Second we check to see if the cookie's name is stored in the
	// "document.cookie" object for the page.
	
	// Since more than one cookie can be set on a
	// single page it is possible that our cookie
	// is not present, even though the "document.cookie" object
	// is not just an empty text.
	// If our cookie name is not present the value -1 is stored
	// in the variable called "begin".
	
	begin = document.cookie.indexOf(NameOfCookie+"=");
	if (begin != -1) // Note: != means "is not equal to"
	{
	
	// Our cookie was set.
	// The value stored in the cookie is returned from the function.
	
	begin += NameOfCookie.length+1;
	end = document.cookie.indexOf(";", begin);
	if (end == -1) end = document.cookie.length;
	return unescape(document.cookie.substring(begin, end)); }
	}
	return null;
	
	// Our cookie was not set.
	// The value "null" is returned from the function.

}


function setCookie(NameOfCookie, value, expiredays)
{

	// Three variables are used to set the new cookie.
	// The name of the cookie, the value to be stored,
	// and finally the number of days until the cookie expires.
	// The first lines in the function convert
	// the number of days to a valid date.
	
	var ExpireDate = new Date ();
	ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
	
	// The next line stores the cookie, simply by assigning
	// the values to the "document.cookie" object.
	// Note the date is converted to Greenwich Mean time using
	// the "toGMTstring()" function.
	
	document.cookie = NameOfCookie + "=" + escape(value) +
	((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}