$(document).ready(function() {
		$('ul#menu a').click(function() {		
			$('#more').hide();
			$('.boxgrid').css('opacity', 0.8);
			$(this).css('outline','none');
			$('ul#menu li.selected a').animate({ paddingRight: defpadRight},{ queue:false, duration:200 }).animate({ backgroundColor: colorOut },{ queue:false, duration:600 });
			$('ul#menu .selected').removeClass('selected');
			$(this).parent().addClass('selected');
			
			var filterVal = $(this).text().toLowerCase().replace(' ','-');
					
			if(filterVal === 'work') {
				$('body').stop().scrollTo({top:'0px',left:'0px'}, 1000, function () {
										window.location.reload();
							 });
				
				} else {
				
				$('.boxgrid').each(function() {
					if(!$(this).hasClass(filterVal)) {
						$(this).stop().animate({'width':'0px','marginRight':'0px'});
						$(this).queue(function () {
								$(this).addClass('versteckt');
								$(this).prependTo("#ablage");
								$(this).dequeue();
							  });
					} else {
						
						$('.versteckt').prependTo("#portfolio");
						
						var toSort = document.getElementById('container').children;
						toSort = Array.prototype.slice.call(toSort, 0);
						
						toSort.sort(function(a, b) {
							var aord = +a.id.split('-')[1];
							var bord = +b.id.split('-')[1];
							// two elements never have the same ID hence this is sufficient:
							return (aord < bord) ? 1 : -1;
						});
						
						var parent = document.getElementById('container');
						parent.innerHTML = "";
						
						for(var i = 0, l = toSort.length; i < l; i++) {
							parent.appendChild(toSort[i]);
						};
						
						$('body').stop().scrollTo({top:'0px',left:'0px'});
						$(this).stop().animate({'width':'250px','marginRight':'10px'}).removeClass('versteckt');
						
					}
				});
			}
			return false;
		});
		
		
// Opacity Thumbnails  // Show/Hide Thumbnail Description
	$('.boxgrid').hover(function() {
		$('.boxcaption', this).stop().animate({top:'46px'},{queue:false,duration:200});
	}, function() {
		$('.boxcaption', this).stop().animate({top:'84px'},{queue:false,duration:200});
	});
	
	
// Show/Hide DIV #more

	$('.boxgrid').click(function () {
	
		$(this).css('opacity', 0.8);
		$(this).siblings('.boxgrid').css('opacity', 0.2);

		
		// zuvor geöffneter Content DIV schliessen
		$('#more').hide();
		

		// Content DIVS abhängig von der Position des Thumbnails verschieben
		// und Klassen zuweisen
		var offset = $(this).offset();
		var left = $(this).offset().left;
		var oben = $(this).offset().top;		
						
		/*alert(left);
		alert(oben);*/
				
		
		if(left === 180) {
			$('#more').insertAfter($(this).next().next());
		}
		if(left === 440) {
			$('#more').insertAfter($(this).next());
		}
		if(left === 700) {
			$('#more').insertAfter($(this));    // funktioniert immer
		}	
				
		
		// Content DIV öffnen
		$('#more').slideDown(1500);
		
		
		if(oben === 200) {
			$('body').stop().scrollTo( {top:'190px',left:'0px'}, 1200 );
		}
		if(oben === 294) {
			$('body').stop().scrollTo( {top:'284px',left:'0px'}, 1200 );
		}
		if(oben === 388) {
			$('body').stop().scrollTo( {top:'378px',left:'0px'}, 1200 );
		}
		if(oben === 482) {
			$('body').stop().scrollTo( {top:'472px',left:'0px'}, 1200 );
		}
		if(oben === 576) {
			$('body').stop().scrollTo( {top:'566px',left:'0px'}, 1200 );
		}
		if(oben === 670) {
			$('body').stop().scrollTo( {top:'660px',left:'0px'}, 1200 );
		}
		if(oben === 764) {
			$('body').stop().scrollTo( {top:'754px',left:'0px'}, 1200 );
		}
		if(oben === 858) {
			$('body').stop().scrollTo( {top:'848px',left:'0px'}, 1200 );
		}
		if(oben === 952) {
			$('body').stop().scrollTo( {top:'942px',left:'0px'}, 1200 );
		}
		if(oben === 1046) {
			$('body').stop().scrollTo( {top: '1036px',left:'0px'}, 1200 );
		}
		if(oben === 1140) {
			$('body').stop().scrollTo( {top: '1130px',left:'0px'}, 1200 );
		}
		if(oben === 1234) {
			$('body').stop().scrollTo( {top: '1224px',left:'0px'}, 1200 );
		}
		if(oben === 1328) {
			$('body').stop().scrollTo( {top: '1318px',left:'0px'}, 1200 );
		}
		if(oben === 1422) {
			$('body').stop().scrollTo( {top: '1412px',left:'0px'}, 1200 );
		}
		if(oben === 1516) {
			$('body').stop().scrollTo( {top: '1506px',left:'0px'}, 1200 );
		}
		if(oben === 1610) {
			$('body').stop().scrollTo( {top: '1600px',left:'0px'}, 1200 );
		}
		if(oben === 1704) {
			$('body').stop().scrollTo( {top: '1694px',left:'0px'}, 1200 );
		}
		if(oben === 1798) {
			$('body').stop().scrollTo( {top: '1788px',left:'0px'}, 1200 );
		}
		if(oben === 1892) {
			$('body').stop().scrollTo( {top: '1882px',left:'0px'}, 1200 );
		}
		if(oben === 1986) {
			$('body').stop().scrollTo( {top: '1976px',left:'0px'}, 1200 );
		}
		if(oben === 2080) {
			$('body').stop().scrollTo( {top: '2070px',left:'0px'}, 1200 );
		}
								
	});
	

// Animation Navibuttons

	//Background color, mouseover and mouseout
	var colorOver = '#89cce5';
	var colorOut = '#333';
	
	//Padding, mouseover
	var padRight = '30px';
	
	//Default Padding
	var defpadRight = $('#menu_sub li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu li a, #menu_sub li a').mouseover(function (){
		//mouse over LI and look for A element for transition
		$(this)
		.animate({ paddingRight: padRight}, { queue:false, duration:200 })
		.animate({ backgroundColor: colorOver }, { queue:false, duration:600 });
		if($(this).parent().hasClass('selected')) {
			$(this).stop();
		}
	});	
	$('#menu li a, #menu_sub li a').mouseout(function (){
		//mouse over LI and look for A element for transition
		$(this)
		.animate({ paddingRight: defpadRight}, { queue:false, duration:200 })
		.animate({ backgroundColor: colorOut }, { queue:false, duration:600 });
		if($(this).parent().hasClass('selected')) {
			$(this).stop();
		}
	});	
	
	
});