$(document).ready(function () {

	Prolific.app('portfolio', function (portfolio) {
	
		portfolio.feature('details', function (details) {
			
			var $wine = $('a.wine_link');
			
			function preload () {
				var $photoInfo = $('input.img'),
					$preload = $('<div/>').css({
						overflow: 'hidden',
						height: '0px',
						width: '0px',
						position: 'absolute',
						left: '-9999px'
					}).appendTo('body');
				$photoInfo.each(function () {
					$preload.append('<img src="' + $(this).val() + '/>');
				});
			}
			
			//Bind
			$wine.click(function () {
				var $this = $(this);
				portfolio.lightbox
					.photo($this.parent().parent().find('input.img').val())
					.name($this.html())
					.blurb($this.parent().parent().find('div.desc').html())
					.show();
				return false;
			});
			
			//Preload
			window.setTimeout(preload, 1000);
			
			details.ready = true;
			
		});
		
		portfolio.feature('lightbox', function (lightbox) {
			var $shades = $('<div/>').appendTo('body').css({
					position: 'fixed',
					left: '0px',
					top: '0px',
					width: '100%',
					height: '100%',
					display: 'none',
					'z-index': 3000,
					background: '#000',
					'text-align': 'center'
				}).addClass('shades'),
				$cont = $('<div class="module full_module lightbox"><div class="inner"><div class="inner-inner"><a class="close" href="javascript:;">x</a><div class="col col1"></div><div class="col col2"></div></div></div></div>').css({
					position: 'fixed',
					left: '50%',
					top: '50px',
					width: '1024px',
					margin: '0 0 0 -516px',
					'z-index': 3001,
					display: 'none'
				}).appendTo('body'),
				$close = $cont.find('a.close'),
				$photo = $('<img/>').appendTo($cont.find('.col1')),
				$name = $('<h3></h3>').appendTo($cont.find('.col2')),
				$role = $('<div class="role"></div>').appendTo($cont.find('.col2')),
				$blurb = $('<div class="blurb"></div>').appendTo($cont.find('.col2')),
				$content = $cont.find('.inner-inner').css('height','527px');
			
			function show () {
				showShades(function () {
					$cont.css({
						opacity: 0,
						display: 'block'
					}).fadeTo(500, 1);
				});
				return this;
			}
			
			function hide () {
				hideShades();
				$cont.fadeTo(500, 0, function () {
					$cont.css('display', 'none');
				});
				return this;
			}
			
			function showShades (cb) {
				$('body').css({
					//overflow: 'hidden'
				});
				$shades.css({
					opacity: 0,
					display: 'block'
				}).fadeTo(300, .4, cb || function () {});
				return this;
			}
			
			function hideShades () {
				$('body').css({
					//overflow: 'visible'
				});
				$shades.fadeTo(300, 0, function () {
					$(this).css({
						display: 'none'
					});
				});
				return this;
			}
			
			//Bind
			$shades.click(hide);
			$close.click(hide);
			
			lightbox.augment({
				show: show,
				hide: hide,
				showShades: showShades,
				hideShades: hideShades,
				photo: function (photo) {
					$photo.attr('src', '').attr('src', photo);
					return this;
				},
				name: function (name) {
					$name.html(name);
					return this;
				},
				blurb: function (blurb) {
					$blurb.html(blurb || '');
					return this;
				}
			});
			
		});

	});
});