/**
 * jquery.vt.lightbox.js
 *
 * Does exactly the same as your average off-the-shelf lightbox
 * 
 */

(function($) {

	$.fn.lightbox = function lightbox(options) {

		var hide = function hide() {
			$('html').removeAttr('style');
			$('body').removeAttr('style');

			// immediately hide the panel
			$container.hide();

			// hide the grey out
			$grey_out.css({'display':'none'});

			$(document).unbind('.'+options.id);
			$close_btn.unbind('.'+options.id);
		}

		var show = function show() {

			// sad, but true - use a global flag to stop a drag from firing
			// the rollover :(
			// set in bookshelf scripts
			if (window.VT && window.VT.preventCoverClick === true) {
				window.VT.preventCoverClick = false;
				return;
			}

			$outer.attr({
				'id' : options.id
			}); // TODO extremely naughty hack!!

			// hide ugly scroll bars
			// Why here and not in the body? Have a guess. Yes, correct: IE 7.
			$('html').css({
				'overflow'	: 'hidden'
			});
			$('body').css({
				'position'	: 'relative'  // IE 7
			});

			// grey out the background
			$grey_out.css({'display':'inline'});

			// show the panel
			// IE doesn't like fading in absolutely positioned elements
			var speed = $.browser.msie ? 0 : 'fast';
			$container.stop(true, true).fadeIn(speed);

			// enable the escape key
			$(document).bind('keydown.'+options.id, function(event) {
				if(event.keyCode == 27)
					hide();
			});

			$close_btn.bind('click.'+options.id, hide);
		}

		var $trigger = $(options.trigger);
		var $grey_out;
		var $container;
		var $outer;
		var $inner;
		var $content;
		var $close_btn;

		if ($('.lb_outer').size() == 0) {
			/* central div of panel */
			$inner = $('<div />').addClass('lb_inner');
			$content = $('<div />').addClass('lb_content');

			/* 'X' close button */
			$close_btn = $('<img></img>').attr({
				'class'	: 'lb_close',
				'src'	: '/img/close.png',
				'alt'	: 'close'
			});
			$inner.append($content);
			$inner.append($close_btn);

			/* drop shadows */
			var $top_right = $('<span/>').addClass('lb_tr lb_abs lb_filter'),
				$mid_right = $('<span/>').addClass('lb_r lb_abs lb_filter'),
				$bottom_right = $('<span/>').addClass('lb_br lb_abs lb_filter'),
				$bottom_mid = $('<span/>').addClass('lb_b lb_abs lb_filter'),
				$bottom_left = $('<span/>').addClass('lb_bl lb_abs lb_filter');

			/* outer container */
			$outer = $('<div/>').addClass('lb_outer');
			$outer.append($inner)
			      .append($top_right)
			      .append($mid_right)
			      .append($bottom_right)
			      .append($bottom_mid)
			      .append($bottom_left);

			/* grey out for background */
			$grey_out = $('<div/>').addClass('lb_underlay');
			/* container to position the panel */
			$container = $('<div/>').addClass('lb_container');

			$container.append($outer);
			$('body').append($grey_out);
			$('body').append($container);
		} else {
			$content = $('.lb_content');
			$inner = $('.lb_inner');
			$outer = $('.lb_outer');
			$container = $('.lb_container');
			$close_btn = $('.lb_close');
			$grey_out = $('.lb_underlay');
		}

		$trigger.live('click', function(event) {
			event.preventDefault();

			// de-populate the panel
			$content.html('');

			// the event target might not be the actual cover, but
			// a descendent of it.
			var cover = $(event.target).parents('.cover');
			
			// populate the panel
			if (options.populate)
				options.populate.call(cover || event.target, $content);

			// show the panel
			show();
		});
	}
})(jQuery);