/**
	* Fodal
	* usage: fodal(type,path,width,height,title,footer,flowKey,flowPath,flowJS)
	* type = 'image' or 'video' or 'html'
	* path = path to resource (where it loads from, your image for image, your video file for video)
	* 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 = the text you'd like in the footer (very similar to title)
	* flowKey = your flowplayer key, not neccessary, but it certainly helps makes 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
	* This requires jQuery, without it, this will fail
	*
	* Fixes Needed:
	* - Close button
	* 
	* Wishlist:
	* - Instead of placing the image in the center, use jQ to find the center of the screen and place the fodal there.
	* - Screen resize event listener
	* - Smart screen area available filter (if viewable area is smaller than image/video, perform a dynamic resize
	* - Non-jQ reliant version
	* 
**/

function fodal(type,path,width,height,title,footer,flowKey,flowPath,flowJS) {
	// grab window screen height
	var screenX = document.documentElement.clientWidth;
	var screenY = document.body.clientHeight;
	var offsetX = Math.ceil(width / 2);
	var offsetY = Math.ceil(height / 2);
	var fodalWidth = width.value + 10;
	var fodalHeight = height.value + 10;
	
	// make the fodal
	$("body").prepend('<div id="field"><div id="fodal"><div id="fodal-title"></div><div id="fodal-main"></div><div id="fodal-footer"></div></div><div id="dim"></div></div>');
	// Thanks to ie the style for #fodal must be injected this way instead of through standard jQ .css() declaration
	$("head").append('<style id="fodalStyle">#fodal{position: fixed;top: 50%;left: 50%;width: '+fodalWidth+'px;height: '+fodalHeight+'px;z-index: 10002;border: 5px solid #000;background: #fff;margin-top: -'+offsetY+'px;margin-left: -'+offsetX+'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',
		width: '100%',
		height: '100%'
	}).fadeTo('slow', 0.5);
	
	$("#fodal-main").css({
		width: width+'px',
		height: height+'px'
	});
	
	$("#fodal").fadeTo('slow', 1);
	
	$("#fodal").live('click', function() {
		$("#field").fadeOut('normal', closeDown());
	});
	
	//set title
	if(title != '') {
		$("#fodal-title").css({
			height: '15px',
			lineHeight: '15px',
			width: width+'px',
			textAlign: 'center'
		});
		$("#fodal-title").text(title);
	} else {
		$("#fodal-title").remove();
	}
	
	//set footer
	if(footer != '') {
		$("#fodal-footer").css({
			height: '15px',
			lineHeight: '15px',
			width: width+'px',
			textAlign: 'center'
		});
		$("#fodal-footer").text(footer);
	} else {
		$("#fodal-footer").remove();
	}
	
	$("#dim").live('click', function() {
		$("#field").fadeOut('normal', closeDown());
	});
	
	//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':
			$("#fodal-main").append('<iframe src=' + path + '></iframe>');
			$("#fodal-main iframe").css({
				height: height+'px',
				width: width+'px',
				border: 0
			});
			
		break;
		default: // Default to 'image'
			$("#fodal-main").append('<img src="'+path+'" alt="'+title+'" />');
	}
	
	function play(){
		$("#fodal-main").append('<div id="fodalPlayer"></div>');
		$("#fodalPlayer").css({
			height: height+'px',
			width: width+'px'
		});
		flowplayer(
				'fodalPlayer',
				flowPath, {
					key: flowKey,
					clip: path
				}
		);
	}
}

function closeDown() {
	$("#field").fadeOut('normal', function() {
		$("#field").remove();
		$("#fodalStyle").remove();
	});
}
	


/*
// Easily readable fodal layout
<div id="field">
	<div id="fodal">
		<div id="fodal-title"></div>
		<div id="fodal-main"></div>
		<div id="fodal-footer"></div>
	</div>
	<div id="dim"></div>
</div>

*/