/*
	2011-05-03
	v0.1
*/

// Trinchlightbox
(function($) {
	$.fn.trinchLightBox = function(options) { 
		return new TrinchLightBox(this, options); 
	};
	
	function TrinchLightBox(context, options) { this.init(context, options); };
	
	TrinchLightBox.prototype = {
		options:{},
		init: function (context, options)
		{
			this.options = $.extend({
				showTitle: true,
				showTitleBackground: true,
				showThumbnails: false,
				showCloseOnLeft: false,
				thumbsPadding: 10, // padding in .trinchlb-thumbs-content .padding
				thumbsBorder: 1, // border in .trinchlb-thumbs-content .padding img
				duration: 300
			}, options || {});
			
			this.hrefs = $(context);
			this.picindex = 0;
			
			this.initHTML();
			this.initHrefs();
		},
		initHTML: function ()
		{
			var _this = this;
			
			// Overlay background
			this.overlay_background = $('<div class="trinchlb-overlay"></div>').bind('click', function () 
			{ 
				_this.hideLightBox();
			});
			$('body').append(this.overlay_background);
			
			// Overlay close
			this.overlay_close = $('<div class="trinchlb-close"></div>').bind('click', function () 
			{ 
				_this.hideLightBox();
			});
			$('body').append(this.overlay_close);
			
			// Overlay Title
			this.overlay_title = $('<div class="trinchlb-title"><span class="'+((this.options.showTitleBackground==true) ? 'background' : '')+'"></span></div>');
			$('body').append(this.overlay_title);
			
			// Overlay Content Container
			this.overlay_container = $('<div class="trinchlb-container"><div class="trinchlb-zoom"></div><div class="trinchlb-thumbs-container"></div></div>');
			$('body').append(this.overlay_container);
			
			if (this.options.showThumbnails==false)
			{
				this.overlay_container.find(".trinchlb-thumbs-container").css({ 'display': 'none' });
			}
			else
			{
				var $thumbcontainer = this.overlay_container.find(".trinchlb-thumbs-container");
				
				var $arrow_left = $('<a class="trinchlb-thumbs-arrow trinchlb-thumbs-arrow-left"></a>');
				var $arrow_right = $('<a class="trinchlb-thumbs-arrow trinchlb-thumbs-arrow-right"></a>');
				
				$arrow_left.bind('click', function ()
				{
					_this.arrowLeftOnClick();
				});
				$arrow_right.bind('click', function ()
				{
					_this.arrowRightOnClick();
				});
				
				$thumbcontainer.append($arrow_right);
				$thumbcontainer.append($arrow_left);
				$thumbcontainer.append($('<div class="trinchlb-thumbs-content"><div class="padding"></div></div>'));
			}
		},
		initHrefs: function ()
		{
			this.images = new Array(); 
			var _this = this;
			var _thumbs_content = _this.overlay_container.find(".trinchlb-thumbs-content");
			var _thumbs_content_padding = _thumbs_content.find(".padding");
			
			this.hrefs
				.each(function (index)
				{
					var info = { index: index, title: $(this).attr("title"), image: $(this).attr("href"), thumbnail: $(this).find("img").attr("src") }
					_this.images.push(info);
					$(this).data("tlb", info);
					
					if (_this.options.showThumbnails == true)
					{
						// Afbeelding opzoeken & dupliceren in thumbs container indien nodig?
						var $new_img = $(this).find("img").clone().css({ width: '', height: '' });
						_thumbs_content_padding.append($new_img);
						
						$new_img
							.bind('click', function ()
							{
								_this.thumbImageOnClick(info);
							})
							.css({
								'height': _thumbs_content.height() - (_this.options.thumbsPadding * 2) - (_this.options.thumbsBorder * 2) 
							})
							.attr({
								'index': info.index
							})
							.data("tlb", info);
					}
				})
				.bind('click', function ()
				{
					_this.showLightBox($(this));
					return false;
				});
		},
		showLightBox: function ($href)
		{
			var _this = this;
			
			// Keyboard navigatie mogelijk maken
			$(document)
				.unbind('keydown')
				.bind('keydown', 'esc', function()
				{
					_this.hideLightBox();
				});
			
			if (_this.options.showThumbnails == true)
			{
				$(document)
					.bind('keydown', 'left', function()
					{
						_this.arrowLeftOnClick();
					})
					.bind('keydown', 'right', function()
					{
						_this.arrowRightOnClick();
					});
			}
			
			this.overlay_container.width(200).find(".trinchlb-zoom").empty().append('<div class="trinchlb-zoom-loading"></div>');
			this.reposition();

			
			this.newimage($href.data("tlb"));
			this.reposition();
			
			this.overlay_background.fadeIn(this.options.duration);
			this.overlay_container.fadeIn(this.options.duration);
		},
		arrowLeftOnClick: function ()
		{
			var current_index = this.overlay_container.find('.trinchlb-thumbs-content .active').attr("index");
			var image_count = this.overlay_container.find('.trinchlb-thumbs-content img').length;
			var new_index = (current_index > 0) ? parseFloat(current_index) - 1 : image_count - 1;
			
			var new_data = this.overlay_container.find(".trinchlb-thumbs-content img[index="+new_index+"]").data("tlb");
			
			this.newimage(new_data);
			this.reposition();
		},
		arrowRightOnClick: function ()
		{
			var current_index = this.overlay_container.find('.trinchlb-thumbs-content .active').attr("index");
			var image_count = this.overlay_container.find('.trinchlb-thumbs-content img').length;
			var new_index = (current_index < image_count-1) ? parseFloat(current_index) + 1 : 0;
			
			var new_data = this.overlay_container.find(".trinchlb-thumbs-content img[index="+new_index+"]").data("tlb");
			
			this.newimage(new_data);
			this.reposition();
		},
		thumbImageOnClick: function (data)
		{
			this.newimage(data);	
		},
		newimage: function (data)
		{
			var _this = this;
			var loading_timeout;
			
			loading_timeout = setTimeout(function ()
			{
				_this.overlay_container.width(200).find(".trinchlb-zoom").empty().append('<div class="trinchlb-zoom-loading"></div>');
				_this.reposition();
			}, 500);

			var $image = $('<img class="trinchlb-bigimg" src="'+data['image']+'" />').css('display', 'none').bind('load', function ()
			{
				clearTimeout(loading_timeout);
				
				var _img = this;
				
				_this.overlay_container.find(".trinchlb-zoom").empty().append(_img);
				_this.overlay_container.find('.trinchlb-thumbs-content .active').removeClass('active');
				_this.overlay_container.find('.trinchlb-thumbs-content img[index='+data.index+']').addClass('active');
				$(_img).css({ 'display': 'block' });
				
				if (_this.options.showTitle == true && data.title != undefined && data.title != "")
				{
					_this.overlay_title.find("span").html(data.title);
				}
				
				
				_this.reposition();
			});
		},
		reposition: function ()
		{
			var width = 0;
			var height = 0;
				
			var ie_extra = ($.browser.msie) ? 3 : 0;
			
			var $image = this.overlay_container.find(".trinchlb-bigimg");
			if ($image.length == 0)
			{
				this.overlay_container.find('.trinchlb-thumbs-content .active').removeClass('active');
				this.overlay_container.find(".trinchlb-thumbs-container").css({ 'display': 'none' });
				$image = this.overlay_container.find(".trinchlb-zoom-loading");
				width = $image.width()+100;
				height = $image.height();
				
				this.overlay_close.css({ 'display': 'none' });
				this.overlay_container.find('.trinchlb-thumbs-container').css({ 'display': 'none' });
				this.overlay_title.css({ 'display': 'none' });
			}
			else 
			{
				width = parseFloat($image.width());
				height = $image.height();
				
				this.overlay_close.css({
					'margin-left': (this.options.showCloseOnLeft == true) ? this.number_in_negative(width/2) - this.overlay_close.width() / 2 :  (width/2) - this.overlay_close.width() / 2,
					'margin-top': this.number_in_negative(height/2) - this.overlay_close.height() / 2 - ie_extra,
					'display': 'block'
				});
				
				this.overlay_title.css({ 
					'margin-left': this.number_in_negative(width/2),
					'margin-top': this.number_in_negative(height/2) - this.overlay_title.height(),
					'display': (this.options.showTitle == true  && this.overlay_title.find("span").html() != "") ? 'block' : 'none'
				});
				
				if (this.options.showThumbnails == true)
				{
					var $container = this.overlay_container.find(".trinchlb-container");
					var $thumbs_container = this.overlay_container.find(".trinchlb-thumbs-container");
					var $thumbs_arrowleft = this.overlay_container.find(".trinchlb-thumbs-arrow-left");
					var $thumbs_arrowright = this.overlay_container.find(".trinchlb-thumbs-arrow-right");
					var $thumbs_content = this.overlay_container.find(".trinchlb-thumbs-content");
					$thumbs_container.css({ 'display': 'block' });
					
					$thumbs_content.width($container.width() - $thumbs_arrowleft.width() - $thumbs_arrowright.width())
				}
			}
			
			this.overlay_container.css({
				'margin-left': this.number_in_negative(width/2),
				'margin-top': this.number_in_negative(height/2) - ie_extra,
				'width': width
			});
		},
		hideLightBox: function ()
		{
			this.overlay_background.fadeOut(this.options.duration);
			this.overlay_container.fadeOut(this.options.duration);
			this.overlay_close.fadeOut(this.options.duration);
			this.overlay_title.fadeOut(this.options.duration);
			
			$(document)
				.unbind('keydown');
		},
		number_in_negative: function (number)
		{
			return number - (number * 2);
		}
	}
}(jQuery));