var $overlay_wrapper;
var $overlay_panel;

function show_overlay(me) {
    if ( !$overlay_wrapper ) append_overlay(me);
    $overlay_wrapper.fadeIn(700);
}

function hide_overlay() {
    $overlay_wrapper.fadeOut(500);
    $overlay_wrapper = null; //gør at den ikke huske på den sidste side der bliver vist
}

function append_overlay(me) {

	var pagename = me.attr('href');
	
	var html = '';
	var size = me.attr("rel");

	if(size=='small'){
		width=425;
		height=465;
	} else {
//		width=397;
		width=607;
		height=307;
	}

    $overlay_wrapper = $('<div id="overlay" onclick="hide_overlay()"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $overlay_wrapper );

	html = '<iframe style="width:'+width+'px;height:'+height+'px" allowtransparency="true" frameborder="no" src="' + pagename + '"></iframe>';

    $overlay_panel.html( html );

    attach_overlay_events();
}

function attach_overlay_events() {
    $('#hideoverlay', $overlay_wrapper).click( function(ev) {
        ev.preventDefault();
        hide_overlay();
    });
}

$(function() {
    $('A.show-overlay').click( function(ev) {
        ev.preventDefault();
        show_overlay($(this));
    });
});


function show_image_overlay(src){

    if ( !$overlay_wrapper ) append_image_overlay(src);
    $overlay_wrapper.fadeIn(700);

}

function append_image_overlay(src) {

    $overlay_wrapper = $('<div id="overlay" onclick="hide_overlay()"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $overlay_wrapper );

	html = '<img style="border: 10px solid #fff" src="'+ src +'" alt="" />';

    $overlay_panel.html( html );

    attach_overlay_events();
}