var $overlay_wrapper;
var $overlay_panel;

function show_overlay(x) {
    if ( !$overlay_wrapper ) append_overlay(x);
	$overlay_wrapper.fadeIn(600);
	$overlay_panel.width((x*1)+30);
}

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

function append_overlay(x) {
	//alert(x);
	var containerWidth = (x*1)+30;
    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel" style="width:'+containerWidth+'px;"></div>').appendTo( $overlay_wrapper );

    $overlay_panel.html( '<div id="overlay-container"><a href="#" class="hide-overlay">[x] Close</a><div></div></div>' );

    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();
		var imgWidth = $(this).attr("imgWidth");
        show_overlay(imgWidth);
		var imgName = $(this).attr("imgName");
		var imgAlt = $(this).attr("title");
		
		var overlayHTML = '<img src="/wp-content/themes/harpesurvey/images/screencaps/large/'+imgName+'" alt="'+imgAlt+'" title="'+imgAlt+'" border="0" />';
		$("#overlay-container div").html(overlayHTML);
    });
});