var contentWrapper;
var urlInitialized = false;
var menuLinks;

$(function() {
	
	contentWrapper = $('#content');
	
	if (document.location.pathname == '/') {
		
		if (document.location.hash == '') {
			getMenu().setState('home', getMenu().states.STATE_ACTIVE, {
				animated: false
			});
			urlInitialized = true;
		} else {
			contentWrapper.hide();
		}
	}
	
	var skizzeMenu = getMenu();
	menuLinks = $('#menuwrapper a:not(.external)');
	menuLinks.click(makeAjax);
	
	$.address.change(urlHandler);
});

function positionMenu()
{
	var st = $('body').scrollTop(),
		h = $(window).height(),
		mt = parseInt($('#menuwrapper').css('top')),
		mh = $('#menuwrapper ul').outerHeight(),
		targetTop;

	if (mt + st + mh + 70 < st + h) {
		targetTop = st;
	} else {
		targetTop = st + h - mh - mt - 70;
	}
	
	$('#menuwrapper').css('marginTop', targetTop);
}

$(window)
	.load(function() {
		typeImage($('#headertext img'), [8,6,9,10,9,10,9,8,10,6,10,9,9,8,10,9,6,10,9,10,9,8,11], 100);
	})
	.scroll(positionMenu)
	.resize(positionMenu);



function sendToAnalytics(url) {
    try {
    var pageTracker = _gat._getTracker("UA-5017947-9");
    pageTracker._trackPageview(url);
    } catch(err) {}
}

function makeAjax() {
	menuLinks.removeClass('active');
	$(this).addClass('active');
	$.address.value(this.href.replace(/https?:\/\/.*?(?=\/)/, ''));
	return false;
}

function urlHandler(event) {
	
	var url = event.value;
	
	var urlSplit = url.split('/');
	
	while (urlSplit[0] == '') {
		urlSplit.shift();
	}
	
	var menu = 'home';
	if (urlSplit.length >= 1 && urlSplit[0].indexOf(':') == -1) {
		menu = urlSplit[0];
	}
	
	sendToAnalytics(url);
	
	$('#content').attr('class', menu);
	
	var animationDone = false;
	var content;
	
	// queue die pas afloopt wanneer zowel de content is geladen als dat de animatie klaar is
	contentWrapper.queue(function() {
		
		contentWrapper.show();

		getMenu().setState(menu, getMenu().states.STATE_ACTIVE, {
			animated: urlInitialized,
			callback: function(notAnimated) {

				animationDone = true;
				if (content != null) {
					contentWrapper.dequeue();
				}
			}
		});
		
		if (menu != 'home') {
			$('#header img.skizzel').stop().animate({bottom: -100}, 1000);
		} else {
			$('#header img.skizzel').stop().animate({bottom: 4}, 1000);
		}
		
		urlInitialized = true;
		
		if (url.charAt(0) == '/') {
			url = url.substring(1);
		}
		if (url == '') {
			url = '/';
		}
		$.get(url, function(data) {
			content = data;
			if (animationDone) {
				contentWrapper.dequeue();
			}
		});
	});
	contentWrapper.queue(function() {
		if (content != null) {

			// scroll naar boven
			window.scroll(0, 0);
			
			contentWrapper
				.html(content)
				.find('a.alink')
					.click(makeAjax)
				.end()
				.find('img')
					.preload({
						onFinish: function() {
							contentWrapper.dequeue();
						}
					});
		}
	});
}

var typeImage = function(el, charSizes, duration) {

	el.wrap('<div></div>');
	var wrap = el.parent();
	wrap.css({
		width: '0px',
		height: el.outerHeight(),
		overflow: 'hidden'
	});
	el.css('visibility', 'visible');
	var i = cw = 0, w;
	(w = function() {
		cw+=charSizes[i];
		wrap.css('width', cw);
		if (charSizes[++i]) setTimeout(w, duration || 50);
	})();
};

var getMenu = (function(onMenuActivated, onMenuDeactivated) {
	
	if (!this.instance) {

		var currentMenu;
		
		// de mogelijke states van de menuitems
		var states = {
			STATE_DEFAULT: 'default',
			STATE_ACTIVE: 'active'
		};
		
		// de menuitem events
		var events = {
			
			onMouseEnter: function() {
				var itemData = items[this.menuItem];
				startCursor(this.menuItem);
			},
			
			onMouseLeave: function() {
				clearCursor(this.menuItem);
			}
		};
		
		// informatie over de verschillende menuitems
		var items = {
			home: {
				charSteps: [14, 9, 15, 11],
				state: states.STATE_DEFAULT,
				hasMouse: false,
				element: $('#menuwrapper li.home > a').get(0)
			},
			projects: {
				charSteps: [13, 7, 8, 6, 10, 8, 6, 9],
				state: states.STATE_DEFAULT,
				hasMouse: false,
				element: $('#menuwrapper li.projects > a').get(0)
			},
			spezials: {
				charSteps: [13, 9, 10, 8, 4, 11, 5, 10],
				state: states.STATE_DEFAULT,
				hasMouse: false,
				element: $('#menuwrapper li.spezials > a').get(0)
			},
			skizze: {
				charSteps: [13, 10, 4, 9, 8, 10, 5, 4, 10],
				state: states.STATE_DEFAULT,
				hasMouse: false,
				element: $('#menuwrapper li.skizze > a').get(0)
			},
			contact: {
				charSteps: [12, 10, 9, 6, 9, 9, 6],
				state: states.STATE_DEFAULT,
				hasMouse: false,
				element: $('#menuwrapper li.contact > a').get(0)
			}
		};
		
		// zet de state van de opogegeven menuitem
		var setState = function(menu, state, options) {
			
			if (!items[menu]) {
				return false;
			}
			
			if (items[menu].state == state) {
				if (options.callback) options.callback(true);
				return true;
			}
			items[menu].state = state;
			
			// opties
			options = $.extend({}, {
				typeSpeed: 90,
				animated: true
			}, options);
			
			var swapStateSpan = (function(menu, state) {
				
				$(items[menu].element)
					.find('span:not(.'+state+')')
						.hide()
					.end()
					.find('span.'+state)
						.show();
			});
			var performAnimation = (function(menu, state, callback) {
				
				$(items[menu].element).queue(function() {
					
					startCursor(menu);
					moveContent();
					
					var a = $(items[menu].element).width(0);
					
					swapStateSpan(menu, state);
					
					var i = 1;
					items[menu].element.animation = setInterval(function() {
						
						a.width(countMenuWidth(menu, i++));
						
						if (i > items[menu].charSteps.length) {
							clearTimeout(items[menu].element.animation);
							clearCursor(menu);
							$(items[menu].element).dequeue();
							if (callback) callback();
						}
					}, options.typeSpeed);
				});
			});
			var showSubmenu = (function(menu) {

				if (!options.animated) {
					$(items[menu].element).parent('li').children('div.sub').show();
				} else {

					$(items[menu].element).queue(function() {
						
						var subitems = $(this).parent('li').children('div.sub').show().find('dd').hide();
						var i = 0, showNextItem;
						(showNextItem = function() {
							
							if (!subitems[i]) {
								$(items[menu].element).dequeue();
							} else {
								
								$(subitems[i]).slideDown();
								i++;
								setTimeout(showNextItem, 50);
							}
						})();
					});
				}
			});
			var hideSubmenu = (function(menu) {
				
				$(items[menu].element).queue(function() {
					$(this).parent('li').children('div.sub').hide();
					$(this).dequeue();
				});
			});
			
			// state bepalen
			switch (state) {
				
				case states.STATE_ACTIVE:
					
					// als er al een menuitem actief is
					if (currentMenu) {
						
						// eerst de huidige item als niet actief instellen
						setState(currentMenu, states.STATE_DEFAULT, {
							animated: false
						});
					}
					
					currentMenu = menu;
					
					if (options.animated) {
						highliteMenu(menu);
						performAnimation(menu, states.STATE_ACTIVE, options.callback);
						$(items[menu].element).queue(function() {
							clearPointer(POINTERS.LEFT);
							pointTo(items[menu].element);
							$(this).dequeue();
						});
						showSubmenu(menu);
						$(items[menu].element).queue(function() {
							setTimeout(function() {
								positionMenu();
								pointTo(items[menu].element);
							}, 500);
							$(this).dequeue();
						});
						
					} else {
						swapStateSpan(menu, states.STATE_ACTIVE);
						pointTo(items[menu].element);
						showSubmenu(menu);
						moveContent();
						if (options.callback) options.callback();
					}
					break;
					
				case states.STATE_DEFAULT:
				
					if (options.animated) {
						highliteMenu(menu);
						hideSubmenu(menu);
						performAnimation(menu, states.STATE_DEFAULT, options.callback);
					} else {
						swapStateSpan(menu, states.STATE_DEFAULT);
						hideSubmenu(menu);
						if (options.callback) options.callback();
					}
					break;
			}
			
			return true;
		};
		
		// verplaatste de contentcontainer naar het huidige menu
		var moveContent = function() {
			
			var targetTop = $(items[currentMenu].element).parent('li')[0].offsetTop;
			
			positionMenu();
			
			contentWrapper.animate({marginTop: targetTop+40}, 500);
		};
		
		// selecteert het menuitem
		var highliteMenu = function(menu) {
			
			$(items[menu].element).queue(function() {
	
				clearCursor(menu);
	
				var selection = $(items[menu].element).find('span.selected').width(0).show();
	
				var i = 1;
				items[menu].element.animation = setInterval(function() {
					
					selection.width(countMenuWidth(menu, i++, true));
	
					if (i > items[menu].charSteps.length) {
	
						clearTimeout(items[menu].element.animation);
						
						setTimeout(function() {
							$(items[menu].element).dequeue();
						}, 100);
					}
				}, 50);
			});
		};
		
		var POINTERS = {
			LEFT: $('<img />').attr('src', '/img/arrow_left.jpg').css({position: 'absolute', right: '-28px', top: '3px'}),
			RIGHT: $('<img />').attr('src', '/img/arrow_right.jpg').css({position: 'absolute', right: '-28px', top: '6px'})
		};
		
		var pointTo = function(element, pointerElement) {
			pointerElement = pointerElement || POINTERS.RIGHT;
			$(element).parent().prepend(pointerElement);
			pointerElement.show();
		};
		var clearPointer = function(pointerElement) {
			pointerElement = pointerElement || POINTERS.RIGHT;
			pointerElement.hide();
		};
		
		// start de cursoranimatie
		var startCursor = function(menu) {
	
			clearCursor(menu);
			
			items[menu].element.cursorInterval = setInterval(function() {
	
				if (items[menu].element.hasCursor) {
					$(items[menu].element).css({borderRight: '1px solid #fff'});
					items[menu].element.hasCursor = false;
				} else {
					$(items[menu].element).css({borderRight: '1px solid #000'});
					items[menu].element.hasCursor = true;
				}
				
			}, 500);
		};
		// haalt de cursoranimatie weg
		var clearCursor = function(menu) {
			$(items[menu].element).css({borderRight: '1px solid #fff'});
			clearInterval(items[menu].element.cursorInterval);
		};
		
		// telt het aantal pixels tot aan de opgegeven character
		var countMenuWidth = function(menu, charCount, reverse) {
			var c = (reverse) 
				? items[menu].charSteps.slice(charCount * -1)
				: items[menu].charSteps.slice(0, charCount);
			var width = 0;
			for (var i = 0; i < c.length; i++) {
				width += c[i];
			}
			return width;
		};
		
		// alle events koppelen
		for (var k in items) {
			items[k].element.menuItem = k;
			$(items[k].element)
				.mouseenter(events.onMouseEnter)
				.mouseleave(events.onMouseLeave);
		}
		
		this.instance = {
			POINTERS: POINTERS,
			pointTo: pointTo,
			clearPointer: clearPointer,
			items: items,
			states: states,
			setState: setState
		};
	}
	return this.instance;
});