/**
 * jQuery.pxEtalage - automated image slider for jQuery
 * written by Michiel Sikma <michiel@wedemandhtml.com>
 * Copyright (C) 2010, PixelDeluxe <http://pixeldeluxe.nl/>
 * All rights reserved.
 * Date: 2010/12/16
 *
 * @author Michiel Sikma
 * @version 0.2
 *
 **/

(function($)
{
	$.fn.pxEtalage = function(options)
	{
		var settings = {
			/* Which effect to use (fade). */
			effect: "fade",
			/* How long the effect takes to complete. */
			effect_duration: 500,
			
			/* Whether to allow automatic sliding or to restrict to user interaction. */
			slide_automation: true,
			/* How long a slide will be seen before moving on to the next. */
			slide_duration: 4000
		};
		
		/* Perform the plugin code on all elements, then return the jQuery object for chainability. */
		return this.each(function()
		{
			/**
			 * Note that this plugin only works with the proper HTML structure. Here is an example:
			 *
			 * <div class="main">
			 *     <ul class="menu">
			 *         <li><a href="page_a.html">Page A</a></li>
			 *         <li><a href="page_b.html">Page B</a></li>
			 *         <li><a href="page_c.html">Page C</a></li>
			 *         <li><a href="page_d.html">Featured page</a></li>
			 *     </ul>
			 *     <div class="image_wrap">
			 *         <img src="page_a_preview.png" alt="Page A preview" class="slide" />
			 *         <img src="page_b_preview.png" alt="Page B preview" class="slide" />
			 *         <img src="page_c_preview.png" alt="Page C preview" class="slide" />
			 *         <img src="page_d_preview.png" alt="Page D preview" class="slide default" />
			 *     </div>
			 * </div>
			 *
			 * The .main div here represents the element on which the $.fn.pxEtalage() method was called.
			 * Its class is arbitrary. .menu and .image_wrap are required, however. The images with
			 * .slide might as well be <div> elements.
			 *
			 **/
			
			/* $main refers to the HTML element on which the $.fn.pxEtalage() method was called. */
			var $main = $(this);
			var a, z;
			
			if (settings) {
				/* Override default settings. */
				$.extend(settings, options);
				if (!/^fade$/.test(settings.effect)) {
					window.console && console.warn("The requested effect (%o) cannot be found.", settings.effect);
				}
			}
			
			/* Index all the images and determine their default. */
			var $image_wrap = $(".image_wrap", $main);
			var $images = $(".slide", $image_wrap);
			for (a = 0, z = $images.length; a < z; ++a) {
				/* Number all of the images. */
				$.data($images[a], "n", a);
			}
			$images.fadeTo(0, 0);
			var max_z = 5;
			var $default_image = $(".slide.default", $image_wrap);
			if ($default_image.length == 0) {
				$default_image = $($images[0]);
			}
			var default_n = $.data($default_image[0], "n");
			var hide_default = true;
			max_z = Number($default_image.css("zIndex"));
			//alert(max_z);
			
			$default_image.fadeTo(0, 1);
			var $previous_image = $default_image;
			
			/* Function used to show a particular slide. */
			function show_slide(n)
			{
				$menu_links.removeClass("active");
				$active_link = $($menu_links[n]);
				$active_link.addClass("active");
				$selector.animate({top: $active_link.position().top}, {duration: 200, queue: false, easing: "easeOutSine"});
				var $image = $($images[n]);
				switch (settings.effect) {
					case "fade":
						max_z += 1;
						$image.css({zIndex: max_z});
						
						//alert($(".logo").css("z-index"));
						$image.animate({opacity: 1}, {duration: settings.effect_duration, queue: false});
						
						$(".logo").css("z-index", max_z+100); /* Deze is toegevoegd door martijn, alleen werkt dit niet in IE7 */
						
						if ($previous_image && $previous_image[0] != $image[0]) {
							$previous_image.animate({opacity: 0}, {duration: settings.effect_duration, queue: false});
						}
						if (hide_default && $default_image[0] != $image[0]) {
							/* Hide the default image if it hasn't been hidden already. */
							hide_default = false;
							$default_image.animate({opacity: 0}, {duration: settings.effect_duration, queue: false});
						}
						
						break;
				}
				$previous_image = $image;
			}
			
			/* Function used to get the next image in line. */
			function get_next_image_n()
			{
				var next_n = $.data($previous_image[0], "n") + 1;
				if (next_n > $images.length - 1) {
					next_n = 0;
				}
				return next_n;
			}
			
			/* Link the hover command of the menu items to their corresponding slides. */
			var $menu = $(".menu", $main);
			var $menu_links = $("a", $menu);
			var $selector = $(".selector", $main);
			$selector.css({top: $($menu_links[default_n]).position().top});
			var $link;
			for (a = 0, z = $menu_links.length; a < z; ++a) {
				$link = $($menu_links[a]);
				$.data($menu_links[a], "n", a);
				$link.mouseenter(function()
				{
					show_slide($.data(this, "n"));
				});
				if (a == default_n) {
					$link.addClass("active");
				}
			}
			
			/* Set up automatic sliding if it is enabled. */
			if (settings.slide_automation) {
				if (jQuery.timer) {
					function start_timer()
					{
						$main.everyTime(settings.slide_duration, "slide_automation", function()
						{
							show_slide(get_next_image_n());
						});
					}
					start_timer();
					/* Make sure sliding is paused when the user hovers over the menu. */
					$menu.mouseenter(function()
					{
						$main.stopTime("slide_automation");
					});
					$menu.mouseleave(function()
					{
						start_timer();
					});
				} else {
					window.console && console.warn("jQuery Timers plugin doesn't seem to be present. It's required for automatic sliding. Download it at http://plugins.jquery.com/project/timers.");
				}
			}
			
			/* Last check to ensure integrity. */
			if ($menu_links.length > $images.length) {
				window.console && console.warn("Amount of menu links (%o) and images (%o) is not the same.", $menu_links.length, $images.length);
			}
		});
	}
})(jQuery);