Overlay Anything

by mmarcon

HTML

<script src="http://api.maps.ovi.com/jsl.js"></script>
<section id="test">
    
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600);

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

#test {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px auto;
}

JavaScript

(function($) {
     var defaults = {
         background: '#000',
         opacity: 0.5,
         text: ''
     },
         OVERLAY_CLASS = 'overlay';

    // Create an object literal for the public methods
    var methods = {
        init: function(options) {
            var $this = $(this),
                settings = $.extend({}, defaults, options),
                overlay = $('<div/>').addClass (OVERLAY_CLASS);
            $this.css('position', 'relative');
            overlay.css({
                'background-color': settings.background,
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            }).fadeTo(0, settings.opacity)
              .appendTo ($this);    
        },
        hide: function(fade) {
            var $this = $(this);
            if (!fade) {
                $this.children('.' + OVERLAY_CLASS).remove();
            }
            else {
                $this.children('.' + OVERLAY_CLASS).fadeTo(500, 0, function(){$(this).remove()})
            }
        }
    };

    $.fn.oa = function(method) {
        //Make a copy of the arguments
        var a = Array.prototype.slice.call(arguments, 0);
        if (methods[method]) {
            method = methods[method];
            // Our method was sent as an argument, remove it using slice because it's not an argument for our method
            a = Array.prototype.slice.call(a, 1);
        } else if (typeof(method) == 'object' || !method) {
            method = methods.init;
        } else {
            $.error('Method ' + method + ' does not exist on jOVI');
            return this;
        }
        return this.each(function() {
            // Use apply to sent arguments when calling our selected method
            method.apply(this, a);
        });
    };

})(jQuery);

$(function() {
    $('#test').oa();
    setTimeout (function(){$('#test').oa('hide', true);}, 2000);
});