/*
 
 Awkward Showcase - jQuery plugin 
 http://www.jquery.com
 http://www.awkward.se/sandbox/awkward-showcase-a-jquery-plugin
 http://demo.awkward.se/showcase
 Version: 0.2.1 (Beta)

 Copyright (C) 2010 Awkward (http://www.awkward.se)
 Licensed under Attribution-ShareAlike 3.0 Unported
 http://creativecommons.org/licenses/by-sa/3.0/

 Markup example for jQuery("#showcase").awShowcase();
 
 <div id="showcase">
     <div><img src="images/01.jpg" alt="01" /></div>
     <div><img src="images/02.jpg" alt="02" /></div>
     <div><img src="images/03.jpg" alt="03" /></div>
 </div>

*/

(function(jQuery)
{
	jQuery.fn.awShowcase = function(options)
	{
		// Default configuration properties
		var defaults =
		{
			width:					700,
			height:					470,
			auto:					false,
			interval:				3000,
			continuous:				false,
			loading:				true,
			tooltip_width:			200,
			tooltip_icon_width:		32,
			tooltip_icon_height:	32,
			tooltip_offsetx:		18,
			tooltip_offsety:		0,
			arrows:					true,
			buttons:				true,
			btn_numbers:			false,
			keybord_keys:			false,
			mousetrace:				false,
			pauseonover:			true,
			transition:				'vslide', /* vslide/hslide/fade */
			transition_speed:		500,
			show_caption:			'onload', /* onload/onhover/show */
			thumbnails:				false,
			thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
			thumbnails_direction:	'vertical', /* vertical/horizontal */
			thumbnails_slidex:		1 /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
		};
		
		// Declare and set up some important variables
		options = jQuery.extend(defaults, options);
		var current_id = 0;
		var previous_id = 0;
		var break_loop = false;
		var myInterval = null;
		var showcase = jQuery(this);
		
		// Create the content and thumbnail array
		var contentArray = [];
		var thumbnailArray = [];
		var content_count = 0;
		showcase.children('div').each(function()
		{
			// Add content to the array and remove from dom
			var object = jQuery(this);
			
			// If thumbnails are activated
			if (options.thumbnails)
			{
				// Get thumbnail and put in array
				var thumb = object.find('.showcase-thumbnail');
				thumbnailArray.push(thumb);
				thumb.remove();
			}
			
			// Add content html in array
			contentArray.push(object.html());
			object.remove();
			content_count++;
		});
		
		// Set up the content wrapper
		var content_wrapper = jQuery(document.createElement('div'))
			.css('width', options.width)
			.css('height', options.height)
			.css('overflow', 'hidden')
			.css('position', 'relative')
			.addClass('showcase-content-wrapper')
			.prependTo(showcase);

		// Returns the specified content (by array id)
		function getContent(id)
		{
			return jQuery(document.createElement('div'))
				.attr('id', 'showcase-content-' + id)
				.css('width', options.width + 'px')
				.css('height', options.height + 'px')
				.css('overflow', 'hidden')
				.css('position', 'absolute')
				.addClass('showcase-content')
				.html(contentArray[id]);
		}
		
		// Function that runs when content is set to change automatically
		function autoChange()
		{
			// Set next content id
			var nextID = parseInt(current_id)+1;
			// If the next id is outside the array and continuous is set to true set the id to 0
			if (nextID == content_count && options.continuous) { nextID = 0; }
			// If continuous is set to false break the auto change
			else if (nextID == content_count && !options.continuous) { break_loop = true; }
			// Don't change the content if the auto change is broken
			if (!break_loop) { changeContent(nextID, 'next'); }
		}
		
		// Changes the content (no explanation/comments needed :)
		function changeContent(id, direction)
		{
			// If the next content isn't the current content
			if (current_id != id)
			{
				var obj;
				var obj2;
				
				// If we want to display the next content
				if (id > current_id && direction != 'previous' || direction == 'next')
				{
					// Get current content element
					obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id));
					if (options.transition == 'vslide')
					{
						displayAnchors(obj, true);
						displayCaption(obj, true);
						jQuery(obj).animate({
							left: -(options.width+100)
							}, options.transition_speed+300, function() {
								obj.remove();
							});
					}
					else if (options.transition == 'hslide')
					{
						displayAnchors(obj, true);
						displayCaption(obj, true);
						jQuery(obj).animate({
							top: -(options.height+100)
							}, options.transition_speed+300, function() {
								obj.remove();
							});
					}
					else
					{
						displayAnchors(obj, true);
						displayCaption(obj, true);
						jQuery(obj).fadeOut(options.transition_speed, function() {
							obj.remove();
						});
					}
					
					// Get next element
					obj2 = getContent(id);
					if (options.transition == 'vslide')
					{
						obj2.css('left', options.width + 'px');
						jQuery(obj2).animate({
							left: '0px'
							}, options.transition_speed, function() {
								displayAnchors(obj2);
								displayCaption(obj2);
							});
					}
					else if (options.transition == 'hslide')
					{
						obj2.css('top', options.height + 'px');
						jQuery(obj2).animate({
							top: '0px'
							}, options.transition_speed, function() {
								displayAnchors(obj2);
								displayCaption(obj2);
							});
					}
					else
					{
						obj2.css('left', '0px');
						obj2.css('display', 'none');
						jQuery(obj2).fadeIn(options.transition_speed, function() {
								displayAnchors(obj2);
								displayCaption(obj2);
								obj.remove();
							});
					}
					content_wrapper.append(obj2);
				}
				// If we want to display the previous content
				else if (id < current_id || direction == 'previous')
				{
					// Get current content element
					obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id));
					if (options.transition == 'vslide')
					{
						displayAnchors(obj, true);
						displayCaption(obj, true);
						jQuery(obj).animate({
							left: (options.width+100) + 'px'
							}, options.transition_speed+300, function() {
								obj.remove();
						});
					}
					else if (options.transition == 'hslide')
					{
						displayAnchors(obj, true);
						displayCaption(obj, true);
						jQuery(obj).animate({
							top: (options.height+100) + 'px'
							}, options.transition_speed+300, function() {
								obj.remove();
						});
					}
					else
					{
						displayAnchors(obj, true);
						displayCaption(obj, true);
						jQuery(obj).fadeOut(options.transition_speed, function() {
							obj.remove();
						});
					}
					
					// Get next element
					obj2 = getContent(id);
					if (options.transition == 'vslide')
					{
						obj2.css('left', '-' + options.width + 'px');
						content_wrapper.append(obj2);
						jQuery(obj2).animate({
							left: '0px'
							}, options.transition_speed, function() {
								displayAnchors(obj2);
								displayCaption(obj2);
						});
					}
					else if (options.transition == 'hslide')
					{
						obj2.css('top', '-' + options.height + 'px');
						content_wrapper.append(obj2);
						jQuery(obj2).animate({
							top: '0px'
							}, options.transition_speed, function() {
								displayAnchors(obj2);
								displayCaption(obj2);
						});
					}
					else 
					{
						obj2.css('left', '0px');
						obj2.css('display', 'none');
						jQuery(obj2).fadeIn(options.transition_speed, function() {
							displayAnchors(obj2);
							displayCaption(obj2);
							//obj.remove();
						});
					}
					content_wrapper.append(obj2);
				}
				
				// Change previous and current content id
				previous_id = current_id;
				current_id = id;
				
				// Slide thumbnail wrapper
				if (options.thumbnails)
				{
					if (current_id > previous_id && direction != 'previous' || direction == 'next')
					{
						slideThumbnailWrapper('forward', true);
					}
					else if (current_id < previous_id || direction == 'previous')
					{
						slideThumbnailWrapper('backward', true);
					}
				}
				
				// Change click handlers for arrows
				if (options.arrows)
				{
					jQuery(showcase).find('.showcase-arrow-previous')
						.unbind('click')
						.click(function() {
							if (myInterval) { clearInterval(myInterval); }
							changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous');
						});
						jQuery(showcase).find('.showcase-arrow-next')
						.unbind('click')
						.click(function() {
							if (myInterval) { clearInterval(myInterval); }
							changeContent((current_id == content_count-1) ? 0 : parseInt(current_id)+1, 'next');
						});
				}
				
				// Change active class for buttons and thumbnails
				var i;
				if (options.buttons)
				{
					i = 0;
					showcase.find('.showcase-button-wrapper span').each(function()
					{
						var object = jQuery(this);
						object.removeClass('active');
						if (i == current_id) { object.addClass('active'); }
						i++;
					});
				}
				if (options.thumbnails)
				{
					i = 0;
					showcase.find('.showcase-thumbnail').each(function()
					{
						var object = jQuery(this);
						object.removeClass('active');
						if (i == current_id) { object.addClass('active'); }
						i++;
					});
				}
				
				// If caption is set to 'show'
				if (options.show_caption == 'show') { jQuery(obj2).find('.showcase-caption').show(); }
			}
		}
		
		// Activating the keybord arrow keys
		if (options.keybord_keys)
		{
			jQuery(document).keydown(function(e)
			{
				// Left arrow
				if (e.keyCode == 37) { changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); }
				// Right arrow
				if (e.keyCode == 39) { changeContent((current_id == content_count-1) ? 0 : parseInt(current_id)+1, 'next'); }
			});
		}
		
		// Slide thumbnail wrapper
		var thumbnailSlidePosition = 0;
		function slideThumbnailWrapper(direction, check, backwardforward)
		{
			var doTheSlide = true;
			var thumbnailHeightOrWidth = getElementHeight(jQuery(thumb_wrapper).find('.showcase-thumbnail'));
			if (options.thumbnails_direction == 'horizontal')
			{
				thumbnailHeightOrWidth = getElementWidth(jQuery(thumb_wrapper).find('.showcase-thumbnail'));
			}
			var multiplySlidePosition = 1;
			
			// Set slide x
			if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; }
			
			// Check if we need to do the slide
			if (check)
			{
				var thumbnailSlidePositionCopy = thumbnailSlidePosition;
				var thumbnailsScrolled = 0;
				while (thumbnailSlidePositionCopy < 0)
				{
					if (options.thumbnails_direction == 'horizontal')
					{
						thumbnailSlidePositionCopy += getElementWidth(jQuery(thumbnailArray[0]));
					}
					else
					{
						thumbnailSlidePositionCopy += getElementHeight(jQuery(thumbnailArray[0]));
					}
					thumbnailsScrolled++;
				}
				
				var firstVisible = thumbnailsScrolled;
				var lastVisible = thumbnailsPerPage + thumbnailsScrolled -1;
				
				// Check if the next active thumbnail is outside the visible area
				if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; }
				
				// If the next active thumbnail is far away..
				var distance;
				if ((current_id - lastVisible) > options.thumbnails_slidex)
				{
					distance = current_id - lastVisible;
					
					while (distance > options.thumbnails_slidex)
					{
						distance -= options.thumbnails_slidex;
						multiplySlidePosition++;
						}
				}
				else if ((firstVisible - current_id) > options.thumbnails_slidex)
				{
					distance =  firstVisible - current_id;
					
					while (distance > options.thumbnails_slidex)
					{
						distance -= options.thumbnails_slidex;
						multiplySlidePosition++;
					}
				}
				else { multiplySlidePosition = 1; }
			}
			
			if (direction == 'forward' && doTheSlide)
			{
				if (options.height < (thumbnailStretch + thumbnailSlidePosition))
				{
					thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition);
				}
				else if (current_id === 0)
				{
					if (!backwardforward) { thumbnailSlidePosition = 0; }
				}
				if (options.thumbnails_direction == 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); }
				else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); }
			}
			else if (doTheSlide)
			{
				if (thumbnailSlidePosition < 0)
				{
					thumbnailSlidePosition += thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition);
				}
				else if (current_id == content_count-1)
				{
					if (!backwardforward)
					{
						thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition);
					}
				}
				else { thumbnailSlidePosition = 0; }
				if (options.thumbnails_direction == 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); }
				else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); }
			}
		}
		
		// Displays the caption
		function displayCaption(container, fadeOut)
		{
			var caption = container.find('.showcase-caption');
			if (!fadeOut)
			{
				if (options.show_caption == 'onload') { caption.fadeIn(300); }
				else if (options.show_caption == 'onhover')
				{
					jQuery(container).mouseenter(function()
					{
						caption.fadeIn(300);
					});
					
					jQuery(container).mouseleave(function()
					{
						caption.stop(true, true).fadeOut(100);
					});
				}
			}
			else { caption.stop(true, true).fadeOut(300); }
		}
		
		// Displays the anchors in the current slide
		function displayAnchors(container, fadeOut)
		{
			// Get each anchor tooltip
			container.children('a.showcase-tooltip').each(function()
			{
				if (!fadeOut)
				{
					// Get coordinates
					var coords = jQuery(this).attr('coords');
					coords = coords.split(',');
					// Style and position anchor
					jQuery(this).addClass('showcase-plus-anchor');
					jQuery(this).css('position', 'absolute');
					jQuery(this).css('display', 'none');
					jQuery(this).css('width', options.tooltip_icon_width);
					jQuery(this).css('height', options.tooltip_icon_height);
					jQuery(this).css('left', parseInt(coords[0]) - (parseInt(options.tooltip_icon_width)/2));
					jQuery(this).css('top', parseInt(coords[1]) - (parseInt(options.tooltip_icon_height)/2));
					var content = jQuery(this).html();
					jQuery(this).mouseenter(function()
					{
						animateTooltip(container, coords[0], coords[1], content);
					});
					jQuery(this).mouseleave(function()
					{
						animateTooltip(container, coords[0], coords[1], content);
					});
					jQuery(this).html('');
					jQuery(this).fadeIn(300);
				}
				else
				{
					jQuery(this).stop(true, true).fadeOut(300);
				}
			});
		}
		
		// Controls the animation for the tooltips
		var tooltip = null;
		function animateTooltip(container, x, y, content)
		{
			// if tooltip is null (doesn't exsist)
			if (tooltip === null)
			{
				// Create the tooltip
				tooltip = jQuery(document.createElement('div'))
					.addClass('showcase-tool-tip')
					.css('display', 'none')
					.css('position', 'absolute')
					.css('max-width', options.tooltip_width)
					.html(content);
				container.append(tooltip);
				
				// Position the tooltip (this is where we try not to display the tooltip outside the content wrapper)
				var tooltip_paddingx = parseInt(tooltip.css('padding-right'))*2 + parseInt(tooltip.css('border-right-width'))*2;
				var tooltip_paddingy = parseInt(tooltip.css('padding-bottom'))*2 + parseInt(tooltip.css('border-bottom-width'))*2;
				lastx = parseInt(x) + tooltip.width() + tooltip_paddingx;
				lasty = parseInt(y) + tooltip.height() + tooltip_paddingy;
				
				if (lastx < options.width)
				{
					tooltip.css('left', parseInt(x) + parseInt(options.tooltip_offsetx));
				}
				else
				{
					tooltip.css('left', (parseInt(x) - parseInt(options.tooltip_offsetx)) - (parseInt(tooltip.width()) + parseInt(options.tooltip_offsetx)));
				}
				
				if (lasty < options.height)
				{
					tooltip.css('top', parseInt(y) + parseInt(options.tooltip_offsety));
				}
				else
				{
					tooltip.css('top', (parseInt(y) - parseInt(options.tooltip_offsety)) - (parseInt(tooltip.height()) + parseInt(tooltip_paddingy)));
				}
				
				// Fade in the tooltip
				tooltip.fadeIn(400);
			}
			else
			{
				// Fade out the tooltip
				tooltip.fadeOut(400);
				// Remove it from the DOM
				tooltip.remove();
				// And set the variable to null
				tooltip = null;
			}
		}
		
		// Traces the mouse position (used fpr positioning anchors)
		if (options.mousetrace)
		{
			// Create the div tha displays the coordinates
			var mousetrace = jQuery(document.createElement('div'))
				.css('position', 'absolute')
				.css('top', '0')
				.css('background-color', '#fff')
				.css('color', '#000')
				.css('padding', '3px 5px')
				.css('x-index', '30')
				.html('X: 0 Y: 0');
			showcase.append(mousetrace);
			var offset = showcase.offset();
			// Print the coordinates
			content_wrapper.mousemove(function(e){ mousetrace.html('X: ' + (e.pageX - offset.left)  + ' Y: ' + (e.pageY - offset.top)); });
		}
		
		/* Returns the correct height for the element, including padding and borders. */
		function getElementHeight(el, incHeight, incMargin, incPadding, incBorders)
		{
			incHeight = typeof(incHeight) != 'undefined' ? incHeight : true;
			incMargin = typeof(incMargin) != 'undefined' ? incMargin : true;
			incPadding = typeof(incPadding) != 'undefined' ? incPadding : true;
			incBorders = typeof(incBorders) != 'undefined' ? incBorders : true;
			var elHeight = (incHeight) ? jQuery((el)).height() : 0;
			var elMargin = (incMargin) ? parseFloat(jQuery((el)).css('margin-top')) + parseFloat(jQuery(el).css('margin-bottom')) : 0;
			var elPadding = (incPadding) ? parseFloat(jQuery((el)).css('padding-top')) + parseFloat(jQuery(el).css('padding-bottom')) : 0;
			var elBorder = (incBorders) ? parseFloat(jQuery((el)).css('border-top-width')) + parseFloat(jQuery((el)).css('border-bottom-width')) : 0;
			elHeight += elMargin + elPadding + elBorder;
			return elHeight;
		}
		
		/* Returns the correct width for the element, including width, margin, padding and borders. */
		function getElementWidth(el, incWidth, incMargin, incPadding, incBorders)
		{
			incWidth = typeof(incWidth) != 'undefined' ? incWidth : true;
			incMargin = typeof(incMargin) != 'undefined' ? incMargin : true;
			incPadding = typeof(incPadding) != 'undefined' ? incPadding : true;
			incBorders = typeof(incBorders) != 'undefined' ? incBorders : true;
			var elWidth = (incWidth) ? jQuery((el)).width() : 0;
			var elMargin = (incMargin) ? parseFloat(jQuery((el)).css('margin-left')) + parseFloat(jQuery(el).css('margin-right')) : 0;
			var elPadding = (incPadding) ? parseFloat(jQuery((el)).css('padding-left')) + parseFloat(jQuery((el)).css('padding-right')) : 0;
			var elBorder = (incBorders) ? parseFloat(jQuery((el)).css('border-left-width')) + parseFloat(jQuery((el)).css('border-right-width')) : 0;
			elWidth += elMargin + elPadding + elBorder;
			return elWidth;
		}
		
		
		// SET UP THE PLUGIN
		// Declare the thumbnail wrapper
		var thumb_wrapper;
		var thumbnailStretch = 0;
		var thumbnailsPerPage = 0;
		
		if (options.thumbnails)
		{
			// Create wrapper
			thumb_container = jQuery('<div />');
			thumb_restriction = jQuery('<div />');
			thumb_wrapper = jQuery('<div />');
			
			// Add content to thumbnail wrapper
			for (var i = thumbnailArray.length-1; i >= 0; --i)
			{
				var thumbnail = jQuery(thumbnailArray[i]).css({'overflow' : 'hidden'});
				thumbnail.attr('id', 'showcase-thumbnail-' + i);
				thumbnail.addClass((i === 0) ? 'active' : '');
				thumbnail.click(function(a, b)
				{
					// This function is used to extract the correct i value on click
					return function()
					{
						// Disable auto change on click
						if (myInterval) { clearInterval(myInterval); }
						changeContent(a, b);
					};
				}(i, ''));	
				thumb_wrapper.prepend(thumbnail);
			}
			
			// Style an position thumbnail container and content wrapper
			// + insert thumbnail container
			if (options.thumbnails_position == 'outside-first' || options.thumbnails_position == 'outside-last')
			{
				if (options.thumbnails_direction != 'horizontal')
				{
					/* outside & vertical */
					content_wrapper.css('float', 'left');
					thumb_container.css('float', 'left');
					thumb_container.css('height', options.height);
				}
				else
				{
					/* outside & horizontal */
					jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');
					//jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));
				}
				
				if (options.thumbnails_position == 'outside-last')
				{
					/* outside-last */
					showcase.append(thumb_container);
					if (options.thumbnails_direction != 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); }
				}
				else
				{
					/* outside-first */
					showcase.prepend(thumb_container);
					if (options.thumbnails_direction != 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); }
				}
			}
			else
			{
				thumb_container.css({'position' : 'absolute', 'z-index' : 20});
				if (options.thumbnails_direction == 'horizontal') 
				{
					/* inside & horizontal */
					thumb_container.css({'left' : 0, 'right' : 0});
					jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left');
					jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear'));
					
					/* inside first */
					if (options.thumbnails_position == 'inside-first') { thumb_container.css('top', 0); }
					/* inside last */
					else { thumb_container.css('bottom', 0); }
				}
				else 
				{
					/* inside & vertical */
					thumb_container.css({'top' : 0, 'bottom' : 0});
					/* inside first */
					if (options.thumbnails_position == 'inside-first') { thumb_container.css('left', 0); }
					/* inside last */
					else { thumb_container.css('right', 0); }
				}
				content_wrapper.prepend(thumb_container);
			}
			
			// Add class and style to thumbnail container
			thumb_container.addClass('showcase-thumbnail-container');
			thumb_container.css('overflow', 'hidden');
			
			// Add class and style to thumbnail restriction
			thumb_restriction.addClass('showcase-thumbnail-restriction');
			thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'});
			if (options.thumbnails_direction == 'horizontal') { thumb_restriction.css({'float' : 'left'}); }
			
			// Add class and style to thumbnail wrapper 
			thumb_wrapper.addClass('showcase-thumbnail-wrapper');
			if (options.thumbnails_direction == 'horizontal') { thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal'); }
			else { thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical'); }
			thumb_wrapper.css('position', 'relative');
			
			// Append wrapper and restriction
			thumb_restriction.append(thumb_wrapper);
			thumb_container.append(thumb_restriction);
			
			// Add backward button
			var buttonBackward = jQuery('<div class="showcase-thumbnail-button-backward" />');
			if (options.thumbnails_direction != 'horizontal')
			{
				buttonBackward.html('<span class="showcase-thumbnail-vertical"><span>Up</span></span>');
			}
			else
			{
				buttonBackward.css({'float' : 'left'});
				buttonBackward.html('<span class="showcase-thumbnail-horizontal"><span>Left</span></span>');
			}
			buttonBackward.click(function() { slideThumbnailWrapper('backward', false, true); });
			thumb_container.prepend(buttonBackward);
			
			// Add forward button
			var buttonForward = jQuery('<div class="showcase-thumbnail-button-forward" />');
			if (options.thumbnails_direction != 'horizontal')
			{
				buttonForward.html('<span class="showcase-thumbnail-vertical"><span>Down</span></span>');
			}
			else
			{
				buttonForward.css({'float' : 'left'});
				buttonForward.html('<span class="showcase-thumbnail-horizontal"><span>Right</span></span>');
			}
			buttonForward.click(function() { slideThumbnailWrapper('forward', false, true); });
			thumb_container.append(buttonForward);
			
			// Set the number of thumbnails per page.
			var thumbnailVisibleStretch = 0;
			if (options.thumbnails_direction != 'horizontal')
			{
				thumbnailVisibleStretch = getElementHeight(thumb_wrapper, false);
				thumbnailVisibleStretch += (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward));
				while (thumbnailVisibleStretch < options.height)
				{
					thumbnailVisibleStretch += getElementHeight(jQuery(thumbnailArray[0]));
					thumbnailsPerPage++;
				}
			}
			else
			{
				thumbnailVisibleStretch = getElementWidth(thumb_wrapper, false);
				thumbnailVisibleStretch += (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward));
				
				while (thumbnailVisibleStretch < options.width)
				{
					thumbnailVisibleStretch += getElementWidth(jQuery(thumbnailArray[0]));
					thumbnailsPerPage++;
				}
			}
			
			// Hide buttons if they're not necessary
			if (thumbnailsPerPage+1 > thumbnailArray.length)
			{
				if (options.thumbnails_direction != 'horizontal')
				{
					thumb_restriction.css('margin-top', getElementHeight(buttonBackward));
				}
				else
				{
					thumb_restriction.css('margin-left', getElementWidth(buttonBackward));
				}
				buttonBackward.hide();
				buttonForward.hide();
			}
			
			// Set thumbnail restriction height or width
			if (options.thumbnails_direction != 'horizontal')
			{
				var buttonsHeight = (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward));
				thumb_restriction.css('height', options.height - buttonsHeight);
			}
			else
			{
				var buttonsWidth = (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward));
				thumb_restriction.css('width', options.width-buttonsWidth);
			}
			
			// Set thumbnail wrapper width
			if (options.thumbnails_direction == 'horizontal')
			{
				jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementWidth(jQuery(this)); });
				thumb_wrapper.css('width', thumbnailStretch);
			}
			else { jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementHeight(jQuery(this)); }); }
		}
		
		// Set showcase width and height
		if (options.thumbnails && options.thumbnails_position.indexOf("outside") != -1 && options.thumbnails_direction != 'horizontal')
		{
			showcase.css('width', options.width + getElementWidth(thumb_wrapper, true, false));
		}
		else { showcase.css('width', options.width); }
		
		// Get the first content in the array and display it
		var first_content = getContent(0);
		content_wrapper.append(first_content);
		displayAnchors(first_content);
		displayCaption(first_content);
		if (options.show_caption == 'show')
		{
			jQuery(first_content).find('.showcase-caption').show(); // If caption is set to 'show'
		}
		
		// Turn on/off auto slide
		if (content_count > 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); }
		
		// Pause auto on mouse over
		if (options.auto && options.pauseonover)
		{
			showcase.mouseenter(function() { break_loop = true; });
			showcase.mouseleave(function() { break_loop = false;  autoChange(); });
		}
		
		// Adding navigation arrows
		if (options.arrows && content_count > 1)
		{
			// Left arrow
			jQuery(document.createElement('div'))
				.addClass('showcase-arrow-previous')
				.prependTo(showcase)
				.click(function() {
					// Disable auto change on click
					if (myInterval) { clearInterval(myInterval); }
					changeContent(content_count-1, 'previous');
				});
			// Right arrow
			jQuery(document.createElement('div'))
				.addClass('showcase-arrow-next')
				.prependTo(showcase)
				.click(function() {
					// Disable auto change on click
					if (myInterval) { clearInterval(myInterval); }
					changeContent(1, 'next');
				});
		}
		
		// Adding navigation buttons
		if (options.buttons && content_count > 1)
		{
			// Create button wrapper
			jQuery(document.createElement('div'))
				.css('clear', 'both')
				.addClass('showcase-button-wrapper')
				.appendTo(showcase);
			var i = 0;
			// Add button for each content
			while (i < content_count)
			{
				jQuery(document.createElement('span'))
					.attr('id', 'showcase-navigation-button-' + i)
					.addClass((i === 0) ? 'active' : '')
					// Add numbers or unicode
					.html((options.btn_numbers) ? parseInt(i)+1 : '&#9679;')
					.click(function(a, b)
					{
						// This function is used to extract the correct i value on click
						return function()
						{
							// Disable auto change on click
							if (myInterval) { clearInterval(myInterval); }
							changeContent(a, b);
						};
					}(i, ''))
					.appendTo(jQuery(showcase).find('.showcase-button-wrapper'));
				i++;
			}
		}
		
		// Remove loading class
		showcase.removeClass('showcase-load');
	};

})(jQuery);