/* 
 * elementpusher.js
 * Script to move an element left or right within defined boundaries.
 * (Prototype JS and Scriptaculous required)
 */

// id of the moved element
observedFrame = 'frameImages';

// variable for the X-dimension
var currentX;

// maximum and minimum X value
var maxX = 0;
// var minX = -3375; // this is set in the pagetemplate

// lenght to move the element when control button is clicked
pushLength = 375;

Event.observe(window, 'load', function() { elementPusher(observedFrame) });

// function to move the chosen element
function elementPusher(movedElement) {

	// id's of the left and right button
	var leftLink = $('pushLeft');
	var rightLink = $('pushRight');

	// check and set the left attribute of the movable element
	if($(movedElement).style.left == '') {
		currentX = 0;
		$(movedElement).style.left = currentX+'px';
	}

	// check the buttons and apply visibility if necessary
	checkButtons(leftLink, rightLink);

	// clicking the left button
	Event.observe(leftLink, 'click', function(event) {
		Event.stop(event);
		if(currentX < maxX) {
			currentX = currentX + pushLength;
			if(currentX >= maxX) {
				currentX = maxX;
			}
			slideElement();
			checkButtons(leftLink, rightLink);
		}
	});

	// clicking the right button
	Event.observe(rightLink, 'click', function(event) {
		Event.stop(event);
		if(currentX > minX) {
			currentX = currentX - pushLength;
			if(currentX <= minX) {
				currentX = minX;
			}
			slideElement();
			checkButtons(leftLink, rightLink);
		}
	});
}

// button location check and the setting for visibility
function checkButtons(first, second) {
	if(currentX >= maxX) { 
		first.hide();
		}
	else {
		first.show();
	}
		
	if(currentX <= minX) { 
		second.hide();
		}
	else {
		second.show();
	}
}

// sliding effect
function slideElement() {
	new Effect.Move (observedFrame,{ duration: 0.7, x: currentX, mode: 'absolute'});
	}