$(document).ready(function(){

	var posHeight = $('#position').height();
	var winHeight = $(window).height();
	var nameTop = (winHeight - posHeight) / 2;
	$('#position').css({'top': nameTop});
	$(window).bind("resize", resizeWindow);
	function resizeWindow( e ) {
		var newWindowWidth = $(window).width();
		var newWindowHeight = $(window).height();
		//$("#menu").css("min-height", newWindowHeight );
	}
	
	$('#portfolio-tab').css({'top':'0px'});
	$('#portfolio').css({'top':'-200px'});
	$('#about-tab').css({'left':'0px'});
	$('#about').css({'left':'-300px'});
	$('#contact-tab').css({'right':'0px'});
	$('#contact').css({'right':'-300px'});
	
	
	$("#portfolio-tab").toggle(
		function () {
			$('#portfolio').animate({'top':'0px'}, 'fast'); 
			$('#portfolio-tab').animate({'top':'200px'}, 'fast');
			$('#position').animate({'top': (nameTop + 100) + 'px'}, 'fast');
		},
		function () {
			$('#portfolio').animate({'top':'-200px'}, 'fast'); 
  		$('#portfolio-tab').animate({'top':'0px'}, 'fast');
  		$('#position').animate({'top' : nameTop + 'px'}, 'fast');
  	}
	);
	
	$("#about-tab").toggle(
		function () {
			$('#about').animate({'left':'0px'}, 'fast'); 
			$('#about-tab').animate({'left':'300px'}, 'fast');
		},
		function () {
			$('#about').animate({'left':'-300px'}, 'fast'); 
  		$('#about-tab').animate({'left':'0px'}, 'fast');
  	}
	);
	
		$("#contact-tab").toggle(
		function () {
			$('#contact').animate({'right':'0px'}, 'fast'); 
			$('#contact-tab').animate({'right':'300px'}, 'fast');
		},
		function () {
			$('#contact').animate({'right':'-300px'}, 'fast'); 
  		$('#contact-tab').animate({'right':'0px'}, 'fast');
  	}
	);
	
	// thumbnail scrollable
	$("#thumbnails").scrollable({size: 5, clickable: false}).find("img").each(function(index) {

		// thumbnail images trigger overlay
		$(this).overlay({
			target: '#box',
			expose: {maskId: 'mask'},

			/*
				when box is opened, scroll to correct position (in 0 seconds)
				the "images" variable is defined below
			*/
			onLoad: function() {
				images.seekTo(index, 0);
			}
		});
	});

	

	// scrollable inside the box. Its API is assigned to the "images" variable
	var images = $("#images").scrollable({size: 1, api:true});

	
	// enable tooltips for the images
	$("#images img").tooltip({
		effect: 'toggle',
		position: ['bottom', 'center'],
		//offset: [-85, -30],
		opacity: 0.8,
		effect: 'fade'
	});




});