// ÅÄÖ

// Reposition toplayer to center
repos = function(topLayerId, bottomLayerId) {
	
	var topLayer = $(topLayerId);
	var bottomLayer = $(bottomLayerId);
	
	var plus = false;
	
	// Some offset haxxing if you dont have fullscreen etc. 
	// If toplayer is heigher than current viewheight we have to do some more digging
	if(topLayer.offsetHeight >= document.viewport.getHeight()) {
		
		// Check if toplayer + scrolloffset is lower than total height of webpage then just put it at the top of your screen
		if((topLayer.offsetHeight+document.viewport.getScrollOffsets().top) <= document.body.clientHeight) {
			
			var topvalue = document.viewport.getScrollOffsets().top + "px";
			var topmargin = 0;
			
		}else{
			
			// Else put it at the bottom of the page
			var topmargin = (topLayer.offsetHeight+document.viewport.getScrollOffsets().top)-document.body.clientHeight;
			var topvalue = document.viewport.getScrollOffsets().top + "px";
		}
		
	}else{
		
		// Else just put it centered on the screen
		var topvalue = "50%";
		var topmargin = Math.round(topLayer.offsetHeight / 2) - document.viewport.getScrollOffsets().top;
		
		if(topmargin < 0) {
			topmargin = topmargin * -1;
			var plus = true;
		}
	}
	
	// Center top
	topLayer.setStyle({ top: topvalue, marginTop: (plus == false ? '-' : '') + topmargin + 'px' });

	// Center left
	topLayer.setStyle({ left: '50%', marginLeft: '-' + Math.round(topLayer.offsetWidth / 2) + 'px' });
					   
	topLayer.setStyle({ visibility: "visible" });
	// Get height for body
	height = document.body.clientHeight + 50;
	
	if (!height > 0)
		height = '100%';
	else
		height = height + 'px';
		
	// Set full height on bottom layer
	bottomLayer.setStyle({height: height});
	
	// Set observe on bottom layer
	bottomLayer.observe('click', function() {
										  
		// If bottom and top layer exists
		if ($(bottomLayerId) && $(topLayerId)) {
			// Remove bottom layer
			$(bottomLayerId).remove();
			
			// Remove top layer
			$(topLayerId).remove();
		}	
	});
}

var topLayer = Class.create({
	bottomLayerId: 0,
	topLayerId: 0,
	
	// Create new layer
	initialize: function(id, width, title, content) {
		
		// Create id for bottom and top layer
		this.bottomLayerId = "layer-bg-" + id;
		this.topLayerId = "layer-" + id;
		
		// Create grey bottom layer
		var bottomLayer = new Element('div', {'class': 'bottomLayer', 'id': this.bottomLayerId});
		
		// Create top layer
		var topLayer = new Element('div', {'class': 'topLayer', 'id': this.topLayerId}).update('<table cellspacing="0" cellpadding="0"' + (width == 0 ? "" : ' style="width: ' + width + 'px;"') + '><tr><td class="top_left"></td><td class="top_center"></td><td class="top_right"></td></tr><tr><td class="left"></td><td class="content"><h1>' + title + '</h1><a href="javascript:void(0);" id="close-' + id + '"><img src="/img/toplayer_close.png" alt="" class="right" /></a><div class="layercontent">' + content + '</div></td><td class="right"></td></tr><tr><td class="bottom_left"></td><td class="bottom_center"></td><td class="bottom_right"></td></tr></table>');
		
		topLayer.setStyle({ visibility: "hidden" });
		
		// Append bottom and top layer in body
		document.body.appendChild(bottomLayer);
		document.body.appendChild(topLayer);
		
		// Timeout required for images to get downloaded by webbrowser before resize
		setTimeout("repos('"+this.topLayerId+"', '"+this.bottomLayerId+"');", 500);

	},
	// Remove layer
	close: function() {
		// If bottom and top layer exists
		if ($(this.bottomLayerId) && $(this.topLayerId)) {
			// Remove bottom layer
			$(this.bottomLayerId).remove();
			
			// Remove top layer
			$(this.topLayerId).remove();
		}
	}
});