/* External variables set in JavaScriptImageGallery.ascx.cs and their defaults*/
// var fade = false;
// var showDirection = false;
// var showNumbers = false;
// var showPlayPause = false;
// var showInfoOnRight = false;
// var heightOverride = 0;
// var widthOverride = 0;
// var fadeSpeed = 4.5;
// var canScroll = false;


/* default variable settings */
var timer = 0;
var current = 1;
var button = 1;
var started = true;

/* play / pause variables */
var imgPath = "/site/resources/images/scroller";
var pauseOn = "/pause_on.gif";
var pauseOff = "/pause_off.gif";
var playOn = "/play_on.gif";
var playOff = "/play_off.gif";
var nextOn = "/jsscroller_right_arrow.gif";
var nextOff = "/jsscroller_right_arrow.gif";
var prevOn = "/jsscroller_left_arrow.gif";
var prevOff = "/jsscroller_left_arrow.gif";


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

var $j = jQuery.noConflict();

// PROGRAM STARTS -----------------------------------------------------------------------------//
if (($j == null || $j == undefined) && (jQuery != null && jQuery != undefined)) {
	$j = jQuery.noConflict();
}
$j(document).ready(function() {

	/* automatic variable settings */
	pictures = $j('#buttons div').length;
	width = $j('#p1 img').outerWidth();
	height = $j('#p1 img').outerHeight();
	areaWidth = $j('#Scroller').parent('div').outerWidth();
	areaHeight = $j('#Scroller').parent('div').outerHeight();

	/* initialise some default heights and widths if they aren't loaded properly */
	if (areaWidth < 100) { areaWidth = 910; }
	if (areaHeight < 100) { areaHeight = 100; }
	if (width < 100) { width = areaWidth; }
	if (height < 100) { height = areaHeight; }

	/* Take into account manual overrides */
	if (widthOverride > 0) {
		width = widthOverride;
		areaWidth = widthOverride;
	}
	if (heightOverride > 0) {
		height = heightOverride;
		areaHeight = heightOverride;
	}

	if (fadeSpeed != null)
		showTime = (fadeSpeed * 1000); //convert to milliseconds

	/* initial set up */
	$j('#Scroller').css({ "height": areaHeight + "px", "width": areaWidth + "px" });
	$j('#wrap').css({ "height": height + "px", "width": width + "px" });
	$j('#buttons #b1').css("backgroundPosition", "left top");
	$j('#buttons #b1').css("background-image", "url('/site/resources/images/scroller/number_on.gif')");
	$j('#buttons #b1 b').css("color", "#333");

	//$j('.InfoBox').css("left", "0");
	$j('.InfoBox').css("width", (areaWidth / 3) + "px");
	$j('.InfoBox').css("top", "0"); //((height - 50) / 4));
	$j('.InfoBox').css("width", "360px"); // (areaWidth / 3) + "px");


	/* show / hide options */
	if (!showDirection) { $j('#directions').css("display", "none"); }
	if (!showNumbers) { $j('#buttons').css("display", "none"); }
	if (!showPlayPause) { $j('#playpause').css("display", "none"); }

	if (showInfoOnRight) {
		$j('.InfoBox').css("right", "20px");						
	}
	else { $j('.InfoBox').css("left", "auto"); }

	// FADE
	if (fade && canScroll) {
		$j('.entry').hide();
		$j('#p1').fadeIn('slow');
		setHeight(1);
	}
	else if (canScroll) {
		$j('#p1').animate({ "left": "0px" }, width, "swing");
		$j('#slide .entry').css("left", width);

		//$j('.InfoBox .Links a').css("left", "auto"); //This is needed to show the content links in the content 'InfoBox'
	}

	/* hide the loading image */
	$j('#loading').css("display", "none");

	/* start the timer */
	if (canScroll)
		timer = setTimeout("autoPlay()", showTime);

	/* next/previous */
	$j("#next").click(function() {
		clearTimeout(timer);
		button = current;
		current++;
		if (current > pictures) { current = 1; }
		animateLeft(current, button);
		timer = setTimeout("autoPlay()", showTime);
	});

	$j("#next").mouseover(function() { $j("#next img").attr('src', (imgPath + nextOn)); });
	$j("#next").mouseout(function() { $j("#next img").attr('src', (imgPath + nextOff)); });


	$j("#previous").click(function() {
		clearTimeout(timer);
		button = current;
		current--;
		if (current == 0) { current = pictures; }
		animateRight(current, button);
		timer = setTimeout("autoPlay()", showTime);
	});

	$j("#previous").mouseover(function() { $j("#previous img").attr('src', (imgPath + prevOn)); });
	$j("#previous").mouseout(function() { $j("#previous img").attr('src', (imgPath + prevOff)); });


	/* number button */
	$j("#buttons div").click(function() {
		clearTimeout(timer);
		button = current;
		clickButton = $j(this).attr('id');
		current = parseInt(clickButton.slice(1));
		if (current > button) { animateLeft(current, button); }
		if (current < button) { animateRight(current, button); }
		timer = setTimeout("autoPlay()", showTime);
	});


	$j("#buttons div b").mouseover(function() {
		if ($j(this).css("background-image") != "url('/site/resources/images/scroller/number_on.gif')") {
			$j(this).css("background-image", "url('/site/resources/images/scroller/number_on.gif')");
			$j(this).css("color", "#333");
		}
	});

	$j("#buttons div b").mouseout(function() {
		if ($j(this).css("background-image") != "url('/site/resources/images/scroller/number_off.gif')") {
			$j(this).css("background-image", "url('/site/resources/images/scroller/number_off.gif')");
			$j(this).css("color", "#fff");
		}
	});

	/* play/pause */
	$j("#playpause img").click(function() {
		if (started) {
			$j("#playpause img").attr('src', (imgPath + pauseOff));
			started = false;
			clearTimeout(timer);
		}
		else {
			$j("#playpause img").attr('src', (imgPath + playOff));
			started = true;
			autoPlay();
		}
	});

	$j("#playpause img").mouseover(function() {
		if (started)
			$j("#playpause img").attr('src', (imgPath + pauseOn));
		else
			$j("#playpause img").attr('src', (imgPath + playOn));
	});

	$j("#playpause img").mouseout(function() {
		if (started)
			$j("#playpause img").attr('src', (imgPath + pauseOff));
		else
			$j("#playpause img").attr('src', (imgPath + playOff));
	});

});


// METHODS ----------------------------------------------------------------------------------//
function autoPlay() {
	button = current;
	current++;
	if (current > pictures) { current = 1; }
	animateLeft(current, button);
	timer = setTimeout("autoPlay()", showTime);
}

function PauseScroller() {
    started = false;
    clearTimeout(timer);

}

function PlayScroller() {
    started = true;
    autoPlay();
}
function animateLeft(current, button) {
	if (fade) {
		$j('#p' + button).fadeOut('slow');
		$j('#p' + current).fadeIn('slow');
		setHeight(current);
	}
	else {
		$j('#p' + current).css("left", width + "px");
		$j('#p' + current).animate({ "left": "0px" }, width, "swing");
		$j('#p' + button).animate({ "left": -width + "px" }, width, "swing");
	}
	setbutton();
}

function animateRight(current, button) {
	if (fade) {
		//TODO: Needs checking so that the correct one is faded in and out.
		$j('#p' + button).fadeOut('slow');
		$j('#p' + current).fadeIn('slow');
		setHeight(current);
	}
	else {
		$j('#p' + current).css("left", -width + "px");
		$j('#p' + current).animate({ "left": "0px" }, width, "swing");
		$j('#p' + button).animate({ "left": width + "px" }, width, "swing");
	}
	setbutton();
}

function setHeight(current) {
	var entryHeight = $j('#p' + current).outerHeight() + 20;
	$j('#slide').animate({ height: entryHeight + 'px' }, 500);
}

function setbutton() {
	$j('#b' + button).css("backgroundPosition", "left top");
	$j('#b' + button + ' b').css("background-image", "url('/site/resources/images/scroller/number_off.gif')");
	$j('#b' + button + ' b').css("color", "#fff");

	$j('#b' + current).css("backgroundPosition", "left bottom");
	$j('#b' + current + ' b').css("background-image", "url('/site/resources/images/scroller/number_on.gif')");
	$j('#b' + current + ' b').css("color", "#333");
}