var overlay_start=0;
var wrapper_width;
var wrapper_height;

function enlarge(pic, title){
	$('body').append(overlay_start="<div class='overlay_holder' onclick='disable()'></div>");
	$('body').append("<div class='overlay_wrapper'><div id='loader'></div><div id='title_holder'>Welcome To ZINC</div><div id='overlay_content'></div><div class='closebtt' onclick='disable()' title='Close'></div></div>");
	$('#loader').css("visibility","visible");
	$('#title_holder').html(title);
	wrapper_width=700;
	wrapper_height=500;
	wrapper_height=wrapper_height+23;
	
	$('.overlay_wrapper').css({
	width: wrapper_width,
	height: wrapper_height,
    position: 'fixed',
    left: '50%',
    'margin-left': 0 - (wrapper_width / 2),
	top: '50%',
	'margin-top': 0 - (wrapper_height / 2)
	});
	
	$('#overlay_content').css({
	width: wrapper_width,
	height: wrapper_height-23,
	position: 'relative'
	});
	
	$('#overlay_content').html("<table cellpadding='0' cellspacing='0' border='0' width='100%' height='100%'><tr><td align='center' valign='middle'><img src='images/blank.gif' border='0' id='overlay_img' /></td></tr></table>");
	
	insert_img(pic);
	//$('#scroller').appendTo(".overlay_wrapper").css("display","block");
}

function insert_img(url){
	$('#overlay_img').load(function () {
		//$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
		$('#loader').css("visibility","hidden");
		$(this).css("visibility","hidden");
		$(this).css({
			maxWidth:wrapper_width,
			maxHeight:wrapper_height
			
		});
		$(this).css("visibility","visible");
	}).error(function () {
		// notify the user that the image could not be loaded
	}).attr('src', 'images/'+url);	
	
	
}

function disable(){
	if(overlay_start){
		//$('#scroller').appendTo("body").css("display","none");
		$('.overlay_holder').remove();
		$('.overlay_wrapper').remove();
		$('#overlay_img').remove();
	}
}