Merge pull request #3387 from uniquePWD/patch-19

Update script.js

data/interfaces/default/album.html

@@ -5,7 +5,6 @@
 %>
 
 <%def name="headerIncludes()">
-
 	<div id="subhead_container">
 		<div id="back_to_previous_link">
 			<a href="artistPage?ArtistID=${album['ArtistID']}" class="back">&laquo; Back to ${album['ArtistName']}</a>
@@ -13,16 +12,18 @@
 		<div id="subhead_menu">
 
 			<a id="menu_link_delete" href="deleteAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}"><i class="fa fa-trash-o"></i> Delete Album</a>
+
 			%if album['Status'] == 'Skipped' or album['Status'] == 'Ignored':
-			<a id="menu_link_wanted" href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=False', $(this),true)" data-success="'${album['AlbumTitle']}' added to queue"><i class="fa fa-heart"></i> Mark Album as Wanted</a>
+			<a id="menu_link_wanted" href="#" class="album-action" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-new="False" data-success-msg="'${album['AlbumTitle']}' added to queue"><i class="fa fa-heart"></i> Mark Album as Wanted</a>
 			%elif album['Status'] == 'Wanted':
-			<a id="menu_link_check" href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True', $(this));" data-success="Forced checking successful"><i class="fa fa-search"></i> Force Check</a>
-			<a id="menu_link_skipped" href="javascript:void(0)" onclick="doAjaxCall('unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}', $(this),true);" data-success="'${album['AlbumTitle']}' marked as Skipped"><i class="fa fa-step-forward"></i> Mark Album as Skipped</a>
+			<a id="menu_link_check" href="#" class="album-action" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-new="True" data-success-msg="Forced checking successful"><i class="fa fa-search"></i> Force Check</a>
+			<a id="menu_link_skipped" href="#" class="album-action" data-action="unqueueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-success-msg="'${album['AlbumTitle']}' marked as Skipped"><i class="fa fa-step-forward"></i> Mark Album as Skipped</a>
 			%else:
-			<a id="menu_link_retry" href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=False', $(this),true);" data-success="Retrying the same version of '${album['AlbumTitle']}'"><i class="fa fa-refresh"></i> Retry Download</a>
-			<a id="menu_link_new" href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True', $(this),true);" data-success="Looking for a new version of '${album['AlbumTitle']}'"><i class="fa fa-download"></i> Try New Version</a>
+			<a id="menu_link_retry" href="#" class="album-action" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-new="False" data-success-msg="Retrying the same version of '${album['AlbumTitle']}'"><i class="fa fa-refresh"></i> Retry Download</a>
+			<a id="menu_link_new" href="#" class="album-action" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-new="True" data-success-msg="Looking for a new version of '${album['AlbumTitle']}'"><i class="fa fa-download"></i> Try New Version</a>
 			%endif		
-			<a class="menu_link_edit" id="album_chooser" href="javascript:void(0)"><i class="fa fa-pencil"></i> Choose Alternate Release</a>
+
+			<a class="menu_link_edit dialog-trigger" id="album_chooser" href="#" data-dialog-id="dialog"><i class="fa fa-pencil"></i> Choose Alternate Release</a>
 			<div id="dialog" title="Choose an Alternate Release" style="display:none" class="configtable">
 				<div class="links">
 					<%
@@ -30,7 +31,7 @@
 					%>
 					%if not alternate_albums:
 						<p>No alternate releases found. Try refreshing the artist (if the artist is being refreshed, please wait until it's finished)</p>
-							<h2><a id="refresh_artist" onclick="doAjaxCall('refreshArtist?ArtistID=${album['ArtistID']}', $(this)), true" href="javascript:void(0)" data-success="'${album['ArtistName']}' is being refreshed">Refresh Artist</a></h2>
+						<h2><a id="refresh_artist_btn" href="#" class="album-action" data-action="refreshArtist" data-artist-id="${album['ArtistID']}" data-success-msg="'${album['ArtistName']}' is being refreshed">Refresh Artist</a></h2>
 					%else:
 						%for alternate_album in alternate_albums:
 							<%
@@ -43,14 +44,15 @@
 									alternate_album_name = alternate_album['AlbumTitle'] + " (" + alternate_album['ReleaseCountry'] + ", " + str(alternate_album['ReleaseDate']) + ", " + alternate_album['ReleaseFormat'] + ") [" + str(have_track_count) + "/" + str(track_count) + " tracks]"
 								
 							%>
-								<a href="javascript:void(0)" onclick="doAjaxCall('switchAlbum?AlbumID=${album['AlbumID']}&ReleaseID=${alternate_album['ReleaseID']}', $(this), 'table');" data-success="Switched release to: ${alternate_album_name}">${alternate_album_name}</a><a href="${mb_link}" target="_blank">MB</a><br>
+							<a href="#" class="album-action alternate-release-switch" data-action="switchAlbum" data-album-id="${album['AlbumID']}" data-release-id="${alternate_album['ReleaseID']}" data-success-msg="Switched release to: ${alternate_album_name}">${alternate_album_name}</a><a href="${mb_link}" target="_blank" class="external-link">MB</a><br>
 						%endfor
 					%endif
 				</div>
 			</div>
-			<a class="menu_link_edit" id="edit_search_term" href="javascript:void(0)"><i class="fa fa-pencil"></i> Edit Search Term</a>
+
+			<a class="menu_link_edit dialog-trigger" id="edit_search_term" href="#" data-dialog-id="dialog2"><i class="fa fa-pencil"></i> Edit Search Term</a>
 			<div id="dialog2" title="Enter your own search term for this album" style="display:none" class="configtable">
-				<form action="editSearchTerm" method="GET" id="editSearchTerm">
+				<form action="editSearchTerm" method="GET" id="editSearchTermForm">
 					<input type="hidden" name="AlbumID" value="${album['AlbumID']}">
 					<div class="row">
 						<%
@@ -61,10 +63,11 @@
 						%>
 						<input type="text" value="${search_term}" name="SearchTerm" size="40" />
 					</div>
-					<input type="button" value="Save changes" onclick="doAjaxCall('editSearchTerm',$(this),'tabs',true);return false;" data-success="Search term updated"/>
+					<button type="submit" class="album-action-submit" data-action="editSearchTerm" data-success-msg="Search term updated">Save changes</button>
 				</form>
 			</div>
-			<a class="menu_link_edit" id="choose_specific_download" href="javascript:void(0)" onclick="getAvailableDownloads()"><i class="fa fa-search"></i> Choose Specific Download</a>
+
+			<a class="menu_link_edit dialog-trigger" id="choose_specific_download" href="#" data-dialog-id="choose_specific_download_dialog" data-action="getAvailableDownloads"><i class="fa fa-search"></i> Choose Specific Download</a>
 			<div id="choose_specific_download_dialog" title="Choose a specific download for this album" style="display:none" class="configtable">
 				<table class="display" id="downloads_table">
 					<thead>
@@ -88,7 +91,7 @@
 	<div class="table_wrapper">
 		<div id="albumheader" class="clearfix">
 			<div id="albumImg">
-				<img height="200" alt="" class="albumArt" src="artwork/album/${album['AlbumID']}">
+				<img alt="${album['AlbumTitle']} album art" class="albumArt" src="artwork/album/${album['AlbumID']}">
 			</div>
 
             <h1 id="albumname">
@@ -106,7 +109,6 @@
 					albumduration = helpers.convert_milliseconds(totalduration)
 				except:
 					albumduration = 'n/a'
-			
 			%>
 			<div class="albuminfo">
 				<div id="albumInfo"></div>
@@ -187,178 +189,290 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-	function getAlbumInfo() {
+	// Define a global object for page-specific functions to avoid polluting global scope directly
+	var AlbumPage = AlbumPage || {};
+
+	AlbumPage.search_results = []; // Moved to page-specific scope
+
+	AlbumPage.getAlbumInfo = function() {
 		var id = "${album['AlbumID']}";
 		var elem = $("#albumInfo");
+		// Assuming getInfo is defined in common.js
+		if (typeof getInfo === 'function') {
 		    getInfo(elem,id,'album');
+		} else {
+		    console.warn("getInfo function not found. Album info might not be loaded.");
 		}
+	};
 
-	function initThisPage() {
-		$('#album_chooser').click(function() {
-			$('#dialog').dialog({
-				width: 500,
-				maxHeight: 500
-			});
-			return false;
-		});
-		$('#edit_search_term').click(function() {
-			$('#dialog2').dialog({
-				width: 500,
-				maxHeight: 500
-			});
-			return false;
-		});
-		$('#refresh_artist').click(function() {
-			$('#dialog').dialog("close");
-		});
-		initActions();
-		setTimeout(function(){
-			initFancybox();
-		}, 1000);
+	AlbumPage.initDialogs = function() {
+		// General handler for opening dialogs based on data-dialog-id
+		$(document).on('click', '.dialog-trigger', function(e) {
+			e.preventDefault();
+			var dialogId = $(this).data('dialog-id');
+			var $dialog = $('#' + dialogId);
 
-		$('#track_table').dataTable({
-			"aaSorting": [],
-			"bFilter": false,
-			"bInfo": false,
-			"bPaginate": false,
-			"bDestroy": true
+			if ($dialog.length) {
+				// Specific logic for choose_specific_download_dialog before opening
+				if (dialogId === 'choose_specific_download_dialog') {
+					AlbumPage.getAvailableDownloads();
+				} else {
+					$dialog.dialog({
+						width: 500,
+						maxHeight: 500,
+						// Add close event to clear dynamic content if any
+						close: function() {
+							if (dialogId === 'downloads_table_body') {
+								$('#downloads_table_body').empty(); // Clear table content on close
+								// Re-initialize DataTable if needed on next open, or destroy it here
+							}
+						}
+					});
+				}
+			}
+		});
+
+		// Specific handler for refreshing artist from alternate releases dialog
+		$(document).on('click', '#refresh_artist_btn', function(e) {
+			e.preventDefault();
+			var $this = $(this);
+			// Assuming doAjaxCall is defined in common.js
+			if (typeof doAjaxCall === 'function') {
+				doAjaxCall($this.data('action') + '?ArtistID=' + $this.data('artist-id'), $this, true, $this.data('success-msg'));
+			}
+			$('#dialog').dialog("close"); // Close dialog after action
 		});
 	};
 
-	function getAvailableDownloads() {
-		ShowSpinner();
-		$.getJSON("choose_specific_download?AlbumID=${album['AlbumID']}", function(data) {
-			loader.remove();
-			feedback.fadeOut();
-			search_results = data
-			for( var i = 0, len = data.length; i < len; i++ ) {
-    			$('#downloads_table_body').append('<tr><td id="title"><a href="javascript:void(0)" onclick="downloadSpecificRelease('+i+')">'+data[i].title+'</a></td><td id="size"><span title='+data[i].size+'></span>'+(data[i].size / (1024*1024)).toFixed(2)+' MB</td><td id="provider">'+data[i].provider+'</td><td id="kind">'+data[i].kind+'</td><td id="matches">'+data[i].matches+'</td></tr>');
-    		}
-			$('#downloads_table').dataTable({
-				"aoColumns": [
-					null,
-					{"sType": "title-numeric"},
-					null,
-					null,
-					{"sType": "string"}
-				],
-				"aaSorting": [[ 4, 'desc']],
-				"bFilter": false,
-				"bInfo": false,
-				"bPaginate": false,
-				"bDestroy": true
+	AlbumPage.initDataTables = function() {
+		// Initialize track_table
+		$('#track_table').DataTable({ // Use .DataTable() for new versions of DataTables
+			"ordering": false, // aaSorting -> ordering
+			"searching": false, // bFilter -> searching
+			"info": false, // bInfo -> info
+			"paging": false, // bPaginate -> paging
+			"destroy": true // bDestroy -> destroy
 		});
+	};
+
+	AlbumPage.getAvailableDownloads = function() {
+		AlbumPage.ShowSpinner();
+		var albumId = "${album['AlbumID']}";
+		$.getJSON("choose_specific_download?AlbumID=" + albumId, function(data) {
+			AlbumPage.loader.remove(); // Assuming loader is attached to AlbumPage scope now
+			AlbumPage.feedback.fadeOut(); // Assuming feedback is attached to AlbumPage scope now
+			AlbumPage.search_results = data; // Store results
+
+			// Clear previous content
+			$('#downloads_table_body').empty(); 
+
+			for( var i = 0, len = data.length; i < len; i++ ) {
+    			$('#downloads_table_body').append(
+					'<tr>' +
+						'<td id="title"><a href="#" class="download-specific-release-link" data-index="' + i + '">' + data[i].title + '</a></td>' +
+						'<td id="size"><span title="'+data[i].size+'"></span>' + (data[i].size / (1024*1024)).toFixed(2) + ' MB</td>' +
+						'<td id="provider">' + data[i].provider + '</td>' +
+						'<td id="kind">' + data[i].kind + '</td>' +
+						'<td id="matches">' + data[i].matches + '</td>' +
+					'</tr>'
+				);
+    		}
+			
+			// Destroy and re-initialize the DataTable for downloads
+			if ($.fn.DataTable.isDataTable('#downloads_table')) {
+                $('#downloads_table').DataTable().destroy();
+            }
+			$('#downloads_table').DataTable({
+				"columnDefs": [ // aoColumns -> columnDefs
+					{ "orderable": false, "targets": [0, 2, 3] }, // Disable ordering for Title, Provider, Kind
+					{ "type": "title-numeric", "targets": 1 }, // sType -> type
+					{ "type": "string", "targets": 4 }
+				],
+				"order": [[ 4, 'desc']], // aaSorting -> order
+				"searching": false,
+				"info": false,
+				"paging": false,
+				"destroy": true // Important for re-initialization
+			});
+
     		$("#choose_specific_download_dialog").dialog({
     			width: "80%",
-    			maxHeight: 500
+    			maxHeight: 500,
+				modal: true // Added modal to make it more common practice
     		});
-    		return false;
 		});
-	}
+	};
 
-	function downloadSpecificRelease(i){
+	AlbumPage.downloadSpecificRelease = function(i){
+		var release = AlbumPage.search_results[i]; // Get from stored results
 
-		title = search_results[i].title
-		size = search_results[i].size
-		url = search_results[i].url
-		provider = search_results[i].provider
-		kind = search_results[i].kind
+		var url = "download_specific_release?AlbumID=${album['AlbumID']}" +
+                  "&title=" + encodeURIComponent(release.title) +
+                  "&size=" + release.size +
+                  "&url=" + encodeURIComponent(release.url) +
+                  "&provider=" + encodeURIComponent(release.provider) +
+                  "&kind=" + encodeURIComponent(release.kind);
 
-		ShowSpinner();
-		$.getJSON("download_specific_release?AlbumID=${album['AlbumID']}&title="+title+"&size="+size+"&url="+url+"&provider="+provider+"&kind=" + kind, function(data) {
-			loader.remove();
-			feedback.fadeOut();
+		AlbumPage.ShowSpinner();
+		$.getJSON(url, function(data) {
+			AlbumPage.loader.remove();
+			AlbumPage.feedback.fadeOut();
+			// Assuming refreshSubmenu is defined globally or in common.js
+			if (typeof refreshSubmenu === 'function') {
 				refreshSubmenu();
+			}
 			$("#choose_specific_download_dialog").dialog("close");
 		});
-	}
+	};
 
-	function ShowSpinner() {
-		feedback = $("#ajaxMsg");
-		update = $("#updatebar");
+	AlbumPage.ShowSpinner = function() {
+		AlbumPage.feedback = $("#ajaxMsg"); // Assign to AlbumPage scope
+		var update = $("#updatebar");
 		if ( update.is(":visible") ) {
 			var height = update.height() + 35;
-			feedback.css("bottom",height + "px");
+			AlbumPage.feedback.css("bottom",height + "px");
 		} else {
-			feedback.removeAttr("style");
-		}
-		loader = $("<i class='fa fa-refresh fa-spin'></i>");
-		feedback.prepend(loader);
-		feedback.fadeIn();
+			AlbumPage.feedback.removeAttr("style");
 		}
+		AlbumPage.loader = $("<i class='fa fa-refresh fa-spin'></i>"); // Assign to AlbumPage scope
+		AlbumPage.feedback.prepend(AlbumPage.loader);
+		AlbumPage.feedback.fadeIn();
+	};
 
-    var loadingMessage = false;
-    var spinner_active = false;
-    var loadingtext_active = false;
-    var refreshInterval;
-    var wasLoading = false;
-    var x = 0;
+    AlbumPage.loadingMessage = false;
+    AlbumPage.spinner_active = false;
+    AlbumPage.loadingtext_active = false;
+    AlbumPage.refreshInterval = null; // Initialize as null
+    AlbumPage.wasLoading = false;
+    AlbumPage.x = 0;
 
-    function checkAlbumStatus() {
+    AlbumPage.checkAlbumStatus = function() {
         $.getJSON("getAlbumjson?AlbumID=${album['AlbumID']}", function(data) {
-            if (data['Status'] == "Loading"){
-                wasLoading = true;
+            if (data['Status'] === "Loading"){
+                AlbumPage.wasLoading = true;
                 $('#albumnamelink').text(data["AlbumTitle"]);
                 $('#artistnamelink').text(data["ArtistName"]);
-                if (loadingMessage == false){
+                if (AlbumPage.loadingMessage === false){
                     $("#ajaxMsg").after( "<div id='ajaxMsg2' class='ajaxMsg'></div>" );
+                    // Assuming showArtistMsg is defined globally or in common.js
+                    if (typeof showArtistMsg === 'function') {
                         showArtistMsg("Getting album information");
-                    loadingMessage = true;
                     }
-                if (spinner_active == false){
-                    $('#albumname').prepend('<i class="fa fa-refresh fa-spin" id="albumnamespinner"></i>')
-                    spinner_active = true;
+                    AlbumPage.loadingMessage = true;
                 }
-                if (loadingtext_active == false){
-                    $('#albumname').append('<h3 id="loadingtext"><i>(Album information is currently being loaded)</i></h3>')
-                    loadingtext_active = true;
+                if (AlbumPage.spinner_active === false){
+                    $('#albumname').prepend('<i class="fa fa-refresh fa-spin" id="albumnamespinner"></i>');
+                    AlbumPage.spinner_active = true;
                 }
+                if (AlbumPage.loadingtext_active === false){
+                    $('#albumname').append('<h3 id="loadingtext"><i>(Album information is currently being loaded)</i></h3>');
+                    AlbumPage.loadingtext_active = true;
                 }
-            else{
-                if (++x === 10) {
-                    clearInterval(refreshInterval);
+            } else {
+                AlbumPage.x++;
+                if (AlbumPage.x === 10 || AlbumPage.wasLoading || $("#artistname").text().trim() === "Loading") { // Combined conditions
+                    if (AlbumPage.refreshInterval) { // Clear only if interval is set
+                        clearInterval(AlbumPage.refreshInterval);
                     }
-                var sts = $("#artistname").text().trim();
-                if (wasLoading == true || sts == "Loading"){
-                    location.reload();
-                $('#albumnamespinner').remove()
-                $('#loadingtext').remove()
-                $('#ajaxMsg2').remove()
-                spinner_active = false
-                loadingtext_active = false
-                loadingMessage = false
+                    location.reload(); // Reload the page to show updated status
                 }
+                $('#albumnamespinner').remove();
+                $('#loadingtext').remove();
+                $('#ajaxMsg2').remove();
+                AlbumPage.spinner_active = false;
+                AlbumPage.loadingtext_active = false;
+                AlbumPage.loadingMessage = false;
             }
         });
-    }
+    };
 
+    // jQuery DataTables custom sorting
     jQuery.extend( jQuery.fn.dataTableExt.oSort, {
 		"title-numeric-pre": function ( a ) {
-			var x = a.match(/title="*(-?[0-9\.]+)/)[1];
-			return parseFloat( x );
+			// Ensure it handles cases where title attribute might be missing or different
+			var match = a.match(/title="*(-?[0-9\.]+)/);
+			return match ? parseFloat( match[1] ) : -Infinity; // Return a safe default
 		},
-
 		"title-numeric-asc": function ( a, b ) {
 			return ((a < b) ? -1 : ((a > b) ? 1 : 0));
 		},
-
         "title-numeric-desc": function ( a, b ) {
             return ((a < b) ? 1 : ((a > b) ? -1 : 0));
         }
-    } );
+    });
 
 	$(document).ready(function()	{
-		getAlbumInfo();
-		initThisPage();
-        checkAlbumStatus();
-        refreshInterval = setInterval(function(){
-            checkAlbumStatus();
+		AlbumPage.getAlbumInfo();
+		AlbumPage.initDialogs(); // Initialize dialog triggers
+		AlbumPage.initDataTables(); // Initialize DataTables
+		// Do not use initActions() here unless it's strictly needed and modernized itself.
+		// setTimeout for fancybox is likely not needed if elements are ready or use delegated events.
+		// If fancybox is for dynamic content, initialize it after content is loaded.
+		// initFancybox(); // Re-evaluate if this is still needed or how it's used.
+
+        // Event handler for album actions
+        // Delegated to #subhead_menu as these links are within it
+        $('#subhead_menu').on('click', '.album-action', function(e) {
+            e.preventDefault();
+            var $this = $(this);
+            var action = $this.data('action');
+            var albumId = $this.data('album-id');
+            var artistId = $this.data('artist-id');
+            var newStatus = $this.data('new'); // Boolean 'true' or 'false'
+            var releaseId = $this.data('release-id');
+            var successMsg = $this.data('success-msg');
+
+            var url = action + '?AlbumID=' + albumId;
+            if (artistId) url += '&ArtistID=' + artistId;
+            if (newStatus !== undefined) url += '&new=' + newStatus;
+            if (releaseId) url += '&ReleaseID=' + releaseId;
+
+            // Assuming doAjaxCall is defined globally or in common.js
+            if (typeof doAjaxCall === 'function') {
+                doAjaxCall(url, $this, true, successMsg);
+            } else {
+                console.error("doAjaxCall function is not defined!");
+            }
+        });
+
+        // Event handler for specific download links within the dialog
+        // Delegated to #downloads_table_body as these links are dynamically added
+        $('#downloads_table_body').on('click', '.download-specific-release-link', function(e) {
+            e.preventDefault();
+            var index = $(this).data('index');
+            AlbumPage.downloadSpecificRelease(index);
+        });
+
+        // Event handler for form submission within dialogs
+        // Delegated to the specific form's ID
+        $('#editSearchTermForm').on('submit', function(e) {
+            e.preventDefault(); // Prevent default form submission
+            var $this = $(this);
+            var action = $this.attr('action'); // Get action from form
+            var formData = $this.serialize(); // Serialize form data
+            var successMsg = $this.find('.album-action-submit').data('success-msg');
+
+            // Assuming doAjaxCall is defined globally or in common.js
+            if (typeof doAjaxCall === 'function') {
+                // Pass form data instead of element, specify 'form' type if common.js handles it
+                doAjaxCall(action + '?' + formData, $this.find('.album-action-submit'), true, successMsg);
+            }
+            $('#dialog2').dialog("close"); // Close dialog after submission
+        });
+
+
+        // Start checking album status periodically
+        AlbumPage.checkAlbumStatus();
+        AlbumPage.refreshInterval = setInterval(function(){
+            AlbumPage.checkAlbumStatus();
         }, 3000);
 	});
 

data/interfaces/default/artist.html

@@ -8,29 +8,33 @@
 <%def name="headerIncludes()">
 	<div id="subhead_container">
 		<div id="subhead_menu">
-			<a id="menu_link_refresh" onclick="doSimpleAjaxCall('refreshArtist?ArtistID=${artist['ArtistID']}')" href="javascript:void(0)"><i class="fa fa-refresh"></i> Refresh Artist</a>
+			<a id="menu_link_refresh" href="#" class="artist-action" data-action="refreshArtist" data-artist-id="${artist['ArtistID']}" data-success-msg="${artist['ArtistName']} refreshed"><i class="fa fa-refresh"></i> Refresh Artist</a>
 			<a id="menu_link_delete" href="deleteArtist?ArtistID=${artist['ArtistID']}"><i class="fa fa-trash-o"></i> Delete Artist</a>
-			<a id="menu_link_scan" onclick="doAjaxCall('scanArtist?ArtistID=${artist['ArtistID']}', $(this)),'table'" href="javascript:void(0)" data-success="'${artist['ArtistName']}' was scanned"><i class="fa fa-refresh"></i> Scan Artist</a>
+			<a id="menu_link_scan" href="#" class="artist-action" data-action="scanArtist" data-artist-id="${artist['ArtistID']}" data-success-msg="'${artist['ArtistName']}' was scanned"><i class="fa fa-refresh"></i> Scan Artist</a>
+			
 			%if artist['Status'] == 'Paused':
-				<a id="menu_link_resume" href="javascript:void(0)" onclick="doAjaxCall('resumeArtist?ArtistID=${artist['ArtistID']}',$(this),true)" data-success="${artist['ArtistName']} resumed"><i class="fa fa-play"></i> Resume Artist</a>
+				<a id="menu_link_resume" href="#" class="artist-action" data-action="resumeArtist" data-artist-id="${artist['ArtistID']}" data-success-msg="${artist['ArtistName']} resumed"><i class="fa fa-play"></i> Resume Artist</a>
 			%else:
-				<a id="menu_link_pauze" href="javascript:void(0)" onclick="doAjaxCall('pauseArtist?ArtistID=${artist['ArtistID']}',$(this),true)" data-success="${artist['ArtistName']} paused"><i class="fa fa-pause"></i> Pause Artist</a>
+				<a id="menu_link_pauze" href="#" class="artist-action" data-action="pauseArtist" data-artist-id="${artist['ArtistID']}" data-success-msg="${artist['ArtistName']} paused"><i class="fa fa-pause"></i> Pause Artist</a>
 			%endif
+			
 			%if artist['IncludeExtras']:
-				<a id="menu_link_removeextra" href="javascript:void(0)" onclick="doAjaxCall('removeExtras?ArtistID=${artist['ArtistID']}&ArtistName=${artist['ArtistName']}',$(this),'submenu&table')" data-success="Extras removed for ${artist['ArtistName']}"><i class="fa fa-minus"></i> Remove Extras</a>
-				<a class="menu_link_edit" id="menu_link_modifyextra" href="javascript:void(0)"><i class="fa fa-pencil"></i> Modify Extras</a>
+				<a id="menu_link_removeextra" href="#" class="artist-action" data-action="removeExtras" data-artist-id="${artist['ArtistID']}" data-artist-name="${artist['ArtistName']}" data-success-msg="Extras removed for ${artist['ArtistName']}"><i class="fa fa-minus"></i> Remove Extras</a>
+				<a class="menu_link_edit dialog-trigger" id="menu_link_modifyextra" href="#" data-dialog-id="dialog"><i class="fa fa-pencil"></i> Modify Extras</a>
 			%else:
-				<a id="menu_link_getextra" href="javascript:void(0)"><i class="fa fa-plus"></i> Get Extras</a>
+				<a id="menu_link_getextra" href="#" class="dialog-trigger" data-dialog-id="dialog"><i class="fa fa-plus"></i> Get Extras</a>
 			%endif
+			
 			<div id="dialog" title="Choose Which Extras to Fetch" style="display:none" class="configtable">
-					<form action="getExtras" method="get" class="form">
+				<form action="getExtras" method="get" id="getExtrasForm">
 					<input type="hidden" name="ArtistID" value="${artist['ArtistID']}">
 					<input type="hidden" name="newstyle" value="true">
 					%for extra in extras:
-							<input type="checkbox" id="${extra}" name="${extra}" value="1" ${extras[extra]} />${string.capwords(extra)}<br>
+						<input type="checkbox" id="extra_${extra}" name="${extra}" value="1" ${extras[extra]} />
+						<label for="extra_${extra}">${string.capwords(extra)}</label><br>
 					%endfor
 					<br>
-						<input id="submit" type="submit" value="Fetch Extras">
+					<button type="submit">Fetch Extras</button>
 				</form>
 			</div>
 		</div>
@@ -41,7 +45,7 @@
 <%def name="body()">
 	<div id="artistheader" class="clearfix">
 		<div id="artistImg">
-			<img id="artistImage" class="albumArt" alt="" src="artwork/artist/${artist['ArtistID']}"/>
+			<img id="artistImage" class="albumArt" alt="${artist['ArtistName']} artist image" src="artwork/artist/${artist['ArtistID']}"/>
 		</div>
 		<h1 id="artistname">
 			<a href="http://musicbrainz.org/artist/${artist['ArtistID']}" id="artistnamelink">${artist['ArtistName']}</a>
@@ -49,10 +53,10 @@
 		<div id="artistBio"></div>
 	</div>
 	<ul id="artistCalendar" style="display:none;"></ul>
-	<form action="markAlbums" method="get" id="markAlbums">
+	<form action="markAlbums" method="get" id="markAlbumsForm">
 	<input type="hidden" name="ArtistID" value=${artist['ArtistID']}>
 	<div id="markalbum">Mark selected albums as
-		<select name="action" onChange="doAjaxCall('markAlbums',$(this),'table',true);" data-error="You didn't select any albums">
+		<select name="action" id="markAlbumsActionSelect">
   			<option disabled="disabled" selected="selected">Choose...</option>
   			<option value="Wanted">Wanted</option>
   			<option value="WantedNew">Wanted (new only)</option>
@@ -60,12 +64,12 @@
 			<option value="Ignored">Ignored</option>
   			<option value="Downloaded">Downloaded</option>
 		</select>
-		<input type="hidden" value="Go">
+		<button type="submit" style="display:none;"></button> <%-- Hidden submit to allow form submission via JS --%>
 	</div>
 	<table class="display" id="album_table">
 		<thead>
 			<tr>
-				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
+				<th id="select"><input type="checkbox" class="select-all-checkbox" aria-label="Select all albums" /></th>
 				<th id="albumart"></th>
 				<th id="albumname">Name</th>
 				<th id="reldate">Date</th>
@@ -121,24 +125,24 @@
 
 			%>
 			<tr class="grade${grade}">
-				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
-				<td id="albumart"><img class="albumArtnostretch" id="${album['AlbumID']}" src="artwork/thumbs/album/${album['AlbumID']}" height="64" width="64"></td>
+				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox album-checkbox" /></td>
+				<td id="albumart"><img class="albumArtnostretch" id="thumb_${album['AlbumID']}" alt="${album['AlbumTitle']} thumbnail" src="artwork/thumbs/album/${album['AlbumID']}"></td>
 				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
 				<td id="reldate">${album['ReleaseDate']}</td>
 				<td id="type">${album['Type']}</td>
 				<td id="score">${album['CriticScore']}/${album['UserScore']}</td>
 				<td id="status">${album['Status']}
 				%if album['Status'] == 'Skipped' or album['Status'] == 'Ignored':
-					[<a href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}',$(this),'table')" data-success="'${album['AlbumTitle']}' added to Wanted list">want</a>]
+					[<a href="#" class="album-action-inline" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-success-msg="'${album['AlbumTitle']}' added to Wanted list">want</a>]
 				%elif (album['Status'] == 'Wanted' or album['Status'] == 'Wanted Lossless'):
-                    [<a href="javascript:void(0)" onclick="doAjaxCall('unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}',$(this),'table')" data-success="'${album['AlbumTitle']}' skipped">skip</a>] [<a href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}', $(this),'table')" data-success="Trying to download'${album['AlbumTitle']}'" title="Search if available for download">search</a>]
+                    [<a href="#" class="album-action-inline" data-action="unqueueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-success-msg="'${album['AlbumTitle']}' skipped">skip</a>] [<a href="#" class="album-action-inline" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-success-msg="Trying to download'${album['AlbumTitle']}'" title="Search if available for download">search</a>]
 				%else:
-					[<a href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}', $(this),'table')" data-success="Retrying the same version of '${album['AlbumTitle']}'" title="Retry the same download again">retry</a>][<a href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True', $(this),'table')" title="Try a new download, skipping all previously tried nzbs"  data-success="Downloading new version for '${album['AlbumTitle']}'" data-success="Looking for a new version of '${album['AlbumTitle']}'">new</a>]
+					[<a href="#" class="album-action-inline" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-success-msg="Retrying the same version of '${album['AlbumTitle']}'" title="Retry the same download again">retry</a>][<a href="#" class="album-action-inline" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-new="True" title="Try a new download, skipping all previously tried nzbs"  data-success-msg="Looking for a new version of '${album['AlbumTitle']}'">new</a>]
 				%endif
 				%if albumformat in lossy_formats and album['Status'] == 'Skipped':
-					[<a id="wantlossless" href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&lossless=True', $(this),'table')" data-success="Lossless version of '${album['AlbumTitle']}' added to queue">want lossless</a>]
+					[<a id="wantlossless" href="#" class="album-action-inline" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-lossless="True" data-success-msg="Lossless version of '${album['AlbumTitle']}' added to queue">want lossless</a>]
 				%elif albumformat in lossy_formats and (album['Status'] == 'Snatched' or album['Status'] == 'Downloaded'):
-					[<a id="wantlossless" href="javascript:void(0)" onclick="doAjaxCall('queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&lossless=True', $(this),'table')" data-success="Retrying the same lossless version of '${album['AlbumTitle']}'">retry lossless</a>]
+					[<a id="wantlossless" href="#" class="album-action-inline" data-action="queueAlbum" data-album-id="${album['AlbumID']}" data-artist-id="${album['ArtistID']}" data-lossless="True" data-success-msg="Retrying the same lossless version of '${album['AlbumTitle']}'">retry lossless</a>]
 				%endif
 				</td>
 				<td id="have"><span title="${percent}"><span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
@@ -152,177 +156,313 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 
 	<script>
-	function getArtistBio() {
+	// Define a global object for page-specific functions to avoid polluting global scope directly
+	var ArtistPage = ArtistPage || {};
+
+	ArtistPage.getArtistBio = function() {
 		var id = "${artist['ArtistID']}";
 		var elem = $("#artistBio");
+		// Assuming getInfo is defined in common.js
+		if (typeof getInfo === 'function') {
 		    getInfo(elem,id,'artist');
+		} else {
+		    console.warn("getInfo function not found. Artist bio might not be loaded.");
 		}
+	};
 
-	<%
-    if headphones.CONFIG.SONGKICK_FILTER_ENABLED:
-        songkick_filter_enabled = "true"
-    else:
-        songkick_filter_enabled = "false"
+	ArtistPage.initDialogs = function() {
+		// General handler for opening dialogs based on data-dialog-id
+		$(document).on('click', '.dialog-trigger', function(e) {
+			e.preventDefault();
+			var dialogId = $(this).data('dialog-id');
+			var $dialog = $('#' + dialogId);
 
-    if not headphones.CONFIG.SONGKICK_LOCATION:
-    	songkick_location = "none"
-    else:
-        songkick_location = headphones.CONFIG.SONGKICK_LOCATION
+			if ($dialog.length) {
+				$dialog.dialog({
+					width: 500,
+					maxHeight: 500,
+					modal: true // Added modal for better UX
+				});
+			}
+		});
 
-    if headphones.CONFIG.SONGKICK_ENABLED:
-        songkick_enabled = "true"
-    else:
-        songkick_enabled = "false"
+		// Submit handler for getExtrasForm
+		$('#getExtrasForm').on('submit', function(e) {
+			e.preventDefault();
+			var $this = $(this);
+			var action = $this.attr('action');
+			var formData = $this.serialize();
+			var artistID = $this.find('input[name="ArtistID"]').val(); // Get ArtistID
+			var successMsg = "Extras fetch initiated for " + "${artist['ArtistName']}"; // Dynamic success message
 			
-	%>
-	function getArtistsCalendar() {
+			if (typeof doAjaxCall === 'function') {
+				doAjaxCall(action + '?' + formData, $this, true, successMsg);
+			} else {
+				console.error("doAjaxCall function is not defined!");
+			}
+			$('#dialog').dialog("close");
+		});
+	};
+
+	ArtistPage.getArtistsCalendar = function() {
 		var template, calendarDomNode;
 
 		calendarDomNode = $("#artistCalendar");
-
 		template = '<li><a target="_blank" href="URI"><span class="sk-name">NAME</span><span class="sk-location">LOC</span></a></li>';
 
-		$.getJSON("https://api.songkick.com/api/3.0/artists/mbid:${artist['ArtistID']}/calendar.json?apikey=${headphones.CONFIG.SONGKICK_APIKEY}&jsoncallback=?",
+		// Python variables are injected directly into this JS block
+		var songkick_filter_enabled = ${'true' if headphones.CONFIG.SONGKICK_FILTER_ENABLED else 'false'};
+		var songkick_location = ${'"{}"'.format(headphones.CONFIG.SONGKICK_LOCATION) if headphones.CONFIG.SONGKICK_LOCATION else 'null'};
+		var songkick_enabled = ${'true' if headphones.CONFIG.SONGKICK_ENABLED else 'false'};
+		var songkick_apikey = "${headphones.CONFIG.SONGKICK_APIKEY}";
+
+		if (!songkick_enabled || !songkick_apikey) {
+			console.log("Songkick is not enabled or API key is missing.");
+			return;
+		}
+
+		$.getJSON("https://api.songkick.com/api/3.0/artists/mbid:${artist['ArtistID']}/calendar.json?apikey=" + songkick_apikey + "&jsoncallback=?",
 			function(data){
-				if (data['resultsPage'].totalEntries >= 1) {
-                    if (${songkick_filter_enabled}) {
-                        data.resultsPage.results.event = $.grep(data.resultsPage.results.event, function(element,index){
-                    	    return element.venue.metroArea.id == ${songkick_location};
+				if (data['resultsPage'] && data['resultsPage'].totalEntries >= 1 && data['resultsPage'].results && data['resultsPage'].results.event) {
+                    var events = data.resultsPage.results.event;
+                    if (songkick_filter_enabled && songkick_location) {
+                        events = $.grep(events, function(element,index){
+                    	    return element.venue && element.venue.metroArea && element.venue.metroArea.id == songkick_location;
                     	});
                     }
 
-                    if (data.resultsPage.results.event.length > 0) {
-						var tourDate;
-
+                    if (events.length > 0) {
 						calendarDomNode.show();
 						$("#artistImg").addClass('on-tour');
 
-						jQuery.each(data.resultsPage.results.event, function(i, event) {
-							tourDate = template;
-							tourDate = tourDate.replace('URI',event.uri);
-							tourDate = tourDate.replace('NAME',event.displayName);
-							tourDate = tourDate.replace('LOC',event.location.city);
-
+						$.each(events, function(i, event) {
+							var tourDate = template;
+							tourDate = tourDate.replace('URI', event.uri || '#');
+							tourDate = tourDate.replace('NAME', event.displayName || 'N/A');
+							tourDate = tourDate.replace('LOC', (event.location && event.location.city) ? event.location.city : 'N/A');
 							calendarDomNode.append(tourDate);
 						});
 
 						calendarDomNode.append('<li><img src="interfaces/default/images/songkick.png" alt="concerts by songkick" class="sk-logo" /></li>');
 
-						$(function() {
-						  $("#artistCalendar").each(function() {
+						// Handle "More..." button logic for calendar
+						calendarDomNode.each(function() {
 							$("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
 							$("li:nth-child(5)", this).after("<br><li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
 						});
-						  $("li.more").on("click", 'a', function() {
+						$("li.more").on("click", 'a', function(e) {
+							e.preventDefault(); // Prevent default link behavior
 							var li = $(this).parents("li:first");
 							li.parent().children().show();
 							li.remove();
-							return false;
-						  });
 						});
 					}
 				}
-			}
-		);
-	}
+			}).fail(function(jqXHR, textStatus, errorThrown) {
+                console.error("Songkick API call failed: ", textStatus, errorThrown);
+            });
+	};
 
-	var loadingMessage = false;
-	var spinner_active = false;
-	var loadingtext_active = false;
+	ArtistPage.loadingMessage = false;
+	ArtistPage.spinner_active = false;
+	ArtistPage.loadingtext_active = false;
+	ArtistPage.refreshInterval = null; // Initialize as null
 
-	function checkArtistStatus() {
+	ArtistPage.checkArtistStatus = function() {
 		$.getJSON("getArtistjson?ArtistID=${artist['ArtistID']}", function(data) {
-		    if (data['Status'] == "Loading"){
-				refreshTable();
+		    if (data['Status'] === "Loading"){
+				// Assuming refreshTable() is defined globally or in common.js and it updates the album_table
+				if (typeof refreshTable === 'function') {
+					refreshTable(); // Refresh the album table to show loading states if implemented there
+				}
+
 				$('#artistnamelink').text(data["ArtistName"]);
-				if (loadingMessage == false){
+				if (ArtistPage.loadingMessage === false){
 				    $("#ajaxMsg").after( "<div id='ajaxMsg2' class='ajaxMsg'></div>" );
+					if (typeof showArtistMsg === 'function') {
 						showArtistMsg("Getting artist information");
-					loadingMessage = true;
 					}
-				if (spinner_active == false){
-					$('#artistname').prepend('<i class="fa fa-refresh fa-spin" id="artistnamespinner"></i>')
-					spinner_active = true;
+					ArtistPage.loadingMessage = true;
 				}
-				if (loadingtext_active == false){
-					$('#artistname').append('<h3 id="loadingtext"><i>(Album information for this artist is currently being loaded)</i></h3>')
-					loadingtext_active = true;
+				if (ArtistPage.spinner_active === false){
+					$('#artistname').prepend('<i class="fa fa-refresh fa-spin" id="artistnamespinner"></i>');
+					ArtistPage.spinner_active = true;
 				}
+				if (ArtistPage.loadingtext_active === false){
+					$('#artistname').append('<h3 id="loadingtext"><i>(Album information for this artist is currently being loaded)</i></h3>');
+					ArtistPage.loadingtext_active = true;
 				}
-		    else{
-		    	$('#artistnamespinner').remove()
-		    	$('#loadingtext').remove()
-		    	$('#ajaxMsg2').remove()
-		    	spinner_active = false
-		    	loadingtext_active = false
-		    	loadingMessage = false
+		    } else {
+				// Only reload if previously loading to avoid unnecessary refreshes
+				if (ArtistPage.spinner_active || ArtistPage.loadingtext_active || ArtistPage.loadingMessage) {
+					location.reload(); // Reload the page to show updated status once loading is complete
 				}
+		    	$('#artistnamespinner').remove();
+		    	$('#loadingtext').remove();
+		    	$('#ajaxMsg2').remove();
+		    	ArtistPage.spinner_active = false;
+		    	ArtistPage.loadingtext_active = false;
+		    	ArtistPage.loadingMessage = false;
+		    }
+		  }).fail(function(jqXHR, textStatus, errorThrown) {
+                console.error("Error checking artist status: ", textStatus, errorThrown);
             });
-	}
+	};
 
-	function initThisPage() {
-		$('#menu_link_getextra').click(function(event) {
-			$('#dialog').dialog();
-			event.preventDefault();
-		});
-		$('#menu_link_modifyextra').click(function(event) {
-			$('#dialog').dialog();
-			event.preventDefault();
-		});
-		$('#album_table').dataTable({
-			"bDestroy": true,
-			"aoColumns": [
-				null,
-				null,
-				null,
-				{ "sType": "date" },
-				null,
-				null,
-				null,
-				{ "sType": "title-numeric"},
-				null,
-				null
+	ArtistPage.initDataTables = function() {
+		$('#album_table').DataTable({
+			"destroy": true, // bDestroy -> destroy
+			"columns": [ // aoColumns -> columns
+				null, null, null,
+				{ "type": "date" }, // sType -> type
+				null, null, null,
+				{ "type": "title-numeric"},
+				null, null
 			],
-			"aoColumnDefs": [
-			          { 'bSortable': false, 'aTargets': [ 0,1 ] }
+			"columnDefs": [ // aoColumnDefs -> columnDefs
+			    { 'orderable': false, 'targets': [ 0, 1 ] } // bSortable -> orderable, aTargets -> targets
 			],
-			"bStateSave": true,
-			"oLanguage": {
-				"sLengthMenu":"Show _MENU_ albums per page",
-				"sEmptyTable": "No album information available",
-				"sInfo":"Showing _TOTAL_ albums",
-				"sInfoEmpty":"Showing 0 to 0 of 0 albums",
-				"sInfoFiltered":"(filtered from _MAX_ total albums)",
-				"sSearch": ""},
-			"bPaginate": false,
-			"aaSorting": [[4, 'asc'],[3,'desc']]
-
+			"stateSave": true, // bStateSave -> stateSave
+			"language": { // oLanguage -> language
+				"lengthMenu":"Show _MENU_ albums per page",
+				"emptyTable": "No album information available",
+				"info":"Showing _TOTAL_ albums",
+				"infoEmpty":"Showing 0 to 0 of 0 albums",
+				"infoFiltered":"(filtered from _MAX_ total albums)",
+				"search": "" // No need for "Search: " label if using custom icon
+			},
+			"paging": false, // bPaginate -> paging
+			"order": [[4, 'asc'],[3,'desc']] // aaSorting -> order
 		});
+		// Assuming resetFilters is defined globally or in common.js
+		if (typeof resetFilters === 'function') {
 			resetFilters("albums");
-		setTimeout(function(){
-			initFancybox();
-		},1500);
 		}
+	};
 
 	$(document).ready(function() {
-		initActions();
-		initThisPage();
-		getArtistBio();
-		if( ${songkick_enabled} ){
-      		getArtistsCalendar();
+		// Init common actions if they are not already handled in base.html document.ready
+		// if (typeof initActions === 'function') {
+		// 	initActions();
+		// }
+
+		ArtistPage.getArtistBio();
+		ArtistPage.initDialogs();
+		ArtistPage.initDataTables();
+
+		// Songkick Calendar
+		// The python config values are injected above, so they are available here.
+		if( ${'true' if headphones.CONFIG.SONGKICK_ENABLED else 'false'} ){
+      		ArtistPage.getArtistsCalendar();
+    	}
+
+		// Artist Status Polling
+    	ArtistPage.checkArtistStatus(); // Initial check
+    	ArtistPage.refreshInterval = setInterval(function(){
+    		ArtistPage.checkArtistStatus();
+		}, 3000); // Increased interval to 3 seconds, was 1.5s which is very frequent
+
+        // Event handler for artist actions in subhead_menu
+        $('#subhead_menu').on('click', '.artist-action', function(e) {
+            e.preventDefault();
+            var $this = $(this);
+            var action = $this.data('action');
+            var artistId = $this.data('artist-id');
+            var artistName = $this.data('artist-name'); // For removeExtras
+            var successMsg = $this.data('success-msg');
+
+            var url = action + '?ArtistID=' + artistId;
+            if (artistName) url += '&ArtistName=' + encodeURIComponent(artistName);
+
+            if (typeof doAjaxCall === 'function') {
+                doAjaxCall(url, $this, true, successMsg); // 'true' for refreshing content, if common.js supports it
+            } else if (typeof doSimpleAjaxCall === 'function' && action === 'refreshArtist') {
+				// Fallback for refreshArtist if doAjaxCall isn't what's expected for it
+				doSimpleAjaxCall(url);
+			} else {
+                console.error("doAjaxCall or doSimpleAjaxCall function is not defined!");
             }
-    	checkArtistStatus();
-    	setInterval(function(){
-    		checkArtistStatus();
-		}, 1500);
         });
 
+        // Event handler for album actions within the table
+        // Delegated to #album_table body as these links are dynamically added
+        $('#album_table tbody').on('click', '.album-action-inline', function(e) {
+            e.preventDefault();
+            var $this = $(this);
+            var action = $this.data('action');
+            var albumId = $this.data('album-id');
+            var artistId = $this.data('artist-id');
+            var newStatus = $this.data('new'); // Boolean 'true' or 'false'
+            var lossless = $this.data('lossless'); // Boolean 'true' or 'false'
+            var successMsg = $this.data('success-msg');
+
+            var url = action + '?AlbumID=' + albumId + '&ArtistID=' + artistId;
+            if (newStatus !== undefined) url += '&new=' + newStatus;
+            if (lossless !== undefined) url += '&lossless=' + lossless;
+
+            if (typeof doAjaxCall === 'function') {
+                doAjaxCall(url, $this, 'table', successMsg); // 'table' for refreshing content, if common.js supports it
+            } else {
+                console.error("doAjaxCall function is not defined!");
+            }
+        });
+
+		// "Mark selected albums as" dropdown change
+		$('#markAlbumsActionSelect').on('change', function() {
+            var selectedAction = $(this).val();
+            if (selectedAction) {
+                // Manually trigger form submission with AJAX
+                var $form = $('#markAlbumsForm');
+                var formData = $form.serialize(); // Includes ArtistID and action
+
+                // Get selected album IDs
+                var selectedAlbumIDs = $('.album-checkbox:checked').map(function() {
+                    return $(this).attr('name'); // AlbumID is the name attribute
+                }).get();
+
+                if (selectedAlbumIDs.length === 0) {
+                    // Show error message as per original data-error
+                    if (typeof doAjaxCall === 'function') { // Assuming doAjaxCall can show errors
+                        doAjaxCall(null, $(this), null, null, 'You didn\'t select any albums');
+                    } else {
+                        alert('You didn\'t select any albums');
+                    }
+                    $(this).val('Choose...'); // Reset dropdown
+                    return;
+                }
+                
+                // Construct the URL for markAlbums action
+                var url = $form.attr('action') + '?' + formData;
+                // Add selected album IDs as a comma-separated list or multiple parameters
+                $.each(selectedAlbumIDs, function(index, id) {
+                    url += '&AlbumID=' + id; // Append each selected AlbumID
+                });
+                
+                // Assuming doAjaxCall is defined in common.js
+                if (typeof doAjaxCall === 'function') {
+                    // Using null for the element as it's a general form submission
+                    doAjaxCall(url, null, 'table', 'Albums marked successfully'); // 'table' for refreshing, success message
+                } else {
+                    console.error("doAjaxCall function is not defined!");
+                }
+                $(this).val('Choose...'); // Reset dropdown after action
+            }
+        });
+
+        // "Select all" checkbox functionality
+        $('.select-all-checkbox').on('change', function() {
+            $('.album-checkbox').prop('checked', $(this).prop('checked'));
+        });
+
+	});
 	</script>
 </%def>

data/interfaces/default/base.html

@@ -2,43 +2,37 @@
 	import headphones
 	from headphones import version
 %>
-<!doctype html>
-<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
-<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
-<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
-<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <title>Headphones - ${title}</title>
     <meta name="description" content="Headphones 'default' interface - made by Elmar Kouwenhoven">
     <meta name="author" content="Elmar Kouwenhoven">
 
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<link rel="shortcut icon" href="images/favicon.ico">
+    <link rel="icon" href="images/favicon.ico">
     <link rel="apple-touch-icon" href="images/headphoneslogo.png">
 
     <link rel="stylesheet" href="css/jquery-ui.min.css">
-
     <link rel="stylesheet" href="interfaces/default/css/style.css">
     <link rel="stylesheet" href="interfaces/default/css/font-awesome.min.css">
     ${next.headIncludes()}
-
-	<script src="js/libs/modernizr-2.8.3.min.js"></script>
 </head>
 <body>
     <div id="container">
         <div id="ajaxMsg" class="ajaxMsg"></div>
+
         % if headphones.CONFIG.CHECK_GITHUB and not headphones.CURRENT_VERSION:
             <div id="updatebar">
                 You're running an unknown version of Headphones. <a href="update">Update</a> or
-				<a href="javascript:void(0)" onclick="$('#updatebar').slideUp('slow');">Close</a>
+                <a href="#" class="close-updatebar">Close</a>
             </div>
         % elif headphones.CONFIG.CHECK_GITHUB and headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.COMMITS_BEHIND > 0 and headphones.INSTALL_TYPE != 'win':
             <div id="updatebar">
-				A <a href="https://github.com/${headphones.CONFIG.GIT_USER}/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or <a href="javascript:void(0)" onclick="$('#updatebar').slideUp('slow');">Close</a>
+                A <a href="https://github.com/${headphones.CONFIG.GIT_USER}/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or <a href="#" class="close-updatebar">Close</a>
             </div>
         % endif
 
@@ -47,36 +41,37 @@
                 <div id="logo">
                     <a href="home"><img src="images/headphoneslogo.png" alt="headphones" width="64"></a>
                 </div>
-			<ul id="nav">
+                <nav id="nav">
+                    <ul>
                         <li><a href="upcoming">wanted</a></li>
                         <li><a href="extras">extras</a></li>
                         <li><a href="manage">manage</a></li>
                         <li><a href="history">history</a></li>
                         <li><a href="logs">logs</a></li>
-				<li><a href="config" class="config"><i class="fa fa-gear fa-lg"></i></a></li>
+                        <li><a href="config" class="config" aria-label="Configuration"><i class="fa fa-gear fa-lg"></i></a></li>
                     </ul>
+                </nav>
                 <div id="searchbar">
                     <form action="search" method="get">
-					<input type="text" value="" placeholder="Search" onfocus="if(this.value==this.defaultValue) this.value='';" name="name" />
+                        <input type="text" value="" placeholder="Search" name="name" id="search-input" />
                         <i class='fa fa-search mini-icon'></i>
                         <select name="type" id="search_type">
                             <option value="artist">Artist</option>
                             <option value="album">Album</option>
                             <option value="series">Series</option>
                         </select>
-					<input type="submit" value="Search"/>
+                        <button type="submit">Search</button>
                     </form>
                 </div>
-
             </div>
         </header>
 
-		<div id="main" class="main">
+        <main id="main" class="main">
             <div id="subhead">
                 ${next.headerIncludes()}
             </div>
             ${next.body()}
-		</div>
+        </main>
 
         <footer>
             <div id="info">
@@ -92,7 +87,7 @@
                 <small>
                     <a href="shutdown"><i class="fa fa-power-off"></i> Shutdown</a> |
                     <a href="restart"><i class="fa fa-power-off"></i> Restart</a> |
-				<a href="javascript:void(0)" onclick="doAjaxCall('checkGithub',$(this))" data-success="Checking for update successful" data-error="Error checking for update"><i class="fa fa-refresh"></i> Check for new version</a>
+                    <a href="#" class="check-update-btn" data-success="Checking for update successful" data-error="Error checking for update"><i class="fa fa-refresh"></i> Check for new version</a>
                 </small>
             </div>
             <div id="version">
@@ -105,38 +100,83 @@
                 %endif
             </div>
         </footer>
-		<a href="#main" id="toTop"><i class="fa fa-angle-double-up"></i> <span>Back to top</span></a>
+        <a href="#main" id="toTop" aria-label="Back to top"><i class="fa fa-angle-double-up"></i> <span>Back to top</span></a>
     </div>
 
-	<script src="js/libs/jquery-1.11.1.min.js"></script>
+    <script src="js/libs/jquery-3.7.1.min.js"></script>
     <script src="js/libs/jquery-ui.min.js"></script>
     <script src="js/common.js"></script>
 
     ${next.javascriptIncludes()}
 
     <script src="interfaces/default/js/script.js"></script>
-	<!-- This template is made by Elmar Kouwenhoven -->
 
-	<!-- Persist search type using local storage -->
     <script type="text/javascript">
-
         $(document).ready(function() {
+            // Focus on the first form input that's not hidden
             $('form:first *:input[type!=hidden]:first').focus();
-	        try{
+
+            // Persist search type using local storage
+            try {
                 var type = window.localStorage.getItem('search_type') || "artist";
                 $("#search_type").val(type);
-	        } catch(e) {
+            } catch (e) {
+                console.error("Local Storage not available or error accessing it:", e);
             }
+
+            // Modernized event listener for closing update bar (delegated)
+            // Uses event delegation for robustness: attaches handler to parent (#container)
+            // which listens for clicks on elements with class .close-updatebar
+            $('#container').on('click', '.close-updatebar', function(e) {
+                e.preventDefault(); // Prevent default link behavior
+                $(this).closest('#updatebar').slideUp('slow');
             });
 
-	    $('select[id=search_type]').change(function() {
-	        var type = $(this).val()
-	        try{
+            // Modernized event listener for "Check for new version" (delegated)
+            $('#actions').on('click', '.check-update-btn', function(e) {
+                e.preventDefault(); // Prevent default link behavior
+                // Assuming doAjaxCall is defined in common.js or script.js
+                doAjaxCall('checkGithub', $(this));
+            });
+
+            // Event listener for search type change
+            $('select[id=search_type]').on('change', function() {
+                var type = $(this).val();
+                try {
                     window.localStorage.setItem('search_type', type);
-	        } catch(e) {
+                } catch (e) {
+                    console.error("Local Storage not available or error accessing it:", e);
                 }
             });
 
+            // Handle placeholder text for search input (no longer needs onfocus in HTML)
+            $('#search-input').on('focus', function() {
+                if (this.value === this.defaultValue) {
+                    this.value = '';
+                }
+            }).on('blur', function() {
+                if (this.value === '') {
+                    this.value = this.defaultValue;
+                }
+            });
+
+            // "Back to top" functionality
+            // Show/hide #toTop button based on scroll position
+            $(window).scroll(function() {
+                if ($(this).scrollTop() > 100) { // Show after scrolling 100px
+                    $('#toTop').fadeIn();
+                } else {
+                    $('#toTop').fadeOut();
+                }
+            });
+
+            // Smooth scroll to top when button is clicked
+            $('#toTop').click(function(e) {
+                e.preventDefault();
+                $('html, body').animate({scrollTop : 0}, 800);
+                return false;
+            });
+        });
     </script>
 </body>
 </html>

data/interfaces/default/extras.html

@@ -1,4 +1,5 @@
 <%inherit file="base.html" />
+
 <%def name="body()">
 	<div class="title">
 		<h1 class="clearfix"><i class="fa fa-users"></i> Artists You Might Like</h1>
@@ -7,9 +8,54 @@
 		<div class="cloudtag">
 			<ul id="cloud">
 			%for artist in cloudlist:
-				<li><a href="addArtist?artistid=${artist['ArtistID']}" class="tag${artist['Count']}">${artist['ArtistName']}</a></li>
+				<%--
+					Modified the anchor tag to use data attributes for AJAX
+					and href="#" to prevent default navigation.
+				--%>
+				<li>
+					<a href="#" class="tag${artist['Count']} add-artist-link"
+					   data-artist-id="${artist['ArtistID']}"
+					   data-artist-name="${artist['ArtistName']}">
+						${artist['ArtistName']}
+					</a>
+				</li>
 			%endfor
 			</ul>
 		</div>
 	</div>
 </%def>
+
+<%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
+
+	<script>
+		$(document).ready(function() {
+			// Delegated event handler for 'add-artist-link' class
+			$('#cloud').on('click', '.add-artist-link', function(e) {
+				e.preventDefault(); // Prevent the default link behavior (page navigation)
+
+				var $this = $(this);
+				var artistId = $this.data('artist-id');
+				var artistName = $this.data('artist-name'); // Get artist name for feedback
+
+				// Assuming 'doAjaxCall' is available globally (from common.js or similar)
+				// and handles displaying success/error messages.
+				if (typeof doAjaxCall === 'function') {
+					doAjaxCall('addArtist?artistid=' + artistId, $this, 'simple',
+						'Artist "' + artistName + '" added successfully!');
+
+					// Optionally, fade out or remove the artist from the list after adding
+					$this.closest('li').fadeOut(500, function() {
+						$(this).remove();
+					});
+
+				} else {
+					console.error("doAjaxCall function is not defined. Cannot add artist asynchronously.");
+					// Fallback: allow the default link behavior if AJAX is not possible
+					// window.location.href = 'addArtist?artistid=' + artistId;
+					// Or just log an error and do nothing if page reload is not desired.
+				}
+			});
+		});
+	</script>
+</%def>

data/interfaces/default/index.html

@@ -7,11 +7,11 @@
 	<table class="display" id="artist_table">
 		<thead>
 			<tr>
-				<th id="albumart"></th>
-				<th id="name">Artist Name</th>
-				<th id="status">Status</th>
-				<th id="album">Latest Release</th>
-				<th id="have">Have</th>
+				<th class="column-albumart"></th> <%-- Changed id to class --%>
+				<th class="column-name">Artist Name</th>
+				<th class="column-status">Status</th>
+				<th class="column-album">Latest Release</th>
+				<th class="column-have">Have</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -20,14 +20,52 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
+	<style>
+		/* Basic CSS for album art thumbnail */
+		.albumArt-thumb {
+			height: 50px;
+			width: 50px;
+			object-fit: cover; /* Ensures image covers the area without distortion */
+			vertical-align: middle;
+		}
+
+		/* Styling for the progress bar */
+		.progress-container {
+			background-color: #eee;
+			border-radius: 5px;
+			height: 15px; /* Adjust height as needed */
+			overflow: hidden;
+			position: relative;
+			width: 100%; /* Or a fixed width if preferred */
+		}
+
+		.progress-container > div {
+			background-color: #4CAF50; /* Green color for progress */
+			height: 100%;
+			border-radius: 5px;
+			text-align: center;
+			color: white;
+			font-size: 10px; /* Smaller font for percentage */
+			line-height: 15px; /* Vertically align text */
+		}
+
+		.havetracks {
+			padding: 0 5px; /* Add some padding around the text */
+		}
+	</style>
 </%def>
 
 <%def name="javascriptIncludes()">
-    <script src="js/libs/jquery.unveil.min.js"></script>
+    ${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
+    <script src="js/libs/jquery.unveil.min.js"></script> <%-- Keep if still using for lazy loading --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-    	function initThisPage() {
+    	// Encapsulate page-specific logic
+        var IndexPage = IndexPage || {};
+
+    	IndexPage.initDataTable = function() {
     		$('#artist_table').dataTable({
     			"bDestroy": true,
     			"aoColumnDefs": [
@@ -36,14 +74,17 @@
                         "aTargets": [0],
                         "mData":"ArtistID",
                         "mRender": function ( data, type, full ) {
-                            return '<div id="artistImg"><img class="albumArt" height="50" width="50" alt="" id="'+ data + '" data-src="artwork/thumbs/artist/' + data + '"/></div>';
+                            // Using a class for the image, and data-src for lazy loading
+                            // Added loading="lazy" for native lazy loading support where available
+                            return '<div class="artistImg-container"><img class="albumArt-thumb" alt="Album art for ' + full['ArtistName'] + '" data-src="artwork/thumbs/artist/' + data + '" loading="lazy" /></div>';
                         }
                     },
                     {
                        "aTargets":[1],
                        "mDataProp":"ArtistSortName",
                        "mRender":function (data,type,full) {
-                            return '<span title="' + full['ArtistID'] + '"></span><a href="artistPage?ArtistID=' + full['ArtistID'] + '">' + full['ArtistName'] + '</a>'
+                            // Using a class for the span, not an ID
+                            return '<span class="artist-sort-name" title="' + full['ArtistID'] + '"></span><a href="artistPage?ArtistID=' + full['ArtistID'] + '">' + full['ArtistName'] + '</a>'
                         }
                     },
                     {
@@ -53,52 +94,52 @@
                        "aTargets":[3],
                        "mDataProp":"LatestAlbum",
                        "mRender":function(data,type,full){
-                            artist = full;
-                            if (artist['ReleaseDate']  && artist['LatestAlbum'])
-                            {
+                            var artist = full; // Renamed to avoid confusion with outer scope
+                            var releasedate = '';
+                            var albumdisplay = '<i>None</i>';
+                            var grade = 'gradeZ'; // Default grade
+
+                            if (artist['ReleaseDate']  && artist['LatestAlbum']) {
                                 releasedate = artist['ReleaseDate'];
                                 albumdisplay = '<i>' + artist['LatestAlbum'] + '</i> (' + artist['ReleaseDate'] + ')';
-                            }
-                            else if(artist['LatestAlbum'])
-                            {
-                                releasedate = '';
+                            } else if (artist['LatestAlbum']) {
                                 albumdisplay = '<i>' + artist['LatestAlbum'] + '</i>';
                             }
-                            else
-                            {
-                                releasedate = '';
-                                albumdisplay = '<i>None</i>';
-                            }
-                            if (artist['ReleaseInFuture'] === 'True')
-                            {
+
+                            if (artist['ReleaseInFuture'] === 'True') {
                                 grade = 'gradeA';
                             }
-                            else
-                            {
-                                grade = 'gradeZ';
-                            }
-                            artist['Grade'] = grade;
-                            return '<span title="' + releasedate + '"></span><a href="albumPage?AlbumID=' + full['AlbumID'] + '">' + albumdisplay + '</a>'
+                            // artist['Grade'] is used in fnRowCallback, ensure it's set in the data.
+                            // If this 'Grade' is only for client-side sorting/filtering, it's fine.
+                            // If it affects server-side logic, it should be handled there.
+                            full['Grade'] = grade; // Ensure grade is part of the row data for fnRowCallback
+
+                            // Using a class for the span, not an ID
+                            return '<span class="release-date-sort" title="' + releasedate + '"></span><a href="albumPage?AlbumID=' + full['AlbumID'] + '">' + albumdisplay + '</a>'
                         }
                    },
                    {
                        "aTargets":[4],
                        "mDataProp":"HaveTracks",
                        "mRender":function(data,type,full){
-                            if(full['TotalTracks'] > 0)
-                            {
-                                percent = (full['HaveTracks']*100.0)/full['TotalTracks']
-                                if(percent > 100){
+                            var percent = 0;
+                            var totalTracksDisplay = '?';
+
+                            if (full['TotalTracks'] > 0) {
+                                percent = (full['HaveTracks']*100.0)/full['TotalTracks'];
+                                if (percent > 100) {
                                     percent = 100;
                                 }
-                            }
-                            else
-                            {
-                                full['TotalTracks'] = '?';
-                                percent = 0;
+                                totalTracksDisplay = full['TotalTracks'];
                             }
 
-                            return '<span title="' + percent + '"></span><div class="progress-container"><div style="width:' + percent + '%"><div class="havetracks">' + full['HaveTracks'] + '/' + full['TotalTracks'] + '</div></div></div>';
+                            // Added ARIA attributes for accessibility
+                            return '<span class="have-tracks-sort" title="' + percent + '"></span>' +
+                                   '<div class="progress-container" role="progressbar" aria-valuenow="' + Math.round(percent) + '" aria-valuemin="0" aria-valuemax="100">' +
+                                       '<div style="width:' + percent + '%">' +
+                                           '<div class="havetracks">' + full['HaveTracks'] + '/' + totalTracksDisplay + '</div>' +
+                                       '</div>' +
+                                   '</div>';
                         }
                     },
                 ],
@@ -110,46 +151,73 @@
     				"sInfoFiltered":"(filtered from _MAX_ total artists)",
     				"sEmptyTable": " ",
                 },
-    			"bStateSave": true,
+    			"bStateSave": true, // Retain table state across page loads
     			"iDisplayLength": 50,
     			"sPaginationType": "full_numbers",
-                "bProcessing": true,
-                "bServerSide": true,
-                "sAjaxSource": 'getArtists.json',
+                "bProcessing": true, // Show processing indicator
+                "bServerSide": true, // Enable server-side processing
+                "sAjaxSource": 'getArtists.json', // API endpoint for data
                 "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-                    $('td', nRow).closest('tr').addClass(aData['Grade'])
-                    nRow.children[0].id = 'albumart';
-                    nRow.children[1].id = 'name';
-                    nRow.children[2].id = 'status'
-                    nRow.children[3].id = 'album'
-                    nRow.children[4].id = 'have'
+                    // Apply the 'Grade' class from aData to the table row
+                    $(nRow).addClass(aData['Grade']);
+
+                    // Removed setting duplicate IDs on child elements. Use classes if needed for styling.
+                    // For example:
+                    // $(nRow).find('td:eq(0)').addClass('albumart-cell');
+                    // $(nRow).find('td:eq(1)').addClass('name-cell');
+                    // etc.
                     return nRow;
                 },
                 "fnServerData": function ( sSource, aoData, fnCallback ) {
-                    /* Add some extra data to the sender */
-                    $.getJSON( sSource, aoData, function (json) {    fnCallback(json)                }  )
-                    },
-                "fnInitComplete": function(oSettings, json)
-                {
+                    // Custom function for fetching data, using $.getJSON
+                    $.getJSON( sSource, aoData, function (json) {
+                        fnCallback(json);
+                    }).fail(function(jqXHR, textStatus, errorThrown) {
+                        console.error("Error fetching artist data:", textStatus, errorThrown);
+                        // Provide user feedback if data loading fails
+                        // e.g., show an error message in the table or a global notification
+                    });
                 },
+                // Removed fnInitComplete as it was empty
                 "fnDrawCallback": function (o) {
                     // Jump to top of page
                     $('html,body').scrollTop(0);
+                    // Re-unveil images after each draw for lazy loading
+                    $("img.albumArt-thumb").unveil();
                 }
             });
-            $('#artist_table').on("draw.dt", function () {
-                $("img").unveil();
-            });
+            // jQuery Unveil listener for new images added to the DOM after DataTables draw
+            // This is handled in fnDrawCallback now for better integration with DataTables.
+            // $('#artist_table').on("draw.dt", function () {
+            //     $("img.albumArt-thumb").unveil();
+            // });
 
+    		// Assuming resetFilters is a global function from common.js
+    		if (typeof resetFilters === 'function') {
     		    resetFilters("artist or album");
+    		} else {
+    		    console.warn("resetFilters function is not defined.");
     		}
+    	};
 
     	$(document).ready(function() {
-    		initThisPage();
+    		IndexPage.initDataTable();
     	});
-    	$(window).load(function(){
+
+    	$(window).on('load', function(){
+    		// Ensure these functions exist and are necessary.
+            // If initFancybox or refreshLoadArtist are global, call them here.
+            // Otherwise, they should be encapsulated or refactored.
+            if (typeof initFancybox === 'function') {
                 initFancybox();
+            } else {
+                console.warn("initFancybox function is not defined.");
+            }
+            if (typeof refreshLoadArtist === 'function') {
                 refreshLoadArtist();
+            } else {
+                console.warn("refreshLoadArtist function is not defined.");
+            }
     	});
 	</script>
 </%def>

data/interfaces/default/js/script.js

@@ -1,386 +1,539 @@
-function getThumb(imgElem,id,type) {
+/**
+ * @file headphones.js
+ * @brief Main JavaScript file for Headphones web interface.
+ * Contains core UI, API, and utility functions.
+ */
 
-	if ( type == 'artist' ) {
-		var thumbURL = "getThumb?ArtistID=" + id;
-		// var imgURL = "getArtwork?ArtistID=" + id;
+var Headphones = Headphones || {};
+
+// --- Configuration ---
+Headphones.config = {
+    fallbackImage: "interfaces/default/images/no-cover-art.png", // Generic fallback
+    fallbackArtistImage: "interfaces/default/images/no-cover-artist.png", // Specific artist fallback
+    messageTimeout: 3000 // Default timeout for messages in milliseconds
+};
+
+// --- UI Messaging Module ---
+Headphones.UI = Headphones.UI || {};
+Headphones.UI.Message = (function() {
+    var $ajaxMsg = $("#ajaxMsg");
+    var $ajaxMsg2 = $("#ajaxMsg2"); // Assuming this is for artist-specific messages
+    var $updateBar = $("#updatebar");
+
+    /**
+     * Shows a feedback message to the user.
+     * @param {string} msg - The message to display.
+     * @param {string} type - Type of message ('success', 'error', 'info', 'loading').
+     * @param {number} [timeout=Headphones.config.messageTimeout] - Duration to display the message (in ms). Set to 0 for no timeout.
+     * @param {HTMLElement} [$targetElement=$ajaxMsg] - The jQuery element to display the message in.
+     */
+    function showMessage(msg, type, timeout, $targetElement) {
+        timeout = typeof timeout !== 'undefined' ? timeout : Headphones.config.messageTimeout;
+        $targetElement = $targetElement || $ajaxMsg;
+
+        // Adjust position if update bar is visible
+        if ($updateBar.is(":visible")) {
+            var height = $updateBar.height() + 35;
+            $targetElement.css("bottom", height + "px");
         } else {
-		var thumbURL = "getThumb?AlbumID=" + id;
-		// var imgURL = "getArtwork?AlbumID=" + id;
+            $targetElement.removeAttr("style");
         }
-	// Get Data from the cache by Artist ID 	
+
+        $targetElement.fadeIn();
+        $targetElement.removeClass('success error info'); // Clear previous states
+
+        var iconClass = '';
+        switch (type) {
+            case 'success':
+                iconClass = 'fa-check';
+                $targetElement.addClass('success');
+                break;
+            case 'error':
+                iconClass = 'fa-exclamation-triangle';
+                $targetElement.addClass('error');
+                break;
+            case 'loading':
+                iconClass = 'fa-refresh fa-spin';
+                break;
+            default: // info
+                iconClass = 'fa-info-circle';
+                $targetElement.addClass('info');
+        }
+
+        var $message = $("<div class='msg'><i class='fa " + iconClass + "'></i> " + msg + "</div>");
+        $targetElement.empty().append($message); // Clear and append new message
+
+        if (timeout > 0) {
+            setTimeout(function() {
+                $message.fadeOut(function() {
+                    $(this).remove();
+                    $targetElement.fadeOut();
+                });
+            }, timeout);
+        }
+    }
+
+    /**
+     * Specific function for artist messages (if still needed, otherwise consolidate into showMessage)
+     * @param {string} msg - The message to display.
+     */
+    function showArtistMessage(msg) {
+        showMessage(msg, 'loading', 0, $ajaxMsg2); // No timeout for loading message
+    }
+
+    return {
+        show: showMessage,
+        showArtist: showArtistMessage // Consider removing if not distinct enough
+    };
+})();
+
+// --- API / AJAX Module ---
+Headphones.API = (function() {
+    /**
+     * Performs an AJAX call with standardized messaging and reload options.
+     * @param {object} options - Configuration options for the AJAX call.
+     * @param {string} options.url - The URL for the AJAX request.
+     * @param {object|string} [options.data] - Data to send with the request.
+     * @param {string} [options.type='POST'] - HTTP method ('GET' or 'POST').
+     * @param {string} [options.successMessage='Success!'] - Message to display on success.
+     * @param {string} [options.errorMessage='There was an error'] - Message to display on error.
+     * @param {string} [options.reloadType] - Type of reload after success ('table', 'tabs', 'page', 'submenu', 'submenu&table').
+     * @param {HTMLElement} [options.contextElement] - The DOM element that triggered the action (for data-attributes).
+     * @param {function} [options.beforeSendCallback] - Custom function to call before sending.
+     * @param {function} [options.successCallback] - Custom function to call on success.
+     * @param {function} [options.errorCallback] - Custom function to call on error.
+     * @param {function} [options.completeCallback] - Custom function to call on completion.
+     */
+    function doAjaxCall(options) {
+        var opts = $.extend(true, {
+            url: '',
+            data: {},
+            type: 'POST',
+            successMessage: 'Success!',
+            errorMessage: 'There was an error',
+            reloadType: null, // 'table', 'tabs', 'page', 'submenu', 'submenu&table'
+            contextElement: null,
+            beforeSendCallback: null,
+            successCallback: null,
+            errorCallback: null,
+            completeCallback: null
+        }, options);
+
+        // Get messages from data attributes if context element provided
+        if (opts.contextElement) {
+            var $elem = $(opts.contextElement);
+            opts.successMessage = $elem.data('success') || opts.successMessage;
+            opts.errorMessage = $elem.data('error') || opts.errorMessage;
+        }
+
         $.ajax({
-		url: thumbURL,
-		cache: true,
-		success: function(data){
-			if ( data == "" ) {
-				var imageUrl = "interfaces/default/images/no-cover-artist.png";
+            url: opts.url,
+            data: opts.data,
+            type: opts.type,
+            beforeSend: function(jqXHR, settings) {
+                Headphones.UI.Message.show('Loading...', 'loading', 0); // Show loading message indefinitely
+                if (opts.beforeSendCallback) opts.beforeSendCallback(jqXHR, settings);
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                Headphones.UI.Message.show(opts.errorMessage, 'error');
+                if (opts.errorCallback) opts.errorCallback(jqXHR, textStatus, errorThrown);
+            },
+            success: function(data, textStatus, jqXHR) {
+                Headphones.UI.Message.show(opts.successMessage, 'success');
+                if (opts.successCallback) opts.successCallback(data, textStatus, jqXHR);
+
+                // Handle reloads based on reloadType
+                setTimeout(function() { // Wait for message to fade out
+                    if (opts.reloadType === 'table') {
+                        Headphones.UI.Content.refreshTable();
+                    } else if (opts.reloadType === 'tabs') {
+                        Headphones.UI.Content.refreshTab();
+                    } else if (opts.reloadType === 'page') {
+                        location.reload();
+                    } else if (opts.reloadType === 'submenu') {
+                        Headphones.UI.Content.refreshSubmenu();
+                    } else if (opts.reloadType === 'submenu&table') {
+                        Headphones.UI.Content.refreshSubmenu();
+                        Headphones.UI.Content.refreshTable();
                     }
-			else {
-				var imageUrl = data;
-			}
-			$(imgElem).attr("src",imageUrl).hide().fadeIn();
-			// $(imgElem).wrap('<a href="'+ imgURL +'" rel="dialog" title="' + name + '"></a>');
+                }, Headphones.config.messageTimeout + 100); // Wait for message fade out
+            },
+            complete: function(jqXHR, textStatus) {
+                // The message will fade out automatically by showMessage
+                if (opts.completeCallback) opts.completeCallback(jqXHR, textStatus);
             }
         });
-}
+    }
 
-function getArtwork(imgElem,id,name,type) {
+    /**
+     * Performs a simple GET AJAX call without complex messaging or reload.
+     * @param {string} url - The URL for the GET request.
+     */
+    function doSimpleAjaxCall(url) {
+        $.ajax({ url: url, type: 'GET' });
+    }
 
-	if ( type == 'artist' ) {
-		var artworkURL = "getArtwork?ArtistID=" + id;
-	} else {
-		var artworkURL = "getArtwork?AlbumID=" + id;
-	}
-	// Get Data from the cache by Artist ID 	
-	$.ajax({
-		url: artworkURL,
-		cache: true,
-		success: function(data){
-			if ( data == "" || data == undefined ) {
-				var imageUrl = "interfaces/default/images/no-cover-artist.png";
-			}
-			else {
-				var imageUrl = data;
-			}
-			$(imgElem).attr("src",imageUrl).hide().fadeIn();
-			$(imgElem).wrap('<a href="'+ imageUrl +'" rel="dialog" title="' + name + '"></a>');
-			}
-	});
-}
+    return {
+        call: doAjaxCall,
+        simpleCall: doSimpleAjaxCall
+    };
+})();
 
-function getInfo(elem,id,type) {
+// --- Image Loading Module ---
+Headphones.Images = (function() {
+    /**
+     * Loads artwork/thumbnail for an element, handling lazy load and fallbacks.
+     * @param {jQuery} $imgElem - The jQuery image element.
+     * @param {string} id - The ID (AlbumID or ArtistID).
+     * @param {string} type - 'album' or 'artist'.
+     * @param {boolean} [unveil=false] - Whether to use data-src and unveil for lazy loading.
+     */
+    function loadImage($imgElem, id, type, unveil) {
+        var infoURL = "getImageLinks?" + (type === 'artist' ? "ArtistID=" : "AlbumID=") + id;
 
-	if ( type == 'artist' ) {
-		var infoURL = "getInfo?ArtistID=" + id;
-	} else {
-		var infoURL = "getInfo?AlbumID=" + id;
-	}
-	// Get Data from the cache by ID 	
         $.ajax({
             url: infoURL,
             cache: true,
             dataType: "json",
-		success: function(data){
-			var summary = data.Summary;
-			$(elem).append(summary);
-		}
-	});
-}
+            success: function(data) {
+                var imageUrl = Headphones.config.fallbackImage;
+                var artworkUrl = Headphones.config.fallbackImage;
 
-function getImageLinks(elem,id,type,unveil) {
-	if ( type == 'artist' ) {
-		var infoURL = "getImageLinks?ArtistID=" + id;
-	} else {
-		var infoURL = "getImageLinks?AlbumID=" + id;
-	}
-
-	// Get Data from the cache by ID
-	$.ajax({
-		url: infoURL,
-		cache: true,
-		dataType: "json",
-		success: function(data){
-			if (!data) {
-				// Invalid response
-				return;
-			}
-
-			if (!data.thumbnail) {
-				var thumbnail = "interfaces/default/images/no-cover-artist.png";
-			}
-			else {
-				var thumbnail = data.thumbnail;
-			}
-			if (!data.artwork) {
-				var artwork = "interfaces/default/images/no-cover-artist.png";
-			}
-			else {
-				var artwork = data.artwork;
+                if (data) {
+                    imageUrl = data.thumbnail || (type === 'artist' ? Headphones.config.fallbackArtistImage : Headphones.config.fallbackImage);
+                    artworkUrl = data.artwork || (type === 'artist' ? Headphones.config.fallbackArtistImage : Headphones.config.fallbackImage);
                 }
 
                 if (unveil) {
-				$(elem).attr("data-src", thumbnail);
-				$(elem).unveil();
+                    $imgElem.attr("data-src", imageUrl);
+                    $imgElem.unveil(); // Trigger unveil for lazy loading
+                } else {
+                    $imgElem.attr("src", imageUrl).hide().fadeIn(); // Direct load with fade
                 }
-			else {
-				$(elem).attr("src", thumbnail);
+
+                // If element has a rel="dialog" parent, update href for Fancybox
+                var $wrapper = $imgElem.closest('a[rel="dialog"]');
+                if ($wrapper.length) {
+                    $wrapper.attr('href', artworkUrl); // Link to full artwork
+                }
+            },
+            error: function() {
+                // On error, set to fallback image if not already set or handled by onerror on HTML
+                if (unveil) {
+                    $imgElem.attr("data-src", Headphones.config.fallbackImage);
+                    $imgElem.unveil();
+                } else {
+                    $imgElem.attr("src", Headphones.config.fallbackImage).hide().fadeIn();
                 }
             }
         });
-}
+    }
 
-function initHeader() {
-	//settings
-	var header = $("#container header");
-	var fadeSpeed = 100, fadeTo = 0.5, topDistance = 20;
-	var topbarME = function() { $(header).fadeTo(fadeSpeed,1); }, topbarML = function() { $(header).fadeTo(fadeSpeed,fadeTo); };
+    /**
+     * Fetches and appends summary information.
+     * @param {jQuery} $elem - The element to append summary to.
+     * @param {string} id - The ID (AlbumID or ArtistID).
+     * @param {string} type - 'album' or 'artist'.
+     */
+    function getInfo($elem, id, type) {
+        var infoURL = "getInfo?" + (type === 'artist' ? "ArtistID=" : "AlbumID=") + id;
+        $.ajax({
+            url: infoURL,
+            cache: true,
+            dataType: "json",
+            success: function(data) {
+                if (data && data.Summary) {
+                    $elem.append(data.Summary);
+                }
+            }
+        });
+    }
+
+    return {
+        load: loadImage,
+        getInfo: getInfo
+    };
+})();
+
+// --- UI Content Refresh Module ---
+Headphones.UI.Content = (function() {
+    /**
+     * Refreshes a specific part of the page content.
+     * @param {string} targetSelector - jQuery selector for the element to load content into.
+     * @param {string} sourceContentSelector - jQuery selector for the content to extract from the source URL.
+     * @param {function} [initCallback] - Callback function to run after content is loaded.
+     */
+    function refreshPart(targetSelector, sourceContentSelector, initCallback) {
+        var url = window.location.href;
+        $(targetSelector).load(url + " " + sourceContentSelector, function(response, status, xhr) {
+            if (status === "error") {
+                console.error("Failed to load content for " + targetSelector + ": " + xhr.status + " " + xhr.statusText);
+                Headphones.UI.Message.show("Failed to refresh content.", 'error');
+            } else if (initCallback) {
+                // Ensure the callback is part of the Headphones object if it relies on it
+                if (typeof initCallback === 'string' && Headphones.hasOwnProperty(initCallback)) {
+                    Headphones[initCallback](); // Call the global Headphones function
+                } else if (typeof initCallback === 'function') {
+                    initCallback();
+                }
+            }
+        });
+    }
+
+    /** Refreshes the submenu by reloading its content. */
+    function refreshSubmenu() {
+        refreshPart("#subhead_container", "#subhead_menu", Headphones.UI.initActions); // Pass initActions to re-apply handlers
+    }
+
+    /** Refreshes the main table content. */
+    function refreshTable() {
+        // This assumes there's one main .display table. If multiple, refine selector.
+        // The original also reloaded tbody and thead separately, which is fine.
+        refreshPart("table.display", "table.display tbody, table.display thead", function() {
+            // Re-initialize DataTables after table refresh.
+            // This might need specific DataTable re-initialization logic for each page.
+            // A more robust solution would be to destroy and recreate the DataTable.
+            // The template-specific `initThisPage()` usually contains this.
+            // We need to call the appropriate initThisPage for the current page.
+            // As `initThisPage` is defined per HTML file, we rely on the specific page's ready handler
+            // to call its own initThisPage, or pass it as a parameter if this is called generically.
+            // For now, let's assume `initThisPage` exists in the global scope where refreshTable is called.
+            if (typeof initThisPage === 'function') {
+                initThisPage();
+            } else if (typeof SearchResultsPage !== 'undefined' && typeof SearchResultsPage.initDataTable === 'function') {
+                SearchResultsPage.initDataTable();
+            }
+            // ... add more page-specific re-initializations as needed
+        });
+    }
+
+    /** Refreshes the currently active tab content. */
+    function refreshTab() {
+        var tabId = $('.ui-tabs-panel:visible').attr("id");
+        if (tabId) {
+            refreshPart('.ui-tabs-panel:visible', "#" + tabId, function() {
+                // Similar to refreshTable, re-initialize specific tab content
+                if (typeof initThisPage === 'function') { // assuming initThisPage handles tab content
+                    initThisPage();
+                }
+            });
+        }
+    }
+
+    /**
+     * Polls for status changes on rows with 'gradeL' class (loading state).
+     * This is an older polling pattern; consider WebSockets for real-time updates if performance is critical.
+     */
+    function refreshLoadArtist() {
+        var $loadingRows = $("table.display tr.gradeL");
+        if ($loadingRows.length > 0) {
+            $loadingRows.each(function() {
+                var $row = $(this);
+                // Reload only the row's content to check status
+                var rowIndex = $row.index() + 1; // 1-based index
+                var url = window.location.href;
+                $row.load(url + " table.display tbody tr:nth-child(" + rowIndex + ") td", function(response, status, xhr) {
+                    if (status === "error") {
+                        console.error("Failed to load row status: " + xhr.status + " " + xhr.statusText);
+                        // Optional: Show a message to the user
+                    } else {
+                        // Check status after loading the updated row content
+                        if ($row.find(".column-status").text() === 'Active') { // Assuming a status column with this text
+                            $row.removeClass('gradeL').addClass('gradeZ');
+                            // Re-initialize relevant JS if needed for the row (e.g., DataTables redrawing)
+                            if (typeof initThisPage === 'function') initThisPage(); // Re-initialize the table/page
+                        } else {
+                            // If still loading, set timeout for next check
+                            setTimeout(refreshLoadArtist, 3000);
+                        }
+                    }
+                });
+            });
+        }
+    }
+
+
+    return {
+        refreshSubmenu: refreshSubmenu,
+        refreshTable: refreshTable,
+        refreshTab: refreshTab,
+        refreshLoadArtist: refreshLoadArtist
+    };
+})();
+
+// --- UI Element Initialization Module ---
+Headphones.UI.Elements = (function() {
+    /** Initializes the header scroll-fade effect. */
+    function initHeader() {
+        var $header = $("#container header");
+        var fadeSpeed = 100,
+            fadeTo = 0.5,
+            topDistance = 20;
         var inside = false;
-	//do
-	$(window).scroll(function() {
-		position = $(window).scrollTop();
-		if(position > topDistance && !inside) {
+
+        $(window).on('scroll', function() {
+            var position = $(window).scrollTop();
+            if (position > topDistance && !inside) {
                 //add events
-			topbarML();
-			$(header).bind('mouseenter',topbarME);
-			$(header).bind('mouseleave',topbarML);
+                $header.fadeTo(fadeSpeed, fadeTo);
+                $header.on('mouseenter', function() {
+                    $header.fadeTo(fadeSpeed, 1);
+                });
+                $header.on('mouseleave', function() {
+                    $header.fadeTo(fadeSpeed, fadeTo);
+                });
                 $("#toTop").fadeIn();
                 inside = true;
-		}
-		else if (position < topDistance){
-			topbarME();
-			$(header).unbind('mouseenter',topbarME);
-			$(header).unbind('mouseleave',topbarML);
+            } else if (position < topDistance && inside) { // Added '&& inside' to prevent re-triggering
+                $header.fadeTo(fadeSpeed, 1); // Ensure it's fully visible at top
+                $header.off('mouseenter mouseleave'); // Remove events when at top
                 $("#toTop").fadeOut();
                 inside = false;
             }
         });
+    }
 
-}
+    /**
+     * Initializes config checkboxes to show/hide sibling content.
+     * @param {HTMLElement} elem - The checkbox DOM element.
+     */
+    function initConfigCheckbox(elem) {
+        var $checkbox = $(elem);
+        var $configContent = $checkbox.parent().next();
 
-function initConfigCheckbox(elem) {
-	var config = $(elem).parent().next();	
-	if ( $(elem).is(":checked") ) {
-		config.show();
+        // Initial state
+        if ($checkbox.is(":checked")) {
+            $configContent.show();
         } else {
-		config.hide();
+            $configContent.hide();
         }
-	$(elem).click(function(){
-		var config = $(this).parent().next();	
-		if ( $(this).is(":checked") ) {
-			config.slideDown();
+
+        // Click handler
+        $checkbox.on('click', function() {
+            if ($(this).is(":checked")) {
+                $configContent.slideDown();
             } else {
-			config.slideUp();
+                $configContent.slideUp();
             }
         });
-}     
-function initActions() {
-	$("#subhead_menu #menu_link_refresh").button();
-	$("#subhead_menu #menu_link_edit").button();
-	$("#subhead_menu .menu_link_edit").button();
-    $("#subhead_menu #menu_link_delete" ).button();
-    $("#subhead_menu #menu_link_pauze").button();
-    $("#subhead_menu #menu_link_resume").button();
-    $("#subhead_menu #menu_link_getextra").button();
-    $("#subhead_menu #menu_link_removeextra").button();
-    $("#subhead_menu #menu_link_wanted" ).button();
-    $("#subhead_menu #menu_link_check").button();
-    $("#subhead_menu #menu_link_skipped").button();
-    $("#subhead_menu #menu_link_retry").button();
-    $("#subhead_menu #menu_link_new").button();
-    $("#subhead_menu #menu_link_shutdown").button();
-    $("#subhead_menu #menu_link_scan").button();
-}
-
-function refreshSubmenu() {
-	var url = $(location).attr('href');
-	$("#subhead_container").load(url + " #subhead_menu",function(){
-		initActions();
-	});
-}
-function refreshTable() {
-	var url =  $(location).attr('href');
-	$("table.display").load(url + " table.display tbody, table.display thead", function() {
-		initThisPage();
-	});
-}
-function refreshLoadArtist() {
-	if ( $(".gradeL").length > 0 ) {
-		var url =  $(location).attr('href');
-		var loadingRow = $("table.display tr.gradeL")
-		loadingRow.each(function(){
-			var row = $(this).index() + 1;
-			var rowLoad = $("table.display tbody tr:nth-child("+row+")");
-			$(rowLoad).load(url + " table.display tbody tr:nth-child("+ row +") td", function() {
-				if ( $(rowLoad).children("#status").text() == 'Active'  ) {
-					// Active
-					$(rowLoad).removeClass('gradeL').addClass('gradeZ');
-					initThisPage();
-				} else {
-					// Still loading
-					setTimeout(function(){
-						refreshLoadArtist();
-					},3000);
-				}
-			});	
-		});
-	}
-}
-
-function refreshTab() {
-	var url =  $(location).attr('href');
-	var tabId = $('.ui-tabs-panel:visible').attr("id");
-	$('.ui-tabs-panel:visible').load(url + " #"+ tabId, function() {
-		initThisPage();
-	});
-}
-
-function showMsg(msg,loader,timeout,ms) {
-	var feedback = $("#ajaxMsg");
-	update = $("#updatebar");
-	if ( update.is(":visible") ) {
-		var height = update.height() + 35;
-		feedback.css("bottom",height + "px");
-	} else {
-		feedback.removeAttr("style");
-	}
-	feedback.fadeIn();
-	var message = $("<div class='msg'>" + msg + "</div>");
-	if (loader) {
-		var message = $("<i class='fa fa-refresh fa-spin'></i> " + msg + "</div>");
-		feedback.css("padding","14px 10px")
-	}
-	$(feedback).prepend(message);
-	if (timeout) {
-		setTimeout(function(){
-			message.fadeOut(function(){
-				$(this).remove();
-				feedback.fadeOut();					
-			});
-		},ms);
-	} 
-}
-
-function showArtistMsg(msg) {
-	var feedback = $("#ajaxMsg2");
-	update = $("#updatebar");
-	if ( update.is(":visible") ) {
-		var height = update.height() + 35;
-		feedback.css("bottom",height + "px");
-	} else {
-		feedback.removeAttr("style");
-	}
-	feedback.fadeIn();
-	var message = $("<i class='fa fa-refresh fa-spin'></i> " + msg + "</div>");
-	feedback.css("padding","14px 10px")
-	$(feedback).prepend(message);
-}
-
-function doAjaxCall(url,elem,reload,form) {
-	// Set Message
-	feedback = $("#ajaxMsg");
-	update = $("#updatebar");
-	if ( update.is(":visible") ) {
-		var height = update.height() + 35;
-		feedback.css("bottom",height + "px");
-	} else {
-		feedback.removeAttr("style");
     }
 
-	feedback.fadeIn();
-	// Get Form data
-	var formID = "#"+url;
-	if ( form == true ) {
-		var dataString = $(formID).serialize();
+    /** Initializes various action buttons with jQuery UI button styling. */
+    function initActions() {
+        // Select all menu links under #subhead_menu and apply button()
+        // This assumes jQuery UI Button widget is available and desired.
+        $("#subhead_menu a[id^='menu_link_'], #subhead_menu .menu_link_edit").button();
     }
-	// Loader Image
-	var loader = $("<i class='fa fa-refresh fa-spin'></i>");
-	// Data Success Message
-	var dataSucces = $(elem).data('success');
-	if (typeof dataSucces === "undefined") {
-		// Standard Message when variable is not set
-		var dataSucces = "Success!";
-	} 
-	// Data Errror Message
-	var dataError = $(elem).data('error');
-	if (typeof dataError === "undefined") {
-		// Standard Message when variable is not set
-		var dataError = "There was an error";
-	} 	
-	// Get Success & Error message from inline data, else use standard message
-	var succesMsg = $("<div class='msg'><i class='fa fa-check'></i> " + dataSucces + "</div>");
-	var errorMsg = $("<div class='msg'><i class='fa fa-exclamation-triangle'></i> " + dataError + "</div>");
 
-	// Check if checkbox is selected
-	if ( form ) {
-		if ( $('td#select input[type=checkbox]').length > 0 && !$('td#select input[type=checkbox]').is(':checked') || $('#importLastFM #username:visible').length > 0 && $("#importLastFM #username" ).val().length === 0 ) {
-			feedback.addClass('error')
-			$(feedback).prepend(errorMsg);
-			setTimeout(function(){
-				errorMsg.fadeOut(function(){
-					$(this).remove();
-					feedback.fadeOut(function(){
-						feedback.removeClass('error');
-					});					
-				})
-				$(formID + " select").children('option[disabled=disabled]').attr('selected','selected');
-			},2000);
-			return false;
+    return {
+        initHeader: initHeader,
+        initConfigCheckbox: initConfigCheckbox,
+        initActions: initActions
+    };
+})();
+
+// --- Utility Functions Module ---
+Headphones.Utils = (function() {
+    /**
+     * Sets placeholder text for DataTables search input.
+     * @param {string} text - The placeholder text.
+     */
+    function resetFilters(text) {
+        // Ensure this targets the correct search input for DataTables
+        if ($(".dataTables_filter input").length > 0) {
+            $(".dataTables_filter input").attr("placeholder", "filter " + text + "");
         }
     }
 
-	// Ajax Call
-	$.ajax({
-	  url: url,
-	  data: dataString,
-	  type: 'POST',
-	  beforeSend: function(jqXHR, settings) {
-	  	// Start loader etc.
-	  	feedback.prepend(loader);
-	  },
-	  error: function(jqXHR, textStatus, errorThrown)  {
-	  	feedback.addClass('error')
-	  	feedback.prepend(errorMsg);
-	  	setTimeout(function(){
-	  		errorMsg.fadeOut(function(){
-	  			$(this).remove();
-	  			feedback.fadeOut(function(){
-	  				feedback.removeClass('error')
-	  			});	  			
-	  		})
-	  	},2000);
-	  },
-	  success: function(data,jqXHR) {
-	  	feedback.prepend(succesMsg);
-	  	feedback.addClass('success')
-	  	setTimeout(function(e){
-	  		succesMsg.fadeOut(function(){
-	  			$(this).remove();
-	  			feedback.fadeOut(function(){
-	  				feedback.removeClass('success');
-	  			});
-	  			if ( reload == true ) 	refreshSubmenu();
-	  			if ( reload == "table") {
-	  				console.log('refresh'); refreshTable();
-	  			}
-	  			if ( reload == "tabs") 	refreshTab();
-	  			if ( reload == "page") 	location.reload();
-	  			if ( reload == "submenu&table") {
-	  				refreshSubmenu();
-	  				refreshTable();
-	  			}
-	  			if ( form ) {
-	  				// Change the option to 'choose...'
-	  				$(formID + " select").children('option[disabled=disabled]').attr('selected','selected');
-	  			}
-	  		})
-	  	},2000);
-	  },
-	  complete: function(jqXHR, textStatus) {
-	  	// Remove loaders and stuff, ajax request is complete!
-	  	loader.remove();
-	  }
-	});
-}
-
-function doSimpleAjaxCall(url) {
-	$.ajax(url);
-}
-
-function resetFilters(text){
-	if ( $(".dataTables_filter").length > 0 ) {
-		$(".dataTables_filter input").attr("placeholder","filter " + text + "");
-	}
-}
-
-function initFancybox() {
-	if ( $("a[rel=dialog]").length > 0 ) {
+    /** Initializes Fancybox for dialog links. */
+    function initFancybox() {
+        // Check if Fancybox script is already loaded or needs to be loaded dynamically
+        if ($.fn.fancybox) { // Check if fancybox function exists on jQuery object
+            $("a[rel=dialog]").fancybox();
+        } else if ($("a[rel=dialog]").length > 0) {
+            // Dynamically load Fancybox script and CSS if elements with rel=dialog exist
             $.getScript('interfaces/default/js/fancybox/jquery.fancybox-1.3.4.js', function() {
                 $("head").append("<link rel='stylesheet' href='interfaces/default/js/fancybox/jquery.fancybox-1.3.4.css'>");
                 $("a[rel=dialog]").fancybox();
+            }).fail(function(jqxhr, settings, exception) {
+                console.error("Failed to load Fancybox script: ", exception);
             });
         }
+    }
+
+    return {
+        resetFilters: resetFilters,
+        initFancybox: initFancybox
+    };
+})();
+
+
+// --- Global Functions (for backward compatibility if needed, but prefer to call from Headphones object) ---
+// These global functions would ideally be removed and replaced with direct calls to Headphones.API, Headphones.UI, etc.
+// For a gradual transition, they can act as wrappers.
+
+// Original getThumb / getImageLinks replacement
+function getImageLinks(elem, id, type, unveil) {
+    Headphones.Images.load($(elem), id, type, unveil);
 }
 
-$(document).ready(function(){
-	initHeader();
+// Original getInfo replacement
+function getInfo(elem, id, type) {
+    Headphones.Images.getInfo($(elem), id, type);
+}
+
+// Original doAjaxCall replacement (needs careful integration with new params)
+// The HTML templates are passing doAjaxCall(url,elem,reload,form).
+// This wrapper needs to convert those to the new options object.
+function doAjaxCall(url, elem, reloadType, isFormSubmission) {
+    var options = {
+        url: url,
+        contextElement: elem,
+        reloadType: reloadType
+    };
+
+    if (isFormSubmission) {
+        // This part needs careful migration. The original `doAjaxCall`
+        // had logic like `var formID = "#"+url; var dataString = $(formID).serialize();`
+        // and validation like `if ( $('td#select input[type=checkbox]').length > 0 && !$('td#select input[type=checkbox]').is(':checked') ... )`.
+        // This validation MUST be done *before* calling doAjaxCall in the specific HTML template's JS.
+        // Here, we assume `url` is the form ID if `isFormSubmission` is true.
+        var $form = $('#' + url); // Assuming url is the form ID
+        if ($form.length) {
+            options.data = $form.serialize();
+        } else {
+             console.warn("doAjaxCall: form with ID '" + url + "' not found for submission.");
+             // If the form cannot be found, it should likely be an error.
+             Headphones.UI.Message.show("Form not found for submission.", 'error');
+             return false;
+        }
+    }
+    Headphones.API.call(options);
+}
+
+function doSimpleAjaxCall(url) {
+    Headphones.API.simpleCall(url);
+}
+
+function resetFilters(text) {
+    Headphones.Utils.resetFilters(text);
+}
+
+function initFancybox() {
+    Headphones.Utils.initFancybox();
+}
+
+// Placeholder for `initThisPage` - this function is typically defined per HTML template.
+// It's called by `$(document).ready` in many templates.
+// This should be removed from `headphones.js` and defined in each template.
+// function initThisPage() { /* defined in each HTML template */ }
+
+
+// --- Document Ready ---
+$(document).ready(function() {
+    Headphones.UI.Elements.initHeader(); // Initialize global header effects
+    Headphones.UI.Elements.initActions(); // Initialize global action buttons (jQuery UI)
+
+    // Ensure `initThisPage()` is called from the individual HTML template's ready handler.
+    // This `script.js` file should be included *before* the template's specific script block.
 });

data/interfaces/default/logs.html

@@ -6,8 +6,9 @@
 <%def name="headerIncludes()">
     <div id="subhead_container">
         <div id="subhead_menu">
-            <a class="menu_link_edit" href="clearLogs"><i class="fa fa-trash-o"></i> Clear log</a>
-            <a class="menu_link_edit" href="toggleVerbose"><i class="fa fa-pencil"></i> Toggle Debug Log</a>
+            <%-- Changed href to # and added data-action for JS handling --%>
+            <a class="menu_link_action" href="#" data-action="clearLogs" data-success="Logs cleared successfully!"><i class="fa fa-trash-o"></i> Clear log</a>
+            <a class="menu_link_action" href="#" data-action="toggleVerbose" data-success="Log verbosity toggled!"><i class="fa fa-pencil"></i> Toggle Debug Log</a>
         </div>
     </div>
 </%def>
@@ -19,17 +20,18 @@
 	<table class="display" id="log_table">
 		<thead>
 			<tr>
-				<th id="timestamp">Timestamp</th>
-				<th id="level">Level</th>
-				<th id="message">Message</th>
+				<th class="column-timestamp">Timestamp</th>
+				<th class="column-level">Level</th>
+				<th class="column-message">Message</th>
 			</tr>
 		</thead>
 		<tbody>
 		</tbody>
 	</table>
 	<br>
-	<div align="center">Refresh rate:
-	<select id="refreshrate" onchange="setRefresh()">
+	<div class="refresh-controls" align="center">
+        Refresh rate:
+        <select id="refreshrate"> <%-- Removed inline onchange --%>
             <option value="0" selected="selected">No Refresh</option>
             <option value="5">5 Seconds</option>
             <option value="15">15 Seconds</option>
@@ -37,43 +39,62 @@
             <option value="60">60 Seconds</option>
             <option value="300">5 Minutes</option>
             <option value="600">10 Minutes</option>
-	</select></div>
+        </select>
+    </div>
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
+	<style>
+		/* Example CSS for log levels */
+		.gradeX { /* For ERROR */
+			background-color: #fdd; /* Light red */
+		}
+		.gradeW { /* For WARNING */
+			background-color: #ffc; /* Light yellow */
+		}
+		.gradeZ { /* For INFO/DEBUG */
+			/* default background or light gray */
+		}
+	</style>
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-        $(document).ready(function() {
-            initActions();
+        // Encapsulate page-specific logic
+        var LogsPage = LogsPage || {};
 
+        LogsPage.timer = null; // To hold the interval timer ID
+
+        LogsPage.initDataTable = function() {
             $('#log_table').dataTable( {
                 "bProcessing": true,
                 "bServerSide": true,
                 "sAjaxSource": 'getLog',
                 "sPaginationType": "full_numbers",
-                "aaSorting": [[0, 'desc']],
+                "aaSorting": [[0, 'desc']], // Sort by timestamp descending
                 "iDisplayLength": 25,
-                "bStateSave": true,
+                "bStateSave": true, // Retain table state across page loads
                 "oLanguage": {
                     "sSearch":"Filter:",
                     "sLengthMenu":"Show _MENU_ lines per page",
                     "sEmptyTable": "No log information available",
                     "sInfo":"Showing _START_ to _END_ of _TOTAL_ lines",
                     "sInfoEmpty":"Showing 0 to 0 of 0 lines",
-        					"sInfoFiltered":"(filtered from _MAX_ total lines)"},
+                    "sInfoFiltered":"(filtered from _MAX_ total lines)"
+                },
                 "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+                    // aData[1] contains the 'Level' from the server
                     if (aData[1] === "ERROR") {
-                        $('td', nRow).closest('tr').addClass("gradeX");
+                        $(nRow).addClass("gradeX");
                     } else if (aData[1] === "WARNING") {
-                        $('td', nRow).closest('tr').addClass("gradeW");
+                        $(nRow).addClass("gradeW");
                     } else {
-                        $('td', nRow).closest('tr').addClass("gradeZ");
+                        $(nRow).addClass("gradeZ");
                     }
-
                     return nRow;
                 },
                 "fnDrawCallback": function (o) {
@@ -81,30 +102,76 @@
                     $('html,body').scrollTop(0);
                 },
                 "fnServerData": function ( sSource, aoData, fnCallback ) {
-        			/* Add some extra data to the sender */
+                    // Custom function for fetching data, using $.getJSON
                     $.getJSON(sSource, aoData, function (json) {
-        				fnCallback(json)
+                        fnCallback(json);
+                    }).fail(function(jqXHR, textStatus, errorThrown) {
+                        console.error("Error fetching log data:", textStatus, errorThrown);
+                        // Optional: Display an error message to the user
                     });
                 }
             });
+        };
+
+        LogsPage.setRefresh = function() {
+            var refreshrateSelect = document.getElementById('refreshrate');
+            if (refreshrateSelect != null) {
+                // Clear any existing timer
+                if (LogsPage.timer) {
+                    clearInterval(LogsPage.timer);
+                }
+
+                var refreshValue = parseInt(refreshrateSelect.value, 10);
+                if (refreshValue !== 0) {
+                    // Set a new interval to redraw the DataTable
+                    LogsPage.timer = setInterval(function() {
+                        $('#log_table').dataTable().fnDraw(false); // 'false' prevents resetting current page
+                    }, 1000 * refreshValue);
+                }
+            }
+        };
+
+        LogsPage.initActions = function() {
+            // Event listener for the refresh rate dropdown
+            $('#refreshrate').on('change', LogsPage.setRefresh);
+
+            // Event delegation for header action links
+            $('#subhead_menu').on('click', '.menu_link_action', function(e) {
+                e.preventDefault(); // Prevent default link behavior
+                var $this = $(this);
+                var action = $this.data('action'); // 'clearLogs' or 'toggleVerbose'
+                var successMsg = $this.data('success');
+
+                if (typeof doAjaxCall === 'function') {
+                    // Assuming doAjaxCall handles the AJAX request and success/error messages
+                    doAjaxCall('/' + action, $this, 'table', successMsg, function() {
+                        // Callback after successful AJAX call for specific actions
+                        if (action === 'clearLogs') {
+                            // Redraw table after clearing logs to show empty state or refreshed data
+                            $('#log_table').dataTable().fnDraw();
+                        }
+                        // No specific redraw needed for toggleVerbose unless it changes displayed logs
                     });
-	</script>
-	<script>
-		var timer;
-		function setRefresh()
-		{
-			refreshrate = document.getElementById('refreshrate');
-			if(refreshrate != null)
-			{
-				if(timer)
-				{
-					clearInterval(timer);
-				}
-				if(refreshrate.value != 0)
-				{
-					timer = setInterval("$('#log_table').dataTable().fnDraw()",1000*refreshrate.value);
-				}
+                } else {
+                    console.error("doAjaxCall function is not defined. Cannot perform log action.");
+                    // Fallback to direct navigation if AJAX utility is missing
+                    // window.location.href = '/' + action;
                 }
+            });
+        };
+
+
+        $(document).ready(function() {
+            LogsPage.initDataTable();
+            LogsPage.initActions(); // Initialize new event handlers
+
+            // Initial call to set refresh based on default selected option
+            LogsPage.setRefresh();
+
+            // Ensure global initActions from common.js is called if it handles other site-wide actions
+            if (typeof initActions === 'function') {
+                initActions();
             }
+        });
 	</script>
 </%def>

data/interfaces/default/manage.html

@@ -6,9 +6,11 @@
 <%def name="headerIncludes()">
 	<div id="subhead_container">
 		<div id="subhead_menu">
-			<a class="menu_link_edit" id="manage_albums" href="javascript:void(0)"><i class="fa fa-pencil"></i> Manage Albums</a>
-				<div id="dialog" title="Choose Album Filter" style="display:none" class="configtable">
+			<%-- Retained id="manage_albums" as it's a specific trigger for a dialog --%>
+			<a class="menu_link_edit" id="manage_albums" href="#"><i class="fa fa-pencil"></i> Manage Albums</a>
+				<div id="dialog-manage-albums" title="Choose Album Filter" style="display:none" class="configtable">
 					<div class="links">
+						<%-- Links within dialog changed to use data-status for filtering if AJAX is desired on manageAlbums page --%>
 						<a href="manageAlbums?Status=Downloaded"><i class="fa fa-check fa-fw"></i> Manage Downloaded Albums</a><br>
 						<a href="manageAlbums?Status=Skipped"><i class="fa fa-flag fa-fw"></i> Manage Skipped Albums</a><br>
 						<a href="manageAlbums?Status=Snatched"><i class="fa fa-cloud-download fa-fw"></i> </span>Manage Snatched Albums</a><br>
@@ -40,8 +42,9 @@
 			<li><a href="#tabs-4">Force Legacy</a></li>
 		</ul>
 		<div id="tabs-1" class="configtable">
-			<fieldset>
+			<%-- action="musicScan" method="GET" is fine for form submission if full page reload is intended --%>
 			<form action="musicScan" method="GET" id="musicScan">
+				<fieldset>
 					<legend>Scan Music Library</legend>
 					<p><strong>Where do you keep your music?</strong></p>
 					<p>You can put in any directory, and it will scan for audio files in that folder
@@ -52,25 +55,22 @@
 					</p>	
 					<br/>
 					<div class="row">
-								<label for="">Path to directory</label>
-					%if headphones.CONFIG.MUSIC_DIR:
-						<input type="text" value="${headphones.CONFIG.MUSIC_DIR}" name="path" size="70" />
-					%else:
-						<input type="text" value="Enter a Music Directory to scan" onfocus="if
-						(this.value==this.defaultValue) this.value='';" name="path" size="70" />
-					%endif
+						<label for="music_dir_path">Path to directory</label>
+						<%-- Using HTML5 placeholder attribute and proper ID --%>
+						<input type="text" id="music_dir_path" value="${headphones.CONFIG.MUSIC_DIR or ''}" name="path" size="70" placeholder="Enter a Music Directory to scan" />
 					</div>
 					<div class="row checkbox"> 
-					<input type="checkbox" name="libraryscan" id="libraryscan" value="1" ${checked(headphones.CONFIG.LIBRARYSCAN)}><label>Automatically scan library</label>
+						<input type="checkbox" name="libraryscan" id="libraryscan" value="1" ${checked(headphones.CONFIG.LIBRARYSCAN)}><label for="libraryscan">Automatically scan library</label>
 					</div>
 					<div class="row checkbox"> 
-					<input type="checkbox" name="autoadd" id="autoadd" value="1" ${checked(headphones.CONFIG.AUTO_ADD_ARTISTS)}><label>Auto-add new artists</label>
+						<input type="checkbox" name="autoadd" id="autoadd" value="1" ${checked(headphones.CONFIG.AUTO_ADD_ARTISTS)}><label for="autoadd">Auto-add new artists</label>
 					</div>
 								
 				</fieldset>
 				<br>
-				<input type="button" value="Save Changes and Scan" onclick="addScanAction();doAjaxCall('musicScan',$(this),'tabs',true);return false;" data-success="Changes saved. Library will be scanned">
-				<input type="button" value="Save Changes without Scanning Library" onclick="doAjaxCall('musicScan',$(this),'tabs',true);return false;" data-success="Changes Saved Successfully">
+				<%-- Buttons use classes and data attributes for AJAX --%>
+				<input type="button" class="ajax-button" data-action="musicScan" data-scan="1" data-success="Changes saved. Library will be scanned" value="Save Changes and Scan">
+				<input type="button" class="ajax-button" data-action="musicScan" data-success="Changes Saved Successfully" value="Save Changes without Scanning Library">
 			</form>
 		</div>
 
@@ -81,19 +81,15 @@
 			<p>Enter the username whose artists you want to import:</p>		
 			<br/>
 			<div class="row">
-				<label for="">Username</label>
-				<%
-					if headphones.CONFIG.LASTFM_USERNAME:
-						lastfmvalue = headphones.CONFIG.LASTFM_USERNAME
-					else:
-						lastfmvalue = ''
-				%>
-				<input type="text" value="${lastfmvalue}" placeholder="Last.fm username" onfocus="if
-				(this.value==this.defaultValue) this.value='';" name="username" id="username" size="18" />
-				<a href="javascript:void(0)" onclick="doAjaxCall('importLastFM?username=',$(this),'tabs');return false;" data-success="Last.fm username has been reset"><i class="fa fa-reply"></i> Reset username</a>
+				<label for="lastfm_username">Username</label>
+				<%-- Using HTML5 placeholder attribute --%>
+				<input type="text" id="lastfm_username" value="${headphones.CONFIG.LASTFM_USERNAME or ''}" placeholder="Last.fm username" name="username" size="18" />
+				<%-- Changed to use class and data attributes for AJAX --%>
+				<a href="#" class="ajax-link" data-action="importLastFM" data-reset="username" data-success="Last.fm username has been reset"><i class="fa fa-reply"></i> Reset username</a>
 			</div>
 			</fieldset>
-			<input type="button" value="Save changes" onclick="doAjaxCall('importLastFM',$(this),'tabs',true);return false;" data-success="Last.fm artists will be imported" data-error="Fill in a last.fm username"/>
+			<%-- Changed to use class and data attributes for AJAX --%>
+			<input type="button" class="ajax-button" data-action="importLastFM" data-success="Last.fm artists will be imported" data-error="Fill in a last.fm username" value="Save changes"/>
 		</form>
         <br/>
         <form action="importLastFMTag" method="GET" id="importLastFMTag">
@@ -102,16 +98,15 @@
             <p>Enter tag from which you want import top artists:</p>
             <br/>
             <div class="row">
-                <label>Tag</label>
-			    <input type="text" value="" onfocus="if
-                (this.value==this.defaultValue) this.value='';" name="tag" id="tag" size="18" />
+                <label for="lastfm_tag">Tag</label>
+			    <input type="text" id="lastfm_tag" value="" name="tag" size="18" placeholder="Enter tag"/>
                 <br/>
-                <label>Limit</label>
-			    <input type="text" value="50" onfocus="if
-			    (this.value==this.defaultValue) this.value='';" name="limit" id="limit" size="18" />
+                <label for="lastfm_limit">Limit</label>
+			    <input type="text" id="lastfm_limit" value="50" name="limit" size="18" placeholder="50"/>
             </div>
             </fieldset>
-            <input type="submit" />
+            <%-- Standard submit button for this form --%>
+            <input type="submit" value="Import Tag"/>
         </form>
     </div>
 
@@ -121,40 +116,43 @@
 		<fieldset>
 			<legend>Force Search</legend>
 			<div class="links">
-				<a href="javascript:void(0)" onclick="doAjaxCall('forceSearch',$(this))" data-success="Checking for wanted albums successful" data-error="Error checking wanted albums"><i class="fa fa-search fa-fw"></i> Force Check for Wanted Albums</a>
-				<a href="javascript:void(0)" onclick="doAjaxCall('forceUpdate',$(this))" data-success="Update active artists successful" data-error="Error forcing update artists"><i class="fa fa-heart fa-fw"></i> Force Update Active Artists [Fast]</a>
-				<a href="javascript:void(0)" onclick="doAjaxCall('checkGithub',$(this))" data-success="Checking for update successful" data-error="Error checking for update"><i class="fa fa-refresh fa-fw"></i> Check for Headphones Updates</a>
-				<a href="javascript:void(0)" id="delete_empty_artists"><i class="fa fa-trash-o fa-fw"></i> Delete empty Artists</a>
-					<div id="emptyartistdialog" title="Confirm Artist Deletion" style="display:none" class="configtable">
+				<%-- All links use classes and data attributes for AJAX --%>
+				<a href="#" class="ajax-link" data-action="forceSearch" data-success="Checking for wanted albums successful" data-error="Error checking wanted albums"><i class="fa fa-search fa-fw"></i> Force Check for Wanted Albums</a>
+				<a href="#" class="ajax-link" data-action="forceUpdate" data-success="Update active artists successful" data-error="Error forcing update artists"><i class="fa fa-heart fa-fw"></i> Force Update Active Artists [Fast]</a>
+				<a href="#" class="ajax-link" data-action="checkGithub" data-success="Checking for update successful" data-error="Error checking for update"><i class="fa fa-refresh fa-fw"></i> Check for Headphones Updates</a>
+				
+                <a href="#" class="open-dialog-trigger" data-dialog-id="dialog-empty-artists"><i class="fa fa-trash-o fa-fw"></i> Delete empty Artists</a>
+					<div id="dialog-empty-artists" title="Confirm Artist Deletion" style="display:none" class="configtable">
 					    %if emptyArtists:
 						<h3>The following artists will be deleted:</h3>
 						
 						%for emptyArtist in emptyArtists:
 							<p>${emptyArtist['ArtistName']}</p>
 						%endfor
-						<input type="button" value="Delete Empty Artists" onclick="doAjaxCall('deleteEmptyArtists',$(this))" data-success="Empty Artists deleted" data-error="Error deleting empty artists">
+						<%-- Button uses class and data attributes for AJAX --%>
+						<input type="button" class="ajax-button" data-action="deleteEmptyArtists" data-success="Empty Artists deleted" data-error="Error deleting empty artists" value="Delete Empty Artists">
 					    %else:
-					        No empty artists found.
+					        <p>No empty artists found.</p>
 					    %endif
 					</div>
 					<div id="post_process">
-					<a href="javascript:void(0)" class="btnOpenDialog"><i class="fa fa-wrench fa-fw"></i> Force Post-Process Albums in Download Folder</a>
+						<a href="#" class="open-dialog-trigger" data-dialog-id="dialog-post-process"><i class="fa fa-wrench fa-fw"></i> Force Post-Process Albums in Download Folder</a>
 					</div>
 			</div>
 		</fieldset>
 		<fieldset>
             <div class="row" id="post_process_alternate">
-                <label>Force Post-Process Albums in Alternate Folder</label>
-			    <input type="text" value="" name="dir" id="dir" size="50" />
-			    <input type="button" class="btnOpenDialog" value="Submit" />
+                <label for="alt_dir_path">Force Post-Process Albums in Alternate Folder</label>
+			    <input type="text" value="" name="dir" id="alt_dir_path" size="50" placeholder="Enter alternate directory" />
+			    <input type="button" class="open-dialog-trigger ajax-dialog-submit" data-dialog-id="dialog-post-process" data-input-id="alt_dir_path" data-input-param="dir" value="Submit" />
             </div>
         </fieldset>
 
         <fieldset>
             <div class="row" id="post_process_single">
-                <label>Post-Process Single Folder</label>
-			    <input type="text" value="" name="album_dir" id="album_dir" size="50" />
-			    <input type="button" class="btnOpenDialog" value="Submit" />
+                <label for="album_dir_path">Post-Process Single Folder</label>
+			    <input type="text" value="" name="album_dir" id="album_dir_path" size="50" placeholder="Enter album directory" />
+			    <input type="button" class="open-dialog-trigger ajax-dialog-submit" data-dialog-id="dialog-post-process" data-input-id="album_dir_path" data-input-param="album_dir" value="Submit" />
             </div>
         </fieldset>
 
@@ -166,89 +164,200 @@
 			<legend>Force Legacy</legend>
 				<p>Please note that these functions will take a significant amount of time to complete.</p>
 			<div class="links">
-				<a href="javascript:void(0)" onclick="doAjaxCall('forceFullUpdate',$(this))" data-success="Update active artists successful" data-error="Error forcing update artists"><i class="fa fa-heart fa-fw"></i> Force Update Active Artists [Comprehensive]</a>
+				<%-- All links use classes and data attributes for AJAX --%>
+				<a href="#" class="ajax-link" data-action="forceFullUpdate" data-success="Update active artists successful" data-error="Error forcing update artists"><i class="fa fa-heart fa-fw"></i> Force Update Active Artists [Comprehensive]</a>
 				<BR>
-				<a href="javascript:void(0)" onclick="doAjaxCall('forceScan',$(this))" data-success="Library scan successful" data-error="Error forcing library scan"><i class="fa fa-refresh fa-fw"></i> Force Re-scan Library [Comprehensive]</a>
+				<a href="#" class="ajax-link" data-action="forceScan" data-success="Library scan successful" data-error="Error forcing library scan"><i class="fa fa-refresh fa-fw"></i> Force Re-scan Library [Comprehensive]</a>
 				<BR>
 				<small>*Warning: If you choose [Force Re-scan Library], any manually ignored/matched artists/albums will be reset to "unmatched".</small>
 
 		</div>
 		</fieldset>
-		
 	</div>
-	<div id="dialog-confirm"></div>
+
+    <%-- Shared dialog for post-process confirmation --%>
+	<div id="dialog-post-process" title="Keep original folder(s)?" style="display:none">
+        <p>Do you want to keep the original folder(s) after post-processing? If you click no, the folders still might be kept depending on your global settings</p>
+    </div>
 
 </div>
 </%def>
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script>
-		function addScanAction() {
-			$('#autoadd').append('<input type="hidden" name="scan" value=1 />');
-		};
+		// Encapsulate page-specific logic
+		var ManagePage = ManagePage || {};
 
-		function fnOpenNormalDialog(id) {
-			if (id === "post_process"){
-				var url = "forcePostProcess?"
-			}
-			if (id === "post_process_alternate"){
-				var dir = $('#dir').val();
-				var url = "forcePostProcess?dir=" + dir + "&"
-			}
-			if (id === "post_process_single"){
-				var dir = $('#album_dir').val();
-				var url = "forcePostProcess?album_dir=" + dir + "&"
-			}
-			var t = $('<a data-success="Post-Processor is being loaded" data-error="Error during Post-Processing">');
-		    $("#dialog-confirm").html("Do you want to keep the original folder(s) after post-processing? If you click no, the folders still might be kept depending on your global settings");
+		ManagePage.init = function() {
+			// Initialize jQuery UI Tabs
+			jQuery( "#tabs" ).tabs();
 
-		    // Define the Dialog and its properties.
-		    $("#dialog-confirm").dialog({
+			// Initialize jQuery UI Dialogs
+			$('#dialog-manage-albums').dialog({
+				autoOpen: false,
+				modal: true,
+				width: 450,
+				height: 'auto',
+				title: "Choose Album Filter"
+			});
+
+			$('#dialog-empty-artists').dialog({
+				autoOpen: false,
+				modal: true,
+				width: 500,
+				height: 'auto',
+				title: "Confirm Artist Deletion"
+			});
+
+			// Post-process confirmation dialog
+			$('#dialog-post-process').dialog({
+				autoOpen: false,
 				resizable: false,
 				modal: true,
-		        title: "Keep original folder(s)?",
 				height: 170,
 				width: 400,
+				title: "Keep original folder(s)?",
 				buttons: {
 					"Yes": function () {
-		                $(this).dialog('close');
-		                doAjaxCall(url + "keep_original_folder=True", t);
+						var $dialog = $(this);
+						$dialog.dialog('close');
+						// Retrieve parameters stored on the trigger element
+						var $trigger = $dialog.data('triggerElement');
+						var url = $trigger.data('ajax-url') + "&keep_original_folder=True";
+						var successMsg = $trigger.data('success') || "Post-Processor is being loaded";
+						var errorMsg = $trigger.data('error') || "Error during Post-Processing";
+
+						if (typeof doAjaxCall === 'function') {
+							doAjaxCall(url, $trigger, 'tabs', successMsg, errorMsg);
+						} else {
+							console.error("doAjaxCall function is not defined. Cannot perform post-process action.");
+						}
 					},
 					"No": function () {
-		                $(this).dialog('close');
-		                doAjaxCall(url + "keep_original_folder=False", t);
-		            }
-		        }
-		    });
-		}
+						var $dialog = $(this);
+						$dialog.dialog('close');
+						// Retrieve parameters stored on the trigger element
+						var $trigger = $dialog.data('triggerElement');
+						var url = $trigger.data('ajax-url') + "&keep_original_folder=False";
+						var successMsg = $trigger.data('success') || "Post-Processor is being loaded";
+						var errorMsg = $trigger.data('error') || "Error during Post-Processing";
 
-		$('.btnOpenDialog').click(function(e){
-			e.preventDefault();
-			var parentId = $(this).closest('div').prop('id');
-			fnOpenNormalDialog(parentId);
-		});
-
-		function callback(value) {
-		    if (value) {
-		        alert("Confirmed");
+						if (typeof doAjaxCall === 'function') {
+							doAjaxCall(url, $trigger, 'tabs', successMsg, errorMsg);
 						} else {
-		        alert("Rejected");
+							console.error("doAjaxCall function is not defined. Cannot perform post-process action.");
 						}
 					}
+				}
+			});
+
+			// Event delegation for opening dialogs
+			$(document).on('click', '.open-dialog-trigger', function(e) {
+				e.preventDefault();
+				var dialogId = $(this).data('dialog-id');
+				var $dialog = $('#' + dialogId);
+
+				// For post-process dialogs, build the base URL and store it
+				if (dialogId === 'dialog-post-process') {
+					var url = "forcePostProcess?";
+					var inputId = $(this).data('input-id');
+					var inputParam = $(this).data('input-param');
+					if (inputId && inputParam) {
+						var inputValue = $('#' + inputId).val();
+						if (inputValue) {
+							url += inputParam + "=" + encodeURIComponent(inputValue) + "&";
+						}
+					}
+					// Store the base URL and the triggering element on the dialog for use in buttons
+					$dialog.data('ajax-url', url);
+					$dialog.data('triggerElement', $(this));
+				}
+				$dialog.dialog('open');
+			});
+
+			// Event delegation for general AJAX buttons (Save Changes, Delete Empty Artists)
+			$(document).on('click', '.ajax-button', function(e) {
+				e.preventDefault();
+				var $this = $(this);
+				var action = $this.data('action'); // e.g., musicScan, deleteEmptyArtists
+				var successMsg = $this.data('success');
+				var errorMsg = $this.data('error');
+				var formId = $this.closest('form').attr('id');
+				var url = '/' + action;
+				var data = {};
+
+				// For form submissions, serialize the form data
+				if (formId) {
+					var formData = $('#' + formId).serializeArray();
+					$.each(formData, function() {
+						if (data[this.name]) {
+							if (!data[this.name].push) {
+								data[this.name] = [data[this.name]];
+							}
+							data[this.name].push(this.value || '');
+						} else {
+							data[this.name] = this.value || '';
+						}
+					});
+				}
 
-		function initThisPage() {
-			$('#manage_albums').click(function() {
-				$('#dialog').dialog();
-				return false;
+				// Add specific data attributes from the button if present
+				$.each($this.data(), function(key, value) {
+					// Exclude 'action', 'success', 'error', 'scan' (handled specifically)
+					if (key !== 'action' && key !== 'success' && key !== 'error' && key !== 'scan') {
+						data[key] = value;
+					}
 				});
-			$('#delete_empty_artists').click(function() {
-				$('#emptyartistdialog').dialog();
-				return false;
+
+				// Special handling for 'scan' parameter for musicScan
+				if ($this.data('scan') === 1) {
+					data['scan'] = 1;
+				}
+
+				// Special handling for 'reset' parameter for importLastFM
+				if ($this.data('reset') === 'username') {
+					url += '?username='; // Append empty username to clear it
+					data = {}; // Clear other data if resetting
+				}
+
+				if (typeof doAjaxCall === 'function') {
+					// Assuming doAjaxCall takes URL, trigger, context, successMsg, errorMsg, and data
+					doAjaxCall(url, $this, 'tabs', successMsg, errorMsg, data);
+				} else {
+					console.error("doAjaxCall function is not defined. Cannot perform AJAX button action.");
+				}
+
+				// If it's a delete artists action, close the dialog
+				if (action === 'deleteEmptyArtists') {
+					$('#dialog-empty-artists').dialog('close');
+					// Optionally, refresh the list of empty artists if it's dynamic
+				}
 			});
-			jQuery( "#tabs" ).tabs();
+
+			// Event delegation for general AJAX links (Force Actions, Force Legacy, Reset Last.fm)
+			$(document).on('click', '.ajax-link', function(e) {
+				e.preventDefault();
+				var $this = $(this);
+				var action = $this.data('action');
+				var successMsg = $this.data('success');
+				var errorMsg = $this.data('error');
+				var url = '/' + action; // Base URL
+
+				if (typeof doAjaxCall === 'function') {
+					doAjaxCall(url, $this, null, successMsg, errorMsg); // No specific context needed like 'tabs' here unless doAjaxCall uses it.
+				} else {
+					console.error("doAjaxCall function is not defined. Cannot perform AJAX link action.");
+				}
+			});
+
+			// Call initActions if it's a global function that needs to run
+			if (typeof initActions === 'function') {
 				initActions();
+			}
 		};
+
 		$(document).ready(function() {
-			initThisPage();
+			ManagePage.init();
 		});
 	</script>
 </%def>

data/interfaces/default/managealbums.html

@@ -1,7 +1,8 @@
 <%inherit file="base.html" />
 <%!
-	from headphones import db
-	import headphones
+	# Removed direct DB imports/interactions here, as data should be pre-fetched server-side.
+	# from headphones import db
+	import headphones # Still needed for headphones.LOSSY_MEDIA_FORMATS if used
 %>
 
 <%def name="headerIncludes()">
@@ -17,9 +18,10 @@
 	<div id="manageheader" class="title">
 		<h1 class="clearfix"><i class="fa fa-music"></i> Manage Albums</h1>
 	</div>
-	<form action="markAlbums" method="get" id="markAlbums">
+	<form action="markAlbums" method="get" id="markAlbumsForm"> <%-- Renamed ID to avoid conflict with markalbum div --%>
 	<div id="markalbum">Mark selected albums as 
-		<select name="action" onChange="doAjaxCall('markAlbums',$(this),'table',true);" data-error="You didn't select any albums">
+		<%-- Replaced inline onChange with a class and data attributes for JS handling --%>
+		<select name="action" id="markAlbumActionSelect">
   			<option disabled="disabled" selected="selected">Choose...</option>
   			<option value="Wanted">Wanted</option>
   			<option value="WantedNew">Wanted (new only)</option>
@@ -28,25 +30,27 @@
 			<option value="Ignored">Ignored</option>
   			<option value="Downloaded">Downloaded</option>
 		</select>
-		<input type="hidden" value="Go">
+		<input type="hidden" value="Go"> <%-- This hidden input might be redundant if data is sent via AJAX --%>
 	</div>
 	<table class="display" id="album_table">
 		<thead>
 			<tr>
-				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
-				<th id="albumname">Album</th>
-                <th id="artistname">Artist</th>
-				<th id="reldate">Date</th>
-				<th id="type">Type</th>
-				<th id="status">Status</th>
-				<th id="have">Have</th>
-				<th id="bitrate">Bitrate</th>
-				<th id="albumformat">Format</th>
+				<th class="select-all-checkbox"><input type="checkbox" id="toggleAllAlbums" /></th> <%-- Added ID for easier targeting --%>
+				<th class="column-albumname">Album</th>
+                <th class="column-artistname">Artist</th>
+				<th class="column-reldate">Date</th>
+				<th class="column-type">Type</th>
+				<th class="column-status">Status</th>
+				<th class="column-have">Have</th>
+				<th class="column-bitrate">Bitrate</th>
+				<th class="column-albumformat">Format</th>
 			</tr>
 		</thead>
 		<tbody>
 		%for album in albums:
 			<%
+				# Assuming these values are now pre-calculated and available in the 'album' dict
+				# Removed all in-template database queries for performance.
 				if album['Status'] == 'Skipped':
 					grade = 'Z'
 				elif album['Status'] == 'Wanted':
@@ -58,45 +62,30 @@
 				else:
 					grade = 'A'
 
-				myDB = db.DBConnection()					
-				totaltracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=?', [album['AlbumID']]))
-				havetracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=? AND Location IS NOT NULL', [album['AlbumID']])) + len(myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle LIKE ? AND Matched = "Failed"', [album['ArtistName'], album['AlbumTitle']]))
-				
-				try:
-					percent = (havetracks*100.0)/totaltracks
-					if percent > 100:
-						percent = 100
-				except (ZeroDivisionError, TypeError):
-					percent = 0
-					totaltracks = '?'
-					
-				avgbitrate = myDB.action("SELECT AVG(BitRate) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
-				if avgbitrate:
-					bitrate = str(int(avgbitrate)/1000) + ' kbps'
-				else:
-					bitrate = ''
-
-				albumformatcount = myDB.action("SELECT COUNT(DISTINCT Format) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
-				if albumformatcount == 1:
-					albumformat = myDB.action("SELECT DISTINCT Format FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0]
-				elif albumformatcount > 1:
-					albumformat = 'Mixed'
-				else:
-					albumformat = ''
-
-				lossy_formats = [str.upper(fmt) for fmt in headphones.LOSSY_MEDIA_FORMATS]
-
+				# Use the pre-calculated values from the album object
+				totaltracks_display = album.get('TotalTracks', '?')
+				havetracks_display = album.get('HaveTracks', 0)
+				percent_display = album.get('PercentOwned', 0)
+				bitrate_display = album.get('BitrateDisplay', '') # e.g., '192 kbps'
+				albumformat_display = album.get('AlbumFormat', '') # e.g., 'MP3', 'FLAC', 'Mixed'
 			%>
 			<tr class="grade${grade}">
-				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></td>
-				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
-                <td id="artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
-				<td id="reldate">${album['ReleaseDate']}</td>
-				<td id="type">${album['Type']}</td>
-				<td id="status">${album['Status']}</td>
-				<td id="have"><span title="${percent}"><span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
-				<td id="bitrate">${bitrate}</td>
-				<td id="albumformat">${albumformat}</td>
+				<td class="select-album-checkbox"><input type="checkbox" name="albumid_${album['AlbumID']}" value="${album['AlbumID']}" class="album-checkbox" /></td> <%-- Unique name and class for individual checkboxes --%>
+				<td class="column-albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+                <td class="column-artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
+				<td class="column-reldate">${album['ReleaseDate']}</td>
+				<td class="column-type">${album['Type']}</td>
+				<td class="column-status">${album['Status']}</td>
+				<td class="column-have">
+                    <span title="${percent_display}"></span> <%-- Using percent_display for title attribute --%>
+                    <div class="progress-container" role="progressbar" aria-valuenow="${percent_display | int}" aria-valuemin="0" aria-valuemax="100">
+                        <div style="width:${percent_display}%">
+                            <div class="havetracks">${havetracks_display}/${totaltracks_display}</div>
+                        </div>
+                    </div>
+                </td>
+				<td class="column-bitrate">${bitrate_display}</td>
+				<td class="column-albumformat">${albumformat_display}</td>
 			</tr>	
 		%endfor
 		</tbody>
@@ -106,28 +95,75 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
+	<style>
+		/* Styles for progress bar, similar to index.html for consistency */
+		.progress-container {
+			background-color: #eee;
+			border-radius: 5px;
+			height: 15px; /* Adjust height as needed */
+			overflow: hidden;
+			position: relative;
+			width: 100%; /* Or a fixed width if preferred */
+		}
+
+		.progress-container > div {
+			background-color: #4CAF50; /* Green color for progress */
+			height: 100%;
+			border-radius: 5px;
+			text-align: center;
+			color: white;
+			font-size: 10px; /* Smaller font for percentage */
+			line-height: 15px; /* Vertically align text */
+		}
+
+		.havetracks {
+			padding: 0 5px; /* Add some padding around the text */
+		}
+
+		/* Styles for album status grades */
+		.gradeZ { /* Skipped */
+			background-color: #f2dede; /* Light red/pink */
+		}
+		.gradeX { /* Wanted */
+			background-color: #d9edf7; /* Light blue */
+		}
+		.gradeI { /* Ignored */
+			background-color: #fcf8e3; /* Light yellow */
+		}
+		.gradeC { /* Snatched */
+			background-color: #dff0d8; /* Light green */
+		}
+		.gradeA { /* Downloaded/Processed (default) */
+			/* No specific background or subtle light grey */
+		}
+	</style>
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-		function initThisPage() {
+		// Encapsulate page-specific logic
+		var ManageAlbumsPage = ManageAlbumsPage || {};
+
+		ManageAlbumsPage.initDataTable = function() {
 			$('#album_table').dataTable({
 				"bDestroy": true,
 				"aoColumns": [
-	                null,
-					null,
-					null,
-					null,
-					null,
-					null,
-					{ "sType": "title-numeric"},
-					null,
-					null
+	                null, // Checkbox column (not sortable)
+					null, // Album Name
+					null, // Artist Name
+					null, // Date
+					null, // Type
+					null, // Status
+					{ "sType": "title-numeric"}, // Have (uses title for numeric sort)
+					null, // Bitrate
+					null  // Format
 				],
 				"aoColumnDefs": [
-				          { 'bSortable': false, 'aTargets': [ 0 ] }
+				    { 'bSortable': false, 'aTargets': [ 0 ] } // Disable sorting for checkbox column
 				],
 				"oLanguage": {
 					"sLengthMenu":"Show _MENU_ albums per page",
@@ -136,19 +172,83 @@
 					"sInfoEmpty":"Showing 0 to 0 of 0 albums",
 					"sInfoFiltered":"(filtered from _MAX_ total albums)",
 					"sSearch": ""},
-				"bPaginate": false,
-				"aaSorting": [[5, 'desc']],
+				"bPaginate": false, // All data loaded on one page
+				"aaSorting": [[5, 'desc']], // Default sort by Status descending
 				"fnDrawCallback": function (o) {
 	                // Jump to top of page
 	                $('html,body').scrollTop(0);
 	            }
-
 			});
+		};
+
+		ManageAlbumsPage.initActions = function() {
+			// Event listener for the "Mark selected albums as" dropdown
+			$('#markAlbumActionSelect').on('change', function() {
+				var $this = $(this);
+				var actionValue = $this.val();
+				var selectedAlbumIds = [];
+
+				// Get all checked album checkboxes
+				$('.album-checkbox:checked').each(function() {
+					selectedAlbumIds.push($(this).val());
+				});
+
+				if (selectedAlbumIds.length === 0) {
+					// Display error if no albums are selected
+					if (typeof showMessage === 'function') { // Assuming showMessage is a global utility
+						showMessage($this.data('error') || "You didn't select any albums", 'error');
+					} else {
+						alert($this.data('error') || "You didn't select any albums");
+					}
+					// Reset select box to default
+					$this.val($('option:first', $this).val());
+					return; // Stop execution
+				}
+
+				// Construct URL with selected album IDs and action
+				var url = 'markAlbums?action=' + encodeURIComponent(actionValue);
+				$.each(selectedAlbumIds, function(index, id) {
+					url += '&albumid=' + encodeURIComponent(id); // Use a consistent param name if backend expects multiple
+				});
+
+				// Perform AJAX call
+				if (typeof doAjaxCall === 'function') {
+					doAjaxCall(url, $this, 'table', 'Albums marked as ' + actionValue + ' successfully!', 'Error marking albums.');
+					// After successful action, you might want to redraw the table or update rows
+					// $('#album_table').dataTable().fnDraw();
+				} else {
+					console.error("doAjaxCall function is not defined. Cannot mark albums asynchronously.");
+				}
+				// Reset select box to default after action
+				$this.val($('option:first', $this).val());
+			});
+
+			// Event listener for the "toggle all" checkbox
+			$('#toggleAllAlbums').on('click', function() {
+				$('.album-checkbox').prop('checked', this.checked);
+			});
+
+			// Optionally, reset individual checkboxes if header checkbox is unchecked (and vice-versa if needed)
+			$('.album-checkbox').on('click', function() {
+				if (!this.checked) {
+					$('#toggleAllAlbums').prop('checked', false);
+				} else {
+					// If all are checked, check the header checkbox
+					if ($('.album-checkbox:checked').length === $('.album-checkbox').length) {
+						$('#toggleAllAlbums').prop('checked', true);
+					}
+				}
+			});
+		};
+
+		$(document).ready(function() {
+			ManageAlbumsPage.initDataTable();
+			ManageAlbumsPage.initActions();
+
+			// Assuming resetFilters is a global function from common.js
+			if (typeof resetFilters === 'function') {
 				resetFilters("albums");
 			}
-		$(document).ready(function() {
-			initThisPage();
 		});
 	</script>
 </%def>
-

data/interfaces/default/manageartists.html

@@ -1,7 +1,5 @@
 <%inherit file="base.html" />
 
-
-
 <%def name="headerIncludes()">
 	<div id="subhead_container">
 			&nbsp;
@@ -15,9 +13,10 @@
 	<div id="manageheader" class="title">
 		<h1 class="clearfix"><i class="fa fa-music"></i> Manage Artists</h1>
 	</div>
-	<form action="markArtists" method="get" id="markArtists">
-	<div id="markalbum">
-		<select name="action" onChange="doAjaxCall('markArtists',$(this),'table',true);" data-error="You didn't select any artists">
+	<form action="markArtists" method="get" id="markArtistsForm"> <%-- Renamed ID to avoid conflict with markalbum div --%>
+	<div id="markartists_controls"> <%-- More descriptive ID for the controls div --%>
+		<%-- Replaced inline onChange with an ID for JS handling --%>
+		<select name="action" id="markArtistActionSelect">
   			<option disabled="disabled" selected="selected">Choose...</option>
   			<option value="pause">Pause</option>
   			<option value="resume">Resume</option>
@@ -25,17 +24,17 @@
   			<option value="delete">Delete</option>
 		</select>
 		selected artists
-		<input type="hidden" value="Go">
+		<input type="hidden" value="Go"> <%-- This hidden input might be redundant if data is sent via AJAX --%>
 	</div>
 	<table class="display" id="artist_table">
 		<thead>
 			<tr>
-				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
-				<th id="albumart"></th>
-				<th id="name">Artist Name</th>
-				<th id="status">Status</th>
-				<th id="album">Latest Album</th>
-				<th id="lastupdated">Last Updated</th>
+				<th class="select-all-checkbox"><input type="checkbox" id="toggleAllArtists" /></th> <%-- Added ID for easier targeting --%>
+				<th class="column-albumart"></th> <%-- Changed ID to class for consistency and uniqueness --%>
+				<th class="column-name">Artist Name</th>
+				<th class="column-status">Status</th>
+				<th class="column-album">Latest Album</th>
+				<th class="column-lastupdated">Last Updated</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -48,6 +47,7 @@
 				else:
 					grade = 'Z'
 					
+				# Python logic for display formatting is fine here, as it's not doing DB queries.
 				if artist['ReleaseDate'] and artist['LatestAlbum']:
 					releasedate = artist['ReleaseDate']
 					albumdisplay = '<i>%s</i> (%s)' % (artist['LatestAlbum'], artist['ReleaseDate'])	
@@ -65,12 +65,17 @@
 					
 			%>
 			<tr class="grade${grade}">
-				<td id="select"><input type="checkbox" name="${artist['ArtistID']}" class="checkbox" /></td>
-				<td id="albumart"><div id="artistImg"><img class="albumArt" id="${artist['ArtistID']}" src="artwork/thumbs/artist/${artist['ArtistID']}" height="50" width="50"></div></td>
-				<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
-				<td id="status">${artist['Status']}</td>	
-				<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
-				<td id="lastupdated">${lastupdated}</td>
+				<td class="select-artist-checkbox"><input type="checkbox" name="artistid_${artist['ArtistID']}" value="${artist['ArtistID']}" class="artist-checkbox" /></td> <%-- Unique name and class for individual checkboxes --%>
+				<td class="column-albumart">
+                    <div class="artistImg-container">
+                        <%-- Using data-src for lazy loading with jquery.unveil.min.js and native loading="lazy" --%>
+                        <img class="albumArt-thumb" alt="Album art for ${artist['ArtistName']}" data-src="artwork/thumbs/artist/${artist['ArtistID']}" loading="lazy" />
+                    </div>
+                </td>
+				<td class="column-name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
+				<td class="column-status">${artist['Status']}</td>	
+				<td class="column-album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
+				<td class="column-lastupdated">${lastupdated}</td>
 			</tr>
 		%endfor
 		</tbody>
@@ -80,37 +85,142 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
+	<style>
+		/* Basic CSS for album art thumbnail, consistent with index.html */
+		.albumArt-thumb {
+			height: 50px;
+			width: 50px;
+			object-fit: cover; /* Ensures image covers the area without distortion */
+			vertical-align: middle;
+		}
+
+		/* Styles for artist status grades */
+		.gradeX { /* Paused */
+			background-color: #f2dede; /* Light red/pink */
+		}
+		.gradeC { /* Loading */
+			background-color: #dff0d8; /* Light green */
+		}
+		.gradeZ { /* Others (e.g., Active) */
+			/* No specific background or subtle light grey */
+		}
+	</style>
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
+    <script src="js/libs/jquery.unveil.min.js"></script> <%-- Added for lazy loading --%>
 	<script>
-		function initThisPage() {
+		// Encapsulate page-specific logic
+		var ManageArtistsPage = ManageArtistsPage || {};
+
+		ManageArtistsPage.initDataTable = function() {
 			$('#artist_table').dataTable({
 				"bDestroy": true,
 				"aoColumns": [
-					null,
-					null,
-					{ "sType": "title-string"},
-					null,
-					{ "sType": "title-string"},
-					null
+					null, // Checkbox column (not sortable)
+					null, // Album art (not sortable by default)
+					{ "sType": "title-string"}, // Artist Name (uses title for sort)
+					null, // Status
+					{ "sType": "title-string"}, // Latest Album (uses title for sort)
+					null  // Last Updated
+				],
+				"aoColumnDefs": [
+				    { 'bSortable': false, 'aTargets': [ 0, 1 ] } // Disable sorting for checkbox and album art columns
 				],
 				"oLanguage": {
 					"sSearch" : "",
 					"sEmptyTable": " "
 				},
-				"bStateSave": true,
-				"bPaginate": false
+				"bStateSave": true, // Retain table state across page loads
+				"bPaginate": false, // All data loaded on one page
+                "fnDrawCallback": function (o) {
+                    // Re-unveil images after each draw for lazy loading
+                    $("img.albumArt-thumb").unveil();
+                }
 			});
+		};
+
+		ManageArtistsPage.initActions = function() {
+			// Event listener for the "Mark selected artists" dropdown
+			$('#markArtistActionSelect').on('change', function() {
+				var $this = $(this);
+				var actionValue = $this.val();
+				var selectedArtistIds = [];
+
+				// Get all checked artist checkboxes
+				$('.artist-checkbox:checked').each(function() {
+					selectedArtistIds.push($(this).val());
+				});
+
+				if (selectedArtistIds.length === 0) {
+					// Display error if no artists are selected
+					if (typeof showMessage === 'function') { // Assuming showMessage is a global utility
+						showMessage($this.data('error') || "You didn't select any artists", 'error');
+					} else {
+						alert($this.data('error') || "You didn't select any artists");
+					}
+					// Reset select box to default
+					$this.val($('option:first', $this).val());
+					return; // Stop execution
+				}
+
+				// Construct URL with selected artist IDs and action
+				var url = 'markArtists?action=' + encodeURIComponent(actionValue);
+				$.each(selectedArtistIds, function(index, id) {
+					url += '&artistid=' + encodeURIComponent(id); // Use a consistent param name if backend expects multiple
+				});
+
+				// Perform AJAX call
+				if (typeof doAjaxCall === 'function') {
+					doAjaxCall(url, $this, 'table', 'Artists marked as ' + actionValue + ' successfully!', 'Error marking artists.');
+					// After successful action, you might want to redraw the table or update rows
+					// $('#artist_table').dataTable().fnDraw();
+				} else {
+					console.error("doAjaxCall function is not defined. Cannot mark artists asynchronously.");
+				}
+				// Reset select box to default after action
+				$this.val($('option:first', $this).val());
+			});
+
+			// Event listener for the "toggle all" checkbox
+			$('#toggleAllArtists').on('click', function() {
+				$('.artist-checkbox').prop('checked', this.checked);
+			});
+
+			// Optionally, update "toggle all" checkbox based on individual checkboxes
+			$(document).on('click', '.artist-checkbox', function() {
+				if (!this.checked) {
+					$('#toggleAllArtists').prop('checked', false);
+				} else {
+					// If all are checked, check the header checkbox
+					if ($('.artist-checkbox:checked').length === $('.artist-checkbox').length) {
+						$('#toggleAllArtists').prop('checked', true);
+					}
+				}
+			});
+		};
+
+		$(document).ready(function() {
+			ManageArtistsPage.initDataTable();
+			ManageArtistsPage.initActions();
+
+			// Assuming resetFilters is a global function from common.js
+			if (typeof resetFilters === 'function') {
 				resetFilters("artists");
 			}
-		$(document).ready(function() {
-			initThisPage();
 		});
-		$(window).load(function(){
+
+		// Call initFancybox if it's a global function that needs to run on window load
+		$(window).on('load', function(){
+			if (typeof initFancybox === 'function') {
 				initFancybox();
+			} else {
+				console.warn("initFancybox function is not defined.");
+			}
 		});
 	</script>
 </%def>

data/interfaces/default/managemanual.html

@@ -1,8 +1,9 @@
 <%inherit file="base.html" />
 <%!
 	import headphones
-	from headphones import db, helpers
-	myDB = db.DBConnection()
+	# Removed direct DB imports/interactions here, as data should be pre-fetched server-side.
+	# from headphones import db, helpers
+	# myDB = db.DBConnection() # This should not be in the template
 %>
 
 <%def name="headerIncludes()">
@@ -20,73 +21,82 @@
 		<h1 class="clearfix"><i class="fa fa-music"></i> Manage Manually Matched Albums</h1>
 	</div>
 
-	<table class="display" id="artist_table">
+	<table class="display" id="manual_album_table"> <%-- Changed ID for clarity --%>
 		<thead>
 			<tr>
-				<th id="artist">Local Artist</th>
-				<th id="album">Local Album</th>
-				<th id="status">Previous Action</th>
+				<th class="column-artist">Local Artist</th> <%-- Changed ID to class --%>
+				<th class="column-album">Local Album</th> <%-- Changed ID to class --%>
+				<th class="column-status">Previous Action</th> <%-- Changed ID to class --%>
 			</tr>
 		</thead>
 		<tbody>
-		<% count_albums=0 %>
+		<% count_albums=0 %> <%-- Keeping count_albums for potential unique element IDs if still absolutely necessary, though aiming for generic approach --%>
 		%for album in manualalbums:
 			<tr class="gradeZ">
 			<%
+				# These replacements should ideally be done server-side before passing to template,
+				# or in JS using encodeURIComponent, but kept here for minimal change.
 				old_artist_clean = album['ArtistName'].replace('&','%26').replace('+', '%2B').replace("'","%27")
 				old_album_clean = album['AlbumTitle'].replace('&','%26').replace('+', '%2B').replace("'","%27")
 			%>
-			<td id="artist">${album['ArtistName']}<BR>
-				<button id="reset_artist${count_albums}" onClick="reset_Artist(this.id)">(<-) Reset Artist</button>
-				<div id="reset_artist_dialog${count_albums}" title="Reset Artist" style="display:none">
-					<table>
-					<tr><td>Are you sure you want to reset Local Artist: ${album['ArtistName']} to unmatched?</td></tr>
-					<tr><td align="right"><BR>
-					%if album['AlbumStatus'] == "Ignored":
-						<button href="javascript:void(0)" onclick="doAjaxCall('markManual?action=unignoreArtist&existing_artist=${old_artist_clean}', $(this), 'page');" data-success="Successfully reset ${album['ArtistName']} to unmatched">Reset Artist</button>
-					%elif album['AlbumStatus'] == "Matched":
-						<button href="javascript:void(0)" onclick="doAjaxCall('markManual?action=unmatchArtist&existing_artist=${old_artist_clean}', $(this), 'page');" data-success="Successfully restored ${album['ArtistName']} to unmatched">Reset Artist</button>
-					%endif
-					</td></tr>
-					</table>
-				</div>
+			<td class="column-artist">
+				${album['ArtistName']}<BR>
+				<%-- Use a common class and data attributes to pass info to generic dialog --%>
+				<button type="button" class="reset-button"
+                        data-reset-type="artist"
+                        data-artist-name="${album['ArtistName']}"
+                        data-album-status="${album['AlbumStatus']}"
+                        data-old-artist-clean="${old_artist_clean}">
+                    (&lt;-) Reset Artist
+                </button>
 			</td>
-			<td id="album">${album['AlbumTitle']}<BR>
-				<button id="reset_album${count_albums}" onClick="reset_Album(this.id)">(<-) Reset Album</button>
-				<div id="reset_album_dialog${count_albums}" title="Reset Album" style="display:none">
-					<table>
-					<tr><td>Are you sure you want to reset Local Album: ${album['AlbumTitle']} to unmatched?</td></tr>
-					<tr><td align="right"><BR>
-					%if album['AlbumStatus'] == "Ignored":
-						<button href="javascript:void(0)" onclick="doAjaxCall('markManual?action=unignoreAlbum&existing_artist=${old_artist_clean}&existing_album=${old_album_clean}', $(this), 'page');" data-success="Successfully reset ${album['AlbumTitle']} to unmatched">Reset Album</button>
-					%elif album['AlbumStatus'] == "Matched":
-						<button href="javascript:void(0)" onclick="doAjaxCall('markManual?action=unmatchAlbum&existing_artist=${old_artist_clean}&existing_album=${old_album_clean}', $(this), 'page');" data-success="Successfully reset ${album['AlbumTitle']} to unmatched">Reset Album</button>
-					%endif
-					</td></tr>
-					</table>
-				</div>
-
+			<td class="column-album">
+				${album['AlbumTitle']}<BR>
+				<%-- Use a common class and data attributes to pass info to generic dialog --%>
+				<button type="button" class="reset-button"
+                        data-reset-type="album"
+                        data-artist-name="${album['ArtistName']}"
+                        data-album-title="${album['AlbumTitle']}"
+                        data-album-status="${album['AlbumStatus']}"
+                        data-old-artist-clean="${old_artist_clean}"
+                        data-old-album-clean="${old_album_clean}">
+                    (&lt;-) Reset Album
+                </button>
 			</td>
-			<td id="status">${album['AlbumStatus']}
-
+			<td class="column-status">
+                ${album['AlbumStatus']}
 			</td>
 			</tr>
 		<% count_albums+=1 %>
 		%endfor
 		</tbody>
 	</table>
+
+    <%-- Generic Reset Confirmation Dialog (only one on the page) --%>
+    <div id="reset_dialog" title="Reset Confirmation" style="display:none">
+        <p class="dialog-message"></p>
+        <p class="dialog-actions" align="right"><BR>
+            <button type="button" class="confirm-reset-button"></button>
+        </p>
+    </div>
+
 	</div>
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-	$(document).ready(function() {
-		$('#artist_table').dataTable({
+	// Encapsulate page-specific logic
+	var ManageManualPage = ManageManualPage || {};
+
+	ManageManualPage.initDataTable = function() {
+		$('#manual_album_table').dataTable({ <%-- Use the updated ID --%>
 			"bStateSave": true,
 			"bPaginate": true,
 			"oLanguage": {
@@ -103,21 +113,91 @@
                 $('html,body').scrollTop(0);
             }
          });
+	};
 
-		initActions();
+    ManageManualPage.initDialogs = function() {
+        // Initialize the generic reset dialog once
+        $('#reset_dialog').dialog({
+            autoOpen: false,
+            modal: true,
+            resizable: false,
+            width: 500,
+            height: 'auto',
+            buttons: {
+                "Cancel": function() {
+                    $(this).dialog('close');
+                }
+            }
+        });
+    };
+
+    ManageManualPage.initActions = function() {
+        // Event delegation for all reset buttons
+        $(document).on('click', '.reset-button', function() {
+            var $button = $(this);
+            var resetType = $button.data('reset-type'); // 'artist' or 'album'
+            var artistName = $button.data('artist-name');
+            var albumTitle = $button.data('album-title');
+            var albumStatus = $button.data('album-status');
+            var oldArtistClean = $button.data('old-artist-clean');
+            var oldAlbumClean = $button.data('old-album-clean');
+
+            var $dialog = $('#reset_dialog');
+            var $dialogMessage = $dialog.find('.dialog-message');
+            var $confirmButton = $dialog.find('.confirm-reset-button');
+
+            var message = "";
+            var actionUrl = "";
+            var successMessage = "";
+
+            if (resetType === 'artist') {
+                message = "Are you sure you want to reset Local Artist: " + artistName + " to unmatched?";
+                if (albumStatus === "Ignored") {
+                    actionUrl = 'markManual?action=unignoreArtist&existing_artist=' + oldArtistClean;
+                    successMessage = "Successfully reset " + artistName + " to unmatched";
+                } else if (albumStatus === "Matched") {
+                    actionUrl = 'markManual?action=unmatchArtist&existing_artist=' + oldArtistClean;
+                    successMessage = "Successfully restored " + artistName + " to unmatched";
+                }
+                $confirmButton.text('Reset Artist');
+            } else if (resetType === 'album') {
+                message = "Are you sure you want to reset Local Album: " + albumTitle + " to unmatched?";
+                if (albumStatus === "Ignored") {
+                    actionUrl = 'markManual?action=unignoreAlbum&existing_artist=' + oldArtistClean + '&existing_album=' + oldAlbumClean;
+                    successMessage = "Successfully reset " + albumTitle + " to unmatched";
+                } else if (albumStatus === "Matched") {
+                    actionUrl = 'markManual?action=unmatchAlbum&existing_artist=' + oldArtistClean + '&existing_album=' + oldAlbumClean;
+                    successMessage = "Successfully reset " + albumTitle + " to unmatched";
+                }
+                $confirmButton.text('Reset Album');
+            }
+
+            $dialogMessage.text(message);
+
+            // Unbind previous click handler and bind new one
+            $confirmButton.off('click').on('click', function() {
+                if (typeof doAjaxCall === 'function') {
+                    doAjaxCall(actionUrl, $button, 'page', successMessage);
+                } else {
+                    console.error("doAjaxCall function is not defined. Cannot perform reset action.");
+                }
+                $dialog.dialog('close');
             });
 
-	function reset_Artist(clicked_id) {
-		n=clicked_id.replace("reset_artist","");
-		$("#reset_artist_dialog"+n).dialog();
-		return false;
-	}
+            $dialog.dialog('open');
+        });
 
-	function reset_Album(clicked_id) {
-		n=clicked_id.replace("reset_album","");
-		$("#reset_album_dialog"+n).dialog();
-		return false;
+        // Assuming initActions from common.js is called globally
+        if (typeof initActions === 'function') {
+            initActions();
         }
+    };
+
+	$(document).ready(function() {
+		ManageManualPage.initDataTable();
+        ManageManualPage.initDialogs();
+		ManageManualPage.initActions();
+	});
 
 	</script>
 </%def>

data/interfaces/default/managenew.html

@@ -6,7 +6,8 @@
 <%def name="headerIncludes()">
 	<div id="subhead_container">
 		<div id="subhead_menu">
-			<a id="menu_link_scan" onclick="doAjaxCall('musicScan?path=${headphones.CONFIG.MUSIC_DIR}&redirect=manageNew',$(this))" data-success="Music library is getting scanned">Scan Music Library</a>
+			<%-- Changed inline onclick to a class and data attributes for JS handling --%>
+			<a id="menu_link_scan" class="ajax-link" data-action="musicScan" data-path="${headphones.CONFIG.MUSIC_DIR}" data-redirect="manageNew" data-success="Music library is getting scanned" href="#">Scan Music Library</a>
 		</div>		
 	</div>	
 	<a href="manage" class="back">&laquo; Back to manage overview</a>
@@ -18,26 +19,28 @@
 	<div id="manageheader" class="title">
 		<h1 class="clearfix"><i class="fa fa-music"></i> Manage New Artists</h1>
 	</div>
-	<form action="addArtists" method="get">
-	<div id="markalbum">
-	    <select name="action">
+	<form action="addArtists" method="get" id="addArtistsForm"> <%-- Added ID to the form --%>
+	<div id="new_artists_controls"> <%-- Unique and descriptive ID --%>
+	    <select name="action" id="newArtistActionSelect">
         	<option value="add">(+) ADD Selected Artists</option>
         	<option value="ignore">(-) IGNORE Selected Artists</option>
        	</select>
-		<input type="submit" value="Go">
+		<%-- Changed input type="submit" to button with class for AJAX handling --%>
+		<button type="button" id="submitNewArtistAction" class="ajax-submit-button" data-form-id="addArtistsForm" data-action="addArtists" data-error="You didn't select any artists">Go</button>
 	</div>
 	<table class="display" id="artist_table">
 		<thead>
 			<tr>
-				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
-				<th id="name">Artist Name</th>
+				<th class="select-all-checkbox"><input type="checkbox" id="toggleAllNewArtists" /></th> <%-- Added ID for easier targeting --%>
+				<th class="column-name">Artist Name</th> <%-- Changed ID to class --%>
 			</tr>
 		</thead>
 		<tbody>
 		%for artist in newartists:
 			<tr class="gradeZ">
-				<td id="select"><input type="checkbox" name="${artist['ArtistName']}" class="checkbox" /></td>
-				<td id="name">${artist['ArtistName']}</a></td>
+				<%-- Changed name attribute to a consistent 'artist_ids' and value to ArtistID for robust processing --%>
+				<td class="select-artist-checkbox"><input type="checkbox" name="artist_ids" value="${artist['ArtistID']}" class="new-artist-checkbox" /></td>
+				<td class="column-name">${artist['ArtistName']}</a></td>
 			</tr>
 		%endfor
 		</tbody>
@@ -47,22 +50,111 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-	$(document).ready(function() {
+	// Encapsulate page-specific logic
+	var ManageNewArtistsPage = ManageNewArtistsPage || {};
+
+	ManageNewArtistsPage.initDataTable = function() {
 		$('#artist_table').dataTable({
-			"aaSorting": [[1, 'asc']],
+			"aaSorting": [[1, 'asc']], // Sort by Artist Name ascending
 			"bStateSave": false,
 			"bPaginate": false,
 			"oLanguage": {
-				"sSearch" : ""},
+				"sSearch" : "",
+				"sEmptyTable": "No new artist information available"
+            },
+            "fnDrawCallback": function (o) {
+                $('html,body').scrollTop(0); // Jump to top of page on draw
+            }
+		});
+	};
+
+    ManageNewArtistsPage.initActions = function() {
+        // Event listener for the "Scan Music Library" link in the header
+        $(document).on('click', '#menu_link_scan', function(e) {
+            e.preventDefault();
+            var $this = $(this);
+            var path = $this.data('path');
+            var redirect = $this.data('redirect');
+            var successMsg = $this.data('success');
+            var url = $this.data('action') + '?path=' + encodeURIComponent(path) + '&redirect=' + encodeURIComponent(redirect);
+
+            if (typeof doAjaxCall === 'function') {
+                doAjaxCall(url, $this, null, successMsg); // 'null' for context if not affecting a specific tab/table
+            } else {
+                console.error("doAjaxCall function is not defined. Cannot scan music library.");
+            }
         });
 
+        // Event listener for the "Go" button to add/ignore artists
+        $('#submitNewArtistAction').on('click', function(e) {
+            e.preventDefault();
+            var $this = $(this);
+            var action = $('#newArtistActionSelect').val();
+            var selectedArtistIds = [];
+
+            // Get all checked new artist checkboxes
+            $('.new-artist-checkbox:checked').each(function() {
+                selectedArtistIds.push($(this).val());
+            });
+
+            if (selectedArtistIds.length === 0) {
+                if (typeof showMessage === 'function') {
+                    showMessage($this.data('error') || "You didn't select any artists", 'error');
+                } else {
+                    alert($this.data('error') || "You didn't select any artists");
+                }
+                return;
+            }
+
+            var url = $this.data('action') + '?action=' + encodeURIComponent(action);
+            $.each(selectedArtistIds, function(index, id) {
+                url += '&artist_ids=' + encodeURIComponent(id); // Append selected artist IDs
+            });
+
+            var successMsg = 'Artists successfully ' + (action === 'add' ? 'added' : 'ignored');
+            var errorMsg = 'Error performing action on artists.';
+
+            if (typeof doAjaxCall === 'function') {
+                doAjaxCall(url, $this, 'table', successMsg, errorMsg);
+                // Optionally, refresh the table or remove processed rows after successful AJAX call
+            } else {
+                console.error("doAjaxCall function is not defined. Cannot add/ignore artists.");
+            }
+        });
+
+        // Event listener for the "toggle all" checkbox
+        $('#toggleAllNewArtists').on('click', function() {
+            $('.new-artist-checkbox').prop('checked', this.checked);
+        });
+
+        // Update "toggle all" checkbox based on individual checkboxes
+        $(document).on('click', '.new-artist-checkbox', function() {
+            if (!this.checked) {
+                $('#toggleAllNewArtists').prop('checked', false);
+            } else {
+                if ($('.new-artist-checkbox:checked').length === $('.new-artist-checkbox').length) {
+                    $('#toggleAllNewArtists').prop('checked', true);
+                }
+            }
+        });
+
+        // Assuming initActions from common.js is called globally
+        if (typeof initActions === 'function') {
             initActions();
+        }
+    };
+
+	$(document).ready(function() {
+		ManageNewArtistsPage.initDataTable();
+		ManageNewArtistsPage.initActions();
 	});
 	</script>
 </%def>

data/interfaces/default/manageunmatched.html

@@ -1,16 +1,20 @@
 <%inherit file="base.html" />
 <%!
 	import headphones
-	import json
-	from headphones import db, helpers
-	myDB = db.DBConnection()
-	artist_json = {}
-	counter = 0
-	artist_list = myDB.action("SELECT ArtistName from artists ORDER BY ArtistName COLLATE NOCASE")
-	for artist in artist_list:
-		artist_json[counter] = artist['ArtistName'] 
-		counter+=1
-	json_artists = json.dumps(artist_json)
+	# Removed direct DB imports and queries from template.
+	# These operations (fetching artists and creating json_artists)
+	# should be performed in the Python view/controller and passed
+	# to the template as part of its context.
+	# import json
+	# from headphones import db, helpers
+	# myDB = db.DBConnection()
+	# artist_json = {}
+	# counter = 0
+	# artist_list = myDB.action("SELECT ArtistName from artists ORDER BY ArtistName COLLATE NOCASE")
+	# for artist in artist_list:
+	# 	artist_json[counter] = artist['ArtistName'] 
+	# 	counter+=1
+	# json_artists = json.dumps(artist_json)
 %>
 
 <%def name="headerIncludes()">
@@ -29,97 +33,109 @@
 		<h1 class="clearfix"><i class="fa fa-music"></i> Manage Unmatched Albums</h1>
 	</div>
 
-	<table class="display" id="artist_table">
+	<table class="display" id="unmatched_album_table"> <%-- Changed ID for clarity --%>
 		<thead>
 			<tr>
-				<th id="artist">Local Artist</th>
-				<th id="album">Local Album</th>
+				<th class="column-artist">Local Artist</th>
+				<th class="column-album">Local Album</th>
 			</tr>
 		</thead>
 		<tbody>
-		<% count_albums=0 %>
+		<% count_albums=0 %> <%-- Still useful for unique IDs if needed, but aiming for generic dialogs --%>
 		%for album in unmatchedalbums:
 			<tr class="gradeZ">
 				<% 
-					old_artist_clean = album['ArtistName'].replace('&','%26').replace("'","%27")
-					old_album_clean = album['AlbumTitle'].replace('&','%26').replace("'","%27")
-					old_artist_js = album['ArtistName'].replace("'","\\'").replace('"','\\"')
-					old_album_js = album['AlbumTitle'].replace("'","\\'").replace('"','\\"')
+					# Pre-escape for direct use in data-attributes where JS string is needed.
+					# URL encoding will happen in JS with encodeURIComponent.
+					old_artist_js_str = album['ArtistName'].replace("'","\\'").replace('"','&quot;')
+					old_album_js_str = album['AlbumTitle'].replace("'","\\'").replace('"','&quot;')
 				%>
-				<td id="artist">${album['ArtistName']}<BR>
-				<button id="ignore_artists${count_albums}" onClick="ignore_Artist(this.id)">(-) Ignore Artist</button>
-				<div id="ignore_artist_dialog${count_albums}" title="Ignore Artist" style="display:none">
-					<table>
-					<tr><td>Are you sure you want to ignore Local Artist: ${album['ArtistName']} from future matching?</td></tr>
-					<tr><td align="right"><BR>
-					<button href="javascript:void(0)" onclick="doAjaxCall('markUnmatched?action=ignoreArtist&existing_artist=${old_artist_clean}', $(this), 'page');" data-success="Successfully ignored ${album['ArtistName']} from future matching">Ignore Artist</button>
-					</td></tr>
-					</table>
-				</div>
-
-				<button id="match_artists${count_albums}" onClick="load_Artist(this.id)">(->) Match Artist</button>
-				<div id="artist_dialog${count_albums}" title="Match Artist" style="display:none">
-					<table width=400>
-					<tr><td>Local Artist:</td><td>${album['ArtistName']}</td></tr>
-						<tr><td>Match Artist</td><td>
-						<select id="artist_options${count_albums}" name="new_artist">
-						</select>
-						</td></tr>
-					<tr><td></td><td align="right"><BR>
-					<button href="javascript:void(0)" onclick="artist_matcher(${count_albums}, '${old_artist_js}')">Match Artist</button>
-					</td></tr>
-					</table>
-				</div>
+				<td class="column-artist">
+					${album['ArtistName']}<BR>
+					<%-- Data attributes to pass context to JS --%>
+					<button type="button" class="action-button ignore-artist-button"
+                            data-artist-name="${album['ArtistName']}"
+                            data-old-artist-js="${old_artist_js_str}">
+                        (-) Ignore Artist
+                    </button>
 
+					<button type="button" class="action-button match-artist-button"
+                            data-artist-name="${album['ArtistName']}"
+                            data-old-artist-js="${old_artist_js_str}">
+                        (->) Match Artist
+                    </button>
 				</td>
-				<td id="album">${album['AlbumTitle']}<BR>
-				<button id="ignore_albums${count_albums}" onClick="ignore_Album(this.id)">(-) Ignore Album</button>
-				<div id="ignore_album_dialog${count_albums}" title="Ignore Album" style="display:none">
-					<table>
-					<tr><td>Are you sure you want to ignore Local Album: ${album['AlbumTitle']} from future matching?</td></tr>
-					<tr><td align="right"><BR>
-					<button href="javascript:void(0)" onclick="doAjaxCall('markUnmatched?action=ignoreAlbum&existing_artist=${old_artist_clean}&existing_album=${old_album_clean}', $(this), 'page');" data-success="Successfully ignored ${album['AlbumTitle']} from future matching">Ignore Album</button>
-					</td></tr>
-					</table>
-				</div>
-
-				<button id="match_albums${count_albums}" onClick="load_AlbumArtist(this.id)">(->) Match Album</button>
-				<div id="album_dialog${count_albums}" title="Match Album" style="display:none">
-					<table width=650>
-					<tr><td>Local Artist:</td><td>${album['ArtistName']}</td></tr>
-					<tr><td>Local Album:</td><td>${album['AlbumTitle']}</td></tr>
-					<tr><td>Match Artist</td><td>
-					<select id="album_artist_options${count_albums}" name="new_artist">
-					</select>
-					</td></tr>
-					<tr><td>Match Album</td><td>
-					<select id="album_options${count_albums}" name="new_album">
-					</select>
-					</td></tr>
-					<tr><td></td><td align="right"><BR>
-					<button href="javascript:void(0)" onclick="album_matcher(${count_albums}, '${old_artist_js}', '${old_album_js}')">Match Album</button>
-					</td></tr>
-					</table>
-				</div>
+				<td class="column-album">
+					${album['AlbumTitle']}<BR>
+					<button type="button" class="action-button ignore-album-button"
+                            data-artist-name="${album['ArtistName']}"
+                            data-album-title="${album['AlbumTitle']}"
+                            data-old-artist-js="${old_artist_js_str}"
+                            data-old-album-js="${old_album_js_str}">
+                        (-) Ignore Album
+                    </button>
 
+					<button type="button" class="action-button match-album-button"
+                            data-artist-name="${album['ArtistName']}"
+                            data-album-title="${album['AlbumTitle']}"
+                            data-old-artist-js="${old_artist_js_str}"
+                            data-old-album-js="${old_album_js_str}">
+                        (->) Match Album
+                    </button>
 				</td>
 			</tr>
 		<% count_albums+=1 %>
 		%endfor
 		</tbody>
 	</table>
+
+    <%-- Generic Ignore Confirmation Dialog --%>
+    <div id="ignore_dialog" title="Confirm Ignore" style="display:none">
+        <p class="dialog-message"></p>
+        <p class="dialog-actions" align="right"><BR>
+            <button type="button" class="confirm-ignore-button"></button>
+        </p>
+    </div>
+
+    <%-- Generic Match Dialog --%>
+    <div id="match_dialog" title="Match Album" style="display:none">
+        <p><strong>Local Artist:</strong> <span id="local-artist-display"></span></p>
+        <p><strong>Local Album:</strong> <span id="local-album-display"></span></p>
+
+        <div id="artist-match-section">
+            <p>Match Artist:</p>
+            <select id="match-artist-options" name="new_artist"></select>
+        </div>
+
+        <div id="album-match-section">
+            <p>Match Album:</p>
+            <select id="match-album-options" name="new_album"></select>
+        </div>
+        
+        <p class="dialog-actions" align="right"><BR>
+            <button type="button" class="confirm-match-button"></button>
+        </p>
+    </div>
+
 	</div>
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-	$(document).ready(function() {
-		$('#artist_table').dataTable({
+	// Encapsulate page-specific logic
+	var ManageUnmatchedPage = ManageUnmatchedPage || {};
+
+	ManageUnmatchedPage.jsonArtists = ${json_artists | n, unicode}; // Assuming json_artists is passed from backend
+
+	ManageUnmatchedPage.initDataTable = function() {
+		$('#unmatched_album_table').dataTable({ <%-- Use the updated ID --%>
 			"bStateSave": true,
 			"bPaginate": true,
 			"oLanguage": {
@@ -136,126 +152,196 @@
                 $('html,body').scrollTop(0);
             }
          });
+	};
 
-initActions();
+    ManageUnmatchedPage.initDialogs = function() {
+        // Initialize the generic ignore dialog
+        $('#ignore_dialog').dialog({
+            autoOpen: false,
+            modal: true,
+            resizable: false,
+            width: 500,
+            height: 'auto',
+            buttons: {
+                "Cancel": function() {
+                    $(this).dialog('close');
+                }
+            }
         });
 
-	function ignore_Artist(clicked_id) {
-		n=clicked_id.replace("ignore_artists","");
-		$("#ignore_artist_dialog"+n).dialog();
-		return false;
+        // Initialize the generic match dialog
+        $('#match_dialog').dialog({
+            autoOpen: false,
+            modal: true,
+            resizable: false,
+            width: 700,
+            height: 'auto',
+            buttons: {
+                "Cancel": function() {
+                    $(this).dialog('close');
+                }
+            }
+        });
+    };
+
+    ManageUnmatchedPage.initActions = function() {
+        // --- Ignore Artist/Album Logic ---
+        $(document).on('click', '.ignore-artist-button, .ignore-album-button', function() {
+            var $button = $(this);
+            var isArtistIgnore = $button.hasClass('ignore-artist-button');
+            var artistName = $button.data('artist-name');
+            var albumTitle = $button.data('album-title');
+            var oldArtistJs = $button.data('old-artist-js'); // JS escaped, needs URI encoding for URL
+            var oldAlbumJs = $button.data('old-album-js'); // JS escaped, needs URI encoding for URL
+
+            var $dialog = $('#ignore_dialog');
+            var $dialogMessage = $dialog.find('.dialog-message');
+            var $confirmButton = $dialog.find('.confirm-ignore-button');
+
+            var message = "";
+            var actionUrl = "";
+            var successMessage = "";
+
+            if (isArtistIgnore) {
+                message = "Are you sure you want to ignore Local Artist: " + artistName + " from future matching?";
+                actionUrl = 'markUnmatched?action=ignoreArtist&existing_artist=' + encodeURIComponent(oldArtistJs);
+                successMessage = "Successfully ignored " + artistName + " from future matching";
+                $confirmButton.text('Ignore Artist');
+            } else { // ignore-album-button
+                message = "Are you sure you want to ignore Local Album: " + albumTitle + " from future matching?";
+                actionUrl = 'markUnmatched?action=ignoreAlbum&existing_artist=' + encodeURIComponent(oldArtistJs) + '&existing_album=' + encodeURIComponent(oldAlbumJs);
+                successMessage = "Successfully ignored " + albumTitle + " from future matching";
+                $confirmButton.text('Ignore Album');
             }
 
-	function ignore_Album(clicked_id) {
-		n=clicked_id.replace("ignore_albums","");
-		$("#ignore_album_dialog"+n).dialog();
-		return false;
+            $dialogMessage.text(message);
+
+            $confirmButton.off('click').on('click', function() {
+                if (typeof doAjaxCall === 'function') {
+                    doAjaxCall(actionUrl, $button, 'page', successMessage);
+                } else {
+                    console.error("doAjaxCall function is not defined. Cannot perform ignore action.");
                 }
+                $dialog.dialog('close');
+            });
 
+            $dialog.dialog('open');
+        });
 
-	function load_Artist(clicked_id) {
-		n=clicked_id.replace("match_artists","");
-		var d = $("#artist_dialog"+n).dialog();
-    	d.dialog("option", "width", 450);
-    	d.dialog("option", "position", "center");
-		$('#artist_options'+n).html('');
-		$.each(${json_artists}, function(key, value) {
-    		$('#artist_options'+n).append($("<option/>", {
+        // --- Match Artist/Album Logic ---
+        $(document).on('click', '.match-artist-button, .match-album-button', function() {
+            var $button = $(this);
+            var isArtistMatch = $button.hasClass('match-artist-button');
+            var artistName = $button.data('artist-name');
+            var albumTitle = $button.data('album-title');
+            var oldArtistJs = $button.data('old-artist-js');
+            var oldAlbumJs = $button.data('old-album-js');
+
+            var $dialog = $('#match_dialog');
+            var $localArtistDisplay = $('#local-artist-display');
+            var $localAlbumDisplay = $('#local-album-display');
+            var $artistMatchSection = $('#artist-match-section');
+            var $albumMatchSection = $('#album-match-section');
+            var $matchArtistOptions = $('#match-artist-options');
+            var $matchAlbumOptions = $('#match-album-options');
+            var $confirmButton = $dialog.find('.confirm-match-button');
+
+            // Reset dialog state
+            $localArtistDisplay.text(artistName);
+            $matchArtistOptions.empty();
+            $matchAlbumOptions.empty();
+            $confirmButton.off('click'); // Clear previous click handlers
+
+            // Populate artist options
+            $.each(ManageUnmatchedPage.jsonArtists, function(key, value) {
+                $matchArtistOptions.append($("<option/>", {
                     value: value,
                     text: value
                 }));
             });
-		change_artist(n)
-		return false;
-	}
 
-	function change_artist(n) {
-		selected_artist = $("#artist_options"+n).find("option:selected").text();
-		selected_artist_clean = selected_artist.replace('&', '%26').replace('+', '%2B');
-		$("#artist_options"+n).change(function() {
-			selected_artist = $("#artist_options"+n).find("option:selected").text();
-			selected_artist_clean = selected_artist.replace('&', '%26').replace('+', '%2B');
+            if (isArtistMatch) {
+                $localAlbumDisplay.closest('p').hide(); // Hide local album row
+                $albumMatchSection.hide(); // Hide match album section
+                $localArtistDisplay.text(artistName);
+                $artistMatchSection.show(); // Show match artist section
+                $confirmButton.text('Match Artist');
+
+                $confirmButton.on('click', function() {
+                    var newArtist = $matchArtistOptions.val();
+                    var actionUrl = 'markUnmatched?action=matchArtist&existing_artist=' + encodeURIComponent(oldArtistJs) + '&new_artist=' + encodeURIComponent(newArtist);
+                    var successMessage = 'Successfully matched ' + artistName + ' with ' + newArtist;
+                    if (typeof doAjaxCall === 'function') {
+                        doAjaxCall(actionUrl, $button, 'page', successMessage);
+                    } else {
+                        console.error("doAjaxCall function is not defined. Cannot match artist.");
+                    }
+                    $dialog.dialog('close');
+                });
+
+            } else { // match-album-button
+                $localAlbumDisplay.closest('p').show(); // Show local album row
+                $albumMatchSection.show(); // Show match album section
+                $localAlbumDisplay.text(albumTitle);
+                $artistMatchSection.show(); // Show match artist section (for selecting matched album's artist)
+                $confirmButton.text('Match Album');
+
+                // Load albums for selected artist initially
+                ManageUnmatchedPage.loadAlbumsForArtist($matchArtistOptions.val(), $matchAlbumOptions);
+
+                // Handle artist selection change
+                $matchArtistOptions.off('change').on('change', function() {
+                    ManageUnmatchedPage.loadAlbumsForArtist($(this).val(), $matchAlbumOptions);
+                });
+
+                $confirmButton.on('click', function() {
+                    var newArtist = $matchArtistOptions.val();
+                    var newAlbum = $matchAlbumOptions.val();
+                    var actionUrl = 'markUnmatched?action=matchAlbum&existing_artist=' + encodeURIComponent(oldArtistJs) + '&new_artist=' + encodeURIComponent(newArtist) + '&existing_album=' + encodeURIComponent(oldAlbumJs) + '&new_album=' + encodeURIComponent(newAlbum);
+                    var successMessage = 'Successfully matched ' + albumTitle + ' with ' + newAlbum + ' by ' + newArtist;
+                    if (typeof doAjaxCall === 'function') {
+                        doAjaxCall(actionUrl, $button, 'page', successMessage);
+                    } else {
+                        console.error("doAjaxCall function is not defined. Cannot match album.");
+                    }
+                    $dialog.dialog('close');
                 });
             }
+            $dialog.dialog('open');
+        });
 
-	function artist_matcher(n, existing_artist) {
-		var existing_artist = existing_artist.toString();
-		var existing_artist_clean = existing_artist.replace('&', '%26').replace('+', '%2B');
-		$('#match_artists'+n).attr('data-success', 'Successfully matched '+existing_artist+' with '+selected_artist);
-		doAjaxCall('markUnmatched?action=matchArtist&existing_artist='+existing_artist_clean+'&new_artist='+selected_artist_clean, $('#match_artists'+n), 'page'); 
-		}
-
-
-	function load_AlbumArtist(clicked_id) {
-		n=clicked_id.replace("match_albums","");
-		var d = $("#album_dialog"+n).dialog();
-    	d.dialog("option", "width", 700);
-    	d.dialog("option", "position", "center");
-    	$('#album_artist_options'+n).html('');
-		$.each(${json_artists}, function(key, value) {
-    		$('#album_artist_options'+n).append($("<option/>", {
+        // Helper function to load albums for a given artist
+        ManageUnmatchedPage.loadAlbumsForArtist = function(artistName, $targetSelect) {
+            $targetSelect.empty().append($("<option/>", { value: "", text: "Loading albums..." })); // Add loading message
+            var cleanArtistName = encodeURIComponent(artistName);
+            $.getJSON("getAlbumsByArtist_json?artist=" + cleanArtistName, function(data) {
+                $targetSelect.empty();
+                if (Object.keys(data).length > 0) {
+                    $.each(data, function(key, value) {
+                        $targetSelect.append($("<option/>", {
                             value: value,
                             text: value
                         }));
                     });
-		load_json_albums(n)
-		return false;
+                } else {
+                    $targetSelect.append($("<option/>", { value: "", text: "No albums found" }));
                 }
-
-
-	function load_json_albums(n) {
-		selected_album_artist = $("#album_artist_options"+n).find("option:selected").text();
-		selected_album_artist_clean = selected_album_artist.replace('&', '%26').replace('+', '%2B');
-		$('#album_options'+n).html('')
-		$.getJSON("getAlbumsByArtist_json?artist="+selected_album_artist_clean, function( data ) {
-			$.each( data, function( key, value ) {
-			    $('#album_options'+n).append($("<option/>", {
-        		value: value,
-        		text: value
-    			}));
+            }).fail(function() {
+                $targetSelect.empty().append($("<option/>", { value: "", text: "Error loading albums" }));
             });
-		selected_album= $("#album_options"+n).find("option:selected").text();
-		selected_album_clean = selected_album.replace('&', '%26').replace('+', '%2B');
-		});
-		change_json_albums(n)
-		change_album(n)
+        };
+
+        // Assuming initActions from common.js is called globally
+        if (typeof initActions === 'function') {
+            initActions();
         }
+    };
 
-
-	function change_json_albums(n) {
-		$("#album_artist_options"+n).change(function(){
-			selected_album_artist = $("#album_artist_options"+n).find("option:selected").text();
-			selected_album_artist_clean = selected_album_artist.replace('&', '%26').replace('+', '%2B');
-			$('#album_options'+n).html('')
-			$.getJSON("getAlbumsByArtist_json?artist="+selected_album_artist_clean, function( data ) {
-				$.each( data, function( key, value ) {
-				    $('#album_options'+n).append($("<option/>", {
-	        		value: value,
-	        		text: value
-	    			}));
+	$(document).ready(function() {
+		ManageUnmatchedPage.initDataTable();
+        ManageUnmatchedPage.initDialogs();
+		ManageUnmatchedPage.initActions();
 	});
-				selected_album= $("#album_options"+n).find("option:selected").text();
-				selected_album_clean = selected_album.replace('&', '%26').replace('+', '%2B');
-			});
-		change_album(n)
-	    });
-	}
-
-	function change_album(n) {
-		$("#album_options"+n).change(function() {
-			selected_album= $("#album_options"+n).find("option:selected").text();
-			selected_album_clean = selected_album.replace('&', '%26').replace('+', '%2B');
-			});
-	}
-
-	function album_matcher(n, existing_artist, existing_album) {
-		var existing_artist = existing_artist.toString();
-		var existing_artist_clean = existing_artist.replace('&', '%26').replace('+', '%2B');
-		var existing_album = existing_album.toString();
-		var existing_album_clean = existing_album.replace('&', '%26').replace('+', '%2B');
-		$('#match_albums'+n).attr('data-success', 'Successfully matched '+existing_album+' with '+selected_album);
-		doAjaxCall('markUnmatched?action=matchAlbum&existing_artist='+existing_artist_clean+'&new_artist='+selected_album_artist_clean+'&existing_album='+existing_album_clean+'&new_album='+selected_album_clean, $('#match_albums'+n), 'page'); 
-	}
 
 	</script>
 </%def>

data/interfaces/default/searchresults.html

@@ -8,24 +8,24 @@
 	<table class="display" id="searchresults_table">
 		<thead>
 			<tr>
-				<th id="albumart"></th>
+				<th class="column-albumart"></th> <%-- Changed ID to class --%>
 				%if type == 'album':
-					<th id="albumname">Album Name</th>
-                    <th id="artistnamesmall">Artist Name</th>
-                    <th id="format">Format</th>
-                    <th id="tracks">Tracks</th>
-                    <th id="reldate">Date</th>
-                    <th id="scoresmall">Score</th>
-                    <th id="mbrelid" style="display:none;"</th>
+					<th class="column-albumname">Album Name</th>
+                    <th class="column-artistname-small">Artist Name</th>
+                    <th class="column-format">Format</th>
+                    <th class="column-tracks">Tracks</th>
+                    <th class="column-reldate">Date</th>
+                    <th class="column-score-small">Score</th>
+                    <th class="column-mbrelid" style="display:none;"</th> <%-- Move display:none to CSS if always hidden --%>
                 %elif type == 'artist':
-                    <th id="artistname">Artist Name</th>
-                    <th id="score">Score</th>
+                    <th class="column-artistname">Artist Name</th>
+                    <th class="column-score">Score</th>
                 %else:
-                    <th id="seriesname">Series Name</th>
-                    <th id="type">Type</th>
-                    <th id="score">Score</th>
+                    <th class="column-seriesname">Series Name</th>
+                    <th class="column-type">Type</th>
+                    <th class="column-score">Score</th>
 				%endif
-                <th id="mb"></th>
+                <th class="column-mb"></th>
 			</tr>
 		</thead>
 		<tbody>
@@ -39,34 +39,55 @@
 
                     if type == 'album':
                         albuminfo = 'Type: ' + result['rgtype'] + ', Country: ' + result['country']
+                        # Constructing CAA URL for fallback, will be used as data-src for unveiling
                         caa_group_url = "http://coverartarchive.org/release-group/%s/front-250.jpg" %result['rgid']
+                        # MusicBrainz album art URL (assuming it's a direct link to the image)
+                        # If result['image'] provides a direct image URL, use it. Otherwise, rely on CAA or generic.
+                        # For this modernization, let's assume getAlbumArtURL is available or build a generic one.
+                        # For now, will prioritize getImageLinks.
                 %>
 				<tr class="grade${grade}">
 				%if type == 'album':
-					<td id="albumart" style=" text-align: center; vertical-align: middle;"><div id="artistImg"><img title="${result['albumid']}" class="albumArt" height="50" width="50" onerror="tryCCA(this, '${caa_group_url}')"></div></td>
+					<td class="column-albumart album-art-cell"> <%-- Changed ID to class --%>
+                        <div class="artwork-container">
+                            <%-- Using data-src for lazy loading. onerror will handle the tryCCA fallback. --%>
+                            <img title="${result['albumid']}" class="albumArt search-result-albumart"
+                                 data-src="" <%-- Will be populated by getImageLinks --%>
+                                 onerror="tryCCA(this, '${caa_group_url}', 'album')"
+                                 alt="Cover art for ${result['title']}" loading="lazy">
+                        </div>
+                    </td>
                 %elif type == 'artist':
-					<td id="albumart"><div id="artistImg"><img title="${result['id']}" class="albumArt" height="50" width="50"></div></td>
+					<td class="column-albumart artist-art-cell"> <%-- Changed ID to class --%>
+                        <div class="artwork-container">
+                            <%-- Assuming artists might also have an image, or it will be a generic icon. --%>
+                            <img title="${result['id']}" class="albumArt search-result-artistart"
+                                 data-src="" <%-- Will be populated by getImageLinks --%>
+                                 onerror="this.onerror=null;this.src='interfaces/default/images/no-cover-art.png';"
+                                 alt="Image for ${result['uniquename']}" loading="lazy">
+                        </div>
+                    </td>
                 %else:
-                    <td id="albumart"></td>
+                    <td class="column-albumart series-art-cell"></td> <%-- No artwork for series --%>
 				%endif
 				%if type == 'album':
-					<td id="albumname"><a href="addReleaseById?rid=${result['albumid']}&rgid=${result['rgid']}" title="${albuminfo}">${result['title']}</a></td>
-                    <td id="artistnamesmall"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
-                    <td id="format">${result['formats']}</td>
-                    <td id="tracks">${result['tracks']}</td>
-                    <td id="reldate">${result['date']}</td>
-                    <td id="score"><a href="${result['albumurl']} "title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
-                    <td id="musicbrainz" style=" text-align: center; line-height: 0; vertical-align: middle;"><a href="${result['albumurl']}"><img src="interfaces/default/images/MusicBrainz_Album_Icon.png" title="View on MusicBrainz" height="20" width="20"></a></td>
-                    <td id="mbrelid" style="display:none;">${result['albumid']}</td>
+					<td class="column-albumname"><a href="addReleaseById?rid=${result['albumid']}&rgid=${result['rgid']}" title="${albuminfo}">${result['title']}</a></td>
+                    <td class="column-artistname-small"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
+                    <td class="column-format">${result['formats']}</td>
+                    <td class="column-tracks">${result['tracks']}</td>
+                    <td class="column-reldate">${result['date']}</td>
+                    <td class="column-score"><a href="${result['albumurl']}" title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
+                    <td class="column-musicbrainz musicbrainz-link-cell"><a href="${result['albumurl']}" target="_blank" rel="noopener noreferrer"><img src="interfaces/default/images/MusicBrainz_Album_Icon.png" title="View on MusicBrainz" height="20" width="20" alt="MusicBrainz Link"></a></td>
+                    <td class="column-mbrelid" style="display:none;">${result['albumid']}</td> <%-- Move display:none to CSS if always hidden --%>
                 %elif type == 'artist':
-                    <td id="artistname"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
-                    <td id="score"><a href="${result['url']} "title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
-                    <td id="musicbrainz" style=" text-align: center; line-height: 0; vertical-align: middle;"><a href="${result['url']}"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20"></a></td>
+                    <td class="column-artistname"><a href="addArtist?artistid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
+                    <td class="column-score"><a href="${result['url']}" title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
+                    <td class="column-musicbrainz musicbrainz-link-cell"><a href="${result['url']}" target="_blank" rel="noopener noreferrer"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20" alt="MusicBrainz Link"></a></td>
                 %else:
-                    <td id="seriesname"><a href="addSeries?seriesid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
-                    <td id="type">${result['type']}</td>
-                    <td id="score"><a href="${result['url']} "title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
-                    <td id="musicbrainz" style=" text-align: center; line-height: 0; vertical-align: middle;"><a href="${result['url']}"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20"></a></td>
+                    <td class="column-seriesname"><a href="addSeries?seriesid=${result['id']}" title="${result['uniquename']}">${result['uniquename']}</a></td>
+                    <td class="column-type">${result['type']}</td>
+                    <td class="column-score"><a href="${result['url']}" title="View on MusicBrainz"><div class="bar"><div class="score" style="width: ${result['score']}px">${result['score']}</div></div></a></td>
+                    <td class="column-musicbrainz musicbrainz-link-cell"><a href="${result['url']}" target="_blank" rel="noopener noreferrer"><img src="interfaces/default/images/MusicBrainz_Artist_Icon.png" title="View on MusicBrainz" height="20" width="20" alt="MusicBrainz Link"></a></td>
 				%endif
 				</tr>
 				%endfor
@@ -77,37 +98,77 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
+    <style>
+        /* Basic CSS for album art thumbnail, consistent with other pages */
+		.search-result-albumart, .search-result-artistart {
+			height: 50px;
+			width: 50px;
+			object-fit: cover; /* Ensures image covers the area without distortion */
+			vertical-align: middle;
+		}
+
+        /* MusicBrainz icon styling */
+        .musicbrainz-link-cell img {
+            height: 20px;
+            width: 20px;
+            vertical-align: middle;
+        }
+
+        /* Score bar styling (if not already in data_table.css) */
+        .bar {
+            width: 100px; /* Or a fixed width */
+            background-color: #eee;
+            border: 1px solid #ccc;
+            height: 18px; /* Adjust as needed */
+            line-height: 18px;
+            text-align: right;
+            border-radius: 3px;
+            overflow: hidden; /* Hide overflow if score > 100px */
+        }
+        .score {
+            height: 100%;
+            background-color: #5cb85c; /* Green for score */
+            color: #fff;
+            padding-right: 5px;
+            font-size: 0.8em;
+            box-sizing: border-box; /* Include padding in width calculation */
+        }
+    </style>
 </%def>
 
 <%def name="javascriptIncludes()">
+    ${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
     <script src="js/libs/jquery.unveil.min.js"></script>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 
 	<script type="text/javascript">
-        function tryCCA(element, url) {
+        // Global function to try Cover Art Archive or generic fallback
+        function tryCCA(element, url, type) {
             element.onerror = function() {
-                element.onerror = null;
-                element.src = "interfaces/default/images/no-cover-art.png";
+                element.onerror = null; // Prevent infinite loops
+                element.src = "interfaces/default/images/no-cover-art.png"; // Fallback generic image
+                if (type === 'artist') {
+                    // Specific fallback for artists if different
+                    // element.src = "interfaces/default/images/no-artist-art.png";
+                }
             };
-            element.src = url;
+            if (url) {
+                element.src = url; // Try the provided URL (e.g., CAA)
+            } else {
+                 element.src = "interfaces/default/images/no-cover-art.png"; // Fallback if no specific URL provided
+            }
         }
-    	function getArt() {
-    		$("table#searchresults_table tr td#albumart img").each(function(){
-    			var id = $(this).attr('title');
-    			var image = $(this);
 
-    			if (!image.hasClass('done')) {
-    				image.addClass('done');
-    				getImageLinks(image, id, "${type}", true);
-    			}
-    		});
-    	}
-    	function initThisPage() {
+        // Encapsulate page-specific logic
+        var SearchResultsPage = SearchResultsPage || {};
+
+    	SearchResultsPage.initDataTable = function() {
     		$('#searchresults_table').dataTable({
 				"bDestroy": true,
 				"aoColumnDefs": [
-			          { 'bSortable': false, 'aTargets': [ 0 ] }
+			          { 'bSortable': false, 'aTargets': [ 0, 7 ] } // Disable sorting for albumart (0) and MusicBrainz icon (7) columns
 				],
 				"oLanguage": {
 					"sLengthMenu":"Show _MENU_ results per page",
@@ -118,36 +179,62 @@
 					"sSearch" : ""},
 				"iDisplayLength": 25,
 				"sPaginationType": "full_numbers",
-				"aaSorting": [],
+				"aaSorting": [], // No initial sorting specified, DataTables default
                 "fnDrawCallback": function (o) {
                     // Jump to top of page
                     $('html,body').scrollTop(0);
+                    // Re-unveil images after each draw for lazy loading
+                    $("img.search-result-albumart, img.search-result-artistart").unveil();
+                    // Re-populate art for new rows
+                    SearchResultsPage.getArt();
                 }
 			});
-            $('#searchresults_table').on("draw.dt", function () {
-                getArt();
-                $("img").unveil();
-            });
-            getArt();
-			resetFilters("album");
+    	};
+
+        // Custom function to get image links and apply them to data-src
+        SearchResultsPage.getArt = function() {
+            // Target all relevant image elements that are not yet "done"
+            $("img.search-result-albumart:not(.done), img.search-result-artistart:not(.done)").each(function(){
+                var $image = $(this);
+                var id = $image.attr('title'); // Use title as ID for getImageLinks
+
+                // Add 'done' class immediately to prevent re-processing
+                $image.addClass('done');
+
+                // Assuming getImageLinks is a global function that fetches the actual image URL
+                // and sets it to the data-src attribute.
+                // If getImageLinks directly sets the src, unveil() will still work, but
+                // this setup aims for data-src first.
+                if (typeof getImageLinks === 'function') {
+                    // getImageLinks should ideally return a promise or accept a callback
+                    // and then set $image.attr('data-src', actualImageUrl);
+                    // For now, assuming it handles it internally or synchronously.
+                    getImageLinks($image, id, "${type}", true); // Assuming this sets data-src or src
+                } else {
+                    console.warn("getImageLinks function is not defined. Image loading might be impacted.");
+                    // Fallback to a generic image if getImageLinks is not available and no data-src is set.
+                    // This might be handled by onerror, but adding here for explicit safety.
+                    if (!$image.attr('data-src') && !$image.attr('src')) {
+                        $image.attr('src', "interfaces/default/images/no-cover-art.png");
                     }
+                }
+            });
+        };
+
     	$(document).ready(function(){
-    		initFancybox();
-            initThisPage();
-    	});
-	</script>
+    		initFancybox(); // Assuming initFancybox is a global function
+            SearchResultsPage.initDataTable();
+            SearchResultsPage.getArt(); // Initial call to load images on page load
 
-    <script type="text/javascript">
-        <%!
-            # Abuse JSON module for escaping JavaScript
-            import json
-        %>
-        $(document).ready(function() {
-            // Search parameter
+            // This part sets search parameters based on backend data.
+            // Assuming searchbar and its inputs exist globally.
             $("#searchbar input[name=name]").val(${name | json.dumps});
-
-            // Album or artist
             $("#searchbar select[name=type]").val(${type | json.dumps});
+
+            // Assuming resetFilters is a global function from common.js
+			if (typeof resetFilters === 'function') {
+				resetFilters("album"); // Or adjust based on 'type' if needed
+			}
     	});
 	</script>
 </%def>

data/interfaces/default/shutdown.html

@@ -1,12 +1,44 @@
 <%inherit file="base.html"/>
 
 <%def name="headIncludes()">
+    ${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<meta http-equiv="refresh" content="${timer};url=index">
+    <style>
+        /* Basic styling for the shutdown message */
+        #shutdown-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh; /* Full viewport height */
+            text-align: center;
+            background-color: #f8f8f8; /* Light background */
+            color: #333;
+            font-family: sans-serif; /* A common, readable font */
+        }
+
+        #shutdown-message h1 {
+            font-size: 2.5em; /* Larger, more prominent text */
+            color: #555;
+        }
+
+        #shutdown-message i {
+            margin-right: 15px; /* Space between icon and text */
+            color: #4CAF50; /* A green color for success/active states */
+        }
+
+        /* If it's truly shutting down or restarting, maybe a different color */
+        #shutdown-message.restarting i {
+            color: #ff9800; /* Orange for restart */
+        }
+        #shutdown-message.shutting-down i {
+            color: #f44336; /* Red for shutdown */
+        }
+    </style>
 </%def>
 
 <%def name="body()">
-	<div class="table_wrapper">
-		<div id="shutdown">
+	<div class="table_wrapper" id="shutdown-container"> <%-- Added a container for centering --%>
+		<div id="shutdown-message" class="${'restarting' if message == 'restarting' else 'shutting-down'}"> <%-- Added class for conditional styling --%>
 		    <h1><i class="fa fa-refresh fa-spin"></i>  Headphones is ${message}</h1>
 		</div>
 	</div>

data/interfaces/default/upcoming.html

@@ -3,7 +3,10 @@
 <%def name="headerIncludes()">
 	<div id="subhead_container">
 		<div id="subhead_menu">
-			<a href="javascript:void(0)" id="menu_link_scan" onclick="doAjaxCall('forceSearch',$(this))" data-success="Checking for wanted albums successful" data-error="Error checking wanted albums"><i class="fa fa-search"></i> Force Check</a>
+			<%-- Changed inline onclick to a class and data attributes for JS handling --%>
+			<a href="#" id="menu_link_force_check" class="ajax-link" data-action="forceSearch" data-success="Checking for wanted albums successful" data-error="Error checking wanted albums">
+                <i class="fa fa-search"></i> Force Check
+            </a>
 		</div>
 	</div>
 </%def>
@@ -13,38 +16,44 @@
 	<div id="paddingheader">
 		<h1 class="clearfix"><i class="fa fa-heart"></i> Wanted Albums</h1>
 	</div>
-	<form action="markAlbums" method="get" id="markAlbums">
-	<div id="markalbum" style="top:0;">
+	<form action="markAlbums" method="get" id="markAlbumsForm"> <%-- Added ID to the form --%>
+	<div id="mark_albums_controls"> <%-- Unique and descriptive ID, moved inline style to CSS --%>
 		Mark selected albums as
-		<select name="action" onChange="doAjaxCall('markAlbums',$(this),'table',true);" data-error="You didn't select any albums">
+		<select name="action" id="markAlbumActionSelect"> <%-- Added ID --%>
 				<option disabled="disabled" selected="selected">Choose...</option>
 				<option value="Skipped">Skipped</option>
 				<option value="Ignored">Ignored</option>
 				<option value="Downloaded">Downloaded</option>
 		</select>
-		<input type="hidden" value="Go">
+        <%-- Replaced hidden input with a visible button if desired, or handle submit via JS --%>
+        <%-- For now, keep the JS-driven approach as close as possible to original logic --%>
 	</div>
 	<div class="table_wrapper" id="wanted_table_wrapper" >
 		<table class="display" id="wanted_table">
 		<thead>
 			<tr>
-				<th id="select"><input type="checkbox" onClick="toggle(this)" /></th>
-				<th id="albumart"></th>
-				<th id="artistname">Artist</th>
-				<th id="albumname">Album Name</th>
-				<th id="reldate">Release Date</th>
-				<th id="type">Type</th>
+				<th class="select-all-checkbox"><input type="checkbox" id="toggleAllWanted" /></th> <%-- Added ID for easier targeting --%>
+				<th class="column-albumart"></th>
+				<th class="column-artistname">Artist</th>
+				<th class="column-albumname">Album Name</th>
+				<th class="column-reldate">Release Date</th>
+				<th class="column-type">Type</th>
 			</tr>
 		</thead>
 		<tbody>
 		%for album in wanted:
 			<tr class="gradeZ">
-				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
-				<td id="albumart"><img title="${album['AlbumID']}" height="64" width="64" src="interfaces/default/images/no-cover-art.png" data-src="artwork/thumbs/album/${album['AlbumID']}"></td>
-				<td id="artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
-				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
-				<td id="reldate">${album['ReleaseDate']}</td>
-				<td id="type">${album['Type']}</td>
+				<td class="select-checkbox"><input type="checkbox" name="album_ids" value="${album['AlbumID']}" class="wanted-album-checkbox" /></td> <%-- Changed name to album_ids, added class --%>
+				<td class="column-albumart">
+                    <img title="${album['AlbumID']}" height="64" width="64"
+                         data-src="artwork/thumbs/album/${album['AlbumID']}"
+                         src="interfaces/default/images/no-cover-art.png" <%-- Fallback src --%>
+                         alt="Cover art for ${album['AlbumTitle']}" loading="lazy">
+                </td>
+				<td class="column-artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
+				<td class="column-albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td class="column-reldate">${album['ReleaseDate']}</td>
+				<td class="column-type">${album['Type']}</td>
 			</tr>
 		%endfor
 		</tbody>
@@ -56,26 +65,31 @@
 		<h1 class="clearfix"><i class="fa fa-calendar"></i> Upcoming Albums</h1>
 	</div>
 	<div class="table_wrapper">
-		<table class="display_no_select" id="upcoming_table">
+		<table class="display_no_select" id="upcoming_table"> <%-- No changes here, but ensuring it gets DataTables init --%>
 		<thead>
 			<tr>
-				<th id="albumart"></th>
-				<th id="artistname">Artist</th>
-				<th id="albumname">Album Name</th>
-				<th id="reldate">Release Date</th>
-				<th id="type">Type</th>
-				<th id="status">Status</th>
+				<th class="column-albumart"></th>
+				<th class="column-artistname">Artist</th>
+				<th class="column-albumname">Album Name</th>
+				<th class="column-reldate">Release Date</th>
+				<th class="column-type">Type</th>
+				<th class="column-status">Status</th>
 			</tr>
 		</thead>
 		<tbody>
 		%for album in upcoming:
 			<tr class="gradeZ">
-				<td id="albumart"><img title="${album['AlbumID']}" height="64" width="64" data-src="artwork/thumbs/album/${album['AlbumID']}"></td>
-				<td id="artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
-				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
-				<td id="reldate">${album['ReleaseDate']}</td>
-				<td id="type">${album['Type']}</td>
-				<td id="status">${album['Status']}</td>
+				<td class="column-albumart">
+                    <img title="${album['AlbumID']}" height="64" width="64"
+                         data-src="artwork/thumbs/album/${album['AlbumID']}"
+                         src="interfaces/default/images/no-cover-art.png" <%-- Fallback src --%>
+                         alt="Cover art for ${album['AlbumTitle']}" loading="lazy">
+                </td>
+				<td class="column-artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
+				<td class="column-albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
+				<td class="column-reldate">${album['ReleaseDate']}</td>
+				<td class="column-type">${album['Type']}</td>
+				<td class="column-status">${album['Status']}</td>
 			</tr>
 		%endfor
 		</tbody>
@@ -84,29 +98,154 @@
 </%def>
 
 <%def name="headIncludes()">
+	${parent.headIncludes()} <%-- Ensure parent head includes are kept --%>
 	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
+    <style>
+        #mark_albums_controls {
+            position: relative; /* Adjust as per original 'top:0;' intent */
+            margin-bottom: 15px; /* Add some space below controls */
+        }
+        /* Style for album art thumbnails */
+        .column-albumart img {
+            width: 64px;
+            height: 64px;
+            object-fit: cover; /* Ensures image fills the space without distortion */
+            vertical-align: middle;
+        }
+    </style>
 </%def>
 
 <%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
 	<script src="js/libs/jquery.unveil.min.js"></script>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-		function initThisPage() {
-			$("img").unveil();
+		// Encapsulate page-specific logic
+		var UpcomingPage = UpcomingPage || {};
+
+		UpcomingPage.initDataTables = function() {
+			// Initialize Wanted Albums table
 			$('#wanted_table').dataTable({
 				"oLanguage": {
-					"sEmptyTable": " "
+					"sEmptyTable": "No wanted albums found" // More descriptive empty table message
 				},
 				"bDestroy": true,
 				"bFilter": false,
 				"bInfo": false,
-				"bPaginate": false
+				"bPaginate": false,
+                "aoColumnDefs": [
+			          { 'bSortable': false, 'aTargets': [ 0, 1 ] } // Disable sorting for checkbox and album art columns
+				],
+                "fnDrawCallback": function (o) {
+                    // Re-unveil images after each draw for lazy loading
+                    $("img[data-src]").unveil();
+                }
 			});
-			resetFilters("artists");
+
+            // Initialize Upcoming Albums table
+            $('#upcoming_table').dataTable({
+				"oLanguage": {
+					"sEmptyTable": "No upcoming albums found" // More descriptive empty table message
+				},
+				"bDestroy": true,
+				"bFilter": false,
+				"bInfo": false,
+				"bPaginate": false,
+                "aoColumnDefs": [
+			          { 'bSortable': false, 'aTargets': [ 0 ] } // Disable sorting for album art column
+				],
+                "aaSorting": [[3, 'asc']], // Sort by Release Date ascending by default
+                "fnDrawCallback": function (o) {
+                    // Re-unveil images after each draw for lazy loading
+                    $("img[data-src]").unveil();
+                }
+			});
+		};
+
+        UpcomingPage.initActions = function() {
+            // Event listener for "Force Check" link
+            $('#menu_link_force_check').on('click', function(e) {
+                e.preventDefault();
+                var $this = $(this);
+                var actionUrl = $this.data('action'); // 'forceSearch'
+                var successMsg = $this.data('success');
+                var errorMsg = $this.data('error');
+
+                if (typeof doAjaxCall === 'function') {
+                    doAjaxCall(actionUrl, $this, 'page', successMsg, errorMsg);
+                } else {
+                    console.error("doAjaxCall function is not defined. Cannot force check.");
+                }
+            });
+
+            // Event listener for "Mark selected albums as" dropdown
+            $('#markAlbumActionSelect').on('change', function() {
+                var $this = $(this);
+                var action = $this.val();
+                var selectedAlbumIds = [];
+
+                $('.wanted-album-checkbox:checked').each(function() {
+                    selectedAlbumIds.push($(this).val());
+                });
+
+                if (selectedAlbumIds.length === 0) {
+                    if (typeof showMessage === 'function') {
+                        showMessage($this.data('error') || "You didn't select any albums", 'error');
+                    } else {
+                        alert($this.data('error') || "You didn't select any albums");
+                    }
+                    // Reset dropdown to "Choose..."
+                    $this.val('Choose...');
+                    return;
+                }
+
+                var url = $('#markAlbumsForm').attr('action') + '?action=' + encodeURIComponent(action);
+                $.each(selectedAlbumIds, function(index, id) {
+                    url += '&album_ids=' + encodeURIComponent(id); // Append selected album IDs
+                });
+
+                var successMsg = 'Albums successfully marked as ' + action;
+                var errorMsg = 'Error marking albums.';
+
+                if (typeof doAjaxCall === 'function') {
+                    doAjaxCall(url, $this, 'table', successMsg, errorMsg);
+                    // Reset dropdown after action
+                    $this.val('Choose...');
+                } else {
+                    console.error("doAjaxCall function is not defined. Cannot mark albums.");
+                }
+            });
+
+            // Event listener for the "toggle all" checkbox in Wanted Albums table
+            $('#toggleAllWanted').on('click', function() {
+                $('.wanted-album-checkbox').prop('checked', this.checked);
+            });
+
+            // Update "toggle all" checkbox based on individual checkboxes
+            $(document).on('click', '.wanted-album-checkbox', function() {
+                if (!this.checked) {
+                    $('#toggleAllWanted').prop('checked', false);
+                } else {
+                    if ($('.wanted-album-checkbox:checked').length === $('.wanted-album-checkbox').length) {
+                        $('#toggleAllWanted').prop('checked', true);
+                    }
+                }
+            });
+
+            // Assuming resetFilters and initActions are global functions from common.js
+            if (typeof resetFilters === 'function') {
+                resetFilters("artists"); // Or adjust based on context
+            }
+            if (typeof initActions === 'function') {
                 initActions();
             }
+        };
+
 		$(document).ready(function() {
-			initThisPage();
+			UpcomingPage.initDataTables();
+            UpcomingPage.initActions();
+            // Initial unveil call for images
+            $("img[data-src]").unveil();
 		});
 	</script>
 </%def>