document.observe('dom:loaded',
	function () {
		$$('.yearnavContainer .yearnavOverflow ul.yearnav').each(
			function (n) {
				ynInit(n);
			}
		);
	}
);

var ynDefault = {
	duration: 0.25,
	moveDuration: 2,
	transition: Effect.Transitions.linear,
	moveTransition: Effect.Transitions.linear,
	liPadding: 5,
	smallFontSize: 8,
	midFontSize: 16,
	bigFontSize: 24,
	smallBottom: '0',
	midBottom: '-2px',
	bigBottom: '-4px',
	imagePath: 'fileadmin/template_com/images/years/',
	imageMarginMin: 1,
	imageMarginMid: 9,
	imageMarginMax: 15,
	ulScale: 1.1
}

/**
 * Initialize the year navigation.
 *
 * @var mixed nav Id or Dom of the year navigation.
 */
function ynInit(nav) {
	nav = $(nav);
	
	// must exist because the full path is selected in the dom:loaded event
	var container = nav.up('.yearnavContainer');
	var overflow = nav.up('.yearnavOverflow');
	
	var moveLeft = container.down('.moveLeft');
	
	var moveRight = container.down('.moveRight');
	
	var ulMaxOffset = 0;
	var ulMinOffset = 0;
	
	var activeYear = false;
	var activeYearImg = {
		mOver: function () {},
		mOut: function () {}
	};
	var currentYear = (new Date()).getFullYear();
	
	nav.select('li a').each(
		function (n) {
			
			var li = n.up('li');
			
			// interpret years as picture
			
			var path = ynDefault.imagePath;
			
			var year = parseInt(n.innerHTML);
			if (!n.title) n.title = year;
			
			var img = new Image();
			img.alt = year;
			img.bigImg = new Image();
			img.bigGoldImg = new Image();
			img.midImg = new Image();
			img.smallImg = new Image();
			//alert('image created');
			
			img.bigGoldImg.src = path + '' + year + '_big_gold.gif';
			img.bigImg.src = path + '' + year + '_big.gif';
			img.midImg.src = path + '' + year + '_mid.gif';
			img.smallImg.src = path + '' + year + '_small.gif';
			//alert(img.bigPath);
			
			img.src = img.smallImg.src;
			img = $(img);
			img.setStyle('margin-top', ynDefault.imageMarginMax + 'px');
			
			var marginTopMax = ynDefault.imageMarginMax;
			var marginTopMid = ynDefault.imageMarginMid;
			var marginTopMin = ynDefault.imageMarginMin;
			
			n.innerHTML = '';
			n.insert({top: img});
			
			var mOver = function (event) {
				
				if (img != nav.activeImg) nav.activeImg.mOut();
				
				if (img.effect) img.effect.cancel();
				
				img.effect = new Effect.Morph(img,
				{ 
					duration: ynDefault.duration,
					transition: ynDefault.transition,
					style: 'width: ' + img.bigImg.width + 'px; height: ' + img.bigImg.height + 'px; margin-top: ' + marginTopMin + 'px;',
					afterFinish: function () {
						img.src = img.bigGoldImg.src;
						img.effect = null;
					}
				}
				);
				
				// left element animation
				var prevLi = li.previous('li');
				if (prevLi) {
					var a = prevLi.down('a');
					var prevImg;
					if (a && (prevImg = a.down('img'))) {
						if (prevImg.effect) prevImg.effect.cancel();
						
						prevImg.effect = new Effect.Morph(prevImg,
						{ 
							duration: ynDefault.duration,
							transition: ynDefault.transition,
							style: 'width: ' + prevImg.midImg.width + 'px; height: ' + prevImg.midImg.height + 'px; margin-top: ' + marginTopMid + 'px;',
							afterFinish: function () {
								prevImg.src = prevImg.midImg.src;
								a.effect = null;
							}
						}
						);
					}
				}
				
				// right element animation
				var nextLi = li.next('li');
				if (nextLi) {
					var a = nextLi.down('a');
					var nextImg;
					if (a && (nextImg = a.down('img'))) {
						if (nextImg.effect) nextImg.effect.cancel();
						
						nextImg.effect = new Effect.Morph(nextImg,
						{ 
							duration: ynDefault.duration,
							transition: ynDefault.transition,
							style: 'width: ' + nextImg.midImg.width + 'px; height: ' + nextImg.midImg.height + 'px; margin-top: ' + marginTopMid + 'px;',
							afterFinish: function () {
								nextImg.src = nextImg.midImg.src;
								a.effect = null;
							}
						}
						);
					}
				}
			}
			
			img.mOver = mOver;
			n.observe('mouseover', mOver);
			
			var mOut = function (event) {
				if (event && img == nav.activeImg) return;
				
				if (img.effect) img.effect.cancel();
				
				img.src = img.bigImg.src;
				
				img.effect = new Effect.Morph(img,
				{ 
					duration: ynDefault.duration,
					transition: ynDefault.transition,
					style: 'width: ' + img.smallImg.width + 'px; height: ' + img.smallImg.height + 'px; margin-top: ' + marginTopMax + 'px;',
					afterFinish: function () {
						img.src = img.smallImg.src;
						img.effect = null;
					}
				}
				);
				
				// left element animation
				var prevLi = li.previous('li');
				if (prevLi) {
					var a = prevLi.down('a');
					if (a && (prevImg = a.down('img'))) {
						if (prevImg.effect) prevImg.effect.cancel();
						
						prevImg.src = prevImg.bigImg.src;
						
						prevImg.effect = new Effect.Morph(prevImg,
						{ 
							duration: ynDefault.duration,
							transition: ynDefault.transition,
							style: 'width: ' + prevImg.smallImg.width + 'px; height: ' + prevImg.smallImg.height + 'px; margin-top: ' + marginTopMax + 'px;',
							afterFinish: function () {
								prevImg.src = prevImg.smallImg.src;
								prevImg.effect = null;
							}
						}
						);
					}
				}
				
				// right element animation
				var nextLi = li.next('li');
				if (nextLi) {
					var a = nextLi.down('a');
					
					if (a && (nextImg = a.down('img'))) {
						if (nextImg.effect) nextImg.effect.cancel();
						
						nextImg.src = nextImg.bigImg.src;
						
						nextImg.effect = new Effect.Morph(nextImg,
						{ 
							duration: ynDefault.duration,
							transition: ynDefault.transition,
							style: 'width: ' + nextImg.smallImg.width + 'px; height: ' + nextImg.smallImg.height + 'px; margin-top: ' + marginTopMax + 'px;',
							afterFinish: function () {
								nextImg.src = nextImg.smallImg.src;
								nextImg.effect = null;
							}
						}
						);
					}
				}
				if (img != nav.activeImg) nav.activeImg.mOver();
			}
			
			if (li.hasClassName('act') || li.hasClassName('active')) {
				activeYear = year;
				nav.activeImg = img;
				window.setTimeout(mOver, 500);
			}
			if (currentYear == year) {
				activeYearImg = img;
			}
			
			img.mOut = mOut;
			n.observe('mouseout', mOut);
			
		}
	);
	
	if (activeYear == false) {
		nav.activeImg = activeYearImg;
		window.setTimeout(activeYearImg.mOver, 500);
	}
	
	var ulWidth = 0;
	nav.select('li').each(
		function (n) {
			ulWidth += n.getWidth();
		}
	);
	ulWidth *= ynDefault.ulScale;
	
	ulMaxOffset = overflow.getWidth() - ulWidth;
	
	var ulOffset = ulMaxOffset / 2;
	if (ulOffset != 0) {
		ulOffset += 'px';
	}
	
	nav.setStyle('right: ' + ulOffset + ';');
	
	if (ulMaxOffset > 0) {
		ulMaxOffset = ulMaxOffset / 2;
		ulMinOffset = ulMaxOffset;
	}
	
	// move the ul left
	moveLeft.observe('mouseover', 
		function (event) {
			
			moveLeft.effect = new Effect.Morph(nav,
			{ 
				duration: ynDefault.moveDuration,
				transition: ynDefault.moveTransition,
				style: 'right: ' + ulMaxOffset + 'px;',
				afterFinish: function () {
					moveLeft.effect = null;
				}
			}
			);
		}
	);
	
	// stop the motion
	moveLeft.observe('mouseout', 
		function (event) {
			if (moveLeft.effect) moveLeft.effect.cancel();
			moveLeft.effect = null;
		}
	);
	
	// move the ul right
	moveRight.observe('mouseover', 
		function (event) {
			
			moveRight.effect = new Effect.Morph(nav,
			{ 
				duration: ynDefault.moveDuration,
				transition: ynDefault.moveTransition,
				style: 'right: ' + ulMinOffset + 'px;',
				afterFinish: function () {
					moveRight.effect = null;
				}
			}
			);
		}
	);
	
	// stop the motion
	moveRight.observe('mouseout', 
		function (event) {
			if (moveRight.effect) moveRight.effect.cancel();
			moveRight.effect = null;
		}
	);
	
}