/*
 
 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.4 (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:				5000,
			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:		0 /* 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 pause_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; clearInterval(myInterval); }
			// 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, fromSlideThumbnail)
		{			
			// 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')
					{
						if (!fromSlideThumbnail && current_id % options.thumbnails_slidex == 0 || current_id - previous_id > options.thumbnails_slidex || current_id - previous_id == options.thumbnails_slidex) {
							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) { pause_loop = true; 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) { pause_loop = true; 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.thumbnails_direction == 'vertical' && options.height < (thumbnailStretch + thumbnailSlidePosition))
				{
					thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition);
				}
				else if (options.thumbnails_direction == 'horizontal' && options.width < (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;
		}
		
		/*
		Default actions for buttons not working as desired.  The following function is called
		when paging through vertical thumbnails (should probably also work for horizontal thumbs,
		but I haven't tested it) and will highlight the first thumb of the new set of thumbs, and load the content.  Without
		this function, the content will page through all previous thumbs before finally ending up
		at the first thumb of the current page when the auto option is true. 
		*/
		var currentFirstVisible = 0;
		var currentLastVisible = thumbnailsPerPage - 1;
		
		function setContentAndThumbFromButton() {
			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;
			if(firstVisible == currentFirstVisible) {
				//  we are on the last set of thumbnails - reset thumbnails to first page
				changeContent(0, "next");
				currentFirstVisible = 0;
				currentLastVisible = thumbnailsPerPage - 1;
			} else {
				changeContent(firstVisible, "next", true);
				currentFirstVisible = firstVisible;
				currentLastVisible  = lastVisible;
			}
		}
		// 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) { pause_loop = true; 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); 
				setContentAndThumbFromButton();
			});
			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); 
				setContentAndThumbFromButton();
			});
			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; clearInterval(myInterval); });
			showcase.mouseleave(function()
			{
				if (!pause_loop)
				{
					break_loop = false; myInterval = window.setInterval(autoChange, options.interval);
				}
			});
		}
		
		// 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) { pause_loop = true; 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) { pause_loop = true; 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) { pause_loop = true; clearInterval(myInterval); }
							changeContent(a, b);
						};
					}(i, ''))
					.appendTo(jQuery(showcase).find('.showcase-button-wrapper'));
				i++;
			}
		}
		
		// Remove loading class
		showcase.removeClass('showcase-load');
	};

})(jQuery);