/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


    $.fn.jqroverlay = function(options) {

        this.options = $.extend({
            opacityHoverIn: 0.80,
            opacityHoverOut: 0.0,
            colorHoverIn: "#000000",
            colorHoverOut: "#000000",
            timeHoverIn: 500,
            timeHoverOut: 500
        }, options || {}); // default options

        this.$element = $(this);

        $this = this;

        this.$element.wrapInner("<div class='overlay-content-padding'></div>");
        if (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) return ;
        this.$element.wrapInner("<div class='overlay-content' ></div>");
        this.$element.prepend("<div class='overlay-overlay'></div>");
        this.$element.wrapInner("<div class='overlay-container'></div>");
    
        this.hoverIn = function(element)
        {
            var $overlay = $(".overlay-overlay", element)
            $overlay.stop().animate({
                opacity: this.options.opacityHoverIn,
                backgroundColor: this.options.colorHoverIn
                }, this.options.timeHoverIn);
        }

        this.hoverOut = function(element)
        {
            var $overlay = $(".overlay-overlay", element)
            $overlay.stop().animate({
                opacity: this.options.opacityHoverOut,
                backgroundColor: this.options.colorHoverOut
                }, this.options.timeHoverIn);
        }

        this.$element.hover(function () {
            $this.hoverIn(this);
        }, function () {
            $this.hoverOut(this);
        });

        var $overlay = $(".overlay-overlay", this);
        $overlay.stop().animate({
            opacity: this.options.opacityHoverOut,
            backgroundColor: this.options.colorHoverOut
            }, 0);
    };