/**
	* Fodal
	* usage: fodal(type,path,width,height,title,footer,flowKey,flowPath,flowJS)
	* type = html, image, video, brightcove, brightcovefb
	* path = Path to resource (where it loads from, your image for image, your video file for video), or brightcove params.
	* width = The width of your image/video.
	* height = The height of your image/video (pad this by 20 for now!).
	* title = The title you'd like to display in the fodal, leave blank for no title.
	* footer = If you want to add a Facebook 'Like' link, place the address of the page that you would like to 'Like' here and use the 'brightcovefb type. Do not include the 'http://' at the beginning.
	*	Use any of the other types and any other text will display as text. Leave blank if there is no footer.
	* flowKey = Your flowplayer key, not neccessary, but it certainly helps make things look nicer.
	* flowPath = The path to your flowplayer swf file.
	* flowJS = The path to your version of the flowplayer.js file.
	*
	* Note that this DOES NOT work for ie6 - due to the 'fixed' css style on the fodal div
	*
	* Fixes Needed:
	* - jQuery-less version
	* - screen resize event handling
	* - Footer text works unless screen needs to be dynamically changed, then it gets thrown off
	* 
**/

function fodal(type,path,width,height,title,footer,flowKey,flowPath,flowJS) {
	// grab window screen height
	//adjust incoming width and height for viewport size
	var vpWidth, vpHeight;
	if (typeof window.innerWidth != 'undefined') {
		vpWidth = window.innerWidth - 40;
		vpHeight = window.innerHeight - 60;
	} else {
		vpWidth = document.documentElement.clientWidth - 40;
		vpHeight = document.documentElement.clientHeight - 60;
	}
	if(height > vpHeight || width > vpWidth) {
		var ratio = width / height;
		if (width > vpWidth) {
			width = vpWidth;
			height = Math.ceil(width * ratio);
		}
		if (height > vpHeight) {
			height = vpHeight;
			width = Math.ceil(height * ratio);
		}
	}
	
	var screenX = document.body.clientWidth, screenY = document.body.clientHeight, offsetX = Math.ceil(width / 2) + 20, offsetY = Math.ceil(height / 2) + 20, fodalWidth = width.value + 40, fodalHeight = height.value + 40, footerWidth = parseInt(width) + 40;
	var footerHeight = 23; // height of Facebook 'Like' image
	
	// make the fodal
	$("body").prepend('<div id="field"><div id="aFodal"><div id="aFodal-content"><div id="aFodal-close">&#215;</div><div id="aFodal-main"></div></div><div id="aFodal-footer"></div></div><div id="dim"></div></div>');
	// Thanks to ie the style for #aFodal must be injected this way instead of through standard jQ .css() declaration
	$("head").append('<style id="fodalStyle">#aFodal{position: fixed;top: 50%;left: 50%;width: '+fodalWidth+'px;height: '+fodalHeight+'px;z-index: 10002;border: 1px solid #000;background: #fff;margin-top: -'+offsetY+'px;margin-left: -'+offsetX+'px;display: none;}#aFodal img{width:'+width+'px;height:'+height+'px}</style>');
	
	// set styles for fodal
	$("#field").css({
		position: 'absolute',
		top: '0',
		left: '0',
		zIndex: '10000',
		width: '100%',
		height: screenY+'px'
	});
	
	$("#dim").css({
		backgroundColor: '#000',
		zIndex: '10001',
		display: 'none',
		width: '100%',
		height: '100%'
	}).fadeTo('slow', 0.5);
	
	$("#aFodal-content").css({
		padding: '20px'
	});
	
	$("#aFodal-main").css({
		width: width+'px',
		height: height+'px'
	});
	
	if(footer == '' && type != 'brightcovefb') {
		$("#aFodal-footer").hide();
	} else {
		$("#aFodal-footer").text(footer);
		$("#aFodal-footer").css({
			lineHeight: footerHeight+'px',
			height: footerHeight+'px',
			width: footerWidth+'px',
			textAlign: 'center'
		});
		$("#aFodal-content").css({
			padding: '20px 20px 0'
		});

	}
	
	$("#aFodal").fadeTo('slow', 1);
	
	$("#aFodal-close").css({
		position: 'absolute',
		top: '0',
		right: '5px',
		fontSize: '22px',
		cursor: 'pointer'
	});
	
	$("#dim, #aFodal-close").live('click', function() {
		$("#field").fadeOut('normal', function() {
			$("#field").remove();
			$("#fodalStyle").remove();
		});
	});
	
	//check type
	switch (type) {
		case 'video':
			// Need to add object detection here to see if flowplayer is already included on the page, if not, include flowplayer
			if(typeof (flowplayer) == 'undefined') {
				// inject flowplayer using .getScript   path to file /fodal/javascript/flowplayer-3.1.4.min.js
				$.getScript(flowJS, function() {
					play();
				});
			}  else {
				play();
			}
		break;
		case 'html':
			$("#aFodal-main").append('<iframe src=' + path + '></iframe>');
			$("#aFodal-main iframe").css({
				height: height+'px',
				width: width+'px',
				border: 0
			});
		break;
		case 'brightcove':
			$.getScript('http://admin.brightcove.com/js/BrightcoveExperiences.js', function() {
				$("#aFodal-main").append('<object id="myExperience'+path+'" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF" /><param name="width" value="'+width+'" /><param name="height" value="'+height+'" /><param name="playerID" value="'+flowPath+'" /><param name="playerKey" value="'+flowKey+'" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="'+path+'" /></object><script type="text/javascript">brightcove.createExperiences();</script>');
			});
		break;
		case 'brightcovefb':
			$.getScript('http://admin.brightcove.com/js/BrightcoveExperiences.js', function() {
				$("#aFodal-main").append('<object id="myExperience'+path+'" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF" /><param name="width" value="'+width+'" /><param name="height" value="'+height+'" /><param name="playerID" value="'+flowPath+'" /><param name="playerKey" value="'+flowKey+'" /><param name="isVid" value="true" /><param name="isUI" value="true" /><param name="dynamicStreaming" value="true" /><param name="@videoPlayer" value="'+path+'" /></object><script type="text/javascript">brightcove.createExperiences();</script>');
			});
			
			if(footer != '') {
				$("#aFodal-footer").html('<iframe id="aFodal-fb" src="http://www.facebook.com/plugins/like.php?href='+footer+'&amp;layout=standard&amp;show_faces=false&amp;width=100%;action=like&amp;font&amp;colorscheme=light&amp;height=' + footerHeight + '" scrolling="no" frameborder="0" allowTransparency="true"></iframe>');
			} else {
				$("#aFodal-footer").html('<iframe id="aFodal-fb" src="http://www.facebook.com/plugins/like.php?href='+window.location.href+'&amp;layout=standard&amp;show_faces=false&amp;width=100%;action=like&amp;font&amp;colorscheme=light&amp;height=' + footerHeight + '" scrolling="no" frameborder="0" allowTransparency="true"></iframe>');
			}

			$("#aFodal-footer").css({
				lineHeight: footerHeight+'px',
				height: footerHeight+'px',
				width: footerWidth+'px',
				textAlign: 'center'
			});
			$("#aFodal-content").css({
				padding: '20px 20px 0'
			});
			$("#aFodal-fb").css({
				border: 'none',
				height: footerHeight+'px',
				overflow: 'hidden',
				padding: '0 0 0 10px',
				width: footerWidth-10+'px'
			});
		break;
		default: // Default to 'image'
			
			$("#aFodal-main").append('<img src="'+path+'" alt="'+title+'" />');
			/*
			// check image size and viewport size, adjust as needed
			var vpWidth, vpHeight;
			vpWidth = window.innerWidth;
			vpHeight = window.innerHeight;
			console.log('height: '+height+' vpHeight: '+vpHeight+' widht: '+width+' vpWidth: '+vpWidth);
			if(height < vpHeight && width < vpWidth) {
				$("#aFodal-main").append('<img src="'+path+'" alt="'+title+'" />');
			} else {
				var ratio = width / height;
				console.log('ratio: '+ratio);
				
				if (width > vpWidth) {
					var adjX = vpWidth - 40;
					var adjY = vpWidth * ratio;
				}
				if (height > vpHeight) {
					var adjY = vpHeight - 40;
					var adjX = vpHeight * ratio;
				}
				console.log(adjX);
				var offsetX = Math.floor(parseInt(width) - adjX);
				var offsetY = Math.floor(vpHeight / 2);
				$("#aFodal").css({marginTop:'-'+offsetY+'px',marginLeft:'-'+offsetX+'px'});
				$("#aFodal-main").css({width:adjX+'px',height:adjY+'px'}).append('<img src="'+path+'" alt="'+title+'" width="'+adjX+'" height="'+adjY+'" />');
			}
			*/
	}
	
	function play(){
		$("#aFodal-main").append('<div id="fodalPlayer"></div>');
		$("#fodalPlayer").css({
			height: height+'px',
			width: width+'px'
		});
		flowplayer(
				'fodalPlayer',
				flowPath, {
					key: flowKey,
					clip: path
				}
		);
	}
}

/*
<div id="field">
	<div id="aFodal">
		<div id="aFodal-content">
			<div id="aFodal-close">&#215;</div>
			<div id="aFodal-main"></div>
		</div>
		<div id="aFodal-footer"></div>
	</div>
	<div id="dim"></div>
</div>

*/