From b78e2f799bbe7e30ee3716929cd196f08188df2b Mon Sep 17 00:00:00 2001
From: Brandon Aaron <brandon.aaron@gmail.com>
Date: Wed, 21 Apr 2010 03:49:55 +0800
Subject: [PATCH] Fix pager icons to use a container so that
 ui-state-default/hover background images will work as expected

---
 slick.pager.css |  2 +-
 slick.pager.js  | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/slick.pager.css b/slick.pager.css
index e28d5c358..3f25945dd 100644
--- a/slick.pager.css
+++ b/slick.pager.css
@@ -14,7 +14,7 @@
 	padding: 6px;
 }
 
-.slick-pager .ui-icon
+.slick-pager .ui-icon-container
 {
 	display: inline-block;
 	margin: 2px;
diff --git a/slick.pager.js b/slick.pager.js
index 52d48b8d2..eb0ec2d96 100644
--- a/slick.pager.js
+++ b/slick.pager.js
@@ -87,33 +87,32 @@
                 }
             });
 
-            $("<span class='ui-icon ui-icon-lightbulb' />")
+            var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
+            var icon_suffix = "' /></span>";
+
+            $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
                     .click(function() { $(".slick-pager-settings-expanded").toggle() })
                     .appendTo($settings);
 
-            $("<span class='ui-icon ui-icon-seek-first' />")
+            $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
                     .click(gotoFirst)
                     .appendTo($nav);
 
-            $("<span class='ui-icon ui-icon-seek-prev' />")
+            $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
                     .click(gotoPrev)
                     .appendTo($nav);
 
-            $("<span class='ui-icon ui-icon-seek-next' />")
+            $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
                     .click(gotoNext)
                     .appendTo($nav);
 
-            $("<span class='ui-icon ui-icon-seek-end' />")
+            $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
                     .click(gotoLast)
                     .appendTo($nav);
 
-            $container.find(".ui-icon")
-                    .addClass("ui-state-default ui-corner-all")
-                    .mouseover(function(e) {
-                        $(e.target).addClass("ui-state-hover")
-                    })
-                    .mouseout(function(e) {
-                        $(e.target).removeClass("ui-state-hover")
+            $container.find(".ui-icon-container")
+                    .hover(function() {
+                        $(this).toggleClass("ui-state-hover");
                     });
 
             $container.children().wrapAll("<div class='slick-pager' />");