// restrictWidth
// ---
// keeps the map limitedto a maximum size of 1050 and the bottom bar
// to match the map + video section (if any); the map is limited to 1050 pixels
// because beyond that size flash adds in white space to the right and left
// the flash is restricted by the maximum size of the map without duplicating itself

function restrictWidth()
{
	var maxMapWidth = 1050;
	var videoWidth = document.getElementById('video').offsetWidth;
	var screenWidth = document.getElementById('widthchecker').offsetWidth;
	
	// if the bottom bar is not as wide as our widthchecker div (100% width)
	// check to see whether to the video is being displayed onscreen or not
	// if the video is onscreen we split the width between them, otherwise
	// make the map fullscreen; always make the bars full width
	
	if( document.getElementById('bottombar').offsetWidth != screenWidth )
	{
		switch( document.getElementById('video').style.display )
		{
			case 'none':
				document.getElementById('map').style.width = screenWidth+'px';
				break;
			default:
				document.getElementById('map').style.width = Math.floor(screenWidth-472)+'px';
				document.getElementById('video').style.width = '472px';
				break;
		}
		document.getElementById('bottombar').style.width = (screenWidth-20)+'px';
		document.getElementById('topbar').style.width = (screenWidth)+'px';
		document.getElementById('tabs').style.width = (screenWidth)+'px';
	}
	
	// check to make sure the map isn't being stretched beyond its limit (remember 
	// we streched it above), if it is limit it to the max width; limit the bars
	// the the width of the map + width of video; if the video is offscreen the width is 0
	
	if( document.getElementById('map').offsetWidth > maxMapWidth )
	{
		document.getElementById('map').style.width = maxMapWidth+'px';
		var barWidth = maxMapWidth + videoWidth;
		document.getElementById('bottombar').style.width = (barWidth-20)+'px';
		document.getElementById('topbar').style.width = (barWidth)+'px';
		document.getElementById('tabs').style.width = (barWidth)+'px';
	}
}

// closeVideo
// ---
// This will be called by the flash to force hide the video player/info
// The function detects whether that section is already open and calls
//  showHideVideo as appropriate

function closeVideo()
{
	var isOpen = (document.getElementById('video').style.display == "none") ? false : true;
	if(isOpen)
	{
	  return showHideVideo( '' );
	}
}

// showVideo
// ---
// This will be called by the flash to force show the video player/info
// The function detects whether that section is already open and either
//  calls showHideVideo or getVideoContent as appropriate

function showVideo( video_id )
{
	var isOpen = (document.getElementById('video').style.display == "none") ? false : true;
	if(isOpen)
	{
	  return getVideoContent( video_id );
	}
	else
	{
	  return showHideVideo( video_id );
	}
}

// showHideVideo
// ---
// animates the video section onto screen, shrinking/moving map to the right
// if the video is already onscreen this function returns false

function showHideVideo( video_id )
{
	
	var animationSeconds = .5;
	var framesPerSecond = 12;
	
	var delay = 1000/framesPerSecond;
	var totalFrames = animationSeconds*framesPerSecond;
	
	var screenWidth = document.getElementById('widthchecker').offsetWidth;
	
	// if video display is none, the video is not onscreen
	// before the video can be animated onscreen is needs to be shown
	// and given a width (the map is offset by this same amount)
	// the target width for the video and map is 50% of screenWidth
	
	var show = (document.getElementById('video').style.display == "none") ? true : false;
	
	if( show )
	{
		document.getElementById('video').style.width = '1px';
		document.getElementById('video').style.display = 'block';
		document.getElementById('map').style.width = document.getElementById('map').offsetWidth - 1;
		
		var videoTargetWidth = 472;
		var mapTargetWidth = screenWidth - videoTargetWidth-1;
	}
	else
	{
		var videoTargetWidth = 1;
		var mapTargetWidth = screenWidth > 1050 ? 1050 : screenWidth;
	}
	
	var mapWidth = document.getElementById('map').offsetWidth;
	var videoWidth = document.getElementById('video').offsetWidth;
	
	var pixelPerFrame = (videoTargetWidth-videoWidth)/totalFrames;

	// Tell the map that we are animating
	document.getElementById('flashmap').SetVariable("js_animation", 1);

	for( var i=1;i<=totalFrames;i++)
	{
		videoWidth += pixelPerFrame;
		mapWidth -= pixelPerFrame;
		
		// check to make sure the video and map do not animate beyond their target width
		
		if( show )
		{
			videoWidth = (videoWidth > videoTargetWidth) ? videoTargetWidth : videoWidth;
			mapWidth = (mapWidth < mapTargetWidth) ? mapTargetWidth : mapWidth;
		}
		else
		{
			// hide all of the text content before starting to shrink the video area
			// this avoids strange wrapping issues
			
			document.getElementById('videoinfo').style.display = "none";
			
			videoWidth = (videoWidth < videoTargetWidth) ? videoTargetWidth : videoWidth;
			mapWidth = (mapWidth > mapTargetWidth) ? mapTargetWidth : mapWidth;
		}
		setTimeout("changeWidth( 'video', '"+Math.floor(videoWidth)+"' )",(delay*i));
		setTimeout("changeWidth( 'map', '"+Math.floor(mapWidth)+"' )",(delay*i));
		setTimeout("changeWidth( 'bottombar', '"+Math.floor(mapWidth+videoWidth-20)+"' )",(delay*i));
		setTimeout("changeWidth( 'topbar', '"+Math.floor(mapWidth+videoWidth)+"' )",(delay*i));
		setTimeout("changeWidth( 'tabs', '"+Math.floor(mapWidth+videoWidth)+"' )",(delay*i));
	}
	
	// We need to load the video at the end
  setTimeout("getVideoContent( "+video_id+" )",(delay*totalFrames));
  
  // We also need to hide the video div at the end (when closing)
  if( videoTargetWidth == 1 )
  {
    setTimeout("document.getElementById('video').style.display='none'",(delay*totalFrames));
  }
  
	// Tell the map that we are done animating at the end
	setTimeout("document.getElementById('flashmap').SetVariable('js_animation', 0)",(delay*totalFrames));
}

// getVideoContent
// ---
// if a video is being requested by javascript, this function passes the video
// id to _video.php and executes the insertVideoContent function when the content is returned

function getVideoContent( video_id )
{
	ajax.open('get', '_video.php?video_id='+video_id,true);
	ajax.onreadystatechange = insertVideoContent;
	ajax.send(null);
	document.getElementById('flashmap').SetVariable("visible_video_id", video_id);
}

// insertVideoContent
// ---
// writes content into the video area

function insertVideoContent()
{
	if( ajax.readyState == 4 )
  {
    document.getElementById('video').innerHTML = ajax.responseText;
  }
}

// changeWidth
// ---
// a generic function called when hiding/showing video that implements
// the actual size changes to the map and video blocks

function changeWidth( theID, theWidth )
{
	block = document.getElementById(theID);
	block.style.width = theWidth + "px";
}

// showHidePopbox
// ---
// toggles the visiblity of the videoinfo area with a popup box

function showHidePopbox( popboxID )
{
	var popbox = document.getElementById(popboxID);
	var videoinfo = document.getElementById('videoinfo');
	if( popbox.style.display == 'none' )
	{
		// if the popupbox is currently being hidden be sure to reset any success messages
		toggleSuccess( popboxID, false );
		
		popbox.style.display = 'block';
		videoinfo.style.display = 'none';
	}
	else
	{
		popbox.style.display = 'none';
		videoinfo.style.display = 'block';
	}
}

// showSuccess
// ---
// hides the form for a popup box and shows a hidden success message

function toggleSuccess( popboxID, success )
{
	var popbox = document.getElementById(popboxID);
	for( var i=0;i<popbox.childNodes.length;i++ )
	{
		if( popbox.childNodes[i].className == "success" )
		{
				popbox.childNodes[i].style.display = success ? 'block' : 'none';
		}
		else if( popbox.childNodes[i].nodeName == "FORM" )
		{
				popbox.childNodes[i].style.display = success ? 'none' : 'block';
				
				// clear any user input from the form fields
				popbox.childNodes[i].reset();
		}
	}
}

// INLINE FUNCTION CALLS:
// ---
// whenever the window loads or is refreshed, execute the following functions
// this previously was contained as attributes in the body tag, but only onload
// is a valid attribute according to the XHTML transitional DTD

window.onresize = restrictWidth;
window.onload = restrictWidth;