/*
 *
 *	QuickBox (Another Lightbox clone)
 *
 *	Version: 1.0
 *	Documentation: AndrewPlummer.com (http://www.andrewplummer.com/code/quickbox/)
 *	Heavily inspired by: Slimbox by Christophe Beyls (http://www.digitalia.be)
 *	Written for: Mootools 1.2
 *	License: MIT-style License
 *	
 *	Copyright (c) 2008 Andrew Plummer
 *
 *
 */


var QuickBox = new Class({
	Implements: Options,

	options: {
		resizeDuration: 600,
		resizeTransition: Fx.Transitions.Circ.easeOut,
		initialWidth: 250,
		initialHeight: 250,
		padding: 10,
		animateCaption: true,
		counter: "Image {NUM} of {TOTAL}"
	},

	initialize: function (options) {


		this.setOptions(options);
		this.anchors = $$("a[rel=quickbox]");
		//this.links = $$("a[rel=galleryLink]");

		//var galleryLink = $('galleryLink');
		//var href = galleryLink.get("href");
		//var urlName = galleryLink.get("title");

		this.anchors.each(function (a) {

			var x = a.getNext();
			if (x.get("title") != null) {
				a.store("caption", "<a href='" + x.get("href") + "' title='" + x.get("title") + "' >" + x.get("title") + "</a>");
				a.store("caption2", "<a href='" + x.get("href") + "' title='" + x.get("title") + "' >View Product</a>");
			}
			else a.store("caption", " ");
		}, this);

		var a = $('photogallery');
		if (this.anchors.length > 0) {
			var link = this.anchors[0];
			a.addEvent("click", this.open.bindWithEvent(this, link));
		}
		else a.style.display = "none";

		this.overlay = new Element("div", {
			id: "qbOverlay",
			events: {
				click: this.close.bindWithEvent(this)
			}
		}).inject(document.body, "top");

		this.quickBox = new Element("div", {
			id: "qbBox",
			styles: {
				width: this.options.initialWidth,
				height: this.options.initialHeight,
				marginLeft: -(this.options.initialWidth / 2),
				position: "absolute"
			}
		}).inject(document.body, "top");

		this.prevLink = new Element("a", { id: "qbPrev", href: "#", title: "Previous Image" }).inject(this.quickBox);
		this.nextLink = new Element("a", { id: "qbNext", href: "#", title: "Next Image" }).inject(this.quickBox);
		//this.nextLink = this.prevLink.clone().setProperty("id", "qbNext").injectInside(this.quickBox);

		this.stage = new Element("div", { id: "qbStage" }).inject(this.quickBox);

		this.prevLink.addEvent("click", this.changeImage.bindWithEvent(this, -1));
		this.nextLink.addEvent("click", this.changeImage.bindWithEvent(this, 1));

		this.bottom = new Element("div", { id: "qbBottom", events: { click: this.close.bindWithEvent(this)} }).inject(this.quickBox);

		this.closeButton = new Element("div", {
			id: "qbClose",
			events: {
				click: this.close.bindWithEvent(this)
			}
		}).inject(this.bottom);

		this.caption = new Element("div", { id: "qbCaption" }).inject(this.bottom);
		this.caption2 = new Element("div", { id: "qbCaption2" });
		$('qbOverlay').appendChild(this.caption2);

		this.counter = new Element("div", { id: "qbCounter" }).inject(this.bottom);

		var nextEffect = this.nextEffect.bind(this);

		this.fx = {
			overlay: new Fx.Tween(this.overlay, {
				property: "opacity"
			}),
			resize: new Fx.Morph(this.quickBox, {
				duration: this.options.resizeDuration,
				transition: this.options.resizeTransition,
				onComplete: nextEffect
			}),

			show: new Fx.Tween(this.stage, {
				property: "opacity",
				onComplete: nextEffect
			}),
			bottom: new Fx.Tween(this.bottom, {
				property: "top",
				duration: 400,
				onComplete: nextEffect
			})
		};

		this.active = false;
		//document.addEvent("mousewheel", this.mouseWheelListener.bindWithEvent(this));
		document.addEvent("keydown", this.keyboardListener.bindWithEvent(this));

	},

	open: function (event, link) {

		this.active = true;

		var size = window.getSize();
		var scroll = window.getScroll();
		var scrollSize = window.getScrollSize();

		/* The images should be 640x480(max). They're easily clipped at 1024x768,
		* so we get them as close as possible to the top of the window. */
		var offset = Math.round((size.y < 768) ? size.y / 36 : size.y / 10);

		//var top = scroll.y + offset;
		var top = 50;

		this.overlay.setStyles({
			opacity: 0,
			display: "block",
			width: scrollSize.x,
			height: scrollSize.y
		});
		this.quickBox.setStyles({
			display: "block",
			top: top
		});
		this.fx.overlay.start(0.8);
		this.startLoad(link);
		return false;
	},

	startLoad: function (link, preload) {

		if (!link) return;
		var image = new Asset.image(link.get("href"), {
			onload: function () {
				if (!preload && this.currentLink == link) this.nextEffect();
			} .bind(this)
		});
		if (!preload) {
			this.stage.addClass("loading");
			this.stage.setStyle("display", "block");
			this.stage.empty();
			this.bottom.setStyle("opacity", 0);
			this.prevLink.setStyle("display", "none");
			this.nextLink.setStyle("display", "none");
			this.currentLink = link;
			this.currentCaption = link.retrieve("caption");
			this.currentCaption2 = link.retrieve("caption2");
			this.currentImage = image;
			this.currentIndex = this.anchors.indexOf(link);
			this.step = 1;
		}
	},

	keyboardListener: function (event) {
		if (!this.active) return;
		if (event.key != "f5") event.preventDefault();
		switch (event.key) {
			case "esc": case "x": case "q": this.close(); break;
			case "b": case "p": case "left": this.changeImage(event, -1); break;
			case "f": case "n": case "right": this.changeImage(event, 1);
		}
	},


	mouseWheelListener: function (event) {
		if (!this.active) return;
		if (event.wheel > 0) this.changeImage(event, -1);
		if (event.wheel < 0) this.changeImage(event, 1);
	},

	changeImage: function (event, step) {

		event.preventDefault();
		var link = this.anchors[this.currentIndex + step];
		if (!link) return false;
		for (var f in this.fx) this.fx[f].cancel();
		this.startLoad(link);
	},

	nextEffect: function () {

		switch (this.step++) {

			case 1:
				var prev_next_h = this.currentImage.height;
				var w = this.currentImage.width + this.options.padding * 2;
				var h = this.currentImage.height + this.options.padding * 2;
				this.prevLink.setStyle("height", prev_next_h);
				this.nextLink.setStyle("height", prev_next_h);
				this.fx.resize.start({
					width: w,
					height: h,
					marginLeft: -(this.currentImage.width / 2)
				});
				break;
			case 2:

				this.stage.removeClass("loading");
				this.stage.setStyle("opacity", 0);
				this.currentImage.setStyle("margin", this.options.padding);
				this.currentImage.inject(this.stage);
				this.fx.show.start(1);
				break;
			case 3:

				//this.prevLink.setStyle("display", "block");
				//this.nextLink.setStyle("display", "block");
				var num;
				var total;
				if (this.options.animateCaption) {
					if (this.options.counter) {
						total = this.anchors.length;
						num = this.currentIndex + 1;
						var counterText = this.options.counter;
						counterText = counterText.replace(/\{NUM\}/, num);
						counterText = counterText.replace(/\{TOTAL\}/, total);
						this.counter.set("text", counterText);
					}
					//this.caption.set("text", "<a href='http://www.google.com'>" + this.currentCaption + "</a>");
					this.caption.innerHTML = this.currentCaption2;
					this.caption2.innerHTML = this.currentCaption;

					var height = this.bottom.getStyle("height").toInt();
					this.bottom.setStyles({
						opacity: 1,
						top: -height
					});
					this.fx.bottom.start(0);
				}
				if (num == total) {
					this.nextLink.setStyle("display", "none");
					this.prevLink.setStyle("display", "block");
				}
				else if (num == 1) {
					this.prevLink.setStyle("display", "none");
					this.nextLink.setStyle("display", "block");
				}
				else {
					this.prevLink.setStyle("display", "block");
					this.nextLink.setStyle("display", "block");
				}
				break;
			case 4:
				this.startLoad(this.anchors[this.currentIndex - 1], true);
				this.startLoad(this.anchors[this.currentIndex + 1], true);
				break;
		}
	},

	close: function () {
		this.quickBox.setStyle("display", "none");
		this.overlay.fade("out");
		this.active = false;
	}
});