/*!
	Slimbox v1.65 - The ultimate lightweight Lightbox clone
	(c) 2007-2008 Christophe Beyls <http://www.digitalia.be>
	Slideshow function by Mario Zambon <http://www.urbangap.com>
	MIT-style license.
*/

var Slimbox;

(function() {

	var state = 0, options, images, activeImage, prevImage, nextImage, top, fx, preload, preloadPrev = new Image(), preloadNext = new Image(),
	overlay, center, image, prevLink, nextLink, bottomContainer, bottom, caption, number;

	// Initialization

	window.addEvent("domready", function() {
		// Append the Slimbox HTML code at the bottom of the document
		$(document.body).adopt(
			$$([
				overlay = new Element("div", {id: "lbOverlay"}).addEvent("click", close),
				center = new Element("div", {id: "lbCenter"}),
				bottomContainer = new Element("div", {id: "lbBottomContainer"})
			]).setStyle("display", "none")
		);

		image = new Element("div", {id: "lbImage"}).injectInside(center).adopt(
			prevLink = new Element("a", {id: "lbPrevLink"}).addEvent("click", previous),
			nextLink = new Element("a", {id: "lbNextLink"}).addEvent("click", next)
		);

		bottom = new Element("div", {id: "lbBottom"}).injectInside(bottomContainer).adopt(
			timer = new Element("img", {id: "loaderTime"}).addClass("pto"),
			playLink = new Element("a", {id: "lbPlayLink"}).addClass("show").addEvent("click", countDownPlay),
			stopLink = new Element("a", {id: "lbStopLink"}).addClass("hide").addEvent("click", countDownStop),
			new Element("a", {id: "lbCloseLink"}).addEvent("click", close),
			caption = new Element("div", {id: "lbCaption"}),
			number = new Element("div", {id: "lbNumber"}),
			new Element("div", {styles: {clear: "both"}})
		);

		fx = {
			overlay: new Fx.Tween(overlay, {property: "opacity", duration: 500}).set(0),
			image: new Fx.Tween(image, {property: "opacity", duration: 500, onComplete: nextEffect}),
			bottom: new Fx.Tween(bottom, {property: "margin-top", duration: 400})
		};
	});


	// API

	Slimbox = {
		open: function(_images, startImage, _options) {
			options = $extend({
				resizeTransition: false,
				//resizeTransition: Fx.Transitions.Sine.easeIn,			//classic
				//resizeTransition: Fx.Transitions.Expo.easeInOut, 		//good
				//resizeTransition: Fx.Transitions.Cubic.easeInOut, 	//good
				//resizeTransition: Fx.Transitions.Quart.easeInOut,		//good
				//resizeTransition: Fx.Transitions.Quint.easeInOut,		//good
				//resizeTransition: Fx.Transitions.Expo.easeInOut,		//good
				//resizeTransition: Fx.Transitions.Back.easeInOut,		//good Elastic
				loop: true,							// Allows to navigate between first and last images
				overlayOpacity: 0.8,				// 1 is opaque, 0 is completely transparent (change the color in the CSS file)
				resizeDuration: 400,				// Duration of each of the box resize animations (in milliseconds)
				countDownInterval: 4,		 		// Time slideshow in seconds
				initialWidth: 250,					// Initial width of the box (in pixels)
				initialHeight: 250,					// Initial height of the box (in pixels)
				animateCaption: true,
				showCounter: false,					// If true, a counter will only be shown if there is more than 1 image to display
				counterText: "Image {x} of {y}"	// Translate or change as you wish
			}, _options || {});

			// The function is called for a single image, with URL and Title as first two arguments
			if (typeof _images == "string") {
				_images = [[_images,startImage]];
				startImage = 0;
			}

			images = _images;
			options.loop = options.loop && (images.length > 1);
			position();
			setup(true);
			top = window.getScrollTop() + (window.getHeight() / 15);
			fx.resize = new Fx.Morph(center, $extend({duration: options.resizeDuration, onComplete: nextEffect}, options.resizeTransition ? {transition: options.resizeTransition} : {}));
			center.setStyles({top: top, width: options.initialWidth, height: options.initialHeight, marginLeft: -(options.initialWidth/2), display: ""});
			fx.overlay.start(options.overlayOpacity);
			state = 1;
			return changeImage(startImage);
		}
	};

	Element.implement({
		slimbox: function(_options, linkMapper) {
			$$(this).slimbox(_options, linkMapper);

			return this;
		}
	});

	Elements.implement({
		slimbox: function(_options, linkMapper, linksFilter) {
			linkMapper = linkMapper || function(el) {
				return [el.href, el.title];
			};

			linksFilter = linksFilter || function() {
				return true;
			};

			var links = this;

			links.removeEvents("click").addEvent("click", function() {
				var filteredLinks = links.filter(linksFilter, this);
				return Slimbox.open(filteredLinks.map(linkMapper), filteredLinks.indexOf(this), _options);
			});

			return links;
		}
	});


	// Internal functions

	function position() {
		overlay.setStyles({top: window.getScrollTop(), height: window.getHeight()});
	}

	function setup(open) {
		["object", window.ie ? "select" : "embed"].forEach(function(tag) {
			Array.forEach(document.getElementsByTagName(tag), function(el) {
				if (open) el._slimbox = el.style.visibility;
				el.style.visibility = open ? "hidden" : el._slimbox;
			});
		});

		overlay.style.display = open ? "" : "none";

		var fn = open ? "addEvent" : "removeEvent";
		window[fn]("scroll", position)[fn]("resize", position);
		document[fn]("keydown", keyDown);
	}

	function keyDown(event) {
		switch(event.code) {
			case 27:			// Esc
			case 88:			// 'x'
			case 67:			// 'c'
				close();
				break;
			case 37:			// Left arrow
			case 80:			// 'p'
				previous();
				break;	
			case 39:			// Right arrow
			case 78:			// 'n'
				next();
				break;	
			case 32:			// Space
				if(!playing) {
					countDownPlay();
					playing = true;
				} else {
					countDownStop();
					playing = false;
				}
				break;
			case 49:			// '1'
				if(!playing) {
					countDownPlay();
					playing = true;
				}
				break;
			case 50:			// '2'
				countDownStop();
				playing = false;
		}
		// Prevent default keyboard action (like navigating inside the page)
		return false;
	}

	function previous() {
		countDownReset();
		return changeImage(prevImage);
	}

	function next() {
		countDownReset();
		return changeImage(nextImage);
	}

	function changeImage(imageIndex) {
		if ((state == 1) && (imageIndex >= 0)) {
			state = 2;
			activeImage = imageIndex;
			prevImage = ((activeImage || !options.loop) ? activeImage : images.length) - 1;
			nextImage = activeImage + 1;
			if (nextImage == images.length) nextImage = options.loop ? 0 : -1;

			if(nextImage >= 0 ) {
				$$(timer, playLink, stopLink).setStyle("display", "block");
				bottom.addClass("pto");
			} else {
				$$(timer, playLink, stopLink).setStyle("display", "none");
				bottom.removeClass("pto");
			}
			
			$$(prevLink, nextLink, image, bottomContainer).setStyle("display", "none");
			fx.bottom.cancel().set(0);
			fx.image.set(0);
			center.className = "lbLoading";

			preload = new Image();
			preload.onload = nextEffect;
			preload.src = images[imageIndex][0];
		}

		return false;
	}

	function nextEffect() {
		
		switch (state++) {
			case 2:
				center.className = "";
				image.setStyles({backgroundImage: "url(" + images[activeImage][0] + ")", display: ""});
				$$(image, bottom).setStyle("width", preload.width);
				$$(image, prevLink, nextLink).setStyle("height", preload.height);

				caption.set("html", images[activeImage][1] || "");
				if(options.showCounter && (images.length > 1)) number.set("html", (options.counterText.replace(/{x}/, activeImage + 1).replace(/{y}/, images.length)));

				if (prevImage >= 0) preloadPrev.src = images[prevImage][0];
				if (nextImage >= 0) preloadNext.src = images[nextImage][0];


				if (center.clientHeight != image.offsetHeight || center.clientWidth != image.offsetWidth) {
					fx.resize.start({
						height: image.offsetHeight, 
						width: image.offsetWidth, 
						marginLeft: -image.offsetWidth/2
					});
					break;
				}
				state++;
			case 3:
				bottomContainer.setStyles({top: top + center.clientHeight, marginLeft: center.style.marginLeft, visibility: "hidden", display: ""});
				fx.image.start(1);
				break;
			case 4:
				if (prevImage >= 0) prevLink.style.display = "";
				if (nextImage >= 0) nextLink.style.display = "";
				if (options.animateCaption) {
					fx.bottom.set(-bottom.offsetHeight).start(0);
				}
				bottomContainer.style.visibility = "";
				state = 1;
				countDownReset();
		}
	}

	function close() {
		countDownStop();
		if (state) {
			state = 0;
			preload.onload = $empty;
			for (var f in fx) fx[f].cancel();
			$$(center, bottomContainer).setStyle("display", "none");
			fx.overlay.chain(setup).start(0);
		}
	}

	var	countDownTimer		= 0;
	var hz 					= 61; 		//milliseconds
	var counterSlideShow	= null;
	var playing				= false;

	function countDownPlay() {
		if(nextImage >= 0) {
			playing = true;
			countDownReset();
			countDownLoop();
			showStop();
			next();
		}
	}
	
	function countDownStop() {
		if(nextImage >= 0) {
			counterSlideShow = $clear(counterSlideShow);
			showPlay();
			countDownReset();
			hideTimer();
		}
	}

	function countDownLoop() {
		ThisDate = new Date();
		dt = ThisDate.getTime() - countDownTimer;
		
		if (dt >= options.countDownInterval*1000) {
			next();
			countDownPlay();
		}
		counterSlideShow = $clear(counterSlideShow);
		counterSlideShow = countDownLoop.delay(hz);
		showTimer();
	}
	
	function countDownReset() {
		var ThisDate = new Date();
		countDownTimer = ThisDate.getTime();
	}
	
		
	function showTimer() {
		var value = (100-(dt/(options.countDownInterval*1000)*100)).round();
		if (value<0) value=0;
		if (value>100) value=100;
		
		$("loaderTime").set("style", "width:"+value+"%")
	}

	function hideTimer() {
		$("loaderTime").set("style", "width:0%")
	}

	
	function showPlay() {
		$("lbPlayLink").set("class", "show");
		$("lbStopLink").set("class", "hide");
	}
	
	function showStop() {
		$("lbPlayLink").set("class", "hide");
		$("lbStopLink").set("class", "show");
	}

})();

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
Slimbox.scanPage = function() {
	var links = $$("a").filter(function(el) {
		return el.rel && el.rel.test(/^slimbox/i);
	});
	$$(links).slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 7) && (this.rel == el.rel));
	});
	
};
window.addEvent("domready", function(){
	Slimbox.scanPage();
});