Fix the manual episode search ajax from the coming episodes page, refactored...

Fix the manual episode search ajax from the coming episodes page, refactored the code into a common ajaxEpSearch plugin

data/interfaces/default/comingEpisodes.tmpl

@@ -9,6 +9,7 @@
 #import os.path
 #include $os.path.join($sickbeard.PROG_DIR, "data/interfaces/default/inc_top.tmpl")
 #set $sort = $sickbeard.COMING_EPS_SORT
+<script type="text/javascript" src="$sbRoot/js/ajaxEpSearch.js"></script>
 
 <div class="h2footer align-right">
     <b>Key:</b> 
@@ -106,6 +107,8 @@
         }
     });
 
+    \$('#sbRoot').ajaxEpSearch();
+
 });
 //-->
 </script>
@@ -162,7 +165,9 @@ Custom
 #end if
         </td>
         <td align="center"><a href="http://www.thetvdb.com/?tab=series&amp;id=${cur_result["showid"]}" onclick="window.open(this.href, '_blank'); return false;" title="http://www.thetvdb.com/?tab=series&amp;id=${cur_result["showid"]}"><img alt="[info]" height="16" width="16" src="$sbRoot/images/search32.png" /></a></td>
-        <td align="center"><a href="$sbRoot/home/searchEpisode?show=${cur_result["showid"]}&amp;season=$cur_result["season"]&amp;episode=$cur_result["episode"]" title="Force Update" id="forceUpdate-${cur_result["showid"]}" class="forceUpdate"><img alt="[update]" height="16" width="16" src="$sbRoot/images/forceUpdate32.png" id="forceUpdateImage-${cur_result["showid"]}" /></a></td>
+        <td align="center">
+        <a href="$sbRoot/home/searchEpisode?show=${cur_result["showid"]}&amp;season=$cur_result["season"]&amp;episode=$cur_result["episode"]" title="Force Update" id="forceUpdate-${cur_result["showid"]}" class="forceUpdate epSearch"><img alt="[update]" height="16" width="16" src="$sbRoot/images/forceUpdate32.png" id="forceUpdateImage-${cur_result["showid"]}" /></a>
+        </td>
       </tr>
     <!-- end $cur_result["show_name"] //-->
     #end for
@@ -174,6 +179,7 @@ Custom
 <script type="text/javascript" charset="utf-8">
 <!--
 \$(document).ready(function(){ 
+  \$('#sbRoot').ajaxEpSearch({'size': 20, 'loadingImage': 'loading16_333333.gif'});
   \$(".ep_summary").hide();
   \$(".ep_summaryTrigger").click(function() {
     \$(this).next(".ep_summary").slideToggle('normal', function() {
@@ -253,7 +259,10 @@ Custom
             <span class="pause">[paused]</span>
             #end if            
             </a></span>
-            <span class="tvshowTitleIcons"><a href="http://www.thetvdb.com/?tab=series&amp;id=${cur_result["showid"]}" onclick="window.open(this.href, '_blank'); return false;" title="http://www.thetvdb.com/?tab=series&amp;id=${cur_result["showid"]}"><img alt="[info]" height="20" width="20" src="$sbRoot/images/search32.png" /></a> <a href="$sbRoot/home/searchEpisode?show=${cur_result["showid"]}&amp;season=$cur_result["season"]&amp;episode=$cur_result["episode"]" title="Force Update" id="forceUpdate-${cur_result["showid"]}" class="forceUpdate"><img alt="[update]" height="20" width="20" src="$sbRoot/images/forceUpdate32.png" id="forceUpdateImage-${cur_result["showid"]}" /></a></span>
+            <span class="tvshowTitleIcons">
+                <a href="http://www.thetvdb.com/?tab=series&amp;id=${cur_result["showid"]}" onclick="window.open(this.href, '_blank'); return false;" title="http://www.thetvdb.com/?tab=series&amp;id=${cur_result["showid"]}"><img alt="[info]" height="20" width="20" src="$sbRoot/images/search32.png" /></a>
+                <span><a href="$sbRoot/home/searchEpisode?show=${cur_result["showid"]}&amp;season=$cur_result["season"]&amp;episode=$cur_result["episode"]" title="Force Update" id="forceUpdate-${cur_result["showid"]}" class="epSearch forceUpdate"><img alt="[update]" height="20" width="20" src="$sbRoot/images/forceUpdate32.png" id="forceUpdateImage-${cur_result["showid"]}" /></a></span>
+            </span>
           </th>
         </tr>
         <tr>
@@ -303,5 +312,5 @@ Custom
 setInterval(window.location.reload, 180000); // Refresh every 3 minutes
 //-->
 </script>
-<script type="text/javascript" src="$sbRoot/js/tableClick.js"></script>
+<!--<script type="text/javascript" src="$sbRoot/js/tableClick.js"></script>-->
 #include $os.path.join($sickbeard.PROG_DIR, "data/interfaces/default/inc_bottom.tmpl")

data/js/ajaxEpSearch.js

+(function(){
+
+	$.ajaxEpSearch = {
+	    defaults: {
+	        size:				16,
+	        colorRow:         	false,
+	        loadingImage:		'loading16_dddddd.gif',
+	        noImage:			'no16.png',
+	        yesImage:			'yes16.png'
+	    }
+	};
+
+	$.fn.ajaxEpSearch = function(options){
+		options = $.extend({}, $.ajaxEpSearch.defaults, options);
+		
+	    $('.epSearch').click(function(){
+	        var parent = $(this).parent();
+	        
+	        // put the ajax spinner (for non white bg) placeholder while we wait
+	        parent.empty();
+	        parent.append($("<img/>").attr({"src": sbRoot+"/images/"+options.loadingImage, "height": options.size, "alt": "", "title": "loading"}));
+	        
+	        $.getJSON($(this).attr('href'), function(data){
+	            // if they failed then just put the red X
+	            if (data.result == 'failure') {
+	                img_name = options.noImage;
+	                img_result = 'failed';
+
+	            // if the snatch was successful then apply the corresponding class and fill in the row appropriately
+	            } else {
+	                img_name = options.yesImage;
+	                img_result = 'success';
+	                // color the row
+	                if (options.colorRow)
+	                	parent.parent().removeClass('skipped wanted qual good unaired').addClass('good');
+	                
+	                // update the status column if it exists
+	                parent.siblings('.status_column').html(data.result);
+	            }
+
+	            // put the corresponding image as the result for the the row
+	            parent.empty();
+	            parent.append($("<img/>").attr({"src": sbRoot+"/images/"+img_name, "height": options.size, "alt": img_result, "title": img_result}));
+	        });
+
+	        // fon't follow the link
+	        return false;
+	    });
+	}
+})();

data/js/displayShow.js

 $(document).ready(function(){
 
-    $('.epSearch').click(function(){
-      var parent = $(this).parent();
-      
-      // put the ajax spinner (for non white bg) placeholder while we wait
-      parent.empty();
-      parent.append($("<img/>").attr({"src": sbRoot+"/images/loading16_dddddd.gif", "height": "16", "alt": "", "title": "loading"}));
-      
-      $.getJSON($(this).attr('href'), function(data){
-          // if they failed then just put the red X
-          if (data.result == 'failure') {
-              img_name = 'no16.png';
-              img_result = 'failed';
-
-          // if the snatch was successful then apply the corresponding class and fill in the row appropriately
-          } else {
-              img_name = 'yes16.png';
-              img_result = 'success';
-              // color the row
-              parent.parent().removeClass('skipped wanted qual good unaired').addClass('good');
-              parent.siblings('.status_column').html(data.result);
-          }
-
-          // put the corresponding image as the result for the the row
-          parent.empty();
-          parent.append($("<img/>").attr({"src": sbRoot+"/images/"+img_name, "height": "16", "alt": img_result, "title": img_result}));
-      });
-
-      // fon't follow the link
-      return false;
-    });
+	$('#sbRoot').ajaxEpSearch({'colorRow': true});
 	
     $('#seasonJump').change(function() {
         var id = $(this).val();