/**
 * Return an Object cursor{x, y} with the current cursor-position 
 * for all current browsers
 * 
 * @e event
 * @return cursor-object 
 */
function getCursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}

var lastCursorPosition = {x:0, y:0};

Event.observe(document, 'mousemove', function(event) {
	 lastCursorPosition = getCursorPosition(event);
});

function isMouseOver () {
	var cursor = lastCursorPosition;
	if (lastCursorPosition.x < this.positionLeft || lastCursorPosition.x > this.positionRight 
		|| lastCursorPosition.y < this.positionTop || lastCursorPosition.y > this.positionBottom) {
		return false;
	}
	return true;
}

Event.observe(window, 'load', function () {
	var galleryId = parseInt($('tx-fbmediagallery-pi1-id').innerHTML);

	paginationContainer = $('navigation-preview');
	if ( paginationContainer ) {
		var paginationContent = paginationContainer.select('.navigation-preview-content').first();
		
		itemCount = paginationContent.select('li').size();
		paginationContent.leftValue = 0;

		//set size of on item including margin. This size is the distance of the secound element to the left
		paginationContent.itemWidth = 53+10;
		//caluclate value when pagination is completely slided to the right
		paginationContent.leftValue_min = -(itemCount*(53+10)) + paginationContainer.getDimensions().width -22;
		//set value when pagination is completely slided to the left (width of navigation button)
		paginationContent.leftValue_max = 21
		
		//function to set position
		paginationContent.setPosition = function (value) {
			if (value < this.leftValue_min) {
				this.leftValue = this.leftValue_min;
			} else if (value > this.leftValue_max) {
				this.leftValue = this.leftValue_max;			
			} else {
				this.leftValue = value;
			}
			this.setStyle({ left: (this.leftValue) + 'px' });
		}.bind(paginationContent);
		
		//function to read current position
		paginationContent.getPosition = function () {
			return this.leftValue;
		}.bind(paginationContent);
		
		//function to inc position (slide one step to the left)
		paginationContent.incPosition = function () {
			this.setPosition(this.leftValue - 3);
		}.bind(paginationContent);
		
		//function to reduce position (slide one step to the right)
		paginationContent.reducePosition = function () {
			this.setPosition(this.leftValue + 3);
		}.bind(paginationContent);
		
		paginationContent.nextImage = function () {
			//handle endless repeat
			newPosition = this.leftValue - this.itemWidth;
			
			if (newPosition <= this.leftValue_min) {
				if (paginationContent.select('li:last-child').first().hasClassName('current-item')) {
					newPosition = this.leftValue_max;
				} else {
					newPosition = this.leftValue_min;
				}
			} 
			this.storePositionInCookie(newPosition);
		}.bind(paginationContent);
		
		paginationContent.prevImage = function () {
			newPosition = this.leftValue + this.itemWidth;
			
			if (newPosition >= this.leftValue_max) {
				//check if last preview is active
				if (paginationContent.select('li:first-child').first().hasClassName('current-item')) {
					newPosition = this.leftValue_min;
				} else {
					newPosition = this.leftValue_max;
				}
			}
			this.storePositionInCookie(newPosition);
		}.bind(paginationContent);
		
		//function to store position in cookie for reset position after pageload
		paginationContent.storePositionInCookie = function (positionValue) {
			if (!positionValue) {
				positionValue = this.getPosition();
			}
			temp = {galleryId: galleryId, position: positionValue};
			document.cookie = 'navigationContent_position=' + escape(Object.toJSON(temp)) + '; path=/;';
		}.bind(paginationContent);
		
		//function to restore position from cookie
		paginationContent.restorePositionFromCookie = function () {
			var cookie = document.cookie.match('navigationContent_position=(.*?)(;|$)');
			if (cookie) {
				position = (unescape(cookie[1])).evalJSON();
				if (galleryId == position.galleryId) {
					this.setPosition(position.position);
					this.show();
					return true;
				}
			} 
			this.setPosition(21);
			this.show();
			return false;		
		}.bind(paginationContent);

		var handleRight = paginationContainer.select('.navigation-preview-right').first();
		var handleLeft = paginationContainer.select('.navigation-preview-left').first();
		if (paginationContainer.getDimensions().width >= paginationContent.getDimensions().width) {
			//handleLeft.hide();
			//handleRight.hide();
			paginationContent.setStyle({ left: '21px' });
			paginationContent.show();
		} else {
			paginationContent.restorePositionFromCookie();
			paginationContainer.show();
					
			handleLeft.removeClassName('navigation-preview-left-disabled');
			var tempCumulativeOffset = handleLeft.cumulativeOffset();
			handleLeft.positionLeft = tempCumulativeOffset.left;
			handleLeft.positionRight = tempCumulativeOffset.left + handleLeft.getDimensions().width;
			handleLeft.positionTop = tempCumulativeOffset.top;
			handleLeft.positionBottom = tempCumulativeOffset.top + handleLeft.getDimensions().height;
			handleLeft.isMouseOver = isMouseOver.bind(handleLeft);
			handleLeft.startScrolling = function () {
				new PeriodicalExecuter( function (pe) {
					if (this.isMouseOver()) {
						paginationContent.reducePosition();
					} else {
						paginationContent.storePositionInCookie();
						pe.stop();
					}	
				}.bindAsEventListener(this),0.02);
			}.bind(handleLeft);
			
			handleLeft.observe('mouseover', function (event) {	
				this.startScrolling();
			}.bindAsEventListener(handleLeft));

			handleRight.removeClassName('navigation-preview-right-disabled');
			tempCumulativeOffset = handleRight.cumulativeOffset();
			handleRight.positionLeft = tempCumulativeOffset.left;
			handleRight.positionRight = tempCumulativeOffset.left + handleRight.getDimensions().width;
			handleRight.positionTop = tempCumulativeOffset.top;
			handleRight.positionBottom = tempCumulativeOffset.top + handleRight.getDimensions().height;
			handleRight.isMouseOver = isMouseOver.bind(handleRight);
			handleRight.startScrolling = function () {
				new PeriodicalExecuter( function (pe) {
					if (this.isMouseOver()) {
						paginationContent.incPosition();
					} else {
						paginationContent.storePositionInCookie();
						pe.stop();
					}	
				}.bindAsEventListener(this),0.02);
			}.bind(handleRight);
			
			handleRight.observe('mouseover', function (event) {	
				this.startScrolling();	
			}.bindAsEventListener(handleRight));
			
			if (handleLeft.isMouseOver()) handleLeft.startScrolling();
			if (handleRight.isMouseOver()) handleRight.startScrolling();
		}
		
		navigationBtnLeft = paginationContent.up('.tx-fbmediagallery-pi1').select('.prev-link').first();
		navigationBtnLeft.observe('click', function (event) {
			paginationContent.prevImage();
		});

		navigationBtnRight = paginationContainer.up('.tx-fbmediagallery-pi1').select('.next-link').first();
		navigationBtnRight.observe('click', function (event) {
			paginationContent.nextImage();
		});
	}
});