// ÅÄÖ

ie6 = false;

// 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 once its loaded
	var height = $('main').cumulativeOffset().top;
	
	height += $('main').getHeight();
	
	// Set full height on bottom layer
	bottomLayer.setStyle({ height: height + 'px' });

}

var topLayer = Class.create({

	bottomLayerId: 0,
	topLayerId: 0,

	// Create new layer
	initialize: function(id, width, title, content, closer) {

		// 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"><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">' + (closer == 1 ? '<a href="' + (ie6 ? '#' : 'javascript:void(0);') + '" id="close-' + id + '"' + (id == 'competition' ? ' onclick="gotoMyUrl();"' : '' ) + '><img src="' + (ie6 ? '/images/spacer.png' : '/images/toplayer-close.png') + '" id="close-' + id + '" alt="St&auml;ng" title="St&auml;ng" class="right" /></a>' : '') + '<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);
	//	document.write(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 close observe on bottom layer 
		$(this.bottomLayerId).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();
			}	
		});	
		
		
		// Set observe on close button
		if($('close-' + id) && id != 'competition') {

			$('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();
		}
	}
});