/**
 * This class is required to handle jQuery lightBoxes generated by CMS. These lightBoxes
 * automatically call jLightBox.init().
 */

function jLightBoxGallery($) {
	/* private attributes and function ==========================================================*/
	var _lightBox = [];
	var _settings = {
		// Configuration related to overlay
		overlayBgColor: 		'#cbc2a4',
		overlayOpacity:			.75,
		// Configuration related to images
		imageLoading:			'/_javascript/lightbox/images/lightbox-ico-loading.gif',
		// Configuration related to container image box
		containerBorderSize:	16,
		containerResizeSpeed:	400
	};

	/*---------------------------------------------------------------------------------------------
	 * Center an (invisible) image inside a space of a given size and display it afterwards.
	 *
	 * params:
	 *   image: the image to be centered
	 *   w:     width of the space the image is to be placed in
	 *   h:     height of the space the image is to be placed in
	 */
	function _centerImage(image, w, h) {
		var width = image.width();
		var height = image.height();

		if (!width || !height) {
			window.setTimeout(function(){
				_centerImage(image, w, h);
			}, 10);
		}
		else {
			image.css({"margin": ((h - height) / 2) + "px 0 0 " + ((w - width) / 2) + "px", "visibility": "visible"});
		}
	}

	/*---------------------------------------------------------------------------------------------
	 * Create markup for a thumbnail and add event handlers, if required.
	 *
	 * params:
	 *   lightBoxId: ID of the lightBox
	 *   data:       { pic, thumb, preview }
	 *   display:    whether to display the thumb or not
	 * return value: an HTML object having markup like this:
	 *
	 *   <div class="boxHalfCol">
	 *  	<div class="boxImage">
	 *  		<a class="lightbox" href="...">
	 *  			<img src="..." alt="" border="0" class="imgHalfCol" style="position: relative; top: 4px; left: 4px; visibility: visible;">
	 *  			<span class="boxImageBorderOverlay">
	 *  				<span class="boxUL">
	 *  					<span class="boxLR"></span>
	 *  				</span>
	 *  			</span>
	 *  		</a>
	 *  	</div>
	 *   </div>
	 */
	function _createThumb(lightBoxId, data, display) {
		var thumb;

		thumb = $("<span>").addClass("boxLR");
		thumb = $("<span>").addClass("boxUL").append(thumb);
		thumb = $("<span>").addClass("boxImageBorderOverlay").append(thumb);
		thumb = $("<a>").addClass("lightbox").attr("href", data.pic).append(thumb);
		thumb.prepend($("<img>").addClass("imgHalfCol")
			.attr("src", data.thumb).attr("alt", "").attr("border", "0")
			.css("visibility", "hidden")
		);
		thumb = $("<div>").addClass("boxImage").append(thumb);
		thumb = $("<div>").addClass("boxHalfCol").append(thumb);

		if (data.preview) {
			thumb.hover(function() {
				_selectThumb($(this), data.preview);
			});
			if ($("#container-lightbox" + lightBoxId + " .boxHalfCol").size() == 0) {
				$("#container-lightbox" + lightBoxId).parents(".boxLightbox").find(".boxImageLarge").prepend(
					$("<img>").addClass("img2Col").attr("src", data.preview).attr("alt", "").attr("border", "0")
					.css("visibility", "hidden")
				);
				thumb.addClass("selected");
			}
		}
		if (display == false) {
			thumb.css({"display": "none"});
		}
		return thumb;
	}

	/*---------------------------------------------------------------------------------------------
	 * Replace the preview image and its event handlers.
	 *
	 * params:
	 *   thumb:   reference the thumbnail associated to the preview image
	 *   preview: source of the preview image to be displayed
	 */
	function _selectThumb(thumb, preview) {
		var lightbox = thumb.parents(".boxLightbox");

		if (preview != lightbox.find(".img2Col").eq(0).attr("src")) {
			thumb.parent().find(".boxHalfCol").removeClass("selected");
			thumb.addClass("selected");

			lightbox.find(".boxImageLarge img").remove();
			lightbox.find(".boxImageLarge").prepend(
				$("<img>").addClass("img2Col").attr("src", preview).attr("alt", "").attr("border", "0")
				.css("visibility", "hidden")
			);
			_centerImage(lightbox.find(".img2Col"), 240, 241);
		}
	}

	/* public functions =========================================================================*/
	/*---------------------------------------------------------------------------------------------
	 * Generate markup for jQuery lightBox from an object containing settings.
	 *
	 * params:
	 *   settings: { id, images: [ { pic, thumb, preview }, ... ], maxThumbs }
	 *             (with optional members images[i].preview and maxThumbs)
	 */
	this.init = function(settings) {
		// save lightBox settings to private array
		_lightBox[_lightBox.length] = settings;

		// initialize lightBox
		var container = $("#container-lightbox" + settings.id);
		var maxThumbs = (typeof settings.maxThumbs == "number" && settings.maxThumbs >= 0) ? settings.maxThumbs : settings.images.length;

		for (var i=0; i<settings.images.length; i++) {
			container.append(_createThumb(settings.id, settings.images[i], i < maxThumbs ? true : false));
		}
		container.find("a.lightbox").lightBox(_settings);
		container.show();

		// center and display lightbox images
		var preview = container.parents(".boxLightbox").find(".img2Col").eq(0);
		var thumbs = container.find(".imgHalfCol");

		_centerImage(preview, 240, 241);

		for (var i=0; i<thumbs.size(); i++) {
			_centerImage(thumbs.eq(i), 48, 49);
		}
	}

	/*---------------------------------------------------------------------------------------------
	 * Set loading image (specifically designed for galke.com since the image depends on the color
	 * set currently used).
	 *
	 * params:
	 *   src: source of the loading image to be used
	 */
	this.setLoadingImage = function(src) {
		if (typeof src == "string") {
			_settings.imageLoading = src;
		}
	}
};

var jLightBox = new jLightBoxGallery(jQuery);