// EDITABLE VARIABLES ---------------------------------------------------------------------------------------------------------

var bigwidth = 150;             // Middle image
var bigheight = 100;
var smallwidth = 120;           // Left and right images
var smallheight = 80;
var tinywidth = 90;             // Images off the edges
var tinyheight = 60;
var middlethumboffset = 0;      // Top padding for big thumb
var navwidth = 20;              // Width of nav button div
var spacing = 20;               // Horizontal space between thumbs
var borderwidth = 3;            // Image border
var bordercolour = '#fff'

var transitionspeed = 1500;     // Time taken by animation
var autoscroll = true;          // Whether to scroll automatically or wait for user click
var scrollinterval = 5000;      // If autoscroll, the interval between animations. Must be larger than transition speed

var pauseonhover = false;        // If true, autoscrolling wil stop when hovering anywhere over gallery

// OTHER VARIABLES ------------------------------------------------------------------------------------------------------------

var browser = "";
if (navigator.appVersion.indexOf('MSIE 7.0') >= 0) {
	browser = "IE7";
}
else if (navigator.appVersion.indexOf('MSIE 8.0') >= 0) {
	browser = "IE8";
}

var timer = -1;
var thumbborder = borderwidth + 'px solid ' + bordercolour;

var thumbstop = new Array();
thumbstop[0] = smallheight;
thumbstop[1] = bigheight - smallheight;
thumbstop[2] = middlethumboffset;
thumbstop[3] = bigheight - smallheight;
thumbstop[4] = smallheight;

var thumbsleft = new Array();
thumbsleft[0] = 0 - smallwidth + navwidth;
thumbsleft[1] = spacing;
thumbsleft[2] = (spacing * 2) + (borderwidth * 2) + smallwidth;
thumbsleft[3] = (spacing * 3) + (borderwidth * 4) + smallwidth + bigwidth;
thumbsleft[4] = (spacing * 4) + (borderwidth * 6) + (smallwidth * 2) + bigwidth;

var thumbswidth = new Array(tinywidth, smallwidth, bigwidth, smallwidth, tinywidth);
var thumbsheight = new Array(tinyheight, smallheight, bigheight, smallheight, tinyheight);

var currentItem = 0;
var numItems;
// INITIALISE -----------------------------------------------------------------------------------------------------------------

$(document).ready(function () {
	initialise();
});


function initialise() {

	numItems = $('#gallerywrapper .featureNav li').length;
	//position divs
	$('#thumbs').css({ width: thumbsleft[4] + 'px', overflow: 'hidden' });
	$('#slider').css({ width: (thumbsleft[4] + (navwidth * 2)) + 'px' });
	$('#navright').css({ left: (thumbsleft[4] + navwidth) + 'px' });

	//initial thumbnail positions
	$('#slider ul li').each(function (i) {
		if (i <= 4) setToPosition($(this), i);
		else setToPosition($(this), 4);
	});

	$('#slider').css({ display: 'block' });

	//buttons for scrolling left/right
	bindNavClicks();
	bindThumbClicks();
	bindDotClicks();

	//start playing if set to auto
	if (autoscroll == true) play();

	//pay-pause button
	$('#gallerywrapper .playpause').click(function () {
		var control = $(this).closest('.controls').toggleClass('paused');
		if (control.hasClass('paused')) {
			$(this).text('Play');
			pause();
		}
		else {
			$(this).text('Pause');
			play();
		}
		return false;
	});

	//pause on mouseover
	if (autoscroll == true && pauseonhover == true) {
		$('#gallerywrapper').mouseover(function () {
			pause();
		});
		$('#gallerywrapper').mouseout(function () {
			//check if pause button has been toggled
			if (!$('#gallerywrapper').find('.controls').hasClass('paused'))
				play();
		});
	}

	//stop animation when moving around tabs
	$(window).blur(function (e) {
		if (autoscroll == true) {
			pause();
		}
	});
}

// PLAY / PAUSE ---------------------------------------------------------------------------------------------------------------

function play() {
	window.clearInterval(timer);
	timer = window.setInterval(scrollRight, scrollinterval + transitionspeed);
	scrollRight();
}

function pause() {
	window.clearInterval(timer);
}


// BUTTON CLICKS --------------------------------------------------------------------------------------------------------------

function bindNavClicks() {
	bindNavClick($('#butleft'), 'left');
	bindNavClick($('#butright'), 'right');
}

function bindNavClick(btn, side) {
	btn.click(function () {
		unbindClicks();
		//pauseThenResume();
		if (side == 'left') scrollLeft();
		else scrollRight();
		return false;
	});
}

function bindDotClicks() {
	$('#gallerywrapper .featureNav li').click(function () {
		scrollImages($('#gallerywrapper .featureNav li.current').index() - $(this).index(), 100);
		return false;
	});
}

function bindThumbClicks() {
	$('ul.thumbnails li').each(function (i) {
		var a = $(this).children('a');
		switch (i) {
			case 1:
				a.click(function () {
					scrollLeft();
					return false;
				});
				break;
			case 3:
				a.click(function () {
					scrollRight();
					return false;
				});
				break;
			default:
				a.click(function () {
					return false;
				});
				break;
		}
	});
}

function unbindClicks() {
	$('#butleft').unbind().bind('click', function () { return false; });
	$('#butright').unbind().bind('click', function () { return false; });
	$('ul.thumbnails li').each(function (i) { $(this).children('a').unbind().bind('click', function () { return false; }); });
}


// ANIMATION ------------------------------------------------------------------------------------------------------------------

function setToPosition(li, i) {
	var img = li.children('a').children('img');
	li.css({ display: 'inline', position: 'absolute', left: thumbsleft[i] + 'px', top: thumbstop[i] + 'px' });
	img.css({ border: thumbborder, width: thumbswidth[i] + 'px', height: thumbsheight[i] + 'px' });
}

function animateToPosition(li, i, speed) {
	var img = li.children('a').children('img');
	var span = li.children('a').children('span');

	if (browser != "IE7") span.css({ bottom: '0px' });
	li.animate({ left: thumbsleft[i] + 'px', top: thumbstop[i] + 'px' }, speed, 'swing');
	img.animate({ width: thumbswidth[i] + 'px', height: thumbsheight[i] + 'px' }, speed, 'swing');
	if (browser != "IE7") span.animate({ bottom: '0px' }, speed, 'swing', function () { span.css({ bottom: borderwidth + 'px' }); });
}

function scrollLeft() {
	scrollImages(1, transitionspeed);
}

function scrollRight() {
	scrollImages(-1, transitionspeed);
}

function scrollImages(vector, speed) {
	var direction = vector > 0 ? 1 : -1;
	unbindClicks();
	currentItem -= direction;
	//update the dots
	if (currentItem < 0) { currentItem += numItems; }
	else { currentItem %= numItems; }
	$('#gallerywrapper .featureNav li.current').removeClass('current');
	$('#gallerywrapper .featureNav li').eq(currentItem).addClass('current');

	//move thumbnails
	$('#slider ul li').each(function (i) {
		var lowindex = (direction > 0) ? 0 : 1;
		var highindex = (direction > 0) ? 3 : 4;
		if (lowindex <= i && i <= highindex) animateToPosition($(this), i + direction, speed);
	});

	//change big image
	$('#bigimagewrapper ul li:eq(2)').fadeOut(speed);
	if (browser == "IE8") $('#bigimagewrapper ul li:eq(' + (2 - direction) + ') .panelText').hide();
	$('#bigimagewrapper ul li:eq(' + (2 - direction) + ')').fadeIn(speed, function () {
		$('#bigimagewrapper ul li').hide();
		$('#bigimagewrapper ul li:eq(' + (2 - direction) + ')').show();
		if (browser == "IE8") $('#bigimagewrapper ul li:eq(' + (2 - direction) + ') .panelText').show();

		//move list items to other end of list
		if (direction > 0) {
			var li = $('#slider ul li:last').remove();
			$('#slider ul').prepend(li);

			var libig = $('#bigimagewrapper ul li:last').remove();
			$('#bigimagewrapper ul').prepend(libig);
		}
		else {
			var li = $('#slider ul li:first').remove();
			$('#slider ul').append(li);

			var libig = $('#bigimagewrapper ul li:first').remove();
			$('#bigimagewrapper ul').append(libig);
		}

		//get thumbnails just outside of visible section in position ready to slide in
		$('#slider ul li').each(function (i) {
			if (i == 0 || i == 4) setToPosition($(this), i);
		});

		bindThumbClicks();
		bindNavClicks();
		//continue if we haven't got there yet
		if (vector > 0)
			vector--;
		else if (vector < 0)
			vector++;
		if (vector != 0)
			scrollImages(vector, speed);
	});
}