// ÅÄÖ

// 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.viewport.getHeight()) {
			
			var topvalue = document.viewport.getScrollOffsets().top;
			var topmargin = 0;
			
		}else{
			
			// Else put it at the bottom of the page
			var topmargin = (topLayer.offsetHeight+document.viewport.getScrollOffsets().top)-document.viewport.getHeight();
			var topvalue = document.viewport.getScrollOffsets().top;
		}
		
		if(topvalue == 0) {
			topmargin = 0;
		}else if((topvalue-topmargin) < 0) {
			topmargin = 0;	
		}
		
		topvalue = topvalue + '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.viewport.getHeight();
	
	height = $('footer').cumulativeOffset().top + $('footer').offsetHeight;
	
	if (!height > 0) {
		height = '100%';
	}else{
		
		if((topLayer.offsetHeight + document.viewport.getScrollOffsets().top) > height) {
			height = ((topLayer.offsetHeight + document.viewport.getScrollOffsets().top) + 50) + 'px';
		}else{
			height = (height+50) + '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><img src="/img/toplayer_close.png" id="close-' + id + '" alt="Stäng" title="Stäng" class="right" /><div class="layercontent" id="layer-content-' + id + '">' + 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 so they are rendered
		if(width == 0) {
			setTimeout("repos('"+this.topLayerId+"', '"+this.bottomLayerId+"');", 500);
		}else{
			// If width is set then we dont have to wait
			repos(this.topLayerId, this.bottomLayerId);	
		}
		
		// Set observe on close button
		if($('close-' + id)) {

			$('close-' + id).observe('click', function() {
													   
				// If bottom and top layer exists
				if ($("layer-bg-" + id) && $("layer-" + id)) {
					// Remove bottom layer
					$("layer-bg-" + id).remove();
					
					// Remove top layer
					$("layer-" + id).remove();
				}	
			});
		}

	},
	// 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();
		}
	}
});