$(document).ready(function () {

	Prolific.app('teamWidget', function (widget) {
	
		var $container = $('#team'),
			$people = $container.children('li'),
			$nameHover = $('#name_hover');
		
		widget.feature('hover', function (hover) {
		
			function on () {
				$nameHover.empty().append($(this).find('h4.person_name').clone(true));
			}
			
			function off () {
			}
			
			$people.hover(on, off);
			$container.mouseleave(function () {
				$nameHover.empty();
			});
			
			hover.init = true;
		});
		
		widget.feature('details', function (details) {
			
			var photos = 'blank,mike,pete,leah,nick,steve,jeremy'.split(',');
			
			function preload () {
				var i = 1,
					$preload = $('<div/>').css({
						overflow: 'hidden',
						height: '0px',
						width: '0px',
						position: 'absolute',
						left: '-9999px'
					}).appendTo('body');
				for (i; i < photos.length; i += 1) {
					$preload.append('<img src="/wp-content/themes/votto/images/company/' + photos[i] + '.jpg"/>')
				}
			}
			
			function show (id, name, role, blurb) {
				widget.lightbox
					.photo('/wp-content/themes/votto/images/company/' + photos[id] + '.jpg')
					.name(name)
					.role(role)
					.blurb(blurb);
				return this;
			}
			
			details.augment({
				show: show
			});
			
			//Bind
			$people.click(function () {
				var $this = $(this);
				show(
					$this.attr('class').replace('person_', ''),
					$this.find('h4.person_name a').html(),
					$this.find('.person_title').html(),
					$this.find('.person_blurb').html()
				);
				widget.lightbox.show();
				return false;
			});
			
			//Preload
			window.setTimeout(preload, 1000);
			
		});
		
		widget.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', photo);
					return this;
				},
				name: function (name) {
					$name.html(name);
					return this;
				},
				role: function (role) {
					//$role.html(role);
					return this;
				},
				blurb: function (blurb) {
					$blurb.html(blurb || '');
					return this;
				}
			});
			
		});
		
	});

});