var $overlay_wrapper;
var $overlay_panel;

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

function hide_overlay() {
    $overlay_wrapper.fadeOut(200);
}

function append_overlay() {
    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $overlay_wrapper );
	
	var $overlay_content = document.getElementById('overlay-content').innerHTML;
	
    $overlay_panel.html( $overlay_content );

    attach_overlay_events();
}

function attach_overlay_events() {
    $('A.hide-overlay', $overlay_wrapper).click( function(ev) {
        ev.preventDefault();
        hide_overlay();
    });
}

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

var $overlay_wrapper2;
var $overlay_panel2;

function show_overlay2() {
    if ( !$overlay_wrapper2 ) append_overlay2();
    $overlay_wrapper2.fadeIn(200);
}

function hide_overlay2() {
    $overlay_wrapper2.fadeOut(200);
}

function append_overlay2() {
    $overlay_wrapper2 = $('<div id="overlay2"></div>').appendTo( $('BODY') );
    $overlay_panel2 = $('<div id="overlay-panel2"></div>').appendTo( $overlay_wrapper2 );
	
	var $overlay_content2 = document.getElementById('overlay-content2').innerHTML;
	
    $overlay_panel2.html( $overlay_content2 );

    attach_overlay_events2();
}

function attach_overlay_events2() {
    $('A.hide-overlay2', $overlay_wrapper2).click( function(ev) {
        ev.preventDefault();
        hide_overlay2();
    });
}

$(function() {
    $('A.show-overlay2').click( function(ev) {
        ev.preventDefault();
        show_overlay2();
    });
});