$(document).ready(function(){

	/**
	 * Pass in html content or a jQuery object to be popped up in a lightbox.
	 * @param htmlcontent html or jquery object
	 * @param content_width the content width
	 * @param content_height the content height
	 *
	 * Possible future features, if required:
	 * 		- auto-detect content width and height
	 * 		- auto-resize and re-position if the window is resized
	 * 		- turn into full-fledged object with API functions to open, close, adjust, etc.
	 * 		- "esc" keyboard shortcut
	 */
	function popupContent(htmlcontent, content_width, content_height) {

		var $window = $(window),
			window_height = $window.height(),
			container_top = ((window_height - content_height - ((window_height - content_height) / 2)) - 32),//the 32 at the end is twice the border width
			window_width = $window.width(),
			container_left = ((window_width - content_width - ((window_width - content_width) / 2)) - 32),

			//	show the backdrop
			$backdrop = $("<div></div>", {"class": "lightbox-backdrop"}).css("height", $(window).height()).appendTo("body").fadeTo(0,.8),

			//	add the lightbox,
			$container = $("<div></div>", {"class": "lightbox-container"}).css({
				top: container_top,
				left: container_left,
				display: "none"//to allow a fade in
			}).append(htmlcontent),

			$close_circle = $("<img />", {src: "/kb/images/icons/close_circle.png", "class": "lightbox-close-circle"}).appendTo($container);

		//	show the content
		$container.appendTo("body").fadeIn(300);

		//	close click handler
		$backdrop.add($close_circle).on("click", function(){
			$backdrop.add($container).add($close_circle).remove();
		});
	}

	/**
	 * Videobox Handler
	 * Find all instances of .videobox on the page that have an attribute "data-video-code" and attach a click handler to them.
	 * The click handler will pop up a lightbox and load the YouTube video with view code specified in "data-video-code".
 	 */
	$(".videobox").filter("[data-video-code]").each(function (index, element) {
		$(this).on("click", function(){
			var $window = $(window),
				dim_width = $window.width() * 0.61,//golden ratio
				dim_height = dim_width * 0.65,//16:9 ratio, more or less
				self = $(this),
				code = self.data("videoCode"),
				$iframe = $('<iframe/>', {
					src: '//www.youtube.com/embed/' + code + '?html5=1&autoplay=1&rel=0',
					type: "text/html",
					"class": "lightbox-video-iframe",
					frameborder: "0",
					width: dim_width,
					height: dim_height
				});
			popupContent($iframe, dim_width, dim_height);
            s.linkTrackVars='events';
            s.linkTrackEvents= s.events='event12';
            s.eVar12=element + ', ' + index;
            s.tl(this,'o','video viewed');
		});
	});
});