/**
 * In case the $ is used for another purpose on the page we provide jQuery as a parameter
 */
(function($) {
	
	/**
	 * Array containing options. 
	 */
	 var options = new Array(100);
	

	/**
	 * Array containing the images already preloaded. 
	 */
	 var preloadedImages = new Array(100);

	
	/**
	 * Adds the carousel functionality.
	 * @param callerOptions Array containing the options from the caller. 
	 */
	$.imageCarousel = function(callerOptions) {
		if (callerOptions == null || callerOptions == undefined) {
			return;
		}
		initCarousel(callerOptions);
		
		// set the click handlers
		$(options.nextControl).click(function(event) {	
			if (options.wrapCarousel == true) {
				showImage((options.current + 1) % options.images.length);
			}
			else if (options.current < options.images.length -1) {
				showImage(options.current + 1);
			}
		});	
		
		$(options.previousControl).click(function() {
			if (options.wrapCarousel == true) {
				showImage((options.images.length + options.current - 1) % options.images.length);
			}
			else if (options.current > 0) {
				showImage(options.current -1);
			}
			return false;
		});
		
		options.images.click(function() {
			if (options.wrapCarousel == true) {
				showImage((options.current + 1) % options.images.length);
			}
			else if (options.current < options.images.length -1) {
				showImage(options.current + 1);
			}
		});
		
		showImage(0);
	}


	/**
	 * Shows a image with a given index. 
	 * @param index The index of the image to show. 
	 */
	function showImage(index) {
		hide(options.images.get(options.current))
		hide(options.texts.get(options.current));
		show(options.images.get(index));
		show(options.texts.get(index));
		
		options.current = index;
		updateCounter();
		udpateControlClasses();
	}
	
	
	/**
 	 * Hides a html element.  
	 */
	function hide(element) {
		if (element != null && element != undefined) {
			element.style.display = "none";
		}
	}

	
	/**
	 * Shows a hmlt element. 
	 */
	function show(element) {
		if (element != null && element != undefined) {
			element.style.display = "";
		}
	}

	/**
	 * Updates teh counter with the current image index. 
	 */
	 function updateCounter() {
		$(options.counter)[0].innerHTML = (options.current + 1) + options.counterText + options.images.length;
	 }
	 
	 
	/**
	 * Updates the css classes of the controls. 
	 */
	function udpateControlClasses() {
		udpatePreviousControlClass();
		updateNextControlClass();
	}
	  
	  
	/**
	 * Updates the class of the previous control. 
	 */
	function udpatePreviousControlClass() {
		if (options.wrapCarousel == false && options.current == 0) {
			$(options.previousControl).addClass(options.previousControlHide);
		}
		else if (options.wrapCarousel == false) {
			$(options.previousControl).removeClass(options.previousControlHide);
		}
	}
	   
	   
	/**
	 * Updates the class of the next control.
	 */
	function updateNextControlClass() {
		if (options.wrapCarousel == false && options.current == options.images.length -1) {
			$(options.nextControl).addClass(options.nextControlClassHide);
		}
		else if (options.wrapCarousel == false) {
			$(options.nextControl).removeClass(options.nextControlClassHide);
		}
	}

	
	/**
 	 * Initializes the image carousel. 
	 * @param callerOptions Array containing the options from the caller. 
	 */
	function initCarousel(callerOptions) {
		// set reasonable default values for the options
		options = $.extend({
			imageTags: "",
			nextControl: "#nextControl",
			previousControl: "#previousControl",
			counter: "#Counter",
			counterText : " / ",
			nextControlClassHide: "hideCarouselControl ",
			previousControlHide: "hideCarouselControl ",
			imageTextFields: "",
			wrapCarousel: false
		}, callerOptions || {});

		options.images = $(options.imageTags);
		options.texts = $(options.imageTextFields);
		if (options.images.length == 0 || options.texts.length == 0) {
			// no images
			return;
		}
	
		options.images.hide();
		options.texts.hide();
		options.current = 0;
	}
})(jQuery);