/*  RUDE BETA, PLEASE JUST USE THE IFRAME */
/*#######################################################################################################
Program written by Dominik Kressler
Project Name: 	modalBuddy
Version: 		1.0
Date: 			2010-07-28
#########################################################################################################
#########################################################################################################
REQUIREMTENS:
	Libraries:
		Prototype: 		1.6.0.2
		Scriptaculous: 	1.8.1
#########################################################################################################
########################################################################################CONFIGURATION: */

var boxPadding = "10";
var closeImage = "images/modalBuddy/close.png";

/*##################################################################################CONFIGURATION: END */

var targets = Array();
var targetSources = Array();
var sourceObject;
var targetSource;
var targetHeight;
var targetWidth;
var targetTitle;
var slideshow;
var boxWidth;
var boxHeight;

var modalBuddy = Class.create
({
	initialize:function() 
	{
		insertOverlayInDOM();
		
		$$(".link2iframe").each
		(
			function(source)
			{
				sourceType = source.readAttribute('class');
				handleSRC(source,sourceType);
			}
		)
	}
});

function handleSRC(source,sourceType)
{
	$(source).observe('click', function(event)
	{
		Event.stop(event);	
		targetSource = source.readAttribute('href');
		targetTitle = source.readAttribute('title');		
		if (!targetSource.complete) {
			switch(sourceType)
			{
				case "link2iframe":
					openIframe(targetSource, targetTitle);
				break;
				case "image":
				default:
					//openImage(targetSource, targetTitle);
					alert("Image Mode is alpha!");
			}
		}
	});
}

function insertOverlayInDOM()
{
	Event.stopObserving(window, 'load', init);
	
	document.body.insert(new Element("div", { id: "modal" }));
	$("modal").insert(new Element("div", { id: "modalOverlay" })).insert(new Element("div", { id: "modalBox" })).insert(new Element("div", { id: "modalHead", style: "color: #ffffff; position:relative; padding:0 "+boxPadding+"px" }));
	$("modalHead").insert(new Element("img", { id: "modalHeadHandler", src: closeImage, style: "position:absolute; bottom:0px; right:3px" })).insert(new Element("p", { id:"modalTitle", style: "width:90%; font-size:11px;" }));
	
	$("modalTitle").setStyle
	({
		paddingBottom:boxPadding / 2+"px"					 
	});
		
	$("modalOverlay").setStyle
	({
		display:'none',
		position:'absolute',
		top:'0',
		left:'0',
		opacity:0
	});
	
	$("modalBox").setStyle
	({
		display:'none',
		position:'absolute',
		background:"#fff",
		opacity:"0",
		padding: boxPadding+"px"
	});
	$("modalHead").setStyle
	({
		display:'none',
		position:'absolute',
		minHeight:"25px"
	});

	$("modalHeadHandler").observe('click', modalKill);
}

function openIframe(targetSource, targetTitle)
{
	
	$('modalTitle').update(targetTitle);
	
	$('modalBox').insert(new Element("iframe", 
	{
		id: "modalContent", 
		height: "100%", 
		width: "100%", 
		scrolling: "auto", 
		src: targetSource,
		frameborder: "0"
	}));

	showOverlay();
	
	boxHeight = document.viewport.getHeight() - 200;
	boxWidth = document.viewport.getWidth() - 200;
	
	$("modalBox").setStyle
	({
		width: boxWidth+"px",
		height: boxHeight+"px",
		top: imageY(boxHeight)+window.pageYOffset+"px",
		left: imageX(boxWidth)+"px"
	}).appear
	({
		from:0,
		to:1,
		afterFinish: function() { setHeader(boxWidth, boxHeight); },
		duration: 1.5
	});
}

function openImage(targetSource, targetTitle)
{
	$('modalTitle').update(targetTitle);
	
	$('modalBox').insert(new Element("img", {id: "modalContent", src: targetSource }));
	
	showOverlay();
	$("modalBox").setStyle
	({
		width: getImageWidth(targetSource)+"px",
		height: getImageHeight(targetSource)+"px",
		top: imageY(targetHeight)+"px",
		left: imageX(targetWidth)+"px"
	 }).appear
	({
		from:0,
		to:1,
		afterFinish: function() { setHeader(targetWidth, targetHeight); },
		duration: 1.5
	});
}

function showOverlay()
{
	$("modalOverlay").setStyle
	({
		width:"100%",
		height:document.body.parentNode.scrollHeight+"px"
	}).appear
	({
		from:0,
		to:0.5,	
		duration: 1
	});	
	$("modalOverlay").observe('click', modalKill);
	Event.observe(window, 'resize', resize);
}

function modalKill()
{
	$('modalOverlay').stopObserving('click', modalKill);
	Event.stopObserving(window, 'resize', resize);
	
	$("modalOverlay").fade
	({
		from:0.5,
		to:0,
		duration: 0.5
	});

	$("modalHead").fade({
		from:1,
		to:0,
		duration: 0.5
	});	

	$("modalBox").fade({
		from:1,
		to:0,
		afterFinish:clearModalBox,
		duration: 0.5
	});		
}

function clearModalBox()
{
	$('modalContent').remove();	
}

function getImageWidth(targetSource)
{
	var newImg = new Image();
	newImg.src = targetSource;
	targetWidth = newImg.naturalWidth;
	if(newImg.complete)	return targetWidth;
}

function getImageHeight(targetSource)
{
	var newImg = new Image();
	newImg.src = targetSource;
	targetHeight = newImg.naturalHeight;
	if(newImg.complete)	return targetHeight;
}

function imageX(targetWidth)
{
	return Math.floor(document.viewport.getWidth() / 2) - (targetWidth / 2);
}
function imageY(targetHeight)
{
	return Math.floor(document.viewport.getHeight() / 2) - (targetHeight / 2);
}

function setHeader(targetWidth, targetHeight)
{	
	$("modalHead").setStyle
	({
		width: parseInt(targetWidth)+"px",
		minHeight:"25px",
		top: ( ( document.viewport.getHeight() / 2 ) - ( $("modalBox").getHeight() / 2 ) ) - ($("modalHead").getHeight()) + window.pageYOffset +"px",
		left: ( ( document.viewport.getWidth() / 2 ) - ( $("modalBox").getWidth() / 2 ) )+"px"
	}).appear({
		duration:0.3
	});
}

function resize()
{

	boxHeight = document.viewport.getHeight() - 200;
	boxWidth = document.viewport.getWidth() - 200;
	
	$("modalOverlay").setStyle({width:"100%",height:document.body.parentNode.scrollHeight+"px"});	
	
	$("modalBox").setStyle
	({
		width: boxWidth+"px",
		height: boxHeight+"px",
		top: imageY(boxHeight)+window.pageYOffset+"px",
		left: imageX(boxWidth)+"px"
	});
	setHeader(boxWidth, boxHeight);
}

function init()
{
	modalBuddy = new modalBuddy();
}

Event.observe(window, 'load', init);