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

	
function menuCollector() {
	var menuElements = $('#menu').children('a');
	var cSteps = menuElements.length - 1;
	var cStart = 13;
	var cEnd = 60;
	var cElements = menuElements.length; 	
	var cSpan = cEnd - cStart;
	var cStepLength = Math.floor(cSpan/cSteps);
	var cUnderFlow = cSpan % cSteps;
	/*
	console.log("spann: " + cSpan);
	console.log("steg: " + cSteps);
	console.log("antal element: " + cElements);
	console.log("steglängd: " + cStepLength);
	console.log("cUnderFlow: " + cUnderFlow);
	*/
	var cCount = cStart;
	
	$(menuElements[0]).addClass("first");
		
	for(var i = 0; i < menuElements.length; i++) {
			
		//On last step add the under flow
		/*if (i == cSteps) {
			cCount = cCount + cUnderFlow;
		}*/
		
		//console.log(i + ": " + cCount);
		$(menuElements[i]).addClass("r" +cCount);
		cCount = cCount + cStepLength;
	
		
		$(menuElements[i]).hover(function() {
		//Not a good solution, but it works....
		if(typeof $(this).attr('oldColor') == 'undefined')
			$(this).attr('oldColor', $(this).css('color'));
			$(this).css({backgroundColor:$(this).attr('oldColor'),color:'#fff'});
		},
		function() {
			$(this).animate({backgroundColor:'#fff',color: $(this).attr('oldColor')},700);
		});
	}
}