//POPUP SCRIPT FOR USE INSIDE THE FACEBOOK CANVAS
var y_pos = 0;

$(document).ready(
    function() {
		
		$(".target, .button").live('click', function(event) {
		    y_pos = event.pageY;
			//alert(y_pos);
	    });
		 
		 
		$(".lightbox").live('click',function(event){
											 
			 y_pos = event.pageY;
											 
			overlayLink = $(this).attr("href");
			pos = 'center';
			if ($(this).hasClass('relative')){
				pos = 'relative';
				y_pos = event.pageY;
			}
			window.startOverlay(overlayLink,pos);
			return false;
		});
	
	
	   
		
});


function startOverlay(overlayLink, pos) {
//add the elements to the dom
	$("body")
		.append('<div class="overlay"></div><div class="container"></div>')
		.css({"overflow-y":"hidden"});

//animate the semitransparant layer
	$(".overlay").animate({"opacity":"0.8"}, 400, "linear");
	$(".lightbox").show();

//add the lightbox image to the DOM
	$(".container").html('<img src="'+overlayLink+'" alt="" class="content" /><a href="#" class="lightboxClose"><img src="' + $('#site_url').val() + '/img/dialog-close.gif" /></a>');

//position it correctly after downloading
	$(".container img.content").load(function() {
		var imgWidth = $(".container img.content").width();
		var imgHeight = $(".container img.content").height();
		
		if (pos == 'center'){  //Center on page
			marginTop = -(imgHeight/2);
			topY = '50%';
		}
		else {	 //Position relative to mouse click. Better for links within an iframe, eg in a Facebook App	
			marginTop = y_pos - (imgHeight/2);
			if (marginTop < 50) { marginTop = 50 };
			topY = '0';
		}
		
		if (imgWidth >= 700){
			imgHeight = (700/imgWidth) * imgHeight;
			imgWidth = 700;	
			
		}
		
		
		$(".container")
			.css({
				"position": 'absolute',
				"top":        topY,
				"left":       "50%",				
				"width":      imgWidth,
				"height":     imgHeight,
				"margin-top":  marginTop,
				"margin-left":-((imgWidth + 30)/2) //to position it in the middle
				
			})
			.animate({"opacity":"1","height":imgHeight,"width":imgWidth}, 400, "linear");
			
			
			$(".container img.content").css({width: imgWidth,height: imgHeight});

// you need to initiate the removeoverlay function here, otherwise it will not execute.
		window.removeOverlay();
	});
}

function removeOverlay() {
// allow users to be able to close the lightbox
	$(".overlay,.lightboxClose").click(function(){
		$(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
			$(".container, .overlay").remove();	
		});
	});
}
/* fin. */



/* FOR DIALOGS */
function dialogShow(id) {
		
	$("body")
		.append('<div class="overlay"></div>')
		.css({"overflow-y":"hidden"});
	
	$(".overlay").animate({"opacity":"0.8"}, 400, "linear");
	
	
	//$('#' + id).alignCenter().removeClass('hidden');
	
	var width = $("#" + id).width();
	var height = $("#" + id).height();
	marginTop = y_pos - (height/2);
	if (marginTop < 50) { marginTop = 50 };
	var top = '0';
			
	$("#" + id)
			.css({
				"top":        top,
				"left":       "50%",				
				"width":      width,
				"height":     height,
				"margin-top":  marginTop,
				"margin-left":-(width/2) //to position it in the middle
				
			})
			//.animate({"opacity":"1"}, 400, "linear");
			.removeClass('hidden');
			
	
	$('.overlay').click(function() {
		dialogClose(id);
	});
	return false;
}

function dialogClose(id) {
	$(".overlay").animate({"opacity":"0"}, 200, "linear", function(){
		$(".overlay").remove();	
	});	
	$('#' + id).addClass('hidden');
	return false;
}