(function($) {

    $.fn.hoverArea = function() {
        // global container variables
        var container = "";
        var square = "";
        var squareContent = "";

        // opacity settings
        var squareOpacity = .5;
        var contentOpacity = .7;

        // track position
        var inContent = false;

        function hoverInSquare() {
            square.fadeTo(500, squareOpacity);
        }

        function hoverInContent() {
            squareContent.fadeTo(500, contentOpacity);
        }

        function hoverOutSquare() {
            square.fadeTo(500, 0);
        }

        function hoverOutContent() {
            if (!inContent) {
                squareContent.fadeTo(500, 0);
            }
        }

        this.each(function() {
            // element-specific code here
            container = $(this);
            square = $(container.children("div.squareBox"));
            squareContent = $(container.children("div.squareBoxContent"));

            // set opacity on squareBoxes and squareBoxContent
            square.css('opacity', squareOpacity);
            squareContent.css('opacity', contentOpacity);

            // hide all elements
            square.fadeTo(500, 0);
            squareContent.fadeTo(0, 0);

            // wire up events
            container.hover(
                function() { hoverInSquare(); },
                function() { hoverOutSquare(); }
            );

            square.mouseover(
            function() { hoverInContent(); }
            );

            square.mouseout(
            function() { setTimeout(hoverOutContent, 100); }
            );

            squareContent.mouseover(
            function() { inContent = true; }
            );

            squareContent.mouseout(
            function() { inContent = false; hoverOutContent(); }
            );


        });

        return this;

    };

})(jQuery);