/*
 * File: pictureMenu.js
 *
 * Summary: Used in the picture menu of the SDCOOS main page
 *
 * Changes:
 */

/*
 * pictureNum - which picture to start with
 * pictureSpeed - How quickly to change the pictures
 */
pictureNum = 0;
pictureSpeed = 5000;

/*
 * Array containing the pictures
 */
pictures = new Array();
pictures[0] = new Image();
pictures[0].src = "./imgs/pictureMenu_OceanData2.jpg";
pictures[1] = new Image();
pictures[1].src = "./imgs/pictureMenu_Weather2.jpg";
pictures[2] = new Image();
pictures[2].src = "./imgs/pictureMenu_Satellite.jpg";
pictures[3] = new Image();
pictures[3].src = "./imgs/pictureMenu_WaterQuality2.jpg";

/*
 * Array containing where the pictures link to
 */
url = new Array();
url[0] = "./data/hfrnet/index.php?r=5";
url[1] = "./data/mets/index.php?r=5";
url[2] = "./data/ocm/ocm_regions.php?r=5";
url[3] = "./data/waterquality/index.php?r=5";

/*
 * Array containing the titles and summarys of the pictures
 */
title = new Array();
title[0] = "Ocean Data";
title[1] = "Weather";
title[2] = "Satellite";
title[3] = "Water Quality";

summary = new Array();
summary[0] = "Real-time ocean surface currents measured by HF radar";
summary[1] = "Rrecent meteorological stations and observations";
summary[2] = "Satellite view of California using MODIS, OCM and GOES";
summary[3] = "View total coliforms, fecal coliforms and enterococci per 100 mL sample";

function rotatePicture(){
	var st_Index;
	
	if (pictureNum < pictures.length - 1 ) pictureNum++;
	else pictureNum = 0;
	document.getElementById('pictureMenuPicture').src = pictures[pictureNum].src;
	document.getElementById('pmTitle').innerHTML = title[pictureNum];
	document.getElementById('pmSummary').innerHTML = summary[pictureNum];
		
	highlightBorder( pictureNum + 1 );
	timerID = setTimeout('rotatePicture()', pictureSpeed );
}

function highlightBorder(indexNum){

	var pixelsBetweenButtons = 20;

	/* 
	 * Change the highlighted index styles
	 */
	var leftPixel = pixelsBetweenButtons * (indexNum - 1) - 2;
	document.getElementById( 'pictureIndex' + indexNum ).style.top = '-2px';
	document.getElementById( 'pictureIndex' + indexNum ).style.left = leftPixel + 'px';
	document.getElementById( 'pictureIndex' + indexNum ).style.border = '2px solid white';
	
	/* 
	 * Change the non highlighted index styles
	 */
	for( i=1; i<=4; i++ ){

		/* If this is the current index num then skip it */
		if( i==indexNum ) { continue }
		
		leftPixel = pixelsBetweenButtons * (i - 1);
		document.getElementById( 'pictureIndex' + i ).style.border = 'none';
		document.getElementById( 'pictureIndex' + i ).style.top = '0px';
		document.getElementById( 'pictureIndex' + i ).style.left = leftPixel + 'px';		
	}
}

function openWindow(){
	window.location.href = url[pictureNum];
}

function gotoPicture(obj){
	var index = obj.id;
	switch (index){
		case "pictureIndex1":
			pictureNum = 0;
			break;
		case "pictureIndex2":
			pictureNum = 1;
			break;
		case "pictureIndex3":
			pictureNum = 2;
			break;
		case "pictureIndex4":
			pictureNum = 3;
			break;
	}
	highlightBorder( pictureNum + 1 );
	document.getElementById('pictureMenuPicture').src = pictures[pictureNum].src;
	document.getElementById('pmTitle').innerHTML = title[pictureNum];
	document.getElementById('pmSummary').innerHTML = summary[pictureNum];
	clearTimeout(timerID);
	timerID = setTimeout('rotatePicture()', pictureSpeed );
}