// JavaScript Document

// Global variables
var gScoreType = 0;

// Constants
var kScoreHarmonica = 0;
var kScoreGuitar = 1;

function SetupMDAWebPage() {
//	SetupMenu();
	MakeSlideShow();
}

function ChangeArrowImage(arrowID, newImageFile)
{
	// Find the object that represent the imamge element.
	var image = document.getElementById(arrowID);
	
	// Change the picture
	image.src = newImageFile;
}

//-----------------------------------------------------------------
// This function changes the key of iMonica
//-----------------------------------------------------------------
function KeyChanged(selectName)
{
	var selectObj = document.getElementById(selectName);
	var selectedKey = selectObj.options[selectObj.selectedIndex];
	var imgHead = "images/Keys/Key_";
	var imgTail = ".png";
	var newImageName = imgHead + selectedKey.value + imgTail;
	
	var image = document.getElementById("KeyImage");
	image.src = newImageName;
}

//-----------------------------------------------------------------
// Gets the prefix that indicates the current type of music score.
// Returns HScore_ for Harmonica and GScore_ for Guitar
//-----------------------------------------------------------------
function getScorePrefix()
{
	var radios = document.getElementsByName("ScoreRadio");

	// Get the current score type index.
	if(radios) {
		var i =  0;
		while( i < radios.length ) {
			if(radios.item(i).checked) {
				gScoreType = i;
				break;
			}
			i++;
		}
	}
	else
		alert("The radio was not found");
	
	// Set the score type accordingly.
	var prefix;	
	if(gScoreType == kScoreHarmonica)
		prefix = "HScore_";
	else
		prefix = "GScore_";
		
	return prefix;
}

//-----------------------------------------------------------------
// Chooses between Harmonica score and Guitar score.
//-----------------------------------------------------------------
function ScoreChanged(dirName) {
	// Get the songs directory.
	var imgDir = "songs/" + dirName + "/";
	
	// Find the selected song name.
	var songList = document.getElementById("SongList");
	var selectedSong = songList.options[songList.selectedIndex];
	var fileName = selectedSong.value;	

	// Find the current selection of score type as a prefix.
	var scorePrefix = getScorePrefix();
	
	// Use PNG file.
	var imgTail =".png";
	
	// Combine all the information to obtain the full filename.
	var fullFileName = imgDir + scorePrefix + fileName + imgTail;

	// Set the score image.
	var image = document.getElementById("Score");
	image.src = fullFileName;
}

//-----------------------------------------------------------------
// Song selection has changed.
// Hides the current video and updates the score.
//-----------------------------------------------------------------
function SongChanged(dirName)
{
	// Hide the video
	HideVideo();
	
 	// Update the score.
	ScoreChanged(dirName);
}	

//-----------------------------------------------------------------
// Gets the URL of the selected video.
//-----------------------------------------------------------------
function getSelectedVideo()
{
	// Get the video URL of the selected song.
	var songList = document.getElementById("SongList");
	var videoList = document.getElementById("VideoList");
	var selectedVideo = videoList.options[songList.selectedIndex];
	
	return selectedVideo.value;
}

//-----------------------------------------------------------------
// Show and Hide the vide frame.
// Actual implemantation.
//-----------------------------------------------------------------
function toggleVideoImpl(on)
{
	var staticWrapper = document.getElementById("StaticWrapper");
	var videoWrapper = document.getElementById("VideoWrapper");
	var videoFrame = document.getElementById("VideoFrame");

	if( on == 0 )
	{
		// Hide video
		
		staticWrapper.style.display = "block";	// Show the static frame.
		videoWrapper.style.display = "none";	// Hide the video frame.
		videoFrame.src = "";					// Remove the video link.
	}
	else {
		// Show video

		staticWrapper.style.display = "none";	// Hide the static frame.
		videoWrapper.style.display = "block";	// Show the video frame.
		videoFrame.src = getSelectedVideo();	// Set to the selected video link.
	}
}

//-----------------------------------------------------------------
// Shows and Hides the vide frame.
// Calls toggleVideoImpl().
//-----------------------------------------------------------------
function ToggleVideo() {
	var videoButton = document.getElementById("VideoButton");

	// Toggle the video button name
	if(videoButton.value == "Show Video") {
		on = 1;
		videoButton.value = "Hide Video";		// Set the button title to "Hide"
	}
	else {
		on = 0;
		videoButton.value = "Show Video";		// Set the button title to "Show"
	}
		
	toggleVideoImpl(on);
}

//-----------------------------------------------------------------
// Shows the vide frame.
// Calls toggleVideoImpl().
//-----------------------------------------------------------------
function ShowVideo() {
	// Call the implementation function
	toggleVideoImpl(1);
	
	// Set the video button title to "Hide Video"
	var videoButton = document.getElementById("VideoButton");
	videoButton.value = "Hide Video";
}

//-----------------------------------------------------------------
// Hides the vide frame.
// Calls toggleVideoImpl().
//-----------------------------------------------------------------
function HideVideo() {
	// Call the implementation function
	toggleVideoImpl(0);
	
	// Set the video button title to "Show Video"
	var videoButton = document.getElementById("VideoButton");
	videoButton.value = "Show Video";
}

// Initialize DW Web Page.
window.onload = SetupMDAWebPage;