
(function($){
   $.fn.aqLayer = function(options,html) {
      var opts = $.extend({ 
         attach: 'nw', offsetX: 0, offsetY: 200, 
         opacity: .9, 
         layerCss: { zIndex: 2000, display: 'none' , position: 'absolute'},
         topCss: { background: 'transparent url(/img/menu/top.png) no-repeat'  },
         botCss: { background: 'transparent url(/img/menu/bottom.png) no-repeat',padding:'10px'},
         midCss: { color: '#222', padding: '5px', clear: 'both', textAlign: 'left', 
         background: 'transparent url(/img/menu/sides.png) repeat-y' }
      }, options);

      return this.each(function() {
         if ($('div',this).hasClass('aqLayer')) {
            $(this).find('.aqLayer').fadeIn();
            return false;
         }

         obj = $(this);

 		 $('<div class="aqLayer"><div class="top">&nbsp;<\/div><div class="mid">&nbsp;<\/div><div class="bot">&nbsp;<\/div><\/div>').appendTo(obj);

         var $layer = $('.aqLayer', obj);
         $layer.find('.top').css(opts.topCss);
         $layer.find('.bot').css(opts.botCss);
         $layer.find('.mid').css(opts.midCss);
         
         var pos = obj.position();
         
         var y = (opts.attach.match(/n/) ? 0 
            : (opts.attach.match(/s/) ? obj.height()
               : Math.round(obj.height()/2)));

         var x = (opts.attach.match(/w/) ? 0 
            : (opts.attach.match(/e/) ? obj.width()
               : Math.round(obj.width()/2)));

         if (obj.css('position') != 'absolute') {
            x += pos.left;
            y += pos.top;
         }

         if (html) $layer.find('.mid').html(html);

         $layer.css({
            opacity: opts.opacity,
            position: 'absolute',
            left: x + opts.offsetX + 'px',
           	top:  y + opts.offsetY + 'px'
         }).css(opts.layerCss);

         $layer.click(function(){$(this).fadeOut()});

         $layer.fadeIn();
      });
   };
})(jQuery);