var docW;
var docH;
var winW;
var winH;

$(document).ready(function() {
	docW = $(document).width();
	docH = $(document).height();
	winW = $(window).width();
	winH = $(window).height();
});

function fadeOutPopup(func) {
	$("#sbalerts1").fadeOut(function() {
		$("html").css("overflow", "");
		if(func) {
			func();
		}
	});
}

function html5popupalert(text, btn1, btn2) {

	var text = text;
	
	// generate markup.
	if($("#sbalerts1").length!=0) {
		$("#sbalerts1").remove();
	}
	
	$("body").prepend($('<div id="sbalerts1" />').fadeIn());
	$("#sbalerts1").append($('<div class="box-wrap" />'));
	$("#sbalerts1 .box-wrap").append($("<p>"+text+"</p>")); // append text/string
	$("#sbalerts1 .box-wrap").append($('<div class="buttons" />')); // append buttons container. (div)
	
	if (btn1) {
		
		var btn1el = $('<a href="#nogo" class="btn1 '+(btn2 ? 'flat-rt' : '')+'">'+btn1.label+'</a>');
		btn1el.appendTo($("#sbalerts1 .buttons"));
		btn1el.click(function() {
			fadeOutPopup(btn1.func);
			
		});
	}
	
	if (btn2) {
		
		var btn2el = $('<a href="#nogo" class="btn1 '+(btn1 ? 'flat-lt' : '')+'">'+btn2.label+'</a>');
		btn2el.appendTo($("#sbalerts1 .buttons"));
		btn2el.click(function() {
			fadeOutPopup(btn2.func);
		});
		
	}
	
	if(!btn1 && !btn2) {
		
		var btndefault = $('<a href="#nogo" class="btn1">'+"OK"+'</a>');
		btndefault.appendTo($("#sbalerts1 .buttons"));
		btndefault.click(function() {
			fadeOutPopup();
		});
		
	}
		
	// disable scroll when popup visible.
	//$("html").css("overflow", "hidden");
	$("html").css("overflow-x","hidden");

	$("#sbalerts1").css({
	"width" : docW,
	"height" : docH
	});
	
	/*
	var boxContentsH = $("#sbalerts1 .box-wrap").innerHeight();
	Math.round(boxContentsH/2);
	
	*/
	var boxContentsH = $("#sbalerts1 .box-wrap").innerHeight();
	var boxContentsW = $("#sbalerts1 .box-wrap").outerWidth(true);
	
	
	$("#sbalerts1 .box-wrap").css({
		"left" : (winW/2) - Math.round(boxContentsW/2),
		"top" : (winH/2) - Math.round(boxContentsH/2) + $(document).scrollTop()
	});
	
	///
	
	//var height = $(this).height(), width  = $(this).width();
	$(document).bind('DOMSubtreeModified', function() {
	    
	    fnRepositionPopupAlert();
			
	}); // DOMSubtreeModified
	
	//$(document).resize(function() {
	//	fnRepositionPopupAlert();
	//}); // document.resize();
	
	$(window).resize(function() {
	
		fnRepositionPopupAlert();		
		
	}); // window.resize();
	
	
}

function fnRepositionPopupAlert() {
	
	if(
    	docW != $(document).width()
		|| docH != $(document).height()
		|| winW != $(window).width()
		|| winH != $(window).height()
    ) {
		
		docW = $(document).width();
		docH = $(document).height();
		winW = $(window).width();
		winH = $(window).height();
		
		// ##### //
		
		$("#sbalerts1").css({
		"width" : docW,
		"height" : docH
		});
		
		var boxContentsH = $("#sbalerts1 .box-wrap").innerHeight();
		var boxContentsW = $("#sbalerts1 .box-wrap").outerWidth(true);
		
		$("#sbalerts1 .box-wrap").css({
			"left" : (winW/2) - Math.round(boxContentsW/2),
			"top" : (winH/2) - Math.round(boxContentsH/2) + $(document).scrollTop()
		});
	}
}