// A modified version of the jquery.customlightbox.js
// Modified by Jonathan van Rij, Communited.
// Adjusted so that you will have a title element in the image when the lightbox in rendered. It requires the "ul.list a" elements to have a title.

$.fn.customLightbox = function(_options){
	// defaults options
	var _options = $.extend({
		thumbnail:'#thumbs a',
		lightboxContentBlock: 'div.popup',
		lightboxImage:'img.big',
		next:'a.next',
		prev:'a.prev',
		title:'p',
		name:'h3.gallery-name',
		load:'img.load',
		galleryName:'name',
		faderOpacity: 0.5,
		faderBackground: '#000000',
		closeLink:'a.close',
		paddingLeft:27,
		paddingRight:27,
		paddingTop:27,
		paddingBottom:27,
		lbMinWidth:300,
		lbMinHeight:200,
		onClick: null
	},_options);

	return this.each(function(i, _this){
		var _this = $(_this);
		// generate code for the lightbox **************************************
		var _lightboxCode = '<div class="popup"> \
								<div class="popup-bg"> \
									<a class="close" href="#">Sluit</a> \
									<a class="prev" href="#">prev</a> \
									<a class="next" href="#">next</a> \
									<a class="first" href="#">< vorige</a> \
									<a class="last" href="#">volgende ></a> \
									<ul> \
										<li><a href="#">1</a></li> \
									</ul> \
									<div> \
										<img src="" class="big" alt="image description" /> \
										<img src="/public/system/images/ajax-loader.gif" class="load" alt="load ico" /> \
									</div> \
								</div> \
							</div>'; 
		var _faderCode = '<div class="lightbox-fader"></div>';

		if (!$(_options.lightboxContentBlock).length)
			$('body').append(_lightboxCode);
		if (!$('.lightbox-fader').length)
			$('body').append(_faderCode);
		
		// set style lightbox **************************************************	
		var _lightbox = $(_options.lightboxContentBlock);
		var _fader = $('div.lightbox-fader');
		
		_lightbox.css({
			width:_options.lbMinWidth,
			display:'none',
			position:'absolute',
			top:0,
			left:0,
			zIndex:999
		});
		_fader.css({
			opacity:_options.faderOpacity,
			backgroundColor:_options.faderBackground,
			display:'none',
			position:'absolute',
			top:0,
			left:0,
			zIndex:998,
			textIndent: -9999
		}).html('<iframe frameborder="0" width="100%" height="100%">$nbsp</iframe>');
		_fader.find('iframe').css('opacity',0);
		
		var _currentImage = 0;
		var _thumbnails = $(_options.thumbnail, _this);
		var _closeLink = $(_options.closeLink, _lightbox);
		var _mainImage = $(_options.lightboxImage, _lightbox);
		var _load = $(_options.load, _lightbox);
		var _title = $(_options.title, _lightbox);
		var _linkNext = $(_options.next, _lightbox);
		var _linkPrev = $(_options.prev, _lightbox);
		var _imageHolder = _mainImage.parent();
		var _firstThum = $('a.first', _lightbox);
		var _lastThum = $('a.last', _lightbox);
		var _image = {};
		var _top = 0;
		var _left = 0, _first = false;
		
		var _list = '';
		for (var j=0; j<_thumbnails.length; j++) {
			_list += '<li><a href="#'+(j+1)+'">'+(j+1)+'</a></li>';
		}
		var _ul = $('ul',_lightbox);
		_ul.html(_list);
		
		var _numLinks = _ul.find('a');
		_numLinks.each(function(i){
			$(this).click(function(){
				if (_currentImage != i) {
					_thumbnails.eq(i).trigger('click');
				}
				return false;
			});
		});
		
		_thumbnails.click(function(){
			_currentImage = _thumbnails.index($(this));
			_numLinks.removeClass('active');
			_numLinks.eq(_currentImage).addClass('active');
			_fader.fadeIn(300, function(){
				_mainImage.hide();
				_title.hide();
				_lightbox.fadeIn(400, function(){
					onloadImage(_currentImage);
				});
				if (!_first) {
					positionLightbox(_lightbox);
					_first = true;
				}
			});
			return false;
		});
		_firstThum.click(function(){
			_linkPrev.trigger('click');
			return false;
		});
		_lastThum.click(function(){
			_linkNext.trigger('click');
			return false;
		});_linkNext.click(function(){
			_currentImage += 1;
			if (_currentImage >= _thumbnails.length) _currentImage = 0;
			onloadImage(_currentImage);
			_numLinks.removeClass('active');
			_numLinks.eq(_currentImage).addClass('active');
			return false;
		});
		_linkPrev.click(function(){
			_currentImage -= 1;
			if (_currentImage < 0) _currentImage = _thumbnails.length-1;
			onloadImage(_currentImage);
			_numLinks.removeClass('active');
			_numLinks.eq(_currentImage).addClass('active');
			return false;
		});
		_closeLink.click(function(){
			_lightbox.fadeOut(400, function(){
				_fader.fadeOut(300);
				_scroll = false;
			});
			return false;
		});
			
		function onloadImage(_cur) {
			_mainImage.hide();
			_load.show();
			_title.slideUp(300);
			var _img = new Image();
			_img.onload = function(){
				_image = _img;
				_image.w = this.width;
				_image.h = this.height;
				showImage();
				_img.onload = function(){};
			}
			_img.title = _thumbnails.eq(_cur).attr('title');
			_img.src = _thumbnails.eq(_cur).attr('href');
		}
		function showImage(){
			var _dinWidth = _image.w + _options.paddingLeft + _options.paddingRight;
			var _dinHeight = _image.h;
			var _titleText = _thumbnails.eq(_currentImage).attr('title');
			if (_dinWidth < _options.lbMinWidth) _dinWidth = _options.lbMinWidth;
			var _pos = setLocation();			
			_imageHolder.animate({height:_dinHeight},{queue:false, duration:400});
			_lightbox.animate({
				width:_dinWidth,
				top:_pos.top,
				left:_pos.left
			},{queue:false, duration:400, complete:function(){
				_load.hide();
				_mainImage.attr('title',_image.title);
				_mainImage.attr('src',_image.src).fadeIn(300);
				if (_titleText != '') {
					_title.html(_titleText).slideDown(300);
				}
			}});
		}
		var _height = 0;
		var _width = 0;
		var _scroll = false;
		function innerWH(){
			if (window.innerHeight) {
				_height = window.innerHeight;
				_width = window.innerWidth;
			} else {
				_height = document.documentElement.clientHeight;
				_width = document.documentElement.clientWidth;
			}
		}
		function setLocation(){
			var _offset = {};
			innerWH();
			var _thisHeight = _image.h + _options.paddingTop + _options.paddingBottom;
			var _thisWidth = _image.w + _options.paddingLeft + _options.paddingRight;
			if (_thisWidth < _options.lbMinWidth) _thisWidth = _options.lbMinWidth;
			var _page = $('body > div:eq(0)');
			if (_lightbox.length) {
				if (_height > _thisHeight) {
					if (!window.innerHeight) {
						_lightbox.css({position:'absolute'});
						_offset.top = (document.documentElement.scrollTop + (_height - _thisHeight) / 2)
					} else {
						_lightbox.css({position:'fixed'});
						_offset.top = ((_height - _thisHeight) / 2)
					}
				}
				else {
					var _fh = parseInt(_fader.css('height'));
					if (!_scroll) {
					if (_fh - _thisHeight > parseInt($(document).scrollTop())) {
							_fh = parseInt($(document).scrollTop())
							_scroll = _fh;
						} else {
							_scroll = _fh - _thisHeight;
						}
					}
					_lightbox.css({position:'absolute'});
					_offset.top = _scroll;
				}
				if (_width > _thisWidth) 
					_offset.left  = (_width - _thisWidth) / 2;
				else {
					_lightbox.css({position:'absolute'})
					_offset.left = 0;
				};
			}
			return _offset;
		}
		function positionLightbox (_lbox) {
			
			var _minWidth = $('body > div:eq(0)').outerWidth();
			var _page = $('body > div:eq(0)');
			innerWH();
			if (_height > _page.innerHeight()) _fader.css('height',_height); else _fader.css('height',_page.innerHeight());
			if (_width < _minWidth) {_fader.css('width',_minWidth);} else {_fader.css('width','100%');}
			_imageHolder.css({height: _options.lbMinHeight})
			_lbox.css({
				width: _options.lbMinWidth,
				top:_height/2 - _options.lbMinHeight/2,
				left:_width/2 - _options.lbMinWidth/2
			});
		}
			
		$(window).resize(function(){
			var _pos = setLocation();
			_lightbox.animate({
				top:_pos.top,
				left:_pos.left
			}, 300);
		});
			
		$(document).keydown(function (e) {
			if (!e) evt = window.event;
			if (e.keyCode == 27) {
				_lightbox.fadeOut(400, function(){
					_fader.fadeOut(300);
					_scroll = false;
				});
			}
		});
	});
}
$(document).ready(function(){
	$('a.active-thumbs').each(function(){
		$(this).click(function(){
			var _id = this.rel.substr(this.rel.indexOf('#'));
			$(document).customLightbox({thumbnail:_id+' a'});
			$(_id+' a:first').trigger('click');
			return false;
		});
	});
	
});