// in der aufrufenden Datei die Variablen img_path (z.B. '<?=$ptr?>images/') u. img_type (z.B. '.png') definieren.
var img_path = '/support/pictures/'; 

function showGreenAVLayer(){	
	getParams(); 
	var Layer = document.createElement('div');
	Layer.id = 'reiss_layer';
	//Layer.className = 'overlay';
	Layer.style.position = 'absolute';
	Layer.style.zIndex = '160';
	Layer.style.width	= '0px';
	Layer.style.height	= '0px';	
	Layer.style.padding	= '20px';	
	Layer.style.border	= '1px solid #ddd';	
	Layer.style.backgroundColor	= '#fff';	
	Layer.style.top = (params.scrolled_y + 60) + 'px';
	Layer.style.left = (params.view_width / 2 + params.scrolled_x) + 'px';
	document.getElementsByTagName('body')[0].appendChild(Layer);
	
	var CloseImg = document.createElement('img');
	CloseImg.id = 'close_btn';
	CloseImg.src = img_path + 'btn_close.png';
	CloseImg.alt = '';
	CloseImg.style.position = 'absolute';
	CloseImg.style.zIndex = '180';
	CloseImg.style.width = '21px';
	CloseImg.style.height = '20px';
	CloseImg.style.display = 'block';
	CloseImg.style.top = '-10px';
	CloseImg.style.right = '-10px';
	CloseImg.onclick = closeWxgaLayer;
	CloseImg.style.cursor = 'pointer';
	Layer.appendChild(CloseImg);
	
	var projectorImg = document.createElement('img');
	projectorImg.id = 'projector_img';
	projectorImg.src = img_path + 'wxga_big.jpg';
	projectorImg.alt = '';
	projectorImg.style.width = '0px';
	projectorImg.style.height = '0px';
	Layer.appendChild(projectorImg);
	
	var unfold_eff = new Effect.Class({duration:0.2});
	var target_width	= 800;
	var target_height	= 362;
	var orig_left		= parseInt(Layer.style.left);
	unfold_eff.transition = function(pos) {
		var new_width = target_width * pos;
		var new_height = target_height * pos;
		Layer.style.width = new_width + 'px';
		Layer.style.height = new_height + 'px';
		Layer.style.left = (orig_left - new_width / 2 - 20) + 'px';
		projectorImg.style.width = target_width * pos + 'px';
		projectorImg.style.height = target_height * pos + 'px';
	}
	unfold_eff.init();

	setBackgroundOn();
	
	window.onresize = function() {
		getParams();
		var Layer = document.getElementById('reiss_layer');
		Layer.style.top = (params.scrolled_y + 60) + 'px';
		Layer.style.left = (params.view_width / 2 - parseInt(Layer.style.width) / 2 + params.scrolled_x) + 'px';
		var Overlay = document.getElementById('overlay');
		Overlay.style.width		= params.scrollable_x + 'px';
		Overlay.style.height	= params.scrollable_y + 'px';	
	}
}

function closeGreenAVLayer(){
	document.getElementsByTagName('body')[0].removeChild(document.getElementById('reiss_layer'));
	setBackgroundOff();
	window.onresize = '';
}

function setBackgroundOn(){	
	var Overlay = document.createElement('div');
	Overlay.id = 'overlay';
	//Overlay.className = 'overlay';
	Overlay.style.position = 'absolute';
	Overlay.style.zIndex = '150';
	Overlay.style.top = '0px';
	Overlay.style.left = '0px';
	Overlay.style.width		= params.scrollable_x + 'px';
	Overlay.style.height	= params.scrollable_y + 'px';	
	Overlay.style.backgroundColor	= '#fff';
	Overlay.style.opacity	= 0.0;
	Overlay.style.filter	= 'Alpha(opacity=0)';
	document.getElementsByTagName('body')[0].appendChild(Overlay);

	var appear_eff = new Effect.Class({duration: 0.4, from: 0.3, to: 0.8, transition: 'linear'});
	appear_eff.transform = function(pos) {
		Overlay.style.opacity = pos;
		Overlay.style.filter = 'Alpha(opacity=' + pos * 100 + ')';
	}
	appear_eff.init();
}

function setBackgroundOff(){		
	var vanish_eff = new Effect.Class({duration: 0.2, from: 0.2, tranition: 'linear'});
	vanish_eff.transition = function(pos) {
		var Overlay = document.getElementById('overlay');
		Overlay.style.opacity = 1 - pos;
		Overlay.style.filter = 'Alpha(opacity=' + (100 - pos * 100) + ')';
		if (pos >= 1) document.getElementsByTagName('body')[0].removeChild(document.getElementById('overlay'));
	}
	vanish_eff.init();
}


var params = {x:0, y:0, obj_width:0, obj_height:0, view_width:0, view_height:0, scrolled_x:0, scrolled_y:0, scrollable:0, xrel:0, yrel:0};

function getParams() {
	
	var orig_object = '';

  	if (arguments.length == 1) {
		orig_object = arguments[0];
		params.obj_width = orig_object.offsetWidth;
		params.obj_height = orig_object.offsetHeight;
	
		do {
		params.x += orig_object.offsetLeft;
		params.y += orig_object.offsetTop;
		} while (orig_object = orig_object.offsetParent);
	}

	if (window.innerWidth) {
		params.view_width = window.innerWidth;
	}
	else if (document.documentElement.clientWidth) {
		params.view_width = document.documentElement.clientWidth;
	}
	else if (document.body.clientWidth) {
		params.view_width = document.body.clientWidth;
		
	}

	if (window.innerHeight) {
		params.view_height = window.innerHeight;
	}
	else if (document.documentElement.clientHeight) {
		params.view_height = document.documentElement.clientHeight;
	}
	else if (document.body.clientHeight) {
		params.view_height = document.body.clientHeight;	
	}
	
	if (window.pageXOffset) {
		params.scrolled_x = window.pageXOffset;
	}
	else if (document.documentElement.scrollLeft) {
		params.scrolled_x = document.documentElement.scrollLeft;
	}
	else if (document.body.scrollLeft) {
		params.scrolled_x = document.body.scrollLeft;
	}
	
	if (window.pageYOffset) {
		params.scrolled_y = window.pageYOffset;
	}
	else if (document.documentElement.scrollTop) {
		params.scrolled_y = document.documentElement.scrollTop;
	}
	else if (document.body.scrollTop) {
		params.scrolled_y = document.body.scrollTop;
	}

	if (document.documentElement.scrollWidth) {
		params.scrollable_x = document.documentElement.scrollWidth;
	}
	else if (document.body.scrollWidth) {
		params.scrollable_x = document.documentElement.scrollWidth;
	}
	if ((params.view_width + params.scrolled_x) > params.scrollable_x) {
		params.scrollable_x = params.view_width + params.scrolled_x;
	}

	if (document.documentElement.scrollHeight) {
		params.scrollable_y = document.documentElement.scrollHeight;
	}
	else if (document.body.scrollHeight) {
		params.scrollable_y = document.documentElement.scrollHeight;
	}
	if ((params.view_height + params.scrolled_y) > params.scrollable_y) {
		params.scrollable_y = params.view_height + params.scrolled_y;
	}
}