// Javascript Pager
		// 2011/03/04 Timo Breumelhof
		// www.40fingers.net 
		
		var iActiveImage = 1
		var ItemId = "Page"
		var mainSelector = ".SlideShow"
		var imgSelector = "img"
		var iImages = 0 // Total number of images
		var bAnimate = true	// animate?
		var holdTime = 5000 // Time to wait untill new animation
		var fadeTime = 500 // time to fade
		var iWidth = 0 // Main width
		var iHeight = 0 // Main Height
		
		function createPager(MainElement, SubElement, delay, fade, width, height){
			holdTime = delay * 1000
			fadeTime = fade * 1000
			iWidth = width
			iHeight = height;
			mainSelector = MainElement
			imgSelector = SubElement
			iImages = jQuery(imgSelector).length
			var out = ''
			var linkTemplate = '<a href="javascript: void(0)" id="' + ItemId + '{index}" onClick="clickImage({index})">{index}</a>'
			
			//Loop through all found items & set the styling for the elements + create pager links for each item
			jQuery(mainSelector).children().each(function(index){
				if (index == 0){ // Set the wrapper height and width to the first images width and height
					jQuery(mainSelector).css({"width" : iWidth, "height" : iHeight, "overflow" : "hidden", "position" : "relative"});
				}
				jQuery(this).css({"position" : "absolute", "display" : "none", "width" : iWidth, "height" : iHeight})
				out += linkTemplate.replace (/{index}/g, index + 1)
			})
			
			sOut = '<div class="Pager">' + out + '</div>'
			jQuery(sOut).insertAfter(mainSelector);

			jQuery(mainSelector).children().eq(0).css({'z-index' : '2', 'display' : 'block'});
			jQuery('#' + ItemId + 1).addClass('Active');
			
			startAnimation();
		}
	
		
		function getPagerLink(sSelector, iPagesH, iPage){
			var sLink = '<a href="javascript:void(0)" id="Page{page}" onclick="setPages(\'{sel}\', {height}, {page})">{page}</a>'
			sLink = sLink.replace (/{sel}/g, sSelector)
			sLink = sLink.replace (/{height}/g, iPagesH)
			sLink = sLink.replace (/{page}/g, iPage)
			return sLink
		}
		
		function startAnimation(){
			play = setInterval(function(){nextImage()}, holdTime);
		}
		
		function nextImage(){
			if (iActiveImage == iImages) {
				loadNextImage(1)
			}
			else{
				loadNextImage(iActiveImage + 1)
			}
		}
		
		function clickImage(index){
			bAnimate = false;
			loadNextImage(index)
		}
		
		function loadNextImage(index){
			// Get the actie link
			if (iActiveImage != index){
				//Set new image below previous
				clearInterval(play);
				jQuery(mainSelector).children().eq(index -1).css({'z-index' : '2'});
				jQuery(mainSelector).children().eq(index -1).fadeIn(fadeTime, function(){afterAnimation(index)});
				jQuery('.Pager a').removeClass('Active');
				jQuery('#' + ItemId + index).addClass('Active');
			}
		}
		
		function afterAnimation(index){
			//Move the new image up to the top
			jQuery(mainSelector).children().eq(index -1).css({'z-index' : '1'})
			jQuery(mainSelector).children().eq(iActiveImage -1).css({'z-index' : '0', 'display' : 'none'});
			iActiveImage = index
			
			if (bAnimate == true){
				startAnimation();
			}
		}