// -----------------------------------------------------------------------
// Eros Fratini - eros@recoding.it
// jquery.showcase 2.0.1
//
// 02/02/2010 - Wow, a fix about 10 minute after release....
// 02/02/2010 - Debugging and demos
// 27/12/2009 - Optimized animation, added functions to pause and resume autocycling
//			  - Tested external ease functions		
// 24/12/2009 - Added a lot of settings, redefine css
// 21/12/2009 - Begin to write v2.0
// 27/07/2009 - Added asynchronous loading of images
// 26/06/2009 - some new implementations
// 19/06/2009 - standardization
// 08/06/2009 - Initial sketch
//
// requires jQuery 1.3.x
//------------------------------------------------------------------------
(function($) {
	$.fn.showcase = function(options) {
		var $container = this;
		// Retrieve options
		var opt;
		opt = $.extend({}, $.fn.showcase.defaults, options);

		if (!/images|titles/.test(opt.linksOn)) {
			opt.linksOn = "images";
		}
		if (options && options.css) {
			opt.css = $.extend({}, $.fn.showcase.defaults.css, options.css);
		}
		if (options && options.animation) {
			opt.animation = $.extend({}, $.fn.showcase.defaults.animation, options.animation);
			if (!/horizontal-slider|vertical-slider|fade/.test(opt.animation.type)) {
				opt.animation.type = "horizontal-slider";
			}
		}
		if (options && options.navigator) {
			opt.navigator = $.extend({}, $.fn.showcase.defaults.navigator, options.navigator);

			if (!/top-left|top-right|bottom-left|bottom-right/.test(opt.navigator.position)) {
				opt.navigator.position = "top-right";
			}

			if (!/horizontal|vertical/.test(opt.navigator.orientation)) {
				opt.navigator.orientation = "horizontal";
			}

			if (options.navigator.css) {
				opt.navigator.css = $.extend({}, $.fn.showcase.defaults.navigator.css, options.navigator.css);
			}

			if (options.navigator.item) {
				opt.navigator.item = $.extend({}, $.fn.showcase.defaults.navigator.item, options.navigator.item);
				// Progressive extensions of hover and selected states, inherited by standard css properties
				opt.navigator.item.cssHover = $.extend({}, $.fn.showcase.defaults.navigator.item.css, $.fn.showcase.defaults.navigator.item.cssHover);
				opt.navigator.item.cssSelected = $.extend({}, $.fn.showcase.defaults.navigator.item.css, $.fn.showcase.defaults.navigator.item.cssSelected);

				if (options.navigator.item.css) {
					opt.navigator.item.css = $.extend({}, $.fn.showcase.defaults.navigator.item.css, options.navigator.item.css);
					opt.navigator.item.cssHover = $.extend({}, $.fn.showcase.defaults.navigator.item.cssHover, options.navigator.item.css);
					opt.navigator.item.cssSelected = $.extend({}, $.fn.showcase.defaults.navigator.item.cssSelected, options.navigator.item.css);
				}
				if (options.navigator.item.cssHover) { opt.navigator.item.cssHover = $.extend({}, $.fn.showcase.defaults.navigator.item.cssHover, options.navigator.item.cssHover); }
				if (options.navigator.item.cssSelected) { opt.navigator.item.cssSelected = $.extend({}, $.fn.showcase.defaults.navigator.item.cssSelected, options.navigator.item.cssSelected); }
			}
		}

		if (options && options.titleBar) {
			opt.titleBar = $.extend({}, $.fn.showcase.defaults.titleBar, options.titleBar);
			if (!/bottom|top/.test(opt.titleBar.position)) {
				opt.titleBar.position = "bottom";
			}

			if (options.titleBar.css) { opt.titleBar.css = $.extend({}, $.fn.showcase.defaults.titleBar.css, options.titleBar.css); }
		}

		// Check loading mode.
		// If there's something in opt.images[], I'll load them asynchronously, 
		// it will be nice to have width and height setted, in order to define the $container sizes
		if (opt.images.length != 0) {
			$container.css({ width: opt.css.width, height: opt.css.height, overflow: "hidden" });
			for (var i in opt.images) {
				var img = new Image();
				img.src = opt.images[i].url;
				img.alt = opt.images[i].description || "";
				var $link = $("<a />").attr({ "href": opt.images[i].link || "#", "target": opt.images[i].target || "_self" });
				$link.append(img);
				$container.append($link);
			}
		}

		// Check loading state of #1 image
		if ($container.find("img:first")[0].complete) {
			$.fn.showcase.start($container, opt);
		}
		else {
			$container.find("img:first").load(function() {
				$.fn.showcase.start($container, opt);
			});
		}

		// functions to control the palyback of showcase
		$.fn.extend({
			pause: function() { $container.data("stopped", true); },
			go: function() { $container.data("stopped", false); }
		})
	}

	// This will start all showcase's stuffs
	$.fn.showcase.start = function($container, opt) {
		// Define local vars
		var index = 0;
		var nImages = $container.find("img").length;
		var $fi = $container.find("img:first");
		var imagesize = { width: $fi.removeAttr("width").width(), height: $fi.removeAttr("height").height() };

		opt.css.width = imagesize.width;
		opt.css.height = imagesize.height;

		// setup container
		$container.css(opt.css)
            .find("a").css({ position: "absolute", top: "0", left: "0" })
                .find("img").css("border", "0px");

		// setup navigator
		var $slider = $("<div id='slider' />").css({ position: "absolute" });
		var $divNavigator = $("<div id='navigator' />").css(opt.navigator.css);

		switch (opt.navigator.position) {
			case "top-left": $divNavigator.css({ top: "0px", left: "0px" });
				break;
			case "top-right": $divNavigator.css({ top: "0px", right: "0px" });
				break;
			case "bottom-left": $divNavigator.css({ bottom: "0px", left: "0px" });
				break;
			case "bottom-right": $divNavigator.css({ bottom: "0px", right: "0px" });
				break;
		}

		$container.find("a").wrapAll($slider).each(function(i) {
			switch (opt.animation.type) {
				case "horizontal-slider":
					$(this).css("left", i * imagesize.width);
					break;
				case "vertical-slider":
					$(this).css("top", i * imagesize.height);
					break;
				case "fade":
					$(this).css({ top: "0", left: "0", opacity: 1, "z-index": 1000 - i });
					break;
			}

			// Create navigation bar item
			var $navElement = $("<a href='#'>" + (opt.navigator.showNumber ? (i + 1) : "") + "</a>")
                                .css({ display: "block",
                                	"text-decoration": "none",
                                	"-moz-outline-style": "none"
                                })
                                .click(function() {
                                	if (opt.animation.autoCycle) { clearInterval(opt.animation.intervalID); } // stop the current automatic animation
                                	$.fn.showcase.showImage(i, $container, imagesize, opt);
                                	index = i;
                                	if (opt.animation.autoCycle) { opt.animation.intervalID = showcaseCycler(index, nImages, $container, imagesize, opt); } // restart the automatic animation
                                	return false;
                                })
                                .hover(
                                	function() {
                                		if (!$(this).data("selected")) {
                                			if (opt.navigator.item.cssClassHover)
                                			{ $(this).addClass(opt.navigator.item.cssClassHover); }
                                			else
                                			{ $(this).css(opt.navigator.item.cssHover); }
                                		}
                                	},
                                	function() {
                                		if (!$(this).data("selected")) {
                                			if (opt.navigator.item.cssClassHover)
                                			{ $(this).removeClass(opt.navigator.item.cssClassHover); }
                                			else
                                			{ $(this).css(opt.navigator.item.css); }
                                		}
                                	}
                                )
                                .appendTo($divNavigator);

			if (opt.navigator.item.cssClass) { $navElement.attr("class", opt.navigator.item.cssClass); }
			else {
				$.extend({}, $navElement.css, opt.navigator.item);
				$navElement.css(opt.navigator.item.css);
			}

			switch (opt.navigator.orientation) {
				case "horizontal":
					$navElement.css("float", "left");
					break;
				case "vertical":
					$navElement.css("float", "none");
					break;
			}

			if (opt.navigator.showMiniature) {
				$("<img />").attr({ src: $(this).find("img").attr("src"), width: $navElement.css("width").replace("px", ""), height: $navElement.css("height").replace("px", ""), border: "0px" }).appendTo($navElement);
			}
		});

		if (opt.navigator.autoHide) {
			$divNavigator.css("opacity", 0);
		}

		$container.append($divNavigator).hover(
            function() {
            	if (opt.titleBar.autoHide && opt.titleBar.enabled) {
            		$($titleBar).stop().animate({ opacity: opt.titleBar.css.opacity, left: 0, right: 0, height: opt.titleBar.css.height }, 250);
            	}
            	if (opt.navigator.autoHide) { $($divNavigator).stop().animate({ opacity: 1 }, 250); }
            	$(this).data("isMouseHover", true);
            },
            function() {
            	if (opt.titleBar.autoHide && opt.titleBar.enabled) {
            		$titleBar.stop().animate({ opacity: 0, height: "0px" }, 400);
            	}
            	if (opt.navigator.autoHide) { $divNavigator.stop().animate({ opacity: 0 }, 250); }
            	$(this).data("isMouseHover", false);
            }
        );

		// Create titleBar
		if (opt.titleBar.enabled) {
			if (opt.linksOn == "images") {
				var $titleBar = $("<div id='subBar' />").html($("<span />").html($container.find("a:first img").attr("alt")));
			}
			else {
				var $a = $("<a />").attr("href", $container.find("a:first").attr("href")).html("<span>" + $container.find("a:first img").attr("alt") + "</span>");
				var $titleBar = $("<div id='subBar' />").html($a)

				$container.find("#slider a").each(function() {
					$(this).attr("rel", $(this).attr("href"));
				});
				$container.find("#slider a").removeAttr("href");
			}

			$titleBar.css({
				opacity: 0.50,
				width: "100%",
				overflow: "hidden",
				"z-index": 10002,
				position: "absolute"
			});

			if (opt.titleBar.position == "top") { $titleBar.css("top", "0"); }
			else { $titleBar.css("bottom", "0"); }

			if (opt.titleBar.cssClass) { $titleBar.attr("class", opt.titleBar.cssClass); }
			else {
				$titleBar.css(opt.titleBar.css);
				$("a", $titleBar).css("color", opt.titleBar.css.color);
			}

			if (opt.titleBar.autoHide) {
				$titleBar.css({
					"height": "0px",
					"opacity": 0
				});
			}
			$titleBar.appendTo($container);
		}

		// set first image as selected
		$.fn.showcase.setNavigationItem(0, $container, opt);

		// startup cycling
		if (opt.animation.autoCycle) {
			opt.animation.intervalID = showcaseCycler(index, nImages, $container, imagesize, opt);
		}
	}

	var showcaseCycler = function(index, nImages, $container, imagesize, opt) {
		return setInterval(function() {
			if (!$container.data("stopped")) {
				if (!$container.data("isMouseHover") || !opt.animation.stopOnHover)
					$.fn.showcase.showImage(++index % nImages, $container, imagesize, opt);
			}
		}, opt.animation.interval);
	};

	$.fn.showcase.showImage = function(i, $container, imagesize, opt) {
		var $a = $container.find("a");
		var $a_this = $container.find("a").eq(i);

		switch (opt.animation.type) {
			case "horizontal-slider": $container.find("#slider").stop().animate({ left: -(i * imagesize.width) }, opt.animation.speed, opt.animation.easefunction);
				break;
			case "vertical-slider": $container.find("#slider").stop().animate({ top: -(i * imagesize.height) }, opt.animation.speed, opt.animation.easefunction);
				break;
			case "fade":
				$container.css({ "z-index": "1001" });
				if ($a_this.css("z-index") != "1000") {
					$a_this.css({ "z-index": "1000", opacity: 0 });

					$a.not($a_this).each(function() {
						if ($(this).css("z-index") != "auto")
							$(this).css("z-index", parseInt($(this).css("z-index"), 10) - 1);
					});

					$a_this.stop().animate({ opacity: 1 }, opt.animation.speed, opt.animation.easefunction);
				}
				break;
		}

		if (opt.titleBar.enabled) {
			if (opt.linksOn == "titles") {
				$("#subBar a", $container).attr({
					"href": $a_this.attr("rel"), "target": $a_this.attr("target")
				});
			}
		}
		$("#subBar span", $container).html($a_this.find("img").attr("alt"));
		// Setting selected navigationItem
		$.fn.showcase.setNavigationItem(i, $container, opt);
	};

	// Highlight the navigationItem related to image
	$.fn.showcase.setNavigationItem = function(i, $container, opt) {
		if (opt.navigator.item.cssClassSelected) {
			$container.find("#navigator a").removeClass(opt.navigator.item.cssClassSelected).data("selected", false);
			$container.find("#navigator a").eq(i).addClass(opt.navigator.item.cssClassSelected).data("selected", true);
		}
		else {
			if (opt.navigator.item.cssClass) {
				//$container.find("#navigator a").removeAttr("style").data("selected", false);
				$container.find("#navigator a").eq(i).css(opt.navigator.item.cssSelected).data("selected", true);
			}
			else {
				$container.find("#navigator a").css(opt.navigator.item.css).data("selected", false);
				$container.find("#navigator a").eq(i).css(opt.navigator.item.cssSelected).data("selected", true);
			}
		}
	};

	$.fn.showcase.defaults = {
		images: [],
		linksOn: "images",
		css: { position: "relative",
			overflow: "hidden",
			border: "none",
			width: "",
			height: ""
		},
		animation: { autoCycle: true,
			stopOnHover: true,
			interval: 4000,
			speed: 500,
			easefunction: "swing",
			type: "horizontal-slider"
		},

		navigator: { css: { border: "none",
			padding: "5px",
			margin: "0px",
			position: "absolute",
			"z-index": 1000
		},
			position: "top-right",
			orientation: "horizontal",
			autoHide: false,
			showNumber: false,
			showMiniature: false,
			item: { cssClass: null,
				cssClassHover: null,
				cssClassSelected: null,
				css: {
					color: "#000000",
					"text-decoration": "none",
					"text-align": "center",
					"-moz-outline-style": "none",
					width: "12px",
					height: "12px",
					lineHeight: "12px",
					verticalAlign: "middle",
					backgroundColor: "#878787",
					margin: "0px 3px 3px 0px",
					border: "solid 1px #acacac",
					"-moz-border-radius": "4px",
					"-webkit-border-radius": "4px"
				},
				cssHover: {
					backgroundColor: "#767676",
					border: "solid 1px #676767"
				},
				cssSelected: {
					backgroundColor: "#00FF00",
					border: "solid 1px #acacac"
				}
			}
		},
		titleBar: { enabled: true,
			autoHide: true,
			position: "bottom",
			cssClass: null,
			css: { opacity: 0.50,
				color: "#ffffff",
				backgroundColor: "#000000",
				height: "40px",
				padding: "4px",
				fontColor: "#444444",
				fontStyle: "italic",
				fontWeight: "bold",
				fontSize: "1em"
			}
		}
	};

})(jQuery);