/*
Simple js functions for view version of the protected area
*/

function deactivateTab(tabName) {
	document.getElementById(tabName + "Tab").className="";
	document.getElementById(tabName).className="hidden";		
}

function activateTab(tabName) {
	document.getElementById(tabName + "Tab").className="selected";
	document.getElementById(tabName).className="visible";		
}

function toggle(elemName) {
	elem = document.getElementById(elemName);
	if(elem.style.display=="none") {
		elem.style.display = "";
	}
	else {
		elem.style.display = "none";
	}
}

function toggleForm(elemName, whichForm) {
	var formArea=document.getElementById("edit"+elemName);
	var addForm=document.getElementById("edit"+elemName+"Form");
	var toggled = false;
	// currently form is off
	if (formArea.style.display == "none") {
		formArea.style.display = "";
		toggled = true;
	}
	// toggle off any form 
	if (whichForm == "both") {
		formArea.style.display = "none";
	}
	else if (whichForm == "add") {
		// form is on and in "add" mode, toggle off if hit "add" again
		if ((formArea.style.display == "") && 
			(document.getElementById("delete"+elemName+"Label").style.display == "none") && 
			!toggled) {
			formArea.style.display = "none";
		}
		// hide the delete field when adding a new element
		else {
			// hide the "delete" checkbox if it's a new item
			addForm.elements[0].style.display = "none";
			document.getElementById("delete"+elemName+"Label").style.display = "none";
			// clear out the entry form for the new data
			// exclude clearing to "cancel" and "submit" buttons
			for (var i = 1; i < addForm.elements.length-2; i++) {
				addForm.elements[i].value = "";
			}
		}
	}
	else {
		// form is on and in "edit" mode, toggle if hit "edit" again
		if ((formArea.style.display == "") &&
			(document.getElementById("delete"+elemName+"Label").style.display == "") && !toggled ) {
			formArea.style.display = "none";
		}
		else {
			// refresh edit data if form had been cleared for add
			if (document.getElementById("delete"+elemName+"Label").style.display == "none") {
				if (elemName == "Video") {
					shift('videos', 0);
				} else if (elemName == "Image") {
					shift('images', 0);
				}
				else { // story
					shift('stories', 0);
				}
			}
			addForm.elements[0].style.display = "";
			document.getElementById("delete"+elemName+"Label").style.display = "";
		}
	}
}

function checkVideoForm() { 
		
	var valid = true;
	var editForm=document.getElementById("editVideoForm");
	var deleteVideo = editForm.elements[0].checked;
	if (!deleteVideo)
	{
		var url = editForm.elements[1].value;
		var caption = editForm.elements[2].value;
		var credits = editForm.elements[3].value;
	
		if (url.substring(0,31) != ("http://www.youtube.com/watch?v="))
		{
			alert("Unable to save.  The video must be a youtube video and the url must start with: http://www.youtube.com/watch?v=");
			valid = false;
		}
		else if (caption.length > 60)
		{
			alert("Unable to save. The caption must be no more than 60 characters.  Please shorten your caption.");
			valid = false;
		}
	}
	return valid;
}

function validateFlickrURL(url) 
{
	if (url.length < 11)
		return false;
	
	if (url.substring(0, 11) != "http://farm")
		return false;
	
	var index = url.indexOf(".");
	if (index == -1)
		return false;
	
	var main = url.substring(index+1, index+19);
	if (main != "static.flickr.com/")
		return false;
	
	var extension = url.substring(url.lastIndexOf(".")+1, url.length);
	if (extension != "jpg" && extenstion != "png" && extension != "gif")
		return false;
	
	return true;
}

function validatePicassaURL(url)
{
	return (!( (url.length < 28) || (url.substring(0, 28) != "http://picasaweb.google.com/")));
}

function validatePanoramioURL(url)
{
	return (url.indexOf("panoramio.com")!=-1);
}


function checkImageForm() { 
	
	var valid = true;
	var editForm=document.getElementById("editImageForm");
	var deleteImage = editForm.elements[0].checked;
	var agreeToTerms = editForm.elements[4].checked;
	
	if (!deleteImage)
	{
		var url = editForm.elements[1].value;
		var caption = editForm.elements[2].value;
		var credits = editForm.elements[3].value;
		
		if (caption.length > 60)
		{
			alert("Unable to save. The caption must be no more than 60 characters.  Please shorten your caption.");
			valid = false;
		}
		/*else if (! (validatePicassaURL(url) || validateFlickrURL(url)))
		{
			alert("Unable to save. The url must be be a flickr photo ( for example http://farm1.static.flickr.com/2/1418878_1e92283336_m.jpg ) or a picasa photo, and must begin with http://");
			valid = false;
		}*/
		else if (! (validatePanoramioURL(url) || validateFlickrURL(url)))
		{
			alert("Unable to save. The url must be be a flickr photo ( for example http://farm1.static.flickr.com/2/1418878_1e92283336_m.jpg ) " +
					"or a panoramio photo (for example http://static.panoramio.com/photos/original/1328536.jpg), and must begin with http://");
			valid = false;
		}
		/*else if (!validateFlickrURL(url))
		{
			alert("Unable to save. The url must be be a flickr photo ( for example http://farm1.static.flickr.com/2/1418878_1e92283336_m.jpg ) and must begin with http://");
			valid = false;
		}*/
		else if (! agreeToTerms)
		{
			valid = false;
		}
	}
	
	return valid;
}

function checkStoryForm() { 
	var valid = true;
	var editForm=document.getElementById("editStoryForm");
	var deleteStory = editForm.elements[0].checked;
	if (!deleteStory)
	{
		var snippet = editForm.elements[1].value;
		var text = editForm.elements[2].value;
		var url = editForm.elements[3].value;
		if (snippet.length > 60)
		{
			alert("Unable to save. The snippet must be no more than 60 characters.  Please shorten your snippet.");
			valid = false;
		}
		else if (text.length > 600)
		{
			alert("Unable to save. The text must be no more than 600 characters.  Please shorten your text.");
			valid = false;
		}
		if (valid && url!="")
		{
			var index = url.indexOf("http://");
			var index2 = url.indexOf("https://");
			if (index != 0 && index2 != 0)
			{
				alert("Unable to save. The url must begin with http:// or https://.");
				valid = false;
			}
		}
	}
	
	return valid;
}

 
/* Cycles through the images and videos on the Protected Area view page.
... in a very ugly way
*/
 
function shift(container, delta) {
	
	var formName = "Image";
	if (container.toLowerCase() == "videos")
		formName = "Video";
	else if (container.toLowerCase() == "stories")
		formName = "Story";
	toggleForm(formName, "both");
	
	cElem = document.getElementById(container);
	if(container == "images" && (media["images"].length > 0)) {
		newIndex = curImage + delta;
		if(newIndex < 0) { 
			newIndex = 0; 
		}
		else if (newIndex >= media["images"].length) { 
			newIndex = media["images"].length - 1; 
		}
		cElem.innerHTML = "<img src='" + media["images"][newIndex]["url"] + "' />";
		cElem.innerHTML += '<br/><em>Credits:&nbsp;' +
						media["images"][newIndex]["credits"] +
						'</em><br/>' + media["images"][newIndex]["caption"];			
		curImage = newIndex;
		
		if (newIndex == 0) {
			document.getElementById("leftNavArrowImage").style.display = "none";
			document.getElementById("rightNavArrowImage").style.display = "";
		}
		else if (newIndex == media["images"].length-1) {
			document.getElementById("leftNavArrowImage").style.display = "";
			document.getElementById("rightNavArrowImage").style.display = "none";
		}
		else {
			document.getElementById("leftNavArrowImage").style.display = "";
			document.getElementById("rightNavArrowImage").style.display = "";
		}
		
		document.getElementById("curImageIndex").innerHTML = newIndex + 1;
		
		/* update the edit form contents as well 
		var editForm=document.getElementById("editImageForm");
		editForm.elements[1].value = media["images"][newIndex]["url"];
		editForm.elements[2].value = media["images"][newIndex]["caption"];
		editForm.elements[3].value = media["images"][newIndex]["credits"];
		editForm.elements[5].value = media["images"][newIndex]["key"];
		*/
		
		document.getElementById("image_url").value = media["images"][newIndex]["url"];
		document.getElementById("image_caption").value = media["images"][newIndex]["caption"];
		document.getElementById("image_credits").value = media["images"][newIndex]["credits"];
		document.getElementById("image_key").value = media["images"][newIndex]["key"];
		
	}
	else if(container == "videos" && (media["videos"].length > 0)) {
		newIndex = curVideo + delta;
		if(newIndex < 0) { 
			newIndex = 0; 
		}
		else if (newIndex >= media["videos"].length) { 
			newIndex = media["videos"].length - 1; 
		}
		cElem.innerHTML = '<object width="400" height="320">' +
						'<param name="movie" value="http://www.youtube.com/v/' + 
						media["videos"][newIndex]["url"] + '&rel=1"></param>' +
						'<param name="wmode" value="transparent"></param>' +
						'<embed src="http://www.youtube.com/v/' + media["videos"][newIndex]["url"] +
						'&rel=1" type="application/x-shockwave-flash" wmode="transparent"'
						+'width="400" height="320"></embed></object>';
		cElem.innerHTML += '<br/><em>Credits:&nbsp;' +
						media["videos"][newIndex]["credits"] +
						'</em><br/>' + media["videos"][newIndex]["caption"];		
		curVideo = newIndex;
		
		if (media["videos"].length > 1) {
			if (newIndex == 0) {
				document.getElementById("leftNavArrowVideo").style.display = "none";
					document.getElementById("rightNavArrowVideo").style.display = "";
			}
			else if (newIndex == media["videos"].length-1) {
				document.getElementById("leftNavArrowVideo").style.display = "";
				document.getElementById("rightNavArrowVideo").style.display = "none";
			}
			else {
				document.getElementById("leftNavArrowVideo").style.display = "";
				document.getElementById("rightNavArrowVideo").style.display = "";
			}
		}
		
		document.getElementById("curVidIndex").innerHTML = newIndex + 1;
		
		/* update the edit form contents as well 
		var editForm=document.getElementById("editVideoForm");
		editForm.elements[1].value = "http://www.youtube.com/watch?v=" + media["videos"][newIndex]["url"];
		editForm.elements[2].value = media["videos"][newIndex]["caption"];
		editForm.elements[3].value = media["videos"][newIndex]["credits"];
		editForm.elements[4].value = media["videos"][newIndex]["key"]; */
		
		
		document.getElementById("video_url").value = "http://www.youtube.com/watch?v=" + media["videos"][newIndex]["url"];
		document.getElementById("video_caption").value = media["videos"][newIndex]["caption"];
		document.getElementById("video_credits").value = media["videos"][newIndex]["credits"];
		document.getElementById("video_key").value = media["videos"][newIndex]["key"];
		
		
	}
	else if(container == "stories") {
		cElem = document.getElementById("fullStory");
		newIndex = curStory + delta;
		if (newIndex < 0) {
			newIndex = 0;
		}
		else if (newIndex >= fullStories.length) { 
			newIndex = fullStories.length - 1; 
		}
		cElem.innerHTML = "<h4>" + fullStories[newIndex]["snippet"] +"</h4>" + fullStories[newIndex]["text"];
		if (fullStories[newIndex]["kmlUrl"].length > 0) {
			cElem.innerHTML += "<p><a href='" + fullStories[newIndex]["kmlUrl"] + "'>More Information</a></p>";
		}
		curStory = newIndex;
		document.getElementById("curStoryIndex").innerHTML = newIndex + 1;
		if (newIndex == 0) {
			document.getElementById("leftNavArrowStory").style.display = "none";
			document.getElementById("rightNavArrowStory").style.display = "";
		}
		else if (newIndex == fullStories.length-1) {
			document.getElementById("leftNavArrowStory").style.display = "";
			document.getElementById("rightNavArrowStory").style.display = "none";
		}
		else {
			document.getElementById("leftNavArrowStory").style.display = "";
			document.getElementById("rightNavArrowStory").style.display = "";
		}
		var editForm = document.getElementById("editStoryForm");
		if (editForm) {
			/*
			editForm.elements[1].value = fullStories[newIndex]["snippet"];
			editForm.elements[2].value = fullStories[newIndex]["text"];
			editForm.elements[3].value = fullStories[newIndex]["kmlUrl"];
			editForm.elements[4].value = fullStories[newIndex]["key"]; */
			
			document.getElementById("story_snippet").value = fullStories[newIndex]["snippet"];
			document.getElementById("story_text").value = fullStories[newIndex]["text"];
			document.getElementById("story_kmlUrl").value = fullStories[newIndex]["kmlUrl"];
			document.getElementById("story_key").value = fullStories[newIndex]["key"];
		}
	}
}

function resetStoryIndex()
{
	document.getElementById("curStoryIndex").innerHTML = 1;
	curStory = 0;
}