var Slider = {
	
	init: function() {
		
		$('#portfolio-wrapper > div > img').addClass('portfolio-image');
		$('#portfolio-wrapper > div').bind('mouseover', Slider.slideUp);
		$('#portfolio-wrapper > div').bind('mouseout', Slider.slideDown);
		
	},
	
	slideUp: function() {
		
		var image = $('.portfolio-image', this);
		image
		.stop()
		.animate({"top": "-150px"}, 350);
		
	},
	
	slideDown: function() {
		
		var image = $('.portfolio-image', this);
		image
		.stop()
		.animate({"top": "0px"}, 450);
			
	}
	
};

Slider.init();

var Overlay = {
	
	init: function() {
		
		$('.portfolio-viewer').bind('click', Overlay.openUp);
		$('body').bind('click', Overlay.closeUp);
		
	},
	
	openUp: function() {
				
		$('<div id="portfolio-overlay"></div>')
		.css('height', $(document).height())
		.css('opacity', '0')
		.animate({'opacity': '0.3'}, 'slow')
		.prependTo('body');
		
		var portfolioItem = $('<div id="portfolio-item-container"></div>');
		var top = ($(window).height() - portfolioItem.height()) / 2;
		var left = ($(window).width() - portfolioItem.width()) / 2;
		
		portfolioItem
		.css({'top': top + $(document).scrollTop(), 'left': left})
		.fadeIn()
		.prependTo('body');
				
		$('<img />')
		.attr('src', $(this).attr('href'))
		.prependTo('#portfolio-item-container');
		
		return false;		
		
	},
	
	closeUp: function() {
		
		$('#portfolio-item-container, #portfolio-overlay')
		.fadeOut()
		.remove();
		
	}
	
};

Overlay.init();