$(document).ready(function() {

	// when clicking on lighbox element
	$('a.lightbox').click(function(evt)
	{

		// prevent default link behaviour
		evt.preventDefault();

		// Define contents of lightbox
		$('.figure img')
			.attr('src', $(this).attr('href'))
			.attr('alt', $(this).attr('alt'));
		
		console.log($(this).attr('href'));

		// Caption = img alt tag
		$('.caption').html($(this).find('img').attr('alt'));

		// open lightbox
		showBox();
	});
	
	$('img.lightbox').click(function(evt) {

		// prevent default link behaviour
		evt.preventDefault();

		// Define contents of lightbox
		$('.figure img')
			.attr('src', $(this).parent().attr('href'))
			.attr('alt', $(this).parent().attr('alt'));

		// Caption = img alt tag
		$('.caption').html($(this).attr('alt'));

		// open lightbox
		showBox();
	});
	
	// when clicking on lighbox element
	$('a.modalClose').click(function(evt)
	{
		// prevent default link behaviour
		evt.preventDefault();

		// open lightbox
		closeBox();
	});
});

// Tried to take positioning code from tagger but did not work out
// @note let a developer do this properly O_0

function showBox() {
	// position the box
	center();

	// Feature detection for opacity; IE6/7/8 does not correctly support opacity
	if (jQuery.browser.msie) {

		// Persistent overlay opacity for IE6
		$('#modalOverlay').css("filter", "alpha(opacity=33)");

		// show tagBox
		$('.modal').css('display', 'block');
		$('#modalOverlay').css('display', 'block');

		// only IE should use absolute
		if($.browser.msie && $.browser.version =='6.0') {
			$('#modalOverlay').css('height', $(document).height());
		}

		$('body').addClass('modalShowing');

		// Make sure the hide code has no effect on the modal box itself
		$('.modal').bind('click', function(evt) { evt.stopPropagation(); });

		// Hide modal box when clicking outside it
		$('#modalOverlay').bind('click', function(evt) {
			$('.modal').css('display', 'none');
			$('#modalOverlay').css('display', 'none');
		});

		// Hide modal box when pressing escape button
		$('html').bind("keyup", function(evt) {
			if (evt.keyCode == 27 || evt.keyCode == 88) {
				$('.modal').css('display', 'none');
				$('#modalOverlay').css('display', 'none');
			}
		});

	} else {

		// show modal box
		$('.modal').fadeIn(250);
		$('#modalOverlay').fadeIn(250);

		// Make sure the hide code has no effect on the modal box itself
		$('.modal').bind('click', function(evt) { evt.stopPropagation(); });

		// Hide modal box when clicking outside it
		$('#modalOverlay').bind('click', function(evt) {
			$('.modal, #modalOverlay').fadeOut(250);
		});

		// Hide modal box when pressing escape button
		$('html').bind("keyup", function(evt) {
			if (evt.keyCode == 27 || evt.keyCode == 88) {
				$('.modal, #modalOverlay').fadeOut(250);
			}
		});
	}
}

function closeBox() {

	// hide tagBox
	$('.modal, #modalOverlay').fadeOut(250);
}

/**
 * Centers a div in the active browser window, based on the viewport position (thanks to scrollTop)
 *
 * Binds to:
 * - Preferably a div, might work on other elements too.
 *
 * Requirements:
 * 	- none
 */
function center()
{
	// initialize object references
	var oElement = $('.modal');
	var oWindow = $(window);

	// calculate offset
	var offsetLeft = parseInt((oWindow.width() - oElement.width()) / 2);
	var offsetTop = parseInt((oWindow.height() - oElement.height()) / 2);

	var modalWidth = parseInt(oElement.width());
	var modalHeight = parseInt(oElement.height());

	oElement.css('left', offsetLeft)
			.css('top', 80)
			.css('width', modalWidth)
			.css('height', modalHeight)
			.css('position', 'fixed');

	// only IE should use absolute
	if($.browser.msie && $.browser.version =='6.0') {
		oElement.css('position', 'absolute')
					.css('top', parseInt(offsetTop + $(window).scrollTop()));
	}
}