/**
 * Create a lightbox for a given set of images.
 * 
 * The `ep.uiLightbox()` method creates a lightbox for a given set of images. The lightbox shows the images
 * in a seperate dialog.
 * 
 * ### Examples
 * Create a simple lightbox.
 * 
 * JavaScript:
 * 
 *     ep('#images')
 *       .uiLightbox({
 *         images          : '#images img',
 *         controls        : 'visible',
 *         caption         : true,
 *         count           : true,
 *         thumbs          : true,
 *         closeOnEscape   : true,
 *         closeOnClickOut : true
 *     });
 * 
 * HTML:
 * 
 *     <ul id="images">
 *       <li>
 *         <img
 *           alt="Bild 1"
 *           src="ep/ui/lightboxTest_Image1.jpg"
 *           data-src-m="ep/ui/lightboxTest_Image1.jpg"
 *           data-src-l="ep/ui/lightboxTest_Image1.jpg"
 *         />
 *       </li>
 *       <li>
 *         <img
 *           alt="Bild 2"
 *           src="ep/ui/lightboxTest_Image2.jpg"
 *           data-src-m="ep/ui/lightboxTest_Image2.jpg"
 *           data-src-l="ep/ui/lightboxTest_Image2.jpg"
 *         />
 *       </li>
 *       <li>
 *         <img
 *           alt="Bild 3"
 *           src="ep/ui/lightboxTest_Image1.jpg"
 *           data-src-m="ep/ui/lightboxTest_Image1.jpg"
 *           data-src-l="ep/ui/lightboxTest_Image1.jpg"
 *         />
 *       </li>
 *     </ul>
 * 
 * 
 * @class jQuery.ui.uiLightbox
 * @extends jQuery.widget
 * 
 * @uses ep.ui.core
 * @uses jQuery.fn.size
 * @uses jQuery.ui.widget
 * @uses ep.ui.dialog
 * @uses ep.ui.slides
 * @uses ep.ui.thumbbox
 * @since 6.14.0
 */

/**
 * @cfg {String} images A set of images which will be displayed.
 */

/**
 * @cfg {String} effect The change over effect.
 */

/**
 * @cfg {String} controls The way the controls will be displayed (auto / visible / hidden).
 */

/**
 * @cfg {Boolean} caption A boolean indication wether to show the caption of the images.
 */

/**
 * @cfg {Boolean} count A boolean indication wether to show the count of the images like (i of n).
 */

/**
 * @cfg {Boolean} thumbs A boolean indication wether to show thumbnails inside the lightbox.
 */

/**
 * @cfg {Boolean} closeOnEscape A boolean indication wether to close the lightbox by pressing the escape button.
 */

/**
 * @cfg {Boolean} closeOnClickOut A boolean indication wether to close the lightbox by clicking outside of the dialog.
 */

/**
 * @cfg {String} defaultSize The default size of images used for the slides widget.
 */

/**
 * See `jQuery.ui.uiLightbox` for details.
 * 
 * @param {Object} options A map of additional options pass to the method.
 * @param {String} images A set of images which will be displayed.
 * @param {String} effect The change over effect.
 * @param {String} controls The way the controls will be displayed (auto / visible / hidden).
 * @param {Boolean} caption A boolean indication wether to show the caption of the images.
 * @param {Boolean} count A boolean indication wether to show the count of the images like (i of n).
 * @param {Boolean} thumbs A boolean indication wether to show thumbnails inside the lightbox.
 * @param {Boolean} closeOnEscape A boolean indication wether to close the lightbox by pressing the escape button.
 * @param {Boolean} closeOnClickOut A boolean indication wether to close the lightbox by clicking outside of the dialog.
 * @param {String} defaultSize The default size of images used for the slides widget.
 * 
 * @method uiLightbox
 * @member jQuery
 * 
 * @since 6.14.0
 */

/*
 * @copyright		© Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module			ep.ui.lightbox
 */

define("ep/ui/lightbox", [
	"jquery",
	"ep",

	"jquery/ui/dialog",
	"jquery/ui/widget",
	"ep/ui/core",
	"ep/ui/dialog",
	"ep/ui/slides",
	"ep/ui/thumbbox"
], function ($, ep) {

	var win = $(window),

		winWidth = win.width(),

		winHeight = win.height(),

		_superDialog = $.ui.uiDialog.prototype,

		body;

	$.widget( "ui.uiLightbox", {
		options: {
			images			: "img",			// selector / array of data / data / image node / array of image nodes / jQuery object
			effect			: "standard",		// change-over effect
			controls		: 'visible',		// show controls or not ('auto' / 'visible' / 'hidden')
			caption			: false,			// show caption of images
			count			: false,			// show count of images like (i of n)
			thumbs			: false,			// show thumbnails inside of lightbox
			closeOnEscape	: true,
			closeOnClickOut	: true,
			defaultSize     : 'M'
		},

		_create: function(){
			var self = this,
				imgs = self.images = ep.ui.imgData(this.options.images)
					.on("lightbox.uiLightbox", $.proxy(self, "open"))
					.on("resizestop.uiLightbox", $.proxy(self, "_resizestop"));

			self.options.modal = true;

			imgs.each(function(i, item){
				if( item.node ){
					$(item.node)
						.on("click.uiLightbox",function(event){
							event.preventDefault();
							imgs.current(i)
								.trigger("lightbox");
						});
				}
			});
		},

		_setOption: function( name, value ){
			var self = this;

			if( name == "thumbs" && self.uiDialog ){
				self.uiDialog.toggleClass("ep-uiLightbox-showThumbs", value && self.images.length > 1);
			}

			self._superApply(arguments);
		},

		destroy: function(){
			var self = this;

			self.images
				.off(".uiLightbox")
				.each(function(i, item){
					if( item.node ){
						$(item.node).off("click.uiLightbox");
					}
				});

			if( self.uiDialog ){
				self.uiDialog.remove();
			}

			self._superApply(arguments);
		},

		_build: function(){
			var self = this,
				o = self.options;

			if( !self.uiDialog ){
				self.uiDialog = ep('<div class="ep-uiLightbox"/>')
					.outerWidth(win.width()-100,true)
					.outerHeight(win.height()-100,true)
					.attr({
						// Setting tabIndex makes the div focusable
						tabIndex: -1,
						role: "dialog"
					})
					.on("keydown", function( event ) {
						if ( self.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE ) {
							event.preventDefault();
							self.close( event );
						}
					})
					.appendTo("body")
					.addClass("ui-dialog ui-hidden ui-front");

				// set visibility of thumbs area
				self._setOption( "thumbs", o.thumbs );

				self.slidesWrap = ep('<div class="ep-uiLightbox-slides"/>')
					.appendTo(self.uiDialog)
					.uiSlides({
						images	    : o.images,
						effect	    : o.effect,
						controls    : o.controls,
						caption	    : o.caption,
						count	    : o.count,
						autoplay    : false,
						defaultSize : 'L'
					});

				self.thumbsWrap = ep('<div class="ep-uiLightbox-thumbs"/>')
					.appendTo(self.uiDialog)
					.uiThumbbox({
						images	: o.images,
						width	: 100,
						height	: 100
					});

				self.ctrlClose = $('<a href="javascript:void(0);" class="ep-uiLightbox-ctrlClose"/>')
					.prependTo(self.uiDialog)
					.on("click.uiLightbox",$.proxy(self, "close"));

				self.ctrlCloseHandler = $('<span>x</span>')
					.appendTo(self.ctrlClose);
			}
		},

		_appendTo: _superDialog._appendTo,

		_allowInteraction: _superDialog._allowInteraction,

		moveToTop: _superDialog.moveToTop,

		_moveToTop: _superDialog._moveToTop,

		_keepFocus: _superDialog._keepFocus,

		_createOverlay: _superDialog._createOverlay,

		_destroyOverlay: _superDialog._destroyOverlay,

		_resizestop: function(){
			if( this.uiDialog ){
				this.uiDialog
					.outerWidth( win.width() - 100, true )
					.outerHeight( win.height() - 100, true );
			}
		},

		open: function(){
			this._build();

			var self = this;
			self._createOverlay();
			self._moveToTop();
			self.uiDialog
				.removeClass("ui-hidden")
				.trigger("focus");
			self._resizestop();
		},

		close: function(){
			var self = this;

			self._destroyOverlay();
			self.uiDialog
				.addClass("ui-hidden");
		}
	});

	return ep;

});