billboard.modal = new ( function($) {

    var me = this;

	me.hideModalShield = function() 
	{
		$("#modal-shield").hide();
	};

	me.hideModalContent = function() 
	{
		$("#modal-content").hide();
    };

    me.hide = function(){
        me.hideModalContent();
        me.hideModalShield();
    };

	me.showModalShield = function() 
	{
		var shield = $("#modal-shield");
		if ( shield.length == 0 ) {
			$("body").append("<div id='modal-shield'></div>");
			shield = $("#modal-shield");
		}
		shield.css({
				"position":"absolute",
				"background-color":"#000000",
				"top":"0px",	
				"left":"0px",	
				"z-index":"500",	
				"width":$("body").width()+"px",
				"height":$("body").height()+"px"
		});
		shield.show();
		shield.css( "opacity",.50 );
	};

    me.showModalContent = function(html,close){
        var modalContent = $("#modal-content");
        var modalClose = $("#modal-close");
        var modalSubContent = $("#modal-sub-content");
        if ( modalContent.length == 0 ) {
            $("body").append('<div id="modal-content" />'); 
            modalContent = $("#modal-content");
        }
        modalContent = modalContent.hasClass("modal") ? modalContent : modalContent.addClass("modal");
        if(close && modalClose.length == 0){
            modalContent = modalContent.append('<a href="javascript:void(0);" id="modal-close" class="no-ajax close-modal"><span></span>close</a>');
            $("#modal-content .close-modal").click(function(){
                me.hide();
                return false;
            });
        }
        if ( modalSubContent.length == 0 ) {
            modalContent = modalContent.append('<div id="modal-sub-content" />');
            modalSubContent = $('#modal-sub-content');
        }
        modalSubContent.html(html);

        var x = $("body").width() / 2 - modalContent.width() / 2;
		
		var y;
        if(typeof(window.pageYOffset)=='number') {
			y = window.pageYOffset + 50;
		}
		else {
		   y=document.documentElement.scrollTop+50;
		}
		
		
        modalContent.css({
            "left": x + "px"
            , "top" : y + "px"
        });
        modalContent.show();
    };

    me.show = function(html,close){
        me.showModalShield();
        me.showModalContent(html,close);
    };

})(jQuery);