fixes #1300

7 files changed, 60 insertions, 59 deletions

diff --git a/plugins/CoreHome/templates/cloud.tpl b/plugins/CoreHome/templates/cloud.tpl
index b04f1480f5..b05a8db239 100644
--- a/plugins/CoreHome/templates/cloud.tpl
+++ b/plugins/CoreHome/templates/cloud.tpl
@@ -1,7 +1,7 @@
 <div id="{$properties.uniqueId}">
 <div class="tagCloud">
 {if count($cloudValues) == 0}
-	<div id="emptyDatatable">{'General_NoDataForTagCloud'|translate}</div>
+	<div class="pk-emptyDataTable">{'General_NoDataForTagCloud'|translate}</div>
 {else}
 	{foreach from=$cloudValues key=word item=value}
 	<span title="{$value.word} ({$value.value} {$columnTranslation})" class="word size{$value.size} {* we strike tags with 0 hits *} {if $value.value == 0}valueIsZero{/if}">
diff --git a/plugins/CoreHome/templates/datatable.css b/plugins/CoreHome/templates/datatable.css
index 8e9281a9b1..11cb1f3b70 100644
--- a/plugins/CoreHome/templates/datatable.css
+++ b/plugins/CoreHome/templates/datatable.css
@@ -217,85 +217,86 @@ table thead div {
 	position: absolute;
 }
 
-#dataTablePages {
+.dataTablePages {
 	color: #BFBFBF;
 	font-weight: bold;
 	margin: 10px;
 	font-size: 0.9em;
 }
 
-#dataTableSearchPattern {
+.dataTableSearchPattern {
 	display: inline;
 	white-space: nowrap;
 }
 
-#dataTableSearchPattern input {
+.dataTableSearchPattern input {
 	font-size: 0.7em;
 	padding: 2px;
 	border: 1px solid #B3B3B3;
 	color: #0C183A;
 }
 
-#dataTableSearchPattern input:hover {
+.dataTableSearchPattern input:hover {
 	background: #F7F7FF none repeat scroll 0%;
 }
 
-#dataTableSearchPattern #keyword {
+.dataTableSearchPattern #keyword {
 	background: transparent url(images/search.png) no-repeat scroll 4px
 		center;
 	padding: 3px 3px 3px 20px;
 }
 
-#dataTableExcludeLowPopulation,#dataTableNext,#dataTablePrevious {
+.dataTableExcludeLowPopulation,.dataTableNext,.dataTablePrevious {
 	font-size: 0.9em;
 	color: #184A83;
 	text-decoration: underline;
 	cursor: pointer;
 }
 
-.subDataTable#dataTableFeatures {
+/* @todo are these supposed to be together? */
+.subDataTable.dataTableFeatures {
 	padding-top: 0px;
 	padding-bottom: 5px;
 	width: 100%;
 }
 
-#dataTableFeatures {
+.dataTableFeatures {
 	padding-top: 10px;
 	padding-bottom: 10px;
 	width: 100%;
 	text-align: center;
 }
 
-#dataTableExcludeLowPopulation {
+.dataTableExcludeLowPopulation {
 	float: right;
 	font-size: 0.8em;
 	color: #C3C6D8;
 	text-align: right;
 }
 
-#dataTableNext,#dataTablePrevious,#dataTableSearchPattern,#loadingDataTable
+.dataTableNext,.dataTablePrevious,.dataTableSearchPattern,.pk-loadingDataTable
 {
 	display: none;
 }
 
-.subDataTable #dataTableFooterIcons {
+.subDataTable .dataTableFooterIcons {
 	height: 0px;
 }
 
-#dataTableFooterIcons {
+.dataTableFooterIcons {
 	float: right;
 	height: 18px;
 }
 
-#exportToFormat {
+.exportToFormatIcons {
 	float: right;
 }
 
-#dataTableFooterIconsShow {
+.dataTableFooterIconsShow {
 	float: right;
 }
 
-#dataTableFooterIcons,#dataTableFooterIcons a {
+.dataTableFooterIcons,.dataTableFooterIcons a {
 	text-decoration: none;
 	color: #8894B1;
 	font-size:0.9em;
@@ -305,7 +306,7 @@ table thead div {
 	clear: both;
 }
 
-#loadingDataTable {
+.pk-loadingDataTable {
 	float: left;
 	font-size: 0.9em;
 	color: #193B6C;
@@ -347,7 +348,7 @@ tr td.label img.plusMinus {
 	margin-right: 0em;
 }
 
-#emptyDatatable {
+.pk-emptyDataTable {
 	padding-top: 20px;
 	padding-bottom: 10px;
 	text-align: center;
diff --git a/plugins/CoreHome/templates/datatable.js b/plugins/CoreHome/templates/datatable.js
index 667b0f8e1a..5127e534ac 100644
--- a/plugins/CoreHome/templates/datatable.js
+++ b/plugins/CoreHome/templates/datatable.js
@@ -131,7 +131,7 @@ dataTable.prototype =
 	
 	// Function called to trigger the AJAX request 
 	// The ajax request contains the function callback to trigger if the request is successful or failed
-	// displayLoading = false When we don't want to display the Loading... DIV #loadingDataTable
+	// displayLoading = false When we don't want to display the Loading... DIV .pk-loadingDataTable
 	// for example when the script add a Loading... it self and doesn't want to display the generic Loading
 	reloadAjaxDataTable: function(displayLoading, callbackSuccess)
 	{
@@ -148,7 +148,7 @@ dataTable.prototype =
 		
 		if(displayLoading)
 		{
-			$('#'+self.workingDivId+' #loadingDataTable').css('display','block');
+			$('#'+self.workingDivId+' .pk-loadingDataTable').css('display','block');
 		}
 		
 		$.ajax(self.buildAjaxRequest(callbackSuccess));
@@ -170,14 +170,14 @@ dataTable.prototype =
 		{
 			// we add class to the table so that we can give a different style to the subtable
 			$(content).find('table.dataTable').addClass('subDataTable');
-			$(content).find('#dataTableFeatures').addClass('subDataTable');
+			$(content).find('.dataTableFeatures').addClass('subDataTable');
 			
 			//we force the initialisation of subdatatables
-			dataTableSel.html( $(content).html() );
+			dataTableSel.html( $(content) );
 		}
 		else
 		{
-			dataTableSel.html( $(content).html() );
+			dataTableSel.html( $(content) );
 			piwikHelper.lazyScrollTo(dataTableSel[0], 400);
 		}
 	},	
@@ -254,7 +254,7 @@ dataTable.prototype =
 		var self = this;
 		
 		// Set the string for the DIV, either "Exclude low pop" or "Include all"
-		$('#dataTableExcludeLowPopulation', domElem)
+		$('.dataTableExcludeLowPopulation', domElem)
 			.each(
 				function()
 				{
@@ -307,7 +307,7 @@ dataTable.prototype =
 			currentPattern = '';
 		}
 		
-		$('#dataTableSearchPattern', domElem)
+		$('.dataTableSearchPattern', domElem)
 			.show()
 			.each(function(){
 				// when enter is pressed in the input field we submit the form
@@ -371,7 +371,7 @@ dataTable.prototype =
 	{
 		var self = this;
 		
-		$('#dataTablePages', domElem).each(
+		$('.dataTablePages', domElem).each(
 			function(){
 				var offset = 1+Number(self.param.filter_offset);
 				var offsetEnd = Number(self.param.filter_offset) + Number(self.param.filter_limit);
@@ -390,7 +390,7 @@ dataTable.prototype =
 		);
 		
 		// Display the next link if the total Rows is greater than the current end row
-		$('#dataTableNext', domElem)
+		$('.dataTableNext', domElem)
 			.each(function(){
 				var offsetEnd = Number(self.param.filter_offset) 
 									+ Number(self.param.filter_limit);
@@ -409,7 +409,7 @@ dataTable.prototype =
 		;
 		
 		// Display the previous link if the current offset is not zero
-		$('#dataTablePrevious', domElem)
+		$('.dataTablePrevious', domElem)
 			.each(function(){
 					var offset = 1+Number(self.param.filter_offset);
 					if(offset != 1)
@@ -442,18 +442,18 @@ dataTable.prototype =
 		}
 		
 		// When the (+) image is hovered, the export buttons are displayed 
-		$('#dataTableFooterIconsShow', domElem)
+		$('.dataTableFooterIconsShow', domElem)
 			.show()
 			.hover( function() {
 					$(this).fadeOut('slow');
-					$('#exportToFormat', $(this).parent()).show('slow');
+					$('.exportToFormatIcons', $(this).parent()).show('slow');
 				}, function(){}
 		);
 		
 		//timeout object used to hide the datatable export buttons
 		var timeout = null;
 		
-		$('#dataTableFooterIcons', domElem)
+		$('.dataTableFooterIcons', domElem)
 			.hover( function() {
 					//display 'hand' cursor
 					$(this).css({ cursor: "pointer"});
@@ -472,8 +472,8 @@ dataTable.prototype =
 					//set a timeout that will hide export buttons after a few moments
 					var dom = this;
 					timeout = setTimeout(function(){
-						$('#exportToFormat', dom).fadeOut('fast', function(){	//queue the two actions
-						$('#dataTableFooterIconsShow', dom).show('fast');});
+						$('.exportToFormatIcons', dom).fadeOut('fast', function(){	//queue the two actions
+						$('.dataTableFooterIconsShow', dom).show('fast');});
 					}, 1000);
 				}
 		);
@@ -487,7 +487,7 @@ dataTable.prototype =
 				}
 		);
 		
-		$('#tableGoals', domElem)
+		$('.tableGoals', domElem)
 			.show()
 			.click(
 				function(){
@@ -500,7 +500,7 @@ dataTable.prototype =
 				}
 		);
 		
-		$('#tableAllColumnsSwitch', domElem)
+		$('.tableAllColumnsSwitch', domElem)
 			.show()
 			.click(
 				function(){
@@ -517,8 +517,8 @@ dataTable.prototype =
 				}
 		);
 		
-		$('#exportToFormat img', domElem).click(function(){
-			$(this).siblings('#linksExportToFormat').toggle();
+		$('.exportToFormatIcons img', domElem).click(function(){
+			$(this).siblings('.linksExportToFormat').toggle();
 		});
 		
 		$('.exportToFormat', domElem).attr( 'href', function(){
@@ -584,7 +584,7 @@ dataTable.prototype =
 	{
 		var self = this;
 		
-		var urlLinkFoundDom = $("tr:not('.subDataTable') td:first-child:has('#urlLink')", domElem);
+		var urlLinkFoundDom = $("tr:not('.subDataTable') td:first-child:has('.urlLink')", domElem);
 		if(urlLinkFoundDom.length == 0)
 		{
 			self.truncate( $("table tr td:first-child", domElem) );
@@ -602,7 +602,7 @@ dataTable.prototype =
 				{
 					imgToPrepend = '<img width="'+imageLinkWidth+'" height="'+imageLinkHeight+'" src="themes/default/images/link.gif" /> ';
 				}
-				var urlLinkDom = $('#urlLink',this);
+				var urlLinkDom = $('.urlLink', this);
 				var urlToLink = $(urlLinkDom).html();
 				$(urlLinkDom).remove();
 				
@@ -654,7 +654,7 @@ dataTable.prototype =
 					'<tr>'+
 						'<td colspan="'+numberOfColumns+'" class="cellSubDataTable">'+
 							'<div id="'+divIdToReplaceWithSubTable+'">'+
-								'<span id="loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif" />'+ _pk_translate('CoreHome_Loading_js') +'</span>'+
+								'<span class="pk-loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif" />'+ _pk_translate('CoreHome_Loading_js') +'</span>'+
 							'</div>'+
 						'</td>'+
 					'</tr>'
@@ -873,7 +873,7 @@ actionDataTable.prototype =
 			$(domElem).after( '\
 			<tr id="'+divIdToReplaceWithSubTable+'" class="cellSubDataTable">\
 				<td colspan="'+numberOfColumns+'">\
-						<span id="loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif" /> Loading...</span>\
+						<span class="pk-loadingDataTable" style="display:inline"><img src="themes/default/images/loading-blue.gif" /> Loading...</span>\
 				</td>\
 			</tr>\
 			');
@@ -949,7 +949,7 @@ actionDataTable.prototype =
 		self.parentId = '';
 	
 		var dataTableSel = $('#'+idToReplace);
-		dataTableSel.html($(content).html());
+		dataTableSel.html( $(content) );
 		piwikHelper.lazyScrollTo(dataTableSel[0], 400);
 	},
 	
diff --git a/plugins/CoreHome/templates/datatable.tpl b/plugins/CoreHome/templates/datatable.tpl
index 3177d4f116..56c508a151 100644
--- a/plugins/CoreHome/templates/datatable.tpl
+++ b/plugins/CoreHome/templates/datatable.tpl
@@ -4,7 +4,7 @@
 		{$arrayDataTable.message} 
 	{else}
 		{if count($arrayDataTable) == 0}
-		<div id="emptyDatatable">{'CoreHome_TableNoData'|translate}</div>
+		<div class="pk-emptyDataTable">{'CoreHome_TableNoData'|translate}</div>
 		{else}
 			<a name="{$properties.uniqueId}"></a>
 			<table cellspacing="0" class="dataTable"> 
@@ -21,7 +21,7 @@
 			<tr {if $row.idsubdatatable && $javascriptVariablesToSet.controllerActionCalledWhenRequestSubTable != null}class="subDataTable" id="{$row.idsubdatatable}"{/if}>
 {foreach from=$dataTableColumns item=column}
 <td>
-{if !$row.idsubdatatable && $column=='label' && !empty($row.metadata.url)}<span id="urlLink">{$row.metadata.url}</span>{/if}
+{if !$row.idsubdatatable && $column=='label' && !empty($row.metadata.url)}<span class="urlLink">{$row.metadata.url}</span>{/if}
 {if $column=='label'}{logoHtml metadata=$row.metadata alt=$row.columns.label}{/if}
 {if isset($row.columns[$column])}{$row.columns[$column]}{else}{$defaultWhenColumnValueNotDefined}{/if}
 </td>
diff --git a/plugins/CoreHome/templates/datatable_actions.tpl b/plugins/CoreHome/templates/datatable_actions.tpl
index 718f46e181..15c3acbd82 100644
--- a/plugins/CoreHome/templates/datatable_actions.tpl
+++ b/plugins/CoreHome/templates/datatable_actions.tpl
@@ -4,7 +4,7 @@
 		{$arrayDataTable.message} 
 	{else}
 		{if count($arrayDataTable) == 0}
-			<div id="emptyDatatable">{'CoreHome_TableNoData'|translate}</div>
+			<div class="pk-emptyDataTable">{'CoreHome_TableNoData'|translate}</div>
 		{else}
 			<table cellspacing="0" class="dataTable dataTableActions"> 
 			<thead>
diff --git a/plugins/CoreHome/templates/datatable_actions_recursive.tpl b/plugins/CoreHome/templates/datatable_actions_recursive.tpl
index d405ea3fdc..48e98197d1 100644
--- a/plugins/CoreHome/templates/datatable_actions_recursive.tpl
+++ b/plugins/CoreHome/templates/datatable_actions_recursive.tpl
@@ -4,7 +4,7 @@
 		{$arrayDataTable.message} 
 	{else}
 		{if count($arrayDataTable) == 0}
-			<div id="emptyDatatable">{'CoreHome_TableNoData'|translate}</div>
+			<div class="pk-emptyDataTable">{'CoreHome_TableNoData'|translate}</div>
 		{else}
 			<table cellspacing="0" class="dataTable dataTableActions"> 
 			<thead>
diff --git a/plugins/CoreHome/templates/datatable_footer.tpl b/plugins/CoreHome/templates/datatable_footer.tpl
index caf23faedb..c016e75311 100644
--- a/plugins/CoreHome/templates/datatable_footer.tpl
+++ b/plugins/CoreHome/templates/datatable_footer.tpl
@@ -1,18 +1,18 @@
-<div id="dataTableFeatures">
+<div class="dataTableFeatures">
 {if $properties.show_exclude_low_population}
-	<span id="dataTableExcludeLowPopulation"></span>
+	<span class="dataTableExcludeLowPopulation"></span>
 {/if}
 
 {if $properties.show_offset_information}
 <div>
-	<span id="dataTablePages"></span>
-	<span id="dataTablePrevious">&lsaquo; {'General_Previous'|translate}</span>
-	<span id="dataTableNext">{'General_Next'|translate} &rsaquo;</span>
+	<span class="dataTablePages"></span>
+	<span class="dataTablePrevious">&lsaquo; {'General_Previous'|translate}</span>
+	<span class="dataTableNext">{'General_Next'|translate} &rsaquo;</span>
 </div>
 {/if}
 
 {if $properties.show_search}
-<span id="dataTableSearchPattern">
+<span class="dataTableSearchPattern">
 	<input id="keyword" type="text" length="15" />
 	<input type="submit" value="{'General_Search'|translate}" />
 </span>
@@ -20,15 +20,15 @@
 
 {if $properties.show_footer_icons}
 	<div>
-		<span id="dataTableFooterIcons">
-			<span id="exportToFormat" style="display:none;padding-left:4px;">
+		<span class="dataTableFooterIcons">
+			<span class="exportToFormatIcons" style="display:none;padding-left:4px;">
 				{if $properties.show_export_as_image_icon}
 					<span id="dataTableFooterExportAsImageIcon">
 						<a href="javascript:piwikHelper.OFC.jquery.popup('{$chartDivId}');"><img title="{'General_ExportAsImage_js'|translate}" src="themes/default/images/image.png" /></a>
 					</span>
 				{/if}
 				<img width="16" height="16" src="themes/default/images/export.png" title="{'General_Export'|translate}" />
-				<span id="linksExportToFormat" style="display:none"> 
+				<span class="linksExportToFormat" style="display:none"> 
 					<a target="_blank" class="exportToFormat" methodToCall="{$properties.apiMethodToRequestDataTable}" format="CSV" filter_limit="100">CSV</a> | 
 					<a target="_blank" class="exportToFormat" methodToCall="{$properties.apiMethodToRequestDataTable}" format="XML" filter_limit="100">XML</a> |
 					<a target="_blank" class="exportToFormat" methodToCall="{$properties.apiMethodToRequestDataTable}" format="JSON" filter_limit="100">Json</a> |
@@ -41,12 +41,12 @@
 				<a class="viewDataTable" format="graphPie"><img width="16" height="16" src="themes/default/images/chart_pie.png" title="{'General_Piechart'|translate}" /></a>
 			{/if}
 			</span>
-			<span id="dataTableFooterIconsShow" style="display:none;padding-left:4px;">
+			<span class="dataTableFooterIconsShow" style="display:none;padding-left:4px;">
 				<img src="plugins/CoreHome/templates/images/more.png" />
 			</span>
 			
 			{if $properties.show_table}
-				<span id="tableAllColumnsSwitch" style="display:none;float:right;padding-right:4px;border-right:1px solid #82A1D2;">
+				<span class="tableAllColumnsSwitch" style="display:none;float:right;padding-right:4px;border-right:1px solid #82A1D2;">
 				{if $javascriptVariablesToSet.viewDataTable != 'table'}
 					<img title="{'General_DisplayNormalTable'|translate}" src="themes/default/images/table.png" />
 				{elseif $properties.show_table_all_columns}
@@ -56,7 +56,7 @@
 			{/if}
 			
 			{if $properties.show_goals}
-			<span id="tableGoals" style="display:none;float:right;padding-right:4px;">
+			<span class="tableGoals" style="display:none;float:right;padding-right:4px;">
 				{if $javascriptVariablesToSet.viewDataTable != 'tableGoals'}
 					<img title="View Goals" src="themes/default/images/goal.png" />
 				{/if}
@@ -66,7 +66,7 @@
 	</div>
 {/if}
 
-<span id="loadingDataTable"><img src="themes/default/images/loading-blue.gif" /> {'General_LoadingData'|translate}</span>
+<span class="pk-loadingDataTable"><img src="themes/default/images/loading-blue.gif" /> {'General_LoadingData'|translate}</span>
 </div>
 
 <div class="dataTableSpacer" />