// add Line to Navigation and move it.
$(document).ready(function() {
    var $el, leftPos, newWidth,
        $mainNav = $("#nav");
    $mainNav.append("<li id='navLine'></li>");
    var $magicLine = $("#navLine");
	var $cpia = $("#nav li.current_page_item a");
	var vleft = 21;
	var vright = 21;
	if($cpia.parent().hasClass('first')) vleft = 0;
	if($cpia.parent().hasClass('last')) vright = 0;
	$magicLine
    .width($(".current_page_item").width() -vleft -vright)
    .css("left", $(".current_page_item a").position().left +vleft)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());
    $("#nav li a").hover(function() {
		$el = $(this);
		var wleft = 21;
		var wright = 21;
		if($el.parent().hasClass('first')) wleft = 0;
		if($el.parent().hasClass('last')) wright = 0;
        leftPos = $el.position().left +wleft;
        newWidth = $el.parent().width() -wleft -wright;
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

// Add project overlays
$(document).ready(function() {

	// do first animation hidden (otherwise first animation on stage will break)
	$('.teaser').find('span')
		.slideUp('fast', attachSlideEvents);

});

function attachSlideEvents() {
	
	// correct css (don't set this in css definition, otherwise hidden animation will be visible)
	$('.teaser').find('span')
		.css('top', 'auto')
		.css('bottom', '0px');

	// attach hover events
	$('.teaser').hover(
		function(event) {
			$(event.currentTarget).find('span').slideDown('fast');
		},
		function(event) {
			$(event.currentTarget).find('span').slideUp('fast');
		}
	);

}