/**

 * Interface Elements for jQuery

 * ImageBox

 * 

 * http://interface.eyecon.ro

 * 

 * Copyright (c) 2006 Stefan Petre

 * Dual licensed under the MIT (MIT-LICENSE.txt) 

 * and GPL (GPL-LICENSE.txt) licenses.

 *

 */

/**

 * This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.

 * Keyboard navigation:

 *  -  next image: arrow right, page down, 'n' key, space

 *  -  previous image: arrow left, page up, 'p' key, backspace

 *  -  close: escape

 *

 * CSS

 *	#ImageBoxOverlay

 *	{

 *		background-color: #000;

 *	}

 *	#ImageBoxCaption

 *	{

 *		background-color: #F4F4EC;

 *	}

 *	#ImageBoxContainer

 *	{

 *		width: 250px;

 *		height: 250px;

 *		background-color: #F4F4EC;

 *	}

 *	#ImageBoxCaptionText

 *	{

 *		font-weight: bold;

 *		padding-bottom: 5px;

 *		font-size: 13px;

 *		color: #000;

 *	}

 *	#ImageBoxCaptionImages

 *	{

 *		margin: 0;

 *	}

 *	#ImageBoxNextImage

 *	{

 *		background-image: url(images/imagebox/spacer.gif);

 *		background-color: transparent;

 *	}

 *	#ImageBoxPrevImage

 *	{

 *		background-image: url(images/imagebox/spacer.gif);

 *		background-color: transparent;

 *	}

 *	#ImageBoxNextImage:hover

 *	{

 *		background-image: url(images/imagebox/next_image.jpg);

 *		background-repeat:	no-repeat;

 *		background-position: right top;

 *	}

 *	#ImageBoxPrevImage:hover

 *	{

 *		background-image: url(images/imagebox/prev_image.jpg);

 *		background-repeat:	no-repeat;

 *		background-position: left bottom;

 *	}

 * 

 * @name Imagebox

 * @description This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.

 * @param Hash hash A hash of parameters

 * @option Integer border border width

 * @option String loaderSRC path to loading image

 * @option String closeHTML path to close overlay image

 * @option Float overlayOpacity opacity for overlay

 * @option String textImage when a galalry it is build then the iteration is displayed

 * @option String textImageFrom when a galalry it is build then the iteration is displayed

 * @option Integer fadeDuration fade duration in miliseconds

 *

 * @type jQuery

 * @cat Plugins/Interface

 * @author Stefan Petre

 */

jQuery.ImageBox = {

	options : {

		border				: 10,

		loaderSRC			: 'images/loading.gif',

		closeHTML			: '<img src="images/close.jpg" />',

		overlayOpacity		: 0.8,

		textImage			: 'Showing image',

		textImageFrom		: 'from',

		fadeDuration		: 400

	},

	imageLoaded : false,

	firstResize : false,

	currentRel : null,

	animationInProgress : false,

	opened : false,

	keyPressed : function(event)

	{

		if(!jQuery.ImageBox.opened || jQuery.ImageBox.animationInProgress)

			return;

		var pressedKey = event.charCode || event.keyCode || -1;

		switch (pressedKey)

		{

			//end

			case 35:

				if (jQuery.ImageBox.currentRel)

					jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:last').get(0));

			break;

			//home

			case 36:

				if (jQuery.ImageBox.currentRel)

					jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:first').get(0));

			break;

			//left

			case 37:

			//backspace

			case 8:

			//page up

			case 33:

			//p

			case 80:

			case 112:

				var prevEl = jQuery('#ImageBoxPrevImage');

				if(prevEl.get(0).onclick != null) {

					prevEl.get(0).onclick.apply(prevEl.get(0));

				}

			break;

			//up

			case 38:

			break;

			//right

			case 39:

			//page down

			case 34:

			//space

			case 32:

			//n

			case 110:

			case 78:

				var nextEl = jQuery('#ImageBoxNextImage');

				if(nextEl.get(0).onclick != null) {

					nextEl.get(0).onclick.apply(nextEl.get(0));

				}

			break;

			//down;

			case 40:

			break;

			//escape

			case 27:

				jQuery.ImageBox.hideImage();

			break;

		}

	},

	init : function(options)

	{

		if (options)

			jQuery.extend(jQuery.ImageBox.options, options);

		if (window.event) {

			jQuery('body',document).bind('keyup', jQuery.ImageBox.keyPressed);

		} else {

			jQuery(document).bind('keyup', jQuery.ImageBox.keyPressed);

		}

		jQuery('a').each(

			function()

			{

				el 				= jQuery(this);

				relAttr 		= el.attr('rel')||'';

				hrefAttr 		= el.attr('href')||'';

				imageTypes 		= /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;

				if (hrefAttr.toLowerCase().match(imageTypes) != null && relAttr.toLowerCase().indexOf('imagebox') == 0) {

					el.bind('click', jQuery.ImageBox.start);

				}

			}

		);

		if (jQuery.browser.msie) {

			iframe = document.createElement('iframe');

			jQuery(iframe)

				.attr(

					{

						id			: 'ImageBoxIframe',

						src			: 'javascript:false;',

						frameborder	: 'no',

						scrolling	: 'no'

					}

				)

				.css (

					{

						display		: 'none',

						position	: 'absolute',

						top			: '0',

						left		: '0',

						filter		: 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'

					}

				);

			jQuery('body').append(iframe);

		}

		overlay	= document.createElement('div');

		jQuery(overlay)

			.attr('id', 'ImageBoxOverlay')

			.css(

				{

					position	: 'absolute',

					display		: 'none',

					top			: '0',

					left		: '0',

					opacity		: 0

				}

			)

			.append(document.createTextNode(' '))

			.bind('click', jQuery.ImageBox.hideImage);

		captionText = document.createElement('div');

		jQuery(captionText)

			.attr('id', 'ImageBoxCaptionText')

			.css(

				{

					paddingLeft		: jQuery.ImageBox.options.border + 'px'

				}

			)

			.append(document.createTextNode(' '));

		captionImages = document.createElement('div');

		jQuery(captionImages)

			.attr('id', 'ImageBoxCaptionImages')

			.css(

				{

					paddingLeft		: jQuery.ImageBox.options.border + 'px',

					paddingBottom	: jQuery.ImageBox.options.border + 'px'

				}

			)

			.append(document.createTextNode(' '));

		closeEl = document.createElement('a');

		jQuery(closeEl)

			.attr(

				{

					id			: 'ImageBoxClose',

					href		: '#'

				}

			)

			.css(

				{

					position	: 'absolute',

					right		: jQuery.ImageBox.options.border + 'px',

					top			: '0'

				}

			)

			.append(jQuery.ImageBox.options.closeHTML)

			.bind('click', jQuery.ImageBox.hideImage);

		captionEl = document.createElement('div');

		jQuery(captionEl)

			.attr('id', 'ImageBoxCaption')

			.css(

				{

					position	: 'relative',

					textAlign	: 'left',

					margin		: '0 auto',

					zIndex		: 1

				}

			)

			.append(captionText)

			.append(captionImages)

			.append(closeEl);

		loader = document.createElement('img');

		loader.src = jQuery.ImageBox.options.loaderSRC;

		jQuery(loader)

			.attr('id', 'ImageBoxLoader')

			.css(

				{

					position	: 'absolute'

				}

			);

		prevImage = document.createElement('a');

		jQuery(prevImage)

			.attr(

				{

					id			: 'ImageBoxPrevImage',

					href		: '#'

				}

			)

			.css(

				{

					position		: 'absolute',

					display			: 'none',

					overflow		: 'hidden',

					textDecoration	: 'none'

				}

			)

			.append(document.createTextNode(' '));

		nextImage = document.createElement('a');

		jQuery(nextImage)

			.attr(

				{

					id			: 'ImageBoxNextImage',

					href		: '#'

				}

			)

			.css(

				{

					position		: 'absolute',

					overflow		: 'hidden',

					textDecoration	: 'none'

				}

			)

			.append(document.createTextNode(' '));

		container = document.createElement('div');

		jQuery(container)

			.attr('id', 'ImageBoxContainer')

			.css(

				{

					display		: 'none',

					position	: 'relative',

					overflow	: 'hidden',

					textAlign	: 'left',

					margin		: '0 auto',

					top			: '0',

					left		: '0',

					zIndex		: 2

				}

			)

			.append([loader, prevImage, nextImage]);

		outerContainer = document.createElement('div');

		jQuery(outerContainer)

			.attr('id', 'ImageBoxOuterContainer')

			.css(

				{

					display		: 'none',

					position	: 'absolute',

					overflow	: 'hidden',

					top			: '0',

					left		: '0',

					textAlign	: 'center',

					backgroundColor : 'transparent',

					lineHeigt	: '0'

				}

			)

			.append([container,captionEl]);

		jQuery('body')

			.append(overlay)

			.append(outerContainer);

	},

	start : function(e, elm)

	{

		el = elm ? jQuery(elm) : jQuery(this);

		linkRel =  el.attr('rel');

		var totalImages, iteration, prevImage, nextImage;

		if (linkRel != 'imagebox') {

			jQuery.ImageBox.currentRel = linkRel;

			gallery = jQuery('a[@rel=' + linkRel + ']');

			totalImages = gallery.size();

			iteration = gallery.index(elm ? elm : this);

			prevImage = gallery.get(iteration - 1);

			nextImage = gallery.get(iteration + 1);

		}

		imageSrc =  el.attr('href');

		captionText = el.attr('title');

		pageSize = jQuery.iUtil.getScroll();

		overlay = jQuery('#ImageBoxOverlay');

		if (!jQuery.ImageBox.opened) {

			jQuery.ImageBox.opened = true;

			if (jQuery.browser.msie) {

				jQuery('#ImageBoxIframe')

					.css ('height', Math.max(pageSize.ih,pageSize.h) + 'px')

					.css ('width', Math.max(pageSize.iw,pageSize.w) + 'px')

					.show();

			}

			overlay

				.css ('height', Math.max(pageSize.ih,pageSize.h) + 'px')

				.css ('width', Math.max(pageSize.iw,pageSize.w) + 'px')

				.show()

				.fadeTo( 

					300,

					jQuery.ImageBox.options.overlayOpacity,

					function()

					{

						jQuery.ImageBox.loadImage(