// Pager for scrolling through a panel of images with ease-in and ease-out

dojo.require("dojo.fx.easing");

dojo.addOnLoad( function() {
	init();
	dojo.connect(dojo.byId("Previous"), "onclick", previousSlide);
	dojo.connect(dojo.byId("Next"), "onclick", nextSlide);
	dojo.connect(dojo.byId("Previous"), "onmouseover", function() { this.style.cursor = 'pointer' });
	dojo.connect(dojo.byId("Next"), "onmouseover", function() { this.style.cursor = 'pointer' });
	dojo.connect('onkeydown', function(evt) {
        key = evt.keyCode;
        if(key == dojo.keys.RIGHT_ARROW) { animateSlide('next'); }
        if(key == dojo.keys.LEFT_ARROW) { animateSlide('previous'); }
	});
});

function nextSlide(event) {
	dojo.stopEvent(event);
	animateSlide('next');
}

function previousSlide(event) {
	dojo.stopEvent(event);
	animateSlide('previous');
}

function animateSlide(direction) {
	var startPosition = 0;
	var endPosition = -(parseInt(dojo.byId("ImagePane").style.width) - 900);
	var windowOffset = dojo.byId("ImagePane").parentNode.offsetLeft;
	var currentPosition = dojo.byId("ImagePane").offsetLeft - windowOffset;
	var roundedPosition = Math.round(currentPosition/100)*100; // For 1px offset difference in FireFox
	var currentSlide = Math.abs(roundedPosition / 900) + 1;
	var fullCount = dojo.query("div", dojo.byId("ImagePane")).length; // Get the number of images in the div

	switch(direction) {
		case 'next':
			if(roundedPosition != endPosition) {
				var moveTo = roundedPosition - 900;
			} else {
				var moveTo = endPosition;
			}
			break;
		case 'previous':
			if(roundedPosition != startPosition) {
				var moveTo = roundedPosition + 900;
			} else {
				var moveTo = startPosition;
			}
			break;
	}
	var moveToSlide = Math.abs(moveTo / 900) + 1;
	dojo.anim("ImagePane", { left: moveTo }, 750, dojo.fx.easing.cubicInOut );
	switchImages(direction);
}

function switchImages(direction) {
	var fullCount = dojo.query("div", dojo.byId("ImagePane")).length; // Get the number of images in the div
	var windowOffset = dojo.byId("ImagePane").parentNode.offsetLeft;
	var currentPosition = dojo.byId("ImagePane").offsetLeft - windowOffset;
	var roundedPosition = Math.round(currentPosition/100)*100; // For 1px offset difference in FireFox
	var currentSlide = Math.abs(roundedPosition / 900) + 2;
	switch(direction) {
		case 'next':
			if(currentSlide >= fullCount) {
				// We are at the end of the slides, there should be no 'next' button available
				dojo.byId("Next").src = '/images/right_arrow_inactive.png';
			} else {
				// We are in the middle of the slides so both buttons should be active
				dojo.byId("Next").src = '/images/right_arrow.png';
				dojo.byId("Previous").src = '/images/left_arrow.png';
			}
			break;
		case 'previous':
			if(currentSlide <= 3) {
				// We are at the beginning of the slides, there should be no 'previous' button available
				dojo.byId("Previous").src = '/images/left_arrow_inactive.png';
			} else {
				// We are in the middle of the slides so both buttons should be active
				dojo.byId("Next").src = '/images/right_arrow.png';
				dojo.byId("Previous").src = '/images/left_arrow.png';
			}
			break;
	}
}

function init() {
	var fullCount = dojo.query("div", dojo.byId("ImagePane")); // Get the number of images in the Slides div
	var fullWidth = fullCount.length * 900; // Get the desired width of the Slides div
	dojo.byId("ImagePane").style.width = fullWidth + 'px'; // Set the width of the Slides div
}