/* External variables set in JavaScriptImageGallery.ascx.cs and their defaults */
// var widthLargeOverride = 0;
// var widthSmallOverride = 0;
// var transitionTimeOverride = 0;
// var autoAnimate = 'false';
// var smallImage1 = '';
// var smallImage2 = '';
// var smallImage3 = '';
// var smallImage4 = '';
// var smallImage5 = '';

/* default variable settings */
var widthLarge = 769;
var widthSmall = 25;
var heightSmall = 228;
var transitionTime = 500;
var itemCount = 1;
var timer = 0;

/* delay in miliiseconds */
var showTime = 2000;

var _animationStarted = false;

// PROGRAM STARTS -----------------------------------------------------------------------------//
var $j = jQuery.noConflict();
$j(document).ready(function() {

	/* Take into account manual overrides */
	if (transitionTimeOverride != null && transitionTimeOverride > 0) {
		transitionTime = transitionTimeOverride;
	}

	/* automatic variable settings */
	widthLarge = $j('#InfoItem1 .MainImage img').outerWidth();
	//heightSmall = $j('#InfoItem1 .MainImage img').outerHeight();

	/* initialise some default heights and widths if they aren't loaded properly */
	if (widthLarge < 100) { widthLarge = 595; }
	if (heightSmall < 50) { heightSmall = 200; }

	/* Take into account manual overrides */
	if (widthLargeOverride > 0) { widthLarge = widthLargeOverride; }
	if (widthSmallOverride > 0) { widthSmall = widthSmallOverride; }

	/* Initial set up */
	SetSmallImage(smallImage1, 'InfoItem1');
	SetSmallImage(smallImage2, 'InfoItem2');
	SetSmallImage(smallImage3, 'InfoItem3');
	SetSmallImage(smallImage4, 'InfoItem4');
	SetSmallImage(smallImage5, 'InfoItem5');

	/* Set the default placement of the link text */
	//$j('#InfoItem1 .Text').css("top", (heightSmall / 5) + "px");
	//$j('#InfoItem1 .Text').css("right", (widthLarge / 6) + "px");

	/* Set default Expanded / Collapsed heights / widths */
	$j('.Expanded').css("width", widthLarge);
	$j('.Collapsed').css("width", widthSmall);
	$j('.Text').css("width", widthLarge);


	
	/* start the timer */
	if(autoAnimate){
		timer = setTimeout("autoPlay()", transitionTime * 2);
	}
	
	
	$j('.InfoItem').click(function() {		
		clearTimeout(timer);
		if (!_animationStarted) {
			_animationStarted = true;
			itemCount = parseInt(this.id.slice(8));
			if (Collapse(this)) {
				Expand(this);
				ExpandText(this);
			}
			// Need to set a delay (timeout) on the user being able to click and start more transitions
			// otherwise the display gets messed up
			
			setTimeout(function() { _animationStarted = false; }, transitionTime - 20);
			if(autoAnimate){
				timer = setTimeout("autoPlay()", transitionTime * 2);
			}
		}
	});
});


// METHODS ----------------------------------------------------------------------------------//
function autoPlay(){
	var element; 
		
	if (!_animationStarted) {
				
		if (itemCount > 5) {itemCount = 1; }
		
		element = document.getElementById('InfoItem' + itemCount);
		
		_animationStarted = true;
		if (Collapse(element)) {
			Expand(element);
			ExpandText(element);
		}
		// Need to set a delay (timeout) on the user being able to click and start more transitions
		// otherwise the display gets messed up
		setTimeout(function() { _animationStarted = false; itemCount++;}, transitionTime);// * 3.5);
	}
	
	timer = setTimeout("autoPlay()", transitionTime * 3.5);
}


function SetSmallImage(smallImageURL, infoBoxID){
	if(smallImageURL != null && smallImageURL != ''){
		$j('#' + infoBoxID + ' .SmallImage').css("background-image", "url('" + smallImageURL + "')");
		$j('#' + infoBoxID + ' .SmallImage').css("background-position", "bottom right");
		$j('#' + infoBoxID + ' .SmallImage').css("background-repeat", "no-repeat");
		$j('#' + infoBoxID + ' .SmallImage').css("height", heightSmall);
		$j('#' + infoBoxID + ' .SmallImage').css("width", widthSmall);		
	}
}

function Collapse(element) {
	var id = '#' + element.id;
	var outcome = false;
	// Collapse any already expanded boxes
	if ($j('.Expanded').length == 1) {
		$j('.Expanded').each(function() {
		if (this.id != element.id) {
				$j(this.id + ' .Expanded').animate({ "width": widthSmall + "px" }, transitionTime, "swing");
				$j(this.id + ' .Expanded .Text').hide("fast");
				outcome = true;
			}
		});
	}
	return outcome;	
}

function Expand(element) {
	var id = '#' + element.id;
	
	//$j('.Expanded').animate({ "width": widthSmall + "px" }, transitionTime + 7, "swing");
	$j('.Expanded .Text').hide(transitionTime);
	
	
	if ($j(id).hasClass('Expanded')) {		
		$j(id).animate({ "width": widthSmall + "px" }, transitionTime, "swing");
		$j(id).removeClass('Expanded');
		$j(id).addClass('Collapsed');		
	} else {		
		$j(id).animate({ "width": widthLarge + "px" }, transitionTime, "swing");
		$j(id).removeClass('Collapsed');
		$j(id).addClass('Expanded');
	}	
	
	$j('.Expanded').each(function() {
		if (this.id != element.id) {
			$j(this).animate({ "width": widthSmall + "px" }, transitionTime - 4, "swing");
			$j(this).removeClass('Expanded');
			$j(this).addClass('Collapsed');
		}
	});		
}

function ExpandText(element){
	var id = '#' + element.id;
	$j(id + ' .Text').show(transitionTime);	
}