var tablesArray = $("table");
var onOffState = "initial";

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {

  switch(onOffState) {
      default :
        console.log("runtime.onMessage.initialise");
        addContainersToTables();
        addImagesToOverlays();
        addEventListenersToContainers();
        onOffState = "on";
        sendResponse({farewell: "byebye"});
        return true;
          break;
      case "on" :
        $(".myTableDownloaderOverlay").hide();
        removeEventListenersFromContainers();
        onOffState = "off"
        sendResponse({farewell: "byebye"});
        return true;
          break;
      case "off" :
        $(".myTableDownloaderOverlay").show();
        addEventListenersToContainers();
        onOffState = "on";
        sendResponse({farewell: "byebye"});
        return true;
            break;
  }
});

function addContainersToTables(){
      console.log("addContainersToTables");
      $('table').each(function (index, value){
        $(value).wrap('<div class="myTableDownloaderContainer"></div>');
        $(value).append('<div class="myTableDownloaderOverlay"></div>');
      });
}
function addImagesToOverlays(){
      console.log("addImagesToOverlays");
      $(".myTableDownloaderOverlay").each(function (index, value){
        $(value).append('<img src="chrome-extension://koiahfpffkbjimlddagiikgbfgnbfifb/iconWithWhiteBorder.png" class="tableDownloaderIcon"></img>');
        $(value).append('<img src="chrome-extension://koiahfpffkbjimlddagiikgbfgnbfifb/cancelCross.png" class="cancelCross"></img>');
      });
}

function addEventListenersToContainers(){
    console.log("addEventListenersToContainers");
    $(".myTableDownloaderContainer").each(function (index, value){
      $(value).click(function(){
        downloadTable(this)
      });
    });
  }

function downloadTable(thisContainer){
    var thisContainerInnerHTML = thisContainer.innerHTML;
    var filename = "table download.xls";
    download(filename, thisContainerInnerHTML);
}

function download(filename, text) {
    console.log("download");
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + text);
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

function removeEventListenersFromContainers(){
  console.log("removeEventListenersFromContainers");
  $(".myTableDownloaderContainer").each(function (index, value){
  $( value ).off( "click" );
  });
}

@@ -1171,16 +1171,119 @@
   %7D);%0A%7D%0A
+%0A%0Afunction removeThisEventListenerAndOverlay()%7B%0A  console.log(%22clicked cross%22);%0A//  $(this).hide();%0A%7D%0A%0A
 function
@@ -1952,16 +1952,298 @@
   %7D);%0A  
+  $('.cancelCross').each(function(index, value)%7B%0A        $(value).click(function()%7B%0A    //      this.parentNode.parentNode.removeChild(this.parentNode);%0A          $(this).parent().hide();%0A          $(this).parent().parent().off( %22click%22 );%0A        return false;%0A        %7D);%0A    %7D);%0A
 %7D%0A%0Afunct

add close crosses to table overlay and the event listeners