(function($) {
	// the main blackout function
	$.fn.blackout = function (options) {
		return this.each(
			function (i) {
				// create our lightbox options by extending (or overriding, as necessary) the defaults
				blackoutOptions = $.extend({}, $.fn.blackout.defaults, options);
				// set a shorthand for the current list we're working with
				var blackoutList = $(this);
				// give each list a unique ID, enabling multiple blackout instances per page
				blackoutList.attr({'id': blackoutOptions.uniqueID + i});
				// add blackout objects to container
				$.fn.blackout.updateBlackoutObjects(blackoutList);
				// bind clicks from blackout anchors to the show function
				$('a', this).click($.fn.blackout.launchShow);
			}
		);
	};
	/* the object that will contain all of the instances of blackout objects
	   FORMAT:
	   { instanceID: [{imageID, imageURL, title, description, position, parentID}, ...], ... }
	   WHERE instanceID = the ID of the individual list
	*/
	$.fn.blackout.blackoutObject = {};
	// function to add image URL's and captions to each blackout object
	$.fn.blackout.updateBlackoutObjects = function (list) {
		var listItem	= $('li', list);
		var instanceID	= list.attr('id');
		var imageID		= instanceID + '_image_';
		if (typeof $.fn.blackout.blackoutObject[instanceID] == 'undefined') {$.fn.blackout.blackoutObject[instanceID] = [];}
		listItem.each(			
			function (i) {
				var $this = this;
				// add each image item to the object
				$.fn.blackout.blackoutObject[instanceID][i] = {
					 'imageID': imageID + i
					,'imageURL': $('a', this).attr(blackoutOptions.fullsizeTargetAttr)
					,'title': $('img', this).attr('alt')
					,'description': $('img', this).attr('longdesc')
					,'position': i
					,'parentID': instanceID
					,'MediaID': $('img', this).attr('id').split('_')[1]
					,'source': $('img', this).attr('src')
				};
				// give each anchor the image ID, so we know where in the stream to start the show
				$('a', this).attr({'id': imageID + i});
			}
		);
	}
	// the function that will handle setting up the show, creating the necessary DOM elements, etc.
	$.fn.blackout.launchShow = function (e) {
		e.preventDefault();
		var trigger		= $(this);
		var imageID		= trigger.attr('id');
		var instanceID	= imageID.substr(0, imageID.indexOf('_image_'));
		var imageList	= $.fn.blackout.blackoutObject[instanceID];
		var position	= 0;
		for (key in imageList){
			if (imageList[key].imageID == imageID) {
				position = key;
				break;
			}
		}
		var popup	= $('<div id="blackoutPopup" class="clearfix">');
		var viewportOffset = window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
		var viewportHeight = $(document).height() - viewportOffset;
		// popup = the image/caption area
		popup.css({
			 background: blackoutOptions.imgBGColor
			,top: viewportOffset + (viewportHeight/2)
			,zIndex: 9999999
		});
		// sheet = the colored background/blocking thing
		var sheet	= $('<div id="blackoutSheet">');
		sheet.css({
			 background: blackoutOptions.sheetColor
			,height: $(document).height()
			,opacity: blackoutOptions.sheetOpacity
			,width: $(document).width()
			,zIndex: 999999
		});
		if (blackoutOptions.showCloseButton) {
			var closeButton = $('<div id="blackoutCloseButton"></div>');
			closeButton.css({background: '#000 url('+blackoutOptions.closeButton+') right top no-repeat'});
			popup.append(closeButton);
		}
		// navigation items
		var navigation = $('<div id="blackoutNavigation">');
		navigation.append('<a class="next">Next Image</a>');
		navigation.append('<a class="previous">Previous Image</a>');
		popup.append(navigation);
		$('body').append(sheet);
		$('body').append(popup);
		sheet.fadeIn('100', function() {popup.fadeIn('250');});
		closeButton.bind('click', $.fn.blackout.killShow);
		sheet.bind('click', $.fn.blackout.killShow);
		$.fn.blackout.loadImage(imageList[position]);
	}
	// function to change the image out
	
	$.fn.blackout.loadImage = function (imageInstance) {
		var imageLoaded = function(data){
			// select the popup
			var popup = $('#blackoutPopup');
			// if there is already an image (ie: we are shifting), fade it out, remove it, and drop the caption
			if ($('#blackoutMediaObject', popup).length) {
				$('#blackoutMediaObject', popup).fadeOut(blackoutOptions.fadeSpeed, function () {$(this).remove();});
				$('#blackoutNavigation > a', popup).unbind();
			};
			// some dimensions vars
			var mediaObjectWidth  = 210;
			var mediaObjectHeight = 0;
			var mediaObjectNavBar = 30;
			// create the media holder
			var mediaObject = $('<div id="blackoutMediaObject" class="clearfix">');			
			popup.append(mediaObject);
			// create, grab, and append the renderedPlayer data
			var renderedPlayer = $('<div id="blackoutRenderedPlayer" class="clearfix">');
			var player = data.player == "" ? null : $(data.player);
			if(player != null) {
				mediaObjectWidth += data.regularfile.width;
				mediaObjectHeight+= data.regularfile.height;
				if (data.type == 'Adobe Flash Video') {
					mediaObjectHeight += 60; // to account for the player window
				}
			}
			else {
				mediaObjectWidth += 152;
				mediaObjectHeight+= 80;
				renderedPlayer.html('<a href="' + data.regularfile.url + '" title="view"><img src="' + imageInstance.source + '" /></a>');
			}
			mediaObject.append(renderedPlayer);
			renderedPlayer.append(player);
			// create, grab, and append the media information
			var mediaInfo = $('<div id="blackoutMediaInformation" class="clearfix">');
			var fileSizeInKB = Math.floor(data.regularfile.size / 1024);
			var mediaInfoHTML = "<h3>" + data.info.title + "</h3>\n";
			if (data.info.description != '') {
				mediaInfoHTML+= "<p>" + data.info.description + "</p>\n"
			}
			mediaInfoHTML+= "<p><a href='" + data.regularfile.url + "'>Download</a> (" + fileSizeInKB + "KB)</p>\n";
			mediaInfo.html(mediaInfoHTML);
			mediaObject.append(mediaInfo);
			var closeButton = $('#blackoutCloseButton', popup);
			popup.animate(
				{
					 marginTop: -((mediaObjectHeight + mediaObjectNavBar) / 2)
					,marginLeft: -(mediaObjectWidth / 2)
					,width: mediaObjectWidth
					,height: mediaObjectHeight + mediaObjectNavBar
				}
				,blackoutOptions.animationSpeed
				,blackoutOptions.easing
				,function () {
					$.fn.blackout.createNavigation(mediaObject, imageInstance);
					closeButton.show();
					mediaObject.fadeIn(blackoutOptions.fadeSpeed);
				}
			);
		};
		var result = $.getJSON( "/elements/classes/remote/MediaService.cfc", {method:"getMedia", mediaid:imageInstance.MediaID, returnformat:"json"}, imageLoaded, "json" );
	}
	// function for creating/binding navigation arrows
	$.fn.blackout.createNavigation = function(image, imageInstance) {
		var navigation = $('#blackoutNavigation');
		var previousButton = $('a.previous', navigation);
		var nextButton = $('a.next', navigation);
		var activate = $.fn.blackout.defaults.activateNavigationButton;
		var deactivate = $.fn.blackout.defaults.deactivateNavigationButton;
		var parentInstance = $.fn.blackout.blackoutObject[imageInstance.parentID];
		var position = parseInt(imageInstance.position);
		// if we are not at the last image, we need to show and bind the "next image" button
		if (position < (parentInstance.length - 1))
		{
			activate(nextButton);
			nextButton.one('click', function () {$.fn.blackout.loadImage(parentInstance[position + 1]);});
		}
		// if we ARE at the last image, we need to make sure we deactivate that link
		else {deactivate(nextButton);}
		//if we are not at the first image, we need to show and bind the "previous image" button
		if (position > 0)
		{
			activate(previousButton);
			previousButton.one('click', function () {
				$.fn.blackout.loadImage(parentInstance[position - 1]);
			});
		}
		// if we ARE at the first image, though, we need to make sure we deactivate that link
		else {deactivate(previousButton);}
	}
	// function to end the show
	$.fn.blackout.killShow = function () {
		$('#blackoutPopup').animate({height: 0, width: 0, margin: 0}, blackoutOptions.animationSpeed);
		$('#blackoutPopup').remove();
		$('#blackoutSheet').fadeOut('100', function() {$('#blackoutSheet').remove();});
	}
	// default options
	$.fn.blackout.defaults = {
		 sheetColor: '#000'
		,sheetOpacity: '0.75'
		,imgBGColor: '#fff'
		,captionColor: '#000'
		,uniqueID: 'blackoutObject'
		,showCloseButton: true
		,closeButton: '/elements/images/blackout/blackoutCloseButton.gif'
		,animationSpeed: 500
		,easing: 'swing'
		,fadeSpeed: 250
		,activateNavigationButton: function (e) {e.css({opacity: 1,cursor: 'pointer'});}
		,deactivateNavigationButton: function (e) {e.css({opacity: 0.25,cursor: 'default'});e.unbind();}
	};
})(jQuery);