/* Lightbox Multi
* 
* Can handle multiple types of media in one lightbox
* 
* Arguments:
* 
* large:	URL to media
* small:	Thumbnail-image
* alt:		Alt-text of thumbnail
* type:	Accepted values are "image", "video" or "youtube"
* videowidth:	Width of video. Applies to "video" or "youtube" only
* videoheight:	Height of video. Applies to "video" or "youtube" only
* 
*/

(function($) {

	$.fn.lightboxmulti = function(o) {
		return this.each(function() {
			new $lb(this, o);
		});
	};

	var defaults = {
		transparent: vpath + "images/spacer.gif",
		play: vpath + "images/play.png",
		images: [{ large: vpath + 'images/contact.jpg', small: vpath + 'images/contact.jpg', alt: 'test'}],
		title: vpath + "images/hq_logo_r.gif",
		size: { width: "1001px", height: "651px" }
	};

	$.lightboxmulti = function(e, o) {
		this.options = $.extend({}, defaults, o || {});
		var self = this;
		$(e).click(function(e) {
			e.preventDefault();
			self.setup();
		});
	};

	// Create shortcut for internal use
	var $lb = $.lightboxmulti;

	$lb.fn = $lb.prototype = {
		lightboxmulti: '0.1'
	};

	$lb.fn.extend = $lb.extend = $.extend;

	$lb.fn.extend({

		setup: function() {

			var self = this;

			showOverlay(function() {
				self.destroy();
			});


			$("body").append('<div id="lightbox-container"><img class="lightbox-bg" src="' + vpath + 'images/lightbox/product-details-popup-bg.png' + '" /><div id="lightbox-loading"></div><div id="lightbox-close"></div><div id="lightbox-content-container"><div id="lightbox-content"></div></div><img id="lightbox-title-image" /></div>');

			this.background = $(".lightbox-bg");
			this.container = $("#lightbox-container");
			this.close = $("#lightbox-close");
			this.contentContainer = $("#lightbox-content-container");
			this.content = $("#lightbox-content");
			this.loading = $("#lightbox-loading");
			this.title = $("#lightbox-title-image");

			if ($.browser.msie && $.browser.version == 6.0)
				this.background.attr("src", vpath + "images/ie6/lightbox/product-details-popup-bg.gif");


			this.thumbs = $('<div class="lightbox-thumbs"></div>');
			this.innerthumbcontainer = $('<div class="inner-container"></div>');
			this.thumbs.append(this.innerthumbcontainer);
			this.container.append(this.thumbs);

			this.innerthumbcontainer.attr("style", "width: " + (132 * this.options.images.length + 1) + "px;");
			this.title.attr("src", self.options.title);


			this.firstThumbLoaded = true;
			$(this.options.images).each(function() {
				self.addThumb(this.large, this.small, this.alt, this.type, this.videowidth, this.videoheight);
			});


			this.close.click(function() {
				self.destroy();
			});


			$(window).bind("resize.lightbox", function() {
				self.positionVideo($(".lightbox-video").width(), $(".lightbox-video").height());
				self.position();
			});


			if (!$.browser.msie || $.browser.version > 6.0) {
				this.container.css("position", "fixed");
			}
			else {
				$(window).bind("scroll.lightbox", function() {
					self.position();
				});
			}

			this.position();


		},

		loadMedia: function(large, alt, type, videowidth, videoheight) {

			var self = this;

			var content = $("#lightbox-content");
			content.hide();
			content.empty();

			switch (type) {

				case "image":

					var img = $(document.createElement("img"));

					img.addClass("lightbox-image");
					img.attr("alt", alt);

					content.append(img);

					img.load(function() {
						content.show();
						self.position();
					});

					img.attr("src", large);


					break;

				case "video":

					var holder = $("<div></div>");
					holder.addClass("lightbox-video");

					var id = "video-player";
					var player = $("<div></div>").attr("id", "video-player");

					holder.append(player);
					content.append(holder);

					var flashvars = {
					    //flv: encodeURIComponent(vpath + large)  Removed vpath.
						flv: encodeURIComponent(large ),
						useBorder: false,
						showControls: true,
						scaleIt: true,
						loopIt: false,
						autostart: true,
						autoHide: true
					};

					var params = {
						scale: "noScale",
						salign: "tl",
						wmode: "transparent"
					};

					var attributes = {};

					var player = vpath + "flash/staticVideoWindow.swf";
					swfobject.embedSWF(player, id, videowidth, videoheight, "9.0.0", "", flashvars, params, attributes);

					content.show();
					self.positionVideo(videowidth, videoheight);

					break;

				case "youtube":

					var holder = $("<div></div>");
					holder.addClass("lightbox-video");

					var id = "video-player";
					var player = $("<div></div>").attr("id", "video-player");

					holder.append(player);
					content.append(holder);

					var flashvars = {};

					var params = {
						scale: "noScale",
						salign: "tl",
						wmode: "transparent",
						allowFullScreen: true
					};

					var attributes = {};

					var player = large;
					swfobject.embedSWF(player, id, videowidth, videoheight, "9.0.0", "", flashvars, params, attributes);

					content.show();
					self.positionVideo(videowidth, videoheight);

					break;

			}



		},

		addThumb: function(large, small, alt, type, videowidth, videoheight) {

			var self = this;

			var thumb = $(document.createElement("img"));
			thumb.addClass("lightbox-thumb");
			thumb.attr("src", self.options.transparent);
			thumb.attr("alt", alt);

			thumb.hover(function() {
				$(this).addClass("lightbox-thumb-current");
			},
				function() {
					$(this).removeClass("lightbox-thumb-current");
				});

			thumb.click(function() {

				self.loadMedia(large, alt, type, videowidth, videoheight);

				$(".lightbox-thumb").removeClass("lightbox-thumb-selected");
				thumb.addClass("lightbox-thumb-selected");

			});

			var container = $(document.createElement("div"));
			container.addClass("lightbox-thumb-container");
			container.css("background-image", "url('" + small + "')");
			container.append(thumb);

			if (type != "image") {
				var play = $(document.createElement("img"));
				play.addClass("lightbox-thumb-play");
				play.attr("src", self.options.play);
				play.attr("alt", "Play");

				play.hover(function() {
					$(this).prev().addClass("lightbox-thumb-current");
				},
				function() {
					$(this).prev().removeClass("lightbox-thumb-current");
				});

				play.click(function() {
					self.loadMedia(large, alt, type, videowidth, videoheight);

					$(".lightbox-thumb").removeClass("lightbox-thumb-selected"); ;
					thumb.addClass("lightbox-thumb-selected");
				});

				container.append(play);
			}

			self.innerthumbcontainer.append(container);

			if (self.firstThumbLoaded) {

				self.firstThumbLoaded = false;
				thumb.addClass("lightbox-thumb-selected");
				self.loading.css("display", "none");

				self.loadMedia(large, alt, type, videowidth, videoheight);

			}

		},

		destroy: function() {
			var self = this;
			$(window).unbind("resize.lightbox");
			$(window).unbind("scroll.lightbox");
			self.container.remove();
			closeOverlay();
		},

		positionVideo: function(w, h) {

			var container = this.contentContainer;

			var margin = parseInt(((container.height() - h) / 2)) + "px " + parseInt(((container.width() - w) / 2)) + "px";

			$(".lightbox-video").css({
				width: w + "px",
				height: h + "px",
				margin: margin
			});


		},

		position: function() {

			var maxWidth = parseInt(this.options.size.width);
			var maxHeight = parseInt(this.options.size.height);


			var p = 1;

			if ($(window).width() < (this.container.outerWidth(true) + 60)) {
				p = $(window).width() / (this.container.outerWidth(true) + 60);
			}
			else if ($(window).width() > maxWidth) {
				p = maxWidth / this.container.outerWidth(true);
			}
			else {
				p = $(window).width() / (this.container.outerWidth(true) + 60);
			}

			if ($(window).height() < (this.container.outerHeight(true) + 60)) {
				var p2 = $(window).height() / (this.container.outerHeight(true) + 60);
				if (p2 < p)
					p = p2;
			}
			else if ($(window).height() > maxHeight) {
				var p2 = maxHeight / this.container.outerHeight(true);
				if (p2 < p)
					p = p2;
			}
			else {
				var p2 = $(window).height() / (this.container.outerHeight(true) + 60);
				if (p2 > p)
					p = p2;
			}

			this.background.css({
				width: (this.background.width() * p) + "px",
				height: (this.background.height() * p) + "px"
			});



			this.contentContainer.css({
				height: (this.contentContainer.height() * p) + "px",
				width: (this.contentContainer.width() * p) + "px"
			});

			var h = parseInt(this.contentContainer.height());
			var w = parseInt($(".lightbox-image").width()) * (h / parseInt($(".lightbox-image").height()));
			var margin = "0px " + parseInt(parseInt(parseInt(this.contentContainer.width()) - w) / 2) + "px";

			$(".lightbox-image").css({
				width: parseInt(w) + "px",
				height: parseInt(h) + "px",
				margin: margin
			});

			this.container.css({
				width: (this.container.width() * p) + "px",
				height: (this.container.height() * p) + "px"
			}).show();

			this.content.css("left", (parseInt(this.content.css("left")) * p) + "px");

			if (this.container.css("position")) {
				this.container.css({
					top: ($(window).height() / 2) - (this.container.outerHeight(true) / 2),
					left: ($(window).width() / 2) - (this.container.outerWidth(true) / 2)
				}).show();
			}
			else {
				this.container.css({
					top: $(window).scrollTop() + ($(window).height() / 2) - (this.container.outerHeight(true) / 2),
					left: ($(window).width() / 2) - (this.container.outerWidth(true) / 2)
				}).show();
			}

		}

	});

})(jQuery);
/* Lightbox Multi end */

function showOverlay(closeFunc) {

	var id = "lightbox-overlay";
	var cssClass = "lightbox-overlay transparent-80";
	var overlay = $("<div></div>").attr("id", id).attr("class", cssClass);

	$("embed, object, select").css({ "visibility": "hidden" });
	$("body").css("overflow", "hidden").append(overlay);

	$(document).keydown(function(event) {
		if (event.keyCode == 27) {
			closeOverlay();
			closeFunc();
		}
	});

	overlay.click(function() {
		closeOverlay();
		closeFunc();
	});

	if ($.browser.msie && $.browser.version == 6.0) {
		/* IE6 only */

		$(window).resize(function() {
			resizeOverlay();
		});

		resizeOverlay();
	}
}

/* IE6 Only */
function resizeOverlay() {

	var height = $("body").outerHeight(true);

	if ($("html").outerHeight(true) > height)
		height = $("html").outerHeight(true);

	$("#lightbox-overlay").css({
		position: "absolute",
		width: $(window).width(),
		height: height
	});
}

function closeOverlay() {

	$("#lightbox-overlay").fadeOut(300, function() {
		$(this).remove();
		$("embed, object, select").css({ "visibility": "visible" });
	});
	$("body").css("overflow", "visible");
	window.scrollBy(0, 100);
}