Fancybox and Cluetip TESTSUITE

Fancybox goes iframe everywhere

Omdat ik behoefte had aan een jqueryplugin die op een gebruikersvriendelijke manier contextmenu's en feedbackforms kan tonen heb ik fancybox [ http://fancybox.net/ ] aangepast zodat er iframe- en ajax content overal op de pagina getoond kan worden. Dit is handig voor WUW-navigatie (What do U Want to do) waarbij de gebruiker stap voor stap door een proces geleid moet worden. De positie van het modale venster hangt af van de positie van het element waarop geklikt wordt en de afmetingen van het browserwindow.
Work is still in progress

Dit is een link met een cluetip en een fancymenu
De tooltip is ook een jquery plugin : Cluetip [ http://plugins.learningjquery.com/cluetip/demo/ ]

Voorbeeld:

	$.fancybox.load({
			'width'			: '30%',
			'height'		: '40%',
			'scrolling'		: 'no',
			'type'			: 'iframe',
			'overlayOpacity'	:  0.5,
			'overlayColor'		: '#ccc',
			'href'			: 'xhr/info.php',
			'left'			: "target",
			'top'			: "target"
	});

De fancybox default properties zijn uitgebreid met een aantal nieuwe:

//new----------------------------
		left				:   'auto',
		top				:   'auto',
		offsetX				:   0,
		offsetY				:   0,
		minHeight			:   false,
		minWidth			:   false,
		IframeAdjust			:   false

left :	{string}	"target" of waarde. Als target dan is de positie van het venster afhankelijk van het element waarop geklikt wordt
top :	{string}	"target" of waarde. Als target dan is de positie van het venster afhankelijk van het element waarop geklikt wordt
offsetX :	{integer}	horizontale offset van het venster
offsetY :	{integer}	verticale offset van het venster
minHeight :	{integer}	minimale hoogte van het venster,disabled if false. Te gebruiken bij percentuele hoogte
minWidth :	{integer}	minimale breedte van het venster, disabled if false. Te gebruiken bij percentuele breedte
IframeAdjust :	{boolean}	standaar false, als true dan wordt het formaat van het iframe aangepast aan de inhoud

Zie verder de documentatie op http://fancybox.net/

De Code:

/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 
  modified by Aaldert van Weelden  09-08-2010
 *
 * Examples and documentation at: http://fancybox.net
 * 
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 *
 * Version: 1.3.1 (05/03/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($) {
	var tmp, loading, overlay, wrap, outer, shadow, inner, close, nav_left, nav_right,mode='',
		selectedIndex = 0, selectedOpts = {}, selectedArray = [], currentIndex = 0, currentOpts = {}, currentArray = [],
		ajaxLoader = null, imgPreloader = new Image(), imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i, swfRegExp = /[^\.]\.(swf)\s*$/i,
		loadingTimer, loadingFrame = 1,_locked = false,
		start_pos, final_pos, busy = false, shadow = 20, fx = $.extend($('<div/>')[0], { prop: 0 }), titleh = 0, 
		isIE6 = !$.support.opacity && !window.XMLHttpRequest,
		/*
		 * Private methods 
		 */
		fancybox_abort = function() {
			loading.hide();
			imgPreloader.onerror = imgPreloader.onload = null;
			if (ajaxLoader) {
				ajaxLoader.abort();
			}
			tmp.empty();
		},
		fancybox_error = function() {
			$.fancybox('<p id="fancybox_error">The requested content cannot be loaded.<br />Please try again later.</p>', {
				'scrolling'		: 'no',
				'padding'		: 20,
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'
			});
		},
		fancybox_get_viewport = function() {
			return [ $(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ];
		},
		fancybox_get_zoom_to = function () {
			var view	= fancybox_get_viewport(),
				to		= {},
				margin = currentOpts.margin,
				resize = currentOpts.autoScale,
				horizontal_space	= (shadow + margin) * 2,
				vertical_space		= (shadow + margin) * 2,
				double_padding		= (currentOpts.padding * 2),
				
				ratio;
			if (currentOpts.width.toString().indexOf('%') > -1) {
				to.width = ((view[0] * parseFloat(currentOpts.width)) / 100) - (shadow * 2) ;
				resize = false;
			} else {
				to.width = currentOpts.width + double_padding;
			}
			if (currentOpts.height.toString().indexOf('%') > -1) {
				to.height = ((view[1] * parseFloat(currentOpts.height)) / 100) - (shadow * 2);
				resize = false;
			} else {
				to.height = currentOpts.height + double_padding;
			}
			if (resize && (to.width > (view[0] - horizontal_space) || to.height > (view[1] - vertical_space))) {
				if (selectedOpts.type == 'image' || selectedOpts.type == 'swf') {
					horizontal_space	+= double_padding;
					vertical_space		+= double_padding;
					ratio = Math.min(Math.min( view[0] - horizontal_space, currentOpts.width) / currentOpts.width, Math.min( view[1] - vertical_space, currentOpts.height) / currentOpts.height);
					to.width	= Math.round(ratio * (to.width	- double_padding)) + double_padding;
					to.height	= Math.round(ratio * (to.height	- double_padding)) + double_padding;
				} else {
					to.width	= Math.min(to.width,	(view[0] - horizontal_space));
					to.height	= Math.min(to.height,	(view[1] - vertical_space));
				}
			}
			to.top	= view[3] + ((view[1] - (to.height	+ (shadow * 2 ))) * 0.5);
			to.left	= view[2] + ((view[0] - (to.width	+ (shadow * 2 ))) * 0.5);
			if (currentOpts.autoScale === false) {
				to.top	= Math.max(view[3] + margin, to.top);
				to.left	= Math.max(view[2] + margin, to.left);
			}
			return to;
		},
		fancybox_format_title = function(title) {
			if (title && title.length) {
				switch (currentOpts.titlePosition) {
					case 'inside':
						return title;
					case 'over':
						return '<span id="fancybox-title-over">' + title + '</span>';
					default:
						return '<span id="fancybox-title-wrap"><span id="fancybox-title-left"></span><span id="fancybox-title-main">' + title + '</span><span id="fancybox-title-right"></span></span>';
				}
			}
			return false;
		},
		fancybox_process_title = function() {
			var title	= currentOpts.title,
				width	= final_pos.width - (currentOpts.padding * 2),
				titlec	= 'fancybox-title-' + currentOpts.titlePosition;
				
			$('#fancybox-title').remove();
			titleh = 0;
			if (currentOpts.titleShow === false) {
				return;
			}
			title = $.isFunction(currentOpts.titleFormat) ? currentOpts.titleFormat(title, currentArray, currentIndex, currentOpts) : fancybox_format_title(title);
			if (!title || title === '') {
				return;
			}
			$('<div id="fancybox-title" class="' + titlec + '" />').css({
				'width'			: width,
				'paddingLeft'	: currentOpts.padding,
				'paddingRight'	: currentOpts.padding
			}).html(title).appendTo('body');
			switch (currentOpts.titlePosition) {
				case 'inside':
					titleh = $("#fancybox-title").outerHeight(true) - currentOpts.padding;
					final_pos.height += titleh;
				break;
				case 'over':
					$('#fancybox-title').css('bottom', currentOpts.padding);
				break;
				default:
					$('#fancybox-title').css('bottom', $("#fancybox-title").outerHeight(true) * -1);
				break;
			}
			$('#fancybox-title').appendTo( outer ).hide();
		},
		fancybox_set_navigation = function() {
			$(document).unbind('keydown.fb').bind('keydown.fb', function(e) {
				if (e.keyCode == 27 && currentOpts.enableEscapeButton) {
					e.preventDefault();
					$.fancybox.close();
				} else if (e.keyCode == 37) {
					e.preventDefault();
					$.fancybox.prev();
				} else if (e.keyCode == 39) {
					e.preventDefault();
					$.fancybox.next();
				}
			});
			if ($.fn.mousewheel) {
				wrap.unbind('mousewheel.fb');
				if (currentArray.length > 1) {
					wrap.bind('mousewheel.fb', function(e, delta) {
						e.preventDefault();
						if (busy || delta === 0) {
							return;
						}
						if (delta > 0) {
							$.fancybox.prev();
						} else {
							$.fancybox.next();
						}
					});
				}
			}
			if (!currentOpts.showNavArrows) { return; }
			if ((currentOpts.cyclic && currentArray.length > 1) || currentIndex !== 0) {
				nav_left.show();
			}
			if ((currentOpts.cyclic && currentArray.length > 1) || currentIndex != (currentArray.length -1)) {
				nav_right.show();
			}
		},
		fancybox_preload_images = function() {
			var href, 
				objNext;
				
			if ((currentArray.length -1) > currentIndex) {
				href = currentArray[ currentIndex + 1 ].href;
				if (typeof href !== 'undefined' && href.match(imgRegExp)) {
					objNext = new Image();
					objNext.src = href;
				}
			}
			if (currentIndex > 0) {
				href = currentArray[ currentIndex - 1 ].href;
				if (typeof href !== 'undefined' && href.match(imgRegExp)) {
					objNext = new Image();
					objNext.src = href;
				}
			}
		},
		_finish = function () {
			inner.css('overflow', (currentOpts.scrolling == 'auto' ? (currentOpts.type == 'image' || currentOpts.type == 'iframe' || currentOpts.type == 'swf' ? 'hidden' : 'auto') : (currentOpts.scrolling == 'yes' ? 'auto' : 'visible')));
			if (!$.support.opacity) {
				inner.get(0).style.removeAttribute('filter');
				wrap.get(0).style.removeAttribute('filter');
			}
			$('#fancybox-title').show();
			if (currentOpts.hideOnContentClick)	{
				inner.one('click', $.fancybox.close);
			}
			if (currentOpts.hideOnOverlayClick)	{
				overlay.one('click', $.fancybox.close);
			}
			if (currentOpts.showCloseButton) {
				close.show();
			}
			fancybox_set_navigation();
			$(window).bind("resize.fb", $.fancybox.center);
			if (currentOpts.centerOnScroll) {
				$(window).bind("scroll.fb", $.fancybox.center);
			} else {
				$(window).unbind("scroll.fb");
			}
			if ($.isFunction(currentOpts.onComplete)) {
				currentOpts.onComplete(currentArray, currentIndex, currentOpts);
			}
			busy = false;
			fancybox_preload_images();
		},
		fancybox_draw = function(pos) {
			var width	= Math.round(start_pos.width	+ (final_pos.width	- start_pos.width)	* pos),
				height	= Math.round(start_pos.height	+ (final_pos.height	- start_pos.height)	* pos),
				top		= Math.round(start_pos.top	+ (final_pos.top	- start_pos.top)	* pos),
				left	= Math.round(start_pos.left	+ (final_pos.left	- start_pos.left)	* pos);
			wrap.css({
				'width'		: width		+ 'px',
				'height'	: height	+ 'px',
				'top'		: top		+ 'px',
				'left'		: left		+ 'px'
			});
			width	= Math.max(width - currentOpts.padding * 2, 0);
			height	= Math.max(height - (currentOpts.padding * 2 + (titleh * pos)), 0);
			inner.css({
				'width'		: width		+ 'px',
				'height'	: height	+ 'px'
			});
			if (typeof final_pos.opacity !== 'undefined') {
				wrap.css('opacity', (pos < 0.5 ? 0.5 : pos));
			}
		},
		fancybox_get_obj_pos = function(obj) {
			var pos		= obj.offset();
			pos.top		+= parseFloat( obj.css('paddingTop') )	|| 0;
			pos.left	+= parseFloat( obj.css('paddingLeft') )	|| 0;
			pos.top		+= parseFloat( obj.css('border-top-width') )	|| 0;
			pos.left	+= parseFloat( obj.css('border-left-width') )	|| 0;
			pos.width	= obj.width();
			pos.height	= obj.height();
			return pos;
		},
		fancybox_get_zoom_from = function() {
			var orig = selectedOpts.orig ? $(selectedOpts.orig) : false,
				from = {},
				pos,
				view;

			if (orig && orig.length) {
				pos = fancybox_get_obj_pos(orig);
				from = {
					width	: (pos.width	+ (currentOpts.padding * 2)),
					height	: (pos.height	+ (currentOpts.padding * 2)),
					top		: (pos.top		- currentOpts.padding - shadow),
					left	: (pos.left		- currentOpts.padding - shadow)
				};
				
			} else {
				view = fancybox_get_viewport();
				from = {
					width	: 1,
					height	: 1,
					top		: view[3] + view[1] * 0.5,//center of viewport
					left	: view[2] + view[0] * 0.5
				};
			}
			
			return from;
		},
		
		//IFRAME SIZE DETECTION  AALDERT VAN WEELDEN =============================================
		
		ua 			= navigator.userAgent,
		version 	= ua.substring(ua.indexOf("Firefox")).split("/")[1],
		extraHeight = parseFloat(version)>=0.1? 16 : 0, //extra marge voor FireFox 1.0+ browsers
	
		_getFramedimension = function(fr){
			var d={};
			try
			{
				if (fr.contentDocument && fr.contentDocument.body && fr.contentDocument.body.offsetHeight){//ns6 syntax
					d.height = fr.contentDocument.body.offsetHeight+extraHeight;
				} 
				else if (fr.contentWindow && fr.contentWindow.document && fr.contentWindow.document.body.scrollHeight){ //ie5+ syntax
					d.height = fr.contentWindow.document.body.scrollHeight;
				}
			}
			catch(err)
			{
				d.height=currentOpts.minHeight;//defaulthoogte
			}
			
			try
			{
				if (fr.contentDocument && fr.contentDocument.body && fr.contentDocument.body.offsetWidth){//ns6 syntax
					d.width = fr.contentDocument.body.offsetWidth;
				} 
				else if (fr.contentWindow && fr.contentWindow.document && fr.contentWindow.document.body.scrollWidth){ //ie5+ syntax
					d.width = fr.contentWindow.document.body.scrollWidth;
				}
			}
			catch(err)
			{
				d.width=currentOpts.minWidth;//defaultbreedte
			}
			return d;
			
		},

		//afmetingen moeten bepaald worden voordat iframe getoond wordt en nadat iframe in DOM geinjecteerd is
		_resizeIframe = function(frameid,sender){
			var self=$('#'+frameid),
				d = {},
				fr=self[0];
			//wrap.css('opacity', 0);
			if (fr){
				d=_getFramedimension(fr);
				d.sender=sender;
				d.height?fr.height=d.height:10;
				d.width?fr.width=d.width:10;
				//force min-height
				if(currentOpts.minHeight>parseInt(fr.height)){
					fr.height = currentOpts.minHeight+'px';
				}
				if(currentOpts.minWidth>parseInt(fr.width)){
					fr.width = currentOpts.minWidth+'px';
				}
				self.unbind('load').bind('load', _reAdjustIframe);
			}
			return d;

		},
		
		_reAdjustIframe = function(event) {
			var t=event.target,
				d={};
			if (t){
				d = _resizeIframe(t.id,'load');
				
				//adjust dimensions inner and wrap after loading iframecontent
				var pos = wrap.position();
				start_pos = {//initial dimensions
					top		:	pos.top ,
					left	:	pos.left,
					width	:	d.width,
					height	:	d.height
				};
				pos = _setCustomPosition(start_pos);
				inner.css({
					width	: d.width-(currentOpts.padding * 2),
					height	: d.height-(currentOpts.padding * 2)
				});
				wrap.css({
					top		: pos.top,
					left	: pos.left,
					width	: d.width,
					height	: d.height
				});
				wrap.fadeTo(1,300);
			}
		},
		
		_getInnerDimensions = function(){
			var oCss= {	
					"width"		: inner.children(0).outerWidth()+(currentOpts.padding * 2)+"px",
					"height"	: inner.children(0).outerHeight()+(currentOpts.padding * 2)+"px"
				};
			inner.childCss=oCss;
		},

		_setCustomPosition = function(pos,mode,sender){
			//$.echo(mode,true,'mode');
			//$.echo(sender,true,'sender');
			//$.echo(pos,true,'before');
			var space			= {},
				view 			= fancybox_get_viewport();
				
			//top
			if(selectedOpts.orig && selectedOpts.orig!=={}){
			
				var btn				= selectedOpts.orig,
					clicked         = {	width	: btn.outerWidth(),
										height	: btn.outerHeight(),
										offset	: btn.offset()
									  };
			}
			
			//check minHeight and minWidth
			if(typeof(currentOpts.minHeight)==='number'){
				if(pos.height<currentOpts.minHeight){
					pos.height=currentOpts.minHeight;
				}
			}
			if(typeof(currentOpts.minWidth)==='number'){
				if(pos.width<currentOpts.minWidth){
					pos.width=currentOpts.minWidth;
				}
			}
			if(currentOpts.top!=='auto'){
				//determine margins
				space.top=clicked.offset.top-view[3]-0.5*pos.height;
				space.bottom=view[1]-clicked.offset.top+view[3]-clicked.height-0.6*pos.height;
				//set position
				if(space.bottom>0 && space.top>0){
					pos.top = clicked.offset.top+clicked.height-0.6*pos.height+10+currentOpts.offsetY;
				}
				else if(space.top<0){
						pos.top = clicked.offset.top+currentOpts.offsetY;//no space at top
					 }
					 else {
						pos.top = clicked.offset.top - pos.height-clicked.height;//no space at bottom
					 }
				//overrule
				if(typeof(currentOpts.top)==='number'){
					pos.left=currentOpts.top;
				}
			}
			//left
			if(currentOpts.left!=='auto'){
				//determine margins
				space.left=clicked.offset.left-view[2]-pos.width-10;
				space.right=view[0]+view[2]-clicked.offset.left-clicked.width-pos.width-10;
				//set position
				if(space.left>0 && space.right>0){
					pos.left= clicked.offset.left+clicked.width+10+currentOpts.offsetX;
				}
				else if(space.right<0){
						pos.left = clicked.offset.left-pos.width-50;//no space right
					}
					else {
						pos.left= clicked.offset.left+clicked.width+10+currentOpts.offsetX;//no space left
					}
				//overrule
				if(typeof(currentOpts.left)==='number'){
					pos.left=currentOpts.left;
				}
			}
			//$.echo(pos,true,'after');
			return pos;
		},
		
		//=======================================================================================
		
		fancybox_show = function(sender) {
				
			loading.hide();
			if (wrap.is(":visible") && $.isFunction(currentOpts.onCleanup)) {
				if (currentOpts.onCleanup(currentArray, currentIndex, currentOpts) === false) {
					$.event.trigger('fancybox-cancel');
					busy = false;
					return;
				}
			}
			
			currentArray	= selectedArray;
			currentIndex	= selectedIndex;
			currentOpts		= selectedOpts;
			inner.get(0).scrollTop	= 0;
			inner.get(0).scrollLeft	= 0;
			
			if (currentOpts.overlayShow) {
				if (isIE6) {
					$('select:not(#fancybox-tmp select)').filter(function() {
						return this.style.visibility !== 'hidden';
					}).css({'visibility':'hidden'}).one('fancybox-cleanup', function() {
						this.style.visibility = 'inherit';
					});
				}
				overlay.css({
					'background-color'	: currentOpts.overlayColor,
					'opacity'			: currentOpts.overlayOpacity
				}).unbind().show();
			}
			
			final_pos = fancybox_get_zoom_to();//get final dimensions

			fancybox_process_title();
			if (wrap.is(":visible")) {
				$( close.add( nav_left ).add( nav_right ) ).hide();
				var pos = wrap.position(),
					equal;
				start_pos = {//initial dimensions
					top		:	pos.top ,
					left	:	pos.left,
					width	:	wrap.width(),
					height	:	wrap.height()
				};
				equal = (start_pos.width == final_pos.width && start_pos.height == final_pos.height);
				inner.fadeOut(currentOpts.changeFade, function() {
					var finish_resizing = function() {
							inner.html( tmp.contents() ).fadeIn(currentOpts.changeFade, _finish);
					};
					
					$.event.trigger('fancybox-change');
					inner.empty().css('overflow', 'hidden');
					if (equal) {//no size-animation
						mode='equal';
						inner.css({
							top			: currentOpts.padding,
							left		: currentOpts.padding,
							width		: Math.max(final_pos.width	- (currentOpts.padding * 2), 1),
							height		: Math.max(final_pos.height	- (currentOpts.padding * 2) - titleh, 1)
						});
						
						finish_resizing();
					} else {
						mode='animate';
						inner.css({
							top			: currentOpts.padding,
							left		: currentOpts.padding,
							width		: Math.max(start_pos.width	- (currentOpts.padding * 2), 1),
							height		: Math.max(start_pos.height	- (currentOpts.padding * 2), 1)
						});
						
						fx.prop = 0;
						$(fx).animate({ prop: 1 }, {
							 duration	: currentOpts.changeSpeed,
							 easing		: currentOpts.easingChange,
							 step		: fancybox_draw,
							 complete	: finish_resizing
						});
					}
				});
				return;
			}
			
			if(!currentOpts.IframeAdjust){
				wrap.css('opacity', 1);
			}
			if (currentOpts.transitionIn == 'elastic') {
				mode='elastic'
				start_pos = fancybox_get_zoom_from();
				//AALDERT VAN WEELDEN----------------------
				start_pos = _setCustomPosition(start_pos,mode,sender);
				//-----------------------------------------
				inner.css({
						top			: currentOpts.padding,
						left		: currentOpts.padding,
						width		: Math.max(start_pos.width	- (currentOpts.padding * 2), 1),
						height		: Math.max(start_pos.height	- (currentOpts.padding * 2), 1)
					})
					.html( tmp.contents() );	
				wrap.css(start_pos).show();
				
				if (currentOpts.opacity) {
					final_pos.opacity = 0;
				}
				fx.prop = 0;
				$(fx).animate({ prop: 1 }, {
					 duration	: currentOpts.speedIn,
					 easing		: currentOpts.easingIn,
					 step		: fancybox_draw,
					 complete	: _finish
				});
			} else {
				mode='show';
				//AALDERT VAN WEELDEN--------------------------
				final_pos = _setCustomPosition(final_pos,mode,sender);
				//---------------------------------------------
				inner
					.css({
						top			: currentOpts.padding,
						left		: currentOpts.padding,
						width		: Math.max(final_pos.width	- (currentOpts.padding * 2), 1),
						height		: Math.max(final_pos.height	- (currentOpts.padding * 2) - titleh, 1)
					})
					.html( tmp.contents() );
					
				wrap.css( final_pos )
					.fadeIn( currentOpts.transitionIn == 'none' ? 0 : currentOpts.speedIn, _finish );
			}
			
		},
		fancybox_process_inline = function(sender) {
			tmp.width(	selectedOpts.width );
			tmp.height(	selectedOpts.height );
			if (selectedOpts.width	== 'auto') {
				selectedOpts.width = tmp.width();
			}
			if (selectedOpts.height	== 'auto') {
				selectedOpts.height	= tmp.height();
			}
			fancybox_show(sender);
		},
		
		fancybox_process_image = function(sender) {
			busy = true;
			selectedOpts.width	= imgPreloader.width;
			selectedOpts.height	= imgPreloader.height;
			$("<img />").attr({
				'id'	: 'fancybox-img',
				'src'	: imgPreloader.src,
				'alt'	: selectedOpts.title
			}).appendTo( tmp );
			fancybox_show(sender);
		},
		
		fancybox_start = function() {
			fancybox_abort();
			var obj	= selectedArray[ selectedIndex ],
				href, 
				type, 
				title,
				str,
				emb,
				selector,
				data;
				
			selectedOpts = $.extend({}, $.fn.fancybox.defaults, (typeof $(obj).data('fancybox') == 'undefined' ? selectedOpts : $(obj).data('fancybox')));
			title = obj.title || $(obj).title || selectedOpts.title || '';
			
			if(selectedOpts.left!=='auto' || selectedOpts.top!=='auto'){
				_locked = true;
			}
			
			if (obj.nodeName && !selectedOpts.orig) {
				selectedOpts.orig = $(obj).children("img:first").length ? $(obj).children("img:first") : $(obj);
			}
			if (title === '' && selectedOpts.orig) {
				title = selectedOpts.orig.attr('alt');
			}
			if (obj.nodeName && (/^(?:javascript|#)/i).test(obj.href)) {
				href = selectedOpts.href || null;
			} else {
				href = selectedOpts.href || obj.href || null;
			}
			if (selectedOpts.type) {
				type = selectedOpts.type;
				if (!href) {
					href = selectedOpts.content;
				}
				
			} else if (selectedOpts.content) {
				type	= 'html';
			} else if (href) {
				if (href.match(imgRegExp)) {
					type = 'image';
				} else if (href.match(swfRegExp)) {
					type = 'swf';
				} else if ($(obj).hasClass("iframe")) {
					type = 'iframe';
				} else if (href.match(/#/)) {
					obj = href.substr(href.indexOf("#"));
					type = $(obj).length > 0 ? 'inline' : 'ajax';
				} else {
					type = 'ajax';
				}
			} else {
				type = 'inline';
			}
			selectedOpts.type	= type;
			selectedOpts.href	= href;
			selectedOpts.title	= title;
			if (selectedOpts.autoDimensions && selectedOpts.type !== 'iframe' && selectedOpts.type !== 'swf') {
				selectedOpts.width		= 'auto';
				selectedOpts.height		= 'auto';
			}
			if (selectedOpts.modal) {
				selectedOpts.overlayShow		= true;
				selectedOpts.hideOnOverlayClick	= false;
				selectedOpts.hideOnContentClick	= false;
				selectedOpts.enableEscapeButton	= false;
				selectedOpts.showCloseButton	= false;
			}
			if ($.isFunction(selectedOpts.onStart)) {
				if (selectedOpts.onStart(selectedArray, selectedIndex, selectedOpts) === false) {
					busy = false;
					return;
				}
			}
			tmp.css('padding', (shadow + selectedOpts.padding + selectedOpts.margin));
			$('.fancybox-inline-tmp').unbind('fancybox-cancel').bind('fancybox-change', function() {
				$(this).replaceWith(inner.children());
			});
			
			if(selectedOpts.orig && selectedOpts.orig!=={}){
			
				var btn = selectedOpts.orig,
					clicked  = {		"width"			: btn.outerWidth(),
										"height"		: btn.outerHeight(),
										"left"			: btn.offset().left,
										"top"			: btn.offset().top,
										"id"			: btn[0].id || "",
										"classname"		: btn[0].className || "",
										"title"			: btn[0].title || "",
										"rel"			: btn[0].rel || "",
										"rev"			: btn[0].rev || "",
										"alt"			: btn[0].alt || "",
										"href"			: btn[0].href || ""
								},
					sInput = $.safeObjToURI(clicked);
			}	
			switch (type) {
				case 'html' :
					tmp.html( selectedOpts.content );
					fancybox_process_inline();
				break;
				case 'inline' :
					$('<div class="fancybox-inline-tmp" />').hide().insertBefore( $(obj) ).bind('fancybox-cleanup', function() {
						$(this).replaceWith(inner.children());
					}).bind('fancybox-cancel', function() {
						$(this).replaceWith(tmp.children());
					});
					$(obj).appendTo(tmp);
					fancybox_process_inline('inline');
				break;
				case 'image':
					busy = false;
					$.fancybox.showActivity();
					imgPreloader = new Image();
					imgPreloader.onerror = function() {
						fancybox_error();
					};
					imgPreloader.onload = function() {
						imgPreloader.onerror = null;
						imgPreloader.onload = null;
						fancybox_process_image('image');
					};
					imgPreloader.src = href;
		
				break;
				case 'swf':
					str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"><param name="movie" value="' + href + '"></param>';
					emb = '';
					str += '<param name="clicked" value="' + sInput + '"></param>';
					$.each(selectedOpts.swf, function(name, val) {
						str += '<param name="' + name + '" value="' + val + '"></param>';
						emb += ' ' + name + '="' + val + '"';
					});
					str += '<embed src="' + href + '" type="application/x-shockwave-flash" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"' + emb + '></embed></object>';
					tmp.html(str);
					fancybox_process_inline('swf');
				break;
				case 'ajax':
					selector	= href.split('#', 2);
					data		= selectedOpts.ajax.data || {};
					data.clicked = sInput;
					if (selector.length > 1) {
						href = selector[0];
						if (typeof data == "string") {
							data += '&selector=' + selector[1];
							data += '&clicked=' + sInput;
						} else {
							data.selector = selector[1];
						}
					}
					busy = false;
					$.fancybox.showActivity();
					ajaxLoader = $.ajax($.extend(selectedOpts.ajax, {
						url		: href,
						data	: data,
						error	: fancybox_error,
						success : function(data, textStatus, XMLHttpRequest) {
							if (ajaxLoader.status == 200) {
								tmp.html( data );
								fancybox_process_inline('ajax');
								_getInnerDimensions();
								wrap.css(inner.childCss);
								$('#fancybox-title').width(inner.childCss.width);
							}
						}
					}));
				break;
				case 'iframe' :
					if( selectedOpts.href.indexOf('?') > -1){
						selectedOpts.href += '&clicked=' + sInput;
					}
					else {
						selectedOpts.href += '?clicked=' + sInput;
					}
					$('<iframe id="fancybox-frame" allowtransparency="true" name="fancybox-frame' + new Date().getTime() + '" frameborder="no" hspace="0" scrolling="' + selectedOpts.scrolling + '" src="' + selectedOpts.href + '"></iframe>').appendTo(tmp);
					
					//AALDERT VAN WEELDEN---------------------
					if(selectedOpts.IframeAdjust){
						_resizeIframe("fancybox-frame",'show');
					}
					//----------------------------------------
					fancybox_show('iframe');
				break;
			}
			
		},
		fancybox_animate_loading = function() {
			if (!loading.is(':visible')){
				clearInterval(loadingTimer);
				return;
			}
			$('div', loading).css('top', (loadingFrame * -40) + 'px');
			loadingFrame = (loadingFrame + 1) % 12;
		},
		fancybox_init = function() {

			if ($("#fancybox-wrap").length) {
				return;
			}
			$('body').append(
				tmp			= $('<div id="fancybox-tmp"></div>'),
				loading		= $('<div id="fancybox-loading"><div></div></div>'),
				overlay		= $('<div id="fancybox-overlay"></div>'),
				wrap		= $('<div id="fancybox-wrap"></div>')
			);
			if (!$.support.opacity) {
				wrap.addClass('fancybox-ie');
				loading.addClass('fancybox-ie');
			}
			outer = $('<div id="fancybox-outer"></div>')
				.append('<div class="fancy-bg" id="fancy-bg-n"></div><div class="fancy-bg" id="fancy-bg-ne"></div><div class="fancy-bg" id="fancy-bg-e"></div><div class="fancy-bg" id="fancy-bg-se"></div><div class="fancy-bg" id="fancy-bg-s"></div><div class="fancy-bg" id="fancy-bg-sw"></div><div class="fancy-bg" id="fancy-bg-w"></div><div class="fancy-bg" id="fancy-bg-nw"></div>')
				.appendTo( wrap );
			outer.append(
				inner		= $('<div id="fancybox-inner"></div>'),
				close		= $('<a id="fancybox-close"></a>'),
				nav_left	= $('<a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a>'),
				nav_right	= $('<a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a>')
			);
			close.click($.fancybox.close);
			loading.click($.fancybox.cancel);
			nav_left.click(function(e) {
				e.preventDefault();
				$.fancybox.prev();
			});
			nav_right.click(function(e) {
				e.preventDefault();
				$.fancybox.next();
			});
			if (isIE6) {
				overlay.get(0).style.setExpression('height',	"document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'");
				loading.get(0).style.setExpression('top',		"(-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px'");
				outer.prepend('<iframe id="fancybox-hide-sel-frame" src="javascript:\'\';" scrolling="no" frameborder="0" ></iframe>');
			}
		};
	/*
	 * Public methods 
	 */
	$.fn.fancybox = function(options) {
		$(this)
			.data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
			.unbind('click.fb').bind('click.fb', function(e) {
				e.preventDefault();
				if (busy) {
					return;
				}
				busy = true;
				$(this).blur();
				selectedArray	= [];
				selectedIndex	= 0;
				var rel = $(this).attr('rel') || '';
				if (!rel || rel == '' || rel === 'nofollow') {
					selectedArray.push(this);
				} else {
					selectedArray	= $("a[rel=" + rel + "], area[rel=" + rel + "]");
					selectedIndex	= selectedArray.index( this );
				}
				fancybox_start();
				return false;
			});
		return this;
	};
	$.fancybox = function(obj) {
		if (busy) {
			return;
		}
		busy = true;
		var opts = typeof arguments[1] !== 'undefined' ? arguments[1] : {};
		selectedArray	= [];
		selectedIndex	= opts.index || 0;
		if ($.isArray(obj)) {
			for (var i = 0, j = obj.length; i < j; i++) {
				if (typeof obj[i] == 'object') {
					$(obj[i]).data('fancybox', $.extend({}, opts, obj[i]));
				} else {
					obj[i] = $({}).data('fancybox', $.extend({content : obj[i]}, opts));
				}
			}
			selectedArray = jQuery.merge(selectedArray, obj);
		} else {
			if (typeof obj == 'object') {
				$(obj).data('fancybox', $.extend({}, opts, obj));
			} else {
				obj = $({}).data('fancybox', $.extend({content : obj}, opts));
			}
			selectedArray.push(obj);
		}
		if (selectedIndex > selectedArray.length || selectedIndex < 0) {
			selectedIndex = 0;
		}
		fancybox_start();
	};
	$.fancybox.showActivity = function() {
		clearInterval(loadingTimer);
		loading.show();
		loadingTimer = setInterval(fancybox_animate_loading, 66);
	};
	$.fancybox.hideActivity = function() {
		loading.hide();
	};
	$.fancybox.next = function() {
		return $.fancybox.pos( currentIndex + 1);
	};
	
	$.fancybox.prev = function() {
		return $.fancybox.pos( currentIndex - 1);
	};
	$.fancybox.pos = function(pos) {
		if (busy) {
			return;
		}
		pos = parseInt(pos, 10);
		if (pos > -1 && currentArray.length > pos) {
			selectedIndex = pos;
			fancybox_start();
		}
		if (currentOpts.cyclic && currentArray.length > 1 && pos < 0) {
			selectedIndex = currentArray.length - 1;
			fancybox_start();
		}
		if (currentOpts.cyclic && currentArray.length > 1 && pos >= currentArray.length) {
			selectedIndex = 0;
			fancybox_start();
		}
		return;
	};
	$.fancybox.cancel = function() {
		if (busy) {
			return;
		}
		busy = true;
		$.event.trigger('fancybox-cancel');
		fancybox_abort();
		if (selectedOpts && $.isFunction(selectedOpts.onCancel)) {
			selectedOpts.onCancel(selectedArray, selectedIndex, selectedOpts);
		}
		busy = false;
	};
	// Note: within an iframe use - parent.$.fancybox.close();
	$.fancybox.close = function() {
		if (busy || wrap.is(':hidden')) {
			return;
		}
		busy = true;
		if (currentOpts && $.isFunction(currentOpts.onCleanup)) {
			if (currentOpts.onCleanup(currentArray, currentIndex, currentOpts) === false) {
				busy = false;
				return;
			}
		}
		fancybox_abort();
		$(close.add( nav_left ).add( nav_right )).hide();
		$('#fancybox-title').remove();
		wrap.add(inner).add(overlay).unbind();
		$(window).unbind("resize.fb scroll.fb");
		$(document).unbind('keydown.fb');
		function _cleanup() {
			overlay.fadeOut('fast');
			wrap.hide();
			$.event.trigger('fancybox-cleanup');
			inner.empty();
			if ($.isFunction(currentOpts.onClosed)) {
				currentOpts.onClosed(currentArray, currentIndex, currentOpts);
			}
			currentArray	= selectedOpts	= [];
			currentIndex	= selectedIndex	= 0;
			currentOpts		= selectedOpts	= {};
			busy = false;
		}
		inner.css('overflow', 'hidden');
		if (currentOpts.transitionOut == 'elastic') {
			start_pos = fancybox_get_zoom_from();
			var pos = wrap.position();
			final_pos = {
				top		:	pos.top ,
				left	:	pos.left,
				width	:	wrap.width(),
				height	:	wrap.height()
			};
			if (currentOpts.opacity) {
				final_pos.opacity = 1;
			}
			fx.prop = 1;
			$(fx).animate({ prop: 0 }, {
				 duration	: currentOpts.speedOut,
				 easing		: currentOpts.easingOut,
				 step		: fancybox_draw,
				 complete	: _cleanup
			});
		} else {
			wrap.fadeOut( currentOpts.transitionOut == 'none' ? 0 : currentOpts.speedOut, _cleanup);
		}
	};
	$.fancybox.resize = function() {
		var c, h;
		
		if (busy || wrap.is(':hidden')) {
			return;
		}
		busy = true;
		c = inner.wrapInner("<div style='overflow:auto'></div>").children();
		h = c.height();
		wrap.css({height:	h + (currentOpts.padding * 2) + titleh});
		inner.css({height:	h});
		c.replaceWith(c.children());
		$.fancybox.center();
	};
	$.fancybox.center = function() {
		busy = true;
		var view	= fancybox_get_viewport(),
			margin	= currentOpts.margin,
			to		= {};
		to.top	= view[3] + ((view[1] - ((wrap.height() - titleh) + (shadow * 2 ))) * 0.5);
		to.left	= view[2] + ((view[0] - (wrap.width() + (shadow * 2 ))) * 0.5);
		to.top	= Math.max(view[3] + margin, to.top);
		to.left	= Math.max(view[2] + margin, to.left);
		if(!_locked){
			wrap.css(to);
		}
		busy = false;
	};
	$.fancybox.load = function(obj){
	    $.fancybox(obj);
	};
	$.fn.fancybox.defaults = {
		padding				:	10,
		margin				:	20,
		opacity				:	false,
		modal				:	false,
		cyclic				:	false,
		scrolling			:	'auto',	// 'auto', 'yes' or 'no'
		width				:	560,
		height				:	340,
		autoScale			:	true,
		autoDimensions		:	true,
		centerOnScroll		:	false,
		ajax				:	{},
		swf					:	{ wmode: 'transparent' },
		hideOnOverlayClick	:	true,
		hideOnContentClick	:	false,
		overlayShow			:	true,
		overlayOpacity		:	0.3,
		overlayColor		:	'#666',
		titleShow			:	true,
		titlePosition		:	'outside',	// 'outside', 'inside' or 'over'
		titleFormat			:	null,
		transitionIn		:	'fade',	// 'elastic', 'fade' or 'none'
		transitionOut		:	'fade',	// 'elastic', 'fade' or 'none'
		speedIn				:	300,
		speedOut			:	300,
		changeSpeed			:	300,
		changeFade			:	'fast',
		easingIn			:	'swing',
		easingOut			:	'swing',
		showCloseButton		:	true,
		showNavArrows		:	true,
		enableEscapeButton	:	true,
		onStart				:	null,
		onCancel			:	null,
		onComplete			:	null,
		onCleanup			:	null,
		onClosed			:	null,
		//new----------------------------
		left				:   'auto',
		top					:   'auto',
		offsetX				:   0,
		offsetY				:   0,
		minHeight			:   false,
		minWidth			:   false,
		IframeAdjust		:   false
		//-------------------------------
	};
	$(document).ready(function() {
		fancybox_init();
	});
})(jQuery);