Added functionality to use custom overlayClass

These modifications allow a user to define a custom overlayClass
instead of using the default 'overlay'.  This means that if they are
using jQuery UI instead of redefining the ui-widget-overlay into their
own stylesheet, they can just reference the one defined by jQuery UI
stylesheet.

css/style.css

@@ -7,4 +7,6 @@ p { margin: 10px 0 10px 0; }
 ul li { margin: 0 0 0 25px; list-style-type: disc; }
 
 #container { padding: 10px; }
-#small-container { width:640px; height: 380px; border: 1px solid #000; }
+#small-container { width:640px; height: 380px; border: 1px solid #000; }
+
+.ui-widget-overlay { background: #666666 url(../images/08_diagonals_thick.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }

index.html

@@ -133,6 +133,27 @@ <h3>
           });
         });
       </pre>
+      <h2>
+        Customer Overlay Class
+      </h2>
+      <p>
+        You can also used an overlay class already defined in your app from another library (i.e. jQuery UI). Click on the photo below to see the overlay class form jQuery UI used.
+      </p>
+      <div id="photo-trigger-2" style="width:720px;height: 478px;">
+        <img src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc6/259966_10100500093774910_4902926_62592512_5420140_n.jpg" alt="" />
+      </div>
+      <h3>
+        Code Used
+      </h3>
+      <pre class="brush: js">
+		  $('#photo-trigger-2').click(function() {
+		    $(this).overlay({
+		      overlayClass: 'ui-widget-overlay',
+		      effect: 'fade',
+		      container: '#photo-trigger-2'
+		    });
+		  });
+      </pre>
     </div>
 	</body>
 </html>

js/jquery.overlay.js

@@ -14,6 +14,12 @@
 	$.fn.overlay = function(options) {
 
     var opts = $.extend({}, $.fn.overlay.defaults, options);
+	// If overlayClass is defined we don't want to use opts.color since it will override 
+	// the background from the element.
+	if( opts.overlayClass ) {
+		delete opts.color;
+	}
+
 		return this.each(function(evt) {
       if(!$(this).hasClass('overlay-trigger')) {
         show(create($(this), opts), opts);
@@ -49,7 +55,7 @@
     if($src.css('position') === 'relative') {
 
     	overlay = $('<div></div>')
-    	.addClass('overlay')
+    	  .addClass(opts.overlayClass)
 	      .css({
 	        background: opts.color,
 	        opacity: opts.opacity,
@@ -66,7 +72,7 @@
     } else {
 
 	    overlay = $('<div></div>')
-	      .addClass('overlay')
+	      .addClass(opts.overlayClass)
 	      .css({
 	        background: opts.color,
 	        opacity: opts.opacity,
@@ -209,6 +215,7 @@
 
 	$.fn.overlay.defaults = {
     color: '#000',
+	overlayClass: 'overlay',
     opacity: 0.5,
     effect: 'none',
     onShow: null,

js/site.js

@@ -62,4 +62,12 @@ $(function() {
       }
     });
   });
+
+  $('#photo-trigger-2').click(function() {
+    $(this).overlay({
+      overlayClass: 'ui-widget-overlay',
+      effect: 'fade',
+      container: '#photo-trigger-2'
+    });
+  });
 });