/**
 * Create a thumbnail box for a given set of images.
 * 
 * The `ep.uiThumbbox()` method creates a thumbnail box for a given set of images. A thumbnail is a small preview of an image.
 * 
 * The thumbbox can be part of the `ep.uiLightbox()` and can also be used with `ep.uiSlides()`.
 * 
 * ### Examples
 * Create a thumbbox (list style).
 * 
 * JavaScript:
 * 
 *     ep('#thumbbox01')
 *       .uiThumbbox({
 *         images  : '#images img',
 *         width : 200,
 *         height  : 200,
 *         action  : "slides",
 *         view  : "list"
 *      });
 * 
 * HTML:
 * 
 *     <ul id="images" style="display:none;">
 *       <li>
 *         <img
 *           alt="Bild 1"
 *           src="ep/ui/thumbboxTest_Image1.jpg"
 *           data-src-m="ep/ui/thumbboxTest_Image1.jpg"
 *           data-src-l="ep/ui/thumbboxTest_Image1.jpg"
 *         />
 *       </li>
 *       <li>
 *         <img
 *           alt="Bild 2"
 *           src="ep/ui/thumbboxTest_Image2.jpg"
 *           data-src-m="ep/ui/thumbboxTest_Image2.jpg"
 *           data-src-l="ep/ui/thumbboxTest_Image2.jpg"
 *         />
 *       </li>
 *       <li>
 *         <img
 *           alt="Bild 3"
 *           src="ep/ui/thumbboxTest_Image1.jpg"
 *           data-src-m="ep/ui/thumbboxTest_Image1.jpg"
 *           data-src-l="ep/ui/thumbboxTest_Image1.jpg"
 *         />
 *       </li>
 *     </ul>
 *     <div id="thumbbox01" style="width:650px;"></div>
 * 
 * 
 * @class jQuery.ui.uiThumbbox
 * @extends jQuery.widget
 * 
 * @uses ep.ui.core
 * @uses jQuery.fn.class
 * @uses jQuery.tmpl
 * @uses jQuery.ui.widget
 * @since 6.14.0
 */

/**
 * @cfg {String} event The event that changes the current image.
 */

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

/**
 * @cfg {Number} width The width of the thumbnail.
 */

/**
 * @cfg {Number} height The height of the thumbnail.
 */

/**
 * @cfg {String} view The style of the thumbbox (list / slide / fisheye).
 */

/**
 * See `jQuery.ui.uiThumbbox` for details.
 * 
 * @param {Object} options A map of additional options pass to the method.
 * @param {String} event The event that changes the current image.
 * @param {String} images A set of images which will be displayed.
 * @param {Number} width The width of the thumbnail.
 * @param {Number} height The height of the thumbnail.
 * @param {String} view The style of the thumbbox (list / slide / fisheye).
 * 
 * @method uiThumbbox
 * @member jQuery
 * 
 * @since 6.14.0
 */

/*
 * @copyright		© Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module			ep.ui.thumbbox
 *
 * @revision		$Revision: 1.9 $
 */

define("ep/ui/thumbbox", [
	"jquery",
	"ep",
	"$tmpl!ep/ui/thumbbox",

	"jquery/fn/class",
	"jquery/ui/widget",
	"ep/ui/core"
], function ($, ep, tmplThumbbox){

	$.widget( "ui.uiThumbbox", {
		options: {
		//	action			: "lightbox",
			event			: "click",
			images			: "img",			// selector / array of data / data / image node / array of image nodes / jQuery object		//
			width			: 100,				// width of thumbnail
			height			: 100,				// height of thumbnail
			view			: "list"			// style of thumbbox ("list" / "slide" / "fisheye")
		},

		_create: function(){
			var self	= this,
				o		= self.options,
				imgs	= self.images = ep.ui.imgData(o.images),
				width	= o.width,
				height	= o.height,
				srcType	= 'srcXs';

			if( width > 190 || height > 190 ){
				srcType	= 'srcL';
			}
			else if( width > 140 || height > 140 ){
				srcType	= 'srcM';
			}
			else if( width > 90 || height > 90 ){
				srcType	= 'srcS';
			}

			$.extend( self, tmplThumbbox([{imgData:imgs.get(),srcType:srcType}] ).appendTo(self.element).tmplItem('elements') );

			self._setOptions(o);

			// set current the thumbnail of the current image active
			self.element.find('li:first').addClass('active');
			imgs.on('change', function(){
				var currentSrc = imgs.current()[srcType],
					thumbList = $('img[src="'+currentSrc+'"]').closest('ul'),
					thumbItem = $('img[src="'+currentSrc+'"]').closest('li'),
					thumbboxWidth = $('img[src="'+currentSrc+'"]').closest('.ep-uiThumbbox').width(),
					thumblistLeft = thumbList[0].offsetLeft,
					thumbLeft = thumbItem[0].offsetLeft;

				self.element.find('li.active').removeClass('active');
				thumbItem.addClass('active');

				if(self.options.view === "slide"){
					// scroll active thumb into view if necessary
					if(thumblistLeft + thumbLeft < 0){
						thumbList.stop(true, true).animate({
							'left': -thumbLeft + "px"
						});
					}else if(thumblistLeft + thumbLeft > thumbboxWidth){
						thumbList.stop(true, true).animate({
							'left': (thumbboxWidth-thumbLeft-thumbItem.outerWidth()) + "px"
						});
					}
				}
			});

		},

		_init: function(){

		},

		destroy: function(){
			var self = this;

			self.images.off(".uiThumbbox");
			self.container.remove();
			self._superApply(arguments);
		},

		_setOption: function( key, value ) {
			var self = this,
				o = self.options,
				imgs = self.images;

			if ( key === "view" ) {
				// reset slide
				self.container
					.off("mousemove.uiThumbbox")
					.css( "height", "" )
					.removeClass(/ep-uiThumbbox-[\w]+/)
					.addClass("ep-uiThumbbox-"+value);

				if( value == "slide" ){
					// init slide
					self.container
						.on("mousemove.uiThumbbox",$.proxy(self, "_slideMove"))
						.height( self.list.outerHeight(true) );
				}
			}
			else if( key === "width" ){
				self.list
					.children()
					.width(value);
			}
			else if( key === "height" ){
				self.list
					.children()
					.height(value)
					.css("line-height",value+"px");
				self._setOption("view",self.options.view);
			}
			else if( key === "event" ){
				self.element
					.off(".uiThumbbox", "img")
					.on(value + ".uiThumbbox", "li", function(event){
						var item = $(this).data("item");

						if( item !== undefined && item != imgs.currentItem ){

							imgs.current( item );

							if( o.action ){
								imgs.trigger(o.action);
							}
						}
					});
			}

			return this._superApply(arguments);
		},

		_slideMove: function( event ){
			var self			= this,
				containerLeft	= self.container.offset().left,
				containerWidth	= self.container.width(),
				listWidth		= self.list.width(),
				mouseLeft		= event.pageX - containerLeft,
				speed			= self.list.position().left

			self.list.stop(true);

			if(listWidth > containerWidth){
				if( mouseLeft < (containerWidth * 1/4) ){
					self.list.animate({left: "0px"}, Math.abs(speed*2), 'linear');
				}
				else if( mouseLeft > (containerWidth * 3/4) ){
					self.list.animate({left: (containerWidth-listWidth)+"px"}, Math.abs((listWidth-containerWidth+speed)*2), 'linear');
				}
			}
		}
	});

	return ep;

});