﻿var __isLoaded = false;

function pageLoad()
{
	if (__isLoaded) return;
	
	startGallery(false);

	// force the map to recalc its position
	fixNavMapPosition()
	
	// prevent this from running twice
	__isLoaded = true;
}

function startGallery(goToVids)
{
	var slider = $get('gallery_center');
	var images = slider.getElementsByTagName('IMG');
	var found = false;
	
	// if a video is requested, search for first one and play it
	if (goToVids || window.location.hash == '#videos')
	{
		for (var iLoop = 0; iLoop < images.length; iLoop++)
		{
			if (images[iLoop].onclick.toString().indexOf('showGalleryVideo') > -1)
			{
				if (iLoop > 4) slideRight();			
				images[iLoop].onclick();
				found = true;
				break;
			}
		}
	}
	
	// if no videos, select the first image
	if (!found && images.length > 0) images[0].onclick();
}

function showGalleryImage(thumb, path)
{
	// make sure video stops playing
	var player = $get('playerObject');
	if (player && player.Reset) player.Reset();
	
	var img = $get('gallery_image');
	var con = $get('gallery_video');
	img.style.display = 'block', // show the image viewer 
	con.style.display = 'none', // hide the video player

	// now highlight the correct one
	selectGalleryImage(thumb);
	
	img = img.getElementsByTagName('img')[0];
	if (img.src == path) return;
	img.src = path;
}

function showGalleryVideo(thumb, playerPath, videoPath, imagePath)
{
	var img = $get('gallery_image');
	var con = $get('gallery_video');
	var ply = $get('video_player');
	img.style.display = 'none'; // hide the image viewer 
	con.style.display = 'block'; // show the video player

	// now highlight the correct one
	selectGalleryImage(thumb);

	// show the video image as background while loading
	ply.style.backgroundPosition = 'top center';
	ply.style.backgroundRepeat = 'no-repeat';
	ply.style.backgroundImage = 'url(' + imagePath + ')';
		
	// call the next function after a delay
	if (con.timeout) window.clearTimeout(con.timeout);
	con.timeout = window.setTimeout('showGalleryVideoFinish("' + playerPath + '","' + videoPath + '","' + imagePath + '");', 50);
}

function showGalleryVideoFinish(playerPath, videoPath, imagePath)
{
	var con = $get('gallery_video');
	con.timeout = null;
	
	flowplayer('video_player',  {src: playerPath + 'flowplayer.commercial-3.1.5.swf', wmode: 'transparent', cachebusting:$.browser.msie}, {
		key: '#$082659b72f720335864',
		clip: {
			url: videoPath,
			autoPlay: true,
			scaling: 'orig',
		},
		canvas: {backgroundColor: "#b7957b"},
		plugins: {
		   controls: {
			  timeBgColor: '#555555',
			  progressColor: '#a06a40',
			  bufferColor: '#b7957b',
			  backgroundGradient: 'none',
			  sliderColor: '#9c826d',
			  borderRadius: '0',
			  tooltipTextColor: '#ffffff',
			  buttonColor: '#b66a2f',
			  volumeSliderGradient: 'none',
			  tooltipColor: '#5F747C',
			  buttonOverColor: '#763f14',
			  durationColor: '#ffffff',
			  progressGradient: 'medium',
			  timeColor: '#ffffff',
			  backgroundColor: '#ffd76b',
			  sliderGradient: 'none',
			  volumeSliderColor: '#000000',
			  bufferGradient: 'none',
			  height: 24,
			  opacity: 1.0
		   }
		}	
	});
}


function selectGalleryImage(thumb)
{
	var slider = $get('gallery_center');
	var images = slider.getElementsByTagName('IMG');
	for (var iLoop = 0; iLoop < images.length; iLoop++)
	{
		images[iLoop].className = (thumb == images[iLoop] ? 'selected' : '');
	}
}

function hoverArrow(e)
{
	// dont hover disabled arrows
	if (!e.slideEnabled) return;
	
	// toggle the style class
	if (e.id.indexOf('left') != -1)
	{
		e.className = 'leftarrow_hovered';
	}
	else
	{
		e.className = 'rightarrow_hovered';
	}
}

function unhoverArrow(e)
{
	// toggle the style class
	if (e.id.indexOf('left') != -1)
	{
		e.className = 'leftarrow';
	}
	else
	{
		e.className = 'rightarrow';
	}
}

function enableArrow(e, enabled)
{
	if (enabled)
	{
		CommonToolkitScripts.setElementOpacity(e, 1);
	}
	else
	{
		CommonToolkitScripts.setElementOpacity(e, 0.3);
	}
	e.slideEnabled = enabled;
}

function toggleArrows()
{
	var inner = getSlider();	
	var left = $get('gallery_leftarrow');
	var right = $get('gallery_rightarrow');
	var thumbs = inner.getElementsByTagName('IMG');
	
	// up to 5 thumbnails can fit without slider
	if (thumbs.length <= 5)
	{
		// no sliding needed, disable both buttons
		enableArrow(left, false);
		enableArrow(right, false);		
	}
	else
	{
		// there are enough tabs to slide, see which is enabled
		if (parseInt(CommonToolkitScripts.getCurrentStyle(inner, 'left')) == 0)
		{
			// only right 
			enableArrow(left, false);
			enableArrow(right, true);
		}
		else
		{
			enableArrow(left, true);
			enableArrow(right, false);
		}
	}
}

function slideLeft()
{
	var inner = getSlider();
	var outer = $get('gallery_center');
	var left = $get('gallery_leftarrow');
	if (!left.slideEnabled) return false;
	
	// determine the current left and the left to move to values
	var top = parseInt(CommonToolkitScripts.getCurrentStyle(inner, 'top'))
	var fromLeft = parseInt(CommonToolkitScripts.getCurrentStyle(inner, 'left'))
	var toLeft = 0;
	if (fromLeft == toLeft) return;
	
	if (outer.sliding) return;
	outer.sliding = true;
	
	outer.slide = new AjaxControlToolkit.Animation.MoveAnimation(inner, .5, 20, toLeft, top, false, 'px');
	outer.slide.onEnd = finishSlide;
	outer.slide.play();
}

function slideRight()
{
	var inner = getSlider();
	var outer = $get('gallery_center');
	var right = $get('gallery_rightarrow');
	if (!right.slideEnabled) return false;
			
	// measure the slider and its container
	var innerWidth = measureSliderWidth();
	var outerWidth = CommonToolkitScripts.getBounds(outer).width;
	
	// determine the current left and the left to move to values
	var top = parseInt(CommonToolkitScripts.getCurrentStyle(inner, 'top'))
	var fromLeft = parseInt(CommonToolkitScripts.getCurrentStyle(inner, 'left'))
	var toLeft = outerWidth - innerWidth;
	if (fromLeft == toLeft) return;
	
	if (outer.sliding) return;
	outer.sliding = true;
	
	outer.slide = new AjaxControlToolkit.Animation.MoveAnimation(inner, .5, 20, toLeft, top, false, 'px');
	outer.slide.onEnd = finishSlide;
	outer.slide.play();
}

function finishSlide()
{
	window.setTimeout('finishSlideAsync();', 0);
}

function finishSlideAsync()
{
	var outer = $get('gallery_center');
	if (outer.slide) outer.slide.dispose();
	outer.sliding = false;
	
	// toggle the buttons based on the slide
	toggleArrows();
}

function getSlider()
{
	var center = $get('gallery_center');
	var divs = center.getElementsByTagName('DIV');
	for (var iLoop=0; iLoop < divs.length; iLoop++)
	{
		if (divs[iLoop].id == 'gallery_slider' && 
			 CommonToolkitScripts.getCurrentStyle(divs[iLoop], 'display') != 'none')
		{
			return divs[iLoop];
		}
	}
}

function measureSliderWidth()
{
	var con = getSlider();
	
	// estimate the total width of all images by measuring the
	// width of one image and its margin and then multiply by tabs
	var thumbs = con.getElementsByTagName('IMG');
	var width = CommonToolkitScripts.getSize(thumbs[0]).width;
	width = (width * thumbs.length);
	width += parseInt(CommonToolkitScripts.getCurrentStyle(thumbs[0], 'marginRight')) * (thumbs.length - 1);
	
	return width;
}

