/*#######################################################################################################
Program written by Dominik Kressler
Project Name: 	modalBuddy
Version: 		1.1 RC3
Date: 			2010-08-07
#########################################################################################################
#########################################################################################################
REQUIREMTENS:
	Libraries:
		Prototype: 		1.6.1
		Scriptaculous: 	1.8.1
#########################################################################################################
########################################################################################CONFIGURATION: */

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

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

var moveable = Boolean();
var targets = Array();
var targetSources = Array();
var targetSource = String();
var targetHeight = Number();
var targetWidth = Number();
var targetTitle = String;
var boxWidth = Number();
var boxHeight = Number();
var typeOfCurrent = String();
var image = Image();
var source;

var modalBuddy = Class.create
({
	initialize:function() 
	{
		insertOverlayInDOM();
		$$("a[rel=modalBuddy]").each
		(
			function(source)
			{
				sourceType = source.readAttribute('class');
				handleSRC(source,sourceType);
				if(allMoveable) source.addClassName('moveable');
			}
		)
	}
});
function handleSRC(source,sourceType)
{
	$(source).observe('click', function(event)
	{
		Event.stop(event);	
		$('modalLoader').appear({duration:0.1});
		targetSource = source.readAttribute('href');
		targetTitle = source.readAttribute('title');
		if (!targetSource.complete) {
			moveable = ($$('a.moveable') != "") ? true : false ;
			if ($(source).hasClassName('iframe') || $(source).hasClassName('iFrame')) openIframe(targetSource, targetTitle);
			else openImage(targetSource, targetTitle);
			typeOfCurrent = source;
		}
	});
}
function insertOverlayInDOM()
{
	Event.stopObserving(window, 'load', init);
	Element.insert(document.body, '<div id="modalLoader">Lade Daten...</div>');
	Element.insert(document.body, '<div id="modal"></div>');
	$("modal").insert(new Element("div", { id: "modalBox" })).insert(new Element("div", { id: "modalHead", style: "position:relative; padding:0 "+boxPadding+"px" }));
	$("modalHead").insert(new Element("img", { id: "modalHeadHandler", src: closeImage, style: "position:absolute;" })).insert(new Element("p", { id:"modalTitle", style: "width:90%; font-size:11px;" }));
	Element.insert(document.body, '<div id="modalOverlay"></div>');
	
	$('modalLoader').setStyle
	({
	 	display:'none',
		top:'50%',
		left:'50%'
	 });
	
	$('modalHeadHandler').setStyle
	({
		bottom: boxPadding / 2+"px",
		right: boxPadding / 2+"px"
	});
	$("modalTitle").setStyle
	({
		paddingBottom:boxPadding / 2+"px",					 
		paddingTop:boxPadding / 2+"px"
	});	
	$("modalOverlay").setStyle
	({
		position:'absolute',
		top:'0',
		left:'0',
		display:'none'
	});
	$("modal").setStyle
	({
		position:'absolute',
		display:'none'
	});
	$("modalBox").setStyle
	({
		padding: boxPadding+"px"
	});
	$("modalHead").setStyle
	({
		display:'none',
		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"
	});
	$("modal").appear
	({
		from:0,
		to:1,
		afterFinish: function() { setHeader(boxWidth, boxHeight); $('modalLoader').setStyle({display:'none'}); },
		duration: 1.5
	}).setStyle
	({
		width:boxWidth + (boxPadding*2) +"px",
		height:boxHeight + (boxPadding*2) +"px",
		top:imageY(boxHeight)+"px",
		left:imageX(boxWidth)+"px"
	});
}
function openImage(targetSource, targetTitle)
{
	$('modalTitle').update(targetTitle);
	var image = new Image();
	image.src = targetSource;	
	$('modalBox').insert(new Element("img", {id: "modalContent",src: targetSource })).setStyle({width:"auto", height:"auto"});
	Event.observe(image, 'load', function(){
		showOverlay();
		$("modal").appear
		({
			from:0,
			to:1,
			afterFinish:function(){setHeader(targetWidth, targetHeight); $('modalLoader').setStyle({display:'none'});},
			duration:1.5
		}).setStyle
		({
			width:getImageWidth(targetSource) + (boxPadding*2)+"px",
			height:getImageHeight(targetSource) + (boxPadding*2) + 1 +"px",
			top:imageY(targetHeight)+window.pageYOffset+"px",
			left:imageX(targetWidth)+"px"
		});
	});
}
function showOverlay()
{
	$("modalOverlay").appear
	({
		from:0,
		to:0.5,	
		duration: 1
	}).setStyle
	({
		width:"100%",
		height:document.body.parentNode.scrollHeight+"px"
	});	
	if (moveable)
	{
		$('modal').addClassName('moveableBox');
		new Draggable('modal', 
		{
			onStart:function()
			{
				$('modalOverlay').fade({to:0.1,duration:0.3});
			},
			onEnd:function()
			{
				$('modalOverlay').fade({to:0.5,duration:0.3});
			}
		});	
	}
	$("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
	});	
	$("modal").fade({
		from:1,
		to:0,
		duration: 0.5,
		afterFinish:clearModalBox
	});		
	$('modalLoader').setStyle({display:'none'});
	Draggables.drags.each(function(draggable) { draggable.destroy(); } );
	if ($('modal').hasClassName('moveableBox')) $('modal').removeClassName('moveableBox');
}
function clearModalBox(){$('modalContent').remove();image.src="";}
function getImageWidth(targetSource)
{
	var newImg = new Image();
	newImg.src = targetSource;
	targetWidth = newImg.width;
	if(newImg.complete)	return parseInt(targetWidth);
}
function getImageHeight(targetSource)
{
	var newImg = new Image();
	newImg.src = targetSource;
	targetHeight = newImg.height;
	if(newImg.complete)	return parseInt(targetHeight);
}
function imageX(targetWidth)
{
	var viewportHalf = Math.floor(document.viewport.getWidth()) / 2;
	var targetWidthHalf = parseInt(targetWidth) / 2; 
	var imageX = viewportHalf - targetWidthHalf;
	return imageX;
}
function imageY(targetHeight)
{
	var imageY = Math.floor(document.viewport.getHeight()) / 2 - targetHeight / 2;
	return imageY;
}
function setHeader(targetWidth, targetHeight)
{	
	$("modalHead").setStyle
	({
		width: parseInt(targetWidth)+"px",
		minHeight:"25px"
	}).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"});	
	if($(typeOfCurrent).hasClassName('iframe') || $(typeOfCurrent).hasClassName('iFrame'))
	{
		$("modalBox").setStyle
		({
			width: boxWidth+"px",
			height: boxHeight+"px"
		});
	
		$("modal").setStyle
		({
			width: boxWidth + (boxPadding*2) +"px",
			height: boxHeight + (boxPadding*2) +"px",
			top: imageY(boxHeight)+window.pageYOffset+"px",
			left: imageX(boxWidth)+"px"
		});
		setHeader(boxWidth, boxHeight);
	}
	else
	{
		$("modal").setStyle
		({
			top: imageY(targetHeight)+window.pageYOffset+"px",
			left: imageX(targetWidth)+"px"
		});	
	}
}

function init(){modalBuddy = new modalBuddy();}
Event.observe(window, 'load', init);