﻿// ********************
// Name:	jQuery Fancy Slideshow
// Version:	1.0
// Author: Pim Hoogendoorn - the peoples valley
// ********************
(function(jQuery) {
	jQuery.fn.fancyslideshow = function(options) {
		var defaults = {

			// Configuration options
			startItem: 1,
			decimalNavigation: true,
			slideshowNavigation: true,
			keyNavigation: true,
			hoverNavigation: false,
			autoScroll: false,
			mousewheel: true,
			easing: true,
			easingType: 'easeInOutBack',
			stack: 'horizontal',
			animationSpeed: 1000,
			delay: 3000,
						
			// HTML #id's
			slideShowHolder: 'viewport',
			slideShow: 'slideshow',
			prevBtnTxt: 'Previous',
			nextBtnTxt: 'Next',
			prevBtnItemId: 'prevBtn',
			nextBtnItemId: 'nextBtn',
			prevHoverBtn: 'hoverPrev',
			nextHoverBtn: 'hoverNext',
			decimalNavigationId: 'decimalNavigation',
			slideshowNavigationId: 'slideshowNavigation',
			animation: null
	};
		
		var settings = jQuery.extend(defaults, options);
		return this.each(function() {
			// Default vars
			var slideShowWidth = jQuery('#' + settings.slideShow).width();
			var numberOfItems;
			var activeItem;
			var animate;
			var fade;
			var easing;
			var timer = 0;
			var highestHeight = 0;
			
			// Initialize all functions
			initConfigOptions();
			initGallery();
			setEvents();
			showLoader();

			// Initialize the gallery
			function initGallery() {
				jQuery('body').attr('id', 'domenabled');
				numberOfItems = jQuery('#' + settings.slideShow + '>ul>li').length;
				if (settings.easing) { easing = settings.easingType; }
				// Set the width on every element
				jQuery('#' + settings.slideShow + '>ul>li').each(function(index) {
					$(this).css('width', slideShowWidth);
					if (jQuery(this).height() > highestHeight) {
						highestHeight = jQuery(this).height()+20;
					}
				});

				// Set the viewport height
				if (!settings.autoHeight) {
					jQuery('#' + settings.slideShow).css('height', highestHeight);
				}

				// Create decimalNavigation
				if (jQuery('#' + settings.slideShow) && settings.decimalNavigation) {
					createdecimalNavigation(settings.slideShowHolder);
				}

				// Create slideshowNavigation
				if (jQuery("#" + settings.slideShow) && settings.slideshowNavigation) {
					createslideshowNavigation(settings.slideShowHolder, settings.prevBtnItemId, settings.nextBtnItemId);
				}

				// Set startitem
				if (settings.stack == 'horizontal') {
					activeItem = settings.startItem;
					startMargin = -slideShowWidth * (activeItem - 1);
					jQuery('#' + settings.slideShow + '>ul').css('marginLeft', startMargin);
				} else {
					activeItem = settings.startItem;
					doFlip(activeItem);
				}

				adjustElementWidth();
				animateHeight();
			};

			// ------ Configuration options ----------------//

			function initConfigOptions() {
				// Initialize all configuration options
				// Check for Mousewheel plugin
				if (!window.hasMouseWheel) {
					mousewheel = false;
				}
				// Check for Easing plugin
				if (!window.hasEasing) {
					easing = false;
				}
				// Check for auto slide
				if (settings.autoScroll) {
					autoSlide();
				}
				// Enable keyboard navigation
				if (settings.keyNavigation) {
					setkeyNavigation();
				}
				// Enable viewport hover navigation
				if (settings.hoverNavigation) {
					createHoverNav();
				}
			}

			// ------ All functions used in the script ----------------//
			function flipNext() {
				activeItem++;
				doFlip();
				return false;
			}

			function flipPrevious() {
				activeItem--;
				doFlip();
				return false;
			}

			function flipJump(to) {
				activeItem = to;
				doFlip();
				return false;
			}
			
			function doFlip() {
				// Check for first or last item
				if (activeItem > numberOfItems) {
					activeItem = 1;
				}
				if (activeItem < 1) {
					activeItem = numberOfItems;
				}
				// Animate to next item
				var margin = calculateMargin();
				animate = true;
				// Check for custom animation
				if (typeof (settings.animation) == "undefined" || settings.animation == null) {
					slideAnimation(margin);
				} else {
					settings.animation(margin);
				}
				// Set decimalNav to active
				if (settings.decimalNavigationId) {
					jQuery('#' + settings.decimalNavigationId + ' li.active').removeClass('active');
					jQuery('#' + settings.decimalNavigationId + ' li:eq(' + (activeItem - 1) + ')').addClass('active');
				}
			}

			function slideAnimation(margin) {
				if (settings.stack == 'horizontal') {
					jQuery('#' + settings.slideShow + '>ul').animate({
						marginLeft: margin
					}, {
						duration: settings.animationSpeed,
						easing: easing,
						queue: false,
						complete: function() {
							animate = false;
							if (settings.autoHeight) {
								animateHeight();
							}
						}
					});
				} else {
					jQuery('#' + settings.slideShow + '>ul').animate({
						marginTop: margin
					}, {
						duration: settings.animationSpeed,
						easing: easing,
						queue: false,
						complete: function() {
							animate = false;
							if (settings.autoHeight) {
								animateHeight();
							}
						}
					});
				}
			}

			// Set events
			function setEvents() {
				// Buttons
				$('#' + settings.prevBtnItemId + ', #' + settings.prevHoverBtn).click(function() {
					if (settings.autoScroll) {
						clearInterval(slide);
					}
					flipPrevious();
					return false;
				});
				$('#' + settings.nextBtnItemId + ', #' + settings.nextHoverBtn).click(function() {
					if (settings.autoScroll) {
						clearInterval(slide);
					}
					flipNext();
					return false;
				});

				// Decimal navigation
				jQuery('#' + settings.decimalNavigationId + ' a').click(function(event) {
					clearInterval(slide);
					var next = $(this).html();
					flipJump(next);
					return false;
				});

				// Hover navigation
				if (settings.hoverNavigation) {
					hoverNav();
				}
						
				// Mousewheel navigation
				if (settings.mousewheel) {
					jQuery('#' + settings.slideShow).mousewheel(function(event, delta) {
						if (settings.autoScroll) {
							clearInterval(slide);
						}
						if (delta > 0) {
							flipPrevious();
						} else if (delta < 0) {
							flipNext();
						}
						return false;
					});
				}
			}

			function animateHeight() {
				var itemHeight = jQuery('#' + settings.slideShow + '>ul>li:eq(' + (activeItem - 1) + ')').height();
				// set height ul
				if (settings.stack == "horizontal") {
					jQuery('#' + settings.slideShow + '>ul').css('height', highestHeight);
					jQuery('#' + settings.slideShow + '>ul>li').css('float', 'left');
				} else {
					// Change height of viewport
					var activeItemHeight = jQuery('#' + settings.slideShow + '>ul>li:eq(' + (activeItem - 1) + ')').innerHeight();
					jQuery('#' + settings.slideShow).animate({
						height: activeItemHeight + 'px'
					}).css({
						position: 'relative',
						width: 'auto'
					});
				}

				// Animate height
				if (settings.autoHeight) {
					jQuery('#' + settings.slideShow).animate({
						height: itemHeight
					}, {
						duration: settings.animationSpeed,
						easing: easing
					});
				}
			}

			// Create slideshow hover navigation
			function createHoverNav() {
				jQuery('#' + settings.slideShow).append('<div id="hoverNav"><a id="hoverPrev" href="#"><span>' + settings.prevBtnTxt + '</span></a><a id="hoverNext" href="#"><span>' + settings.nextBtnTxt + '</span></a></div>');
			}

			// Create the decimal navigation
			function createdecimalNavigation(element) {
				jQuery('#' + element).before('<div id="' + settings.decimalNavigationId + '"><ul>');
				// Create list of items
				jQuery('#' + settings.slideShow + '>ul>li').each(function(index) {
					var listItem = '<li><a href="#">' + (index + 1) + '</a></li>';
					jQuery('#' + settings.decimalNavigationId + ' ul').append(listItem);
					jQuery('#' + settings.decimalNavigationId + ' li:eq(' + (settings.startItem - 1) + ')').addClass('active');
				});
				// Close div
				jQuery('#' + settings.decimalNavigationId).prepend('</ul></div>');
			};

			// Hover navigation
			function hoverNav() {
				jQuery('#hoverNav a').css('height', highestHeight); // Fix hovernav for IE6
				var leftSide = jQuery('#' + settings.slideShow).offset().left;
				var rightSide = leftSide + slideShowWidth;
				var center = rightSide - (slideShowWidth / 2);
				var lastVisible = jQuery('#' + settings.slideShow + ' ul>li').length;

				jQuery('#' + settings.slideShow).bind('mouseover', function() {
					var currentItem = jQuery('#' + settings.slideShow + ' ul li.visible');
					var currentId = jQuery(currentItem).attr('rel');
					// Check mouseover
					jQuery('#' + settings.slideShow).mousemove(function(e) {
						if ((e.pageX > leftSide && e.pageX < center)) {
							if (currentId != 1) {
								jQuery('#hoverNav a#hoverPrev').css({
									display: 'block',
									opacity: 0.7,
									backgroundColor: '#ffffff'
								});
							} else {
								jQuery('#hoverNav a#hoverPrev').css('display', 'none');
							}
						} else if ((e.pageX < rightSide && e.pageX > center)) {
							if (currentId != lastVisible) {
								jQuery('#hoverNav a#hoverNext').css({
									display: 'block',
									opacity: 0.7,
									backgroundColor: '#ffffff'
								});
							} else {
								jQuery('#hoverNav a#hoverNext').css('display', 'none');
							}
						}
					});
				}).bind('mouseout', function() {
					jQuery('#hoverNav a#hoverPrev, #hoverNav a#hoverNext').css('display', 'none');
				});
			}

			// Create slideshow navigation
			function createslideshowNavigation(afterElement, previousBtn, nextBtn) {
				jQuery('#' + afterElement).before('<div id="' + settings.slideshowNavigationId + '"><a id="' + previousBtn + '" href="#">' + settings.prevBtnTxt + '</a><a id="' + nextBtn + '" href="#">' + settings.nextBtnTxt + '</a></div>');
			}

			// Keyboard navigation
			function setkeyNavigation() {
				jQuery(document).keyup(function(e) {
					if (settings.autoScroll) {
						clearInterval(slide);
					}
					// Listen for keypress activity
					key = e.charCode || e.keyCode || 0;
					if (key == 37) {
						flipPrevious();
					}
					if (key == 39) {
						flipNext();
					}
				});
			}
			
			/* Special functions Filevrij */
			var slide;
			// Auto slide
			function autoSlide() {
				// Autoslide timer
				slide = setInterval(showLoader, settings.delay);
				//showLoader();
			}
			
			function showLoader() {
				timer = timer + 1;
				// Check which element to show
				if (timer > 1) { 
					flipNext();
				}
				startLoader();
			}

			function startLoader() {
				if ($('#decimalNavigation ul li:first').hasClass('active')){
					$('#decimalNavigation ul li a').css('background-position','-16px 0');
				}
				$('#decimalNavigation ul li.active a').animate(
					{backgroundPosition:"(0 0)"},
					{duration:6000}
				);
			}
			
			if (settings.autoScroll){
				$('#viewport').bind('mouseenter', function(){
					$('#decimalNavigation ul li.active a').stop().css('background-position','-16px 0');
					clearInterval(slide);
				}).bind('mouseleave', function(){
					startLoader();
					slide = setInterval(showLoader, settings.delay);
				});
			}

			function adjustElementWidth() {
				jQuery('#' + settings.slideShow + ' ul li img, #' + settings.slideShow + ' ul li').each(function(index) {
					if (jQuery(this).width() > slideShowWidth) {
						imageWidth = jQuery(this).attr('width');
						imageHeight = jQuery(this).attr('height');
						newWidth = imageWidth * (slideShowWidth / imageWidth);
						newHeight = imageHeight * (slideShowWidth / imageWidth);
						jQuery(this).attr({
							width: newWidth,
							height: newHeight
						});
					}
				});
			}

			// Calculate  the new margin
			function calculateMargin() {
				var retVal = 0;
				if (settings.stack == "horizontal") {
					retVal = -slideShowWidth * (activeItem - 1);
				} else {
					var totH = 0;
					jQuery('#' + settings.slideShow + '>ul>li:lt(' + (activeItem - 1) + ')').each(function() {
						totH -= jQuery(this).height();
					});
					retVal = totH;
				}
				return retVal;
			}

		});
	};
})(jQuery); 