function listStyleSheets() {
  var sheets = new Array();
  for (i=0;i<document.styleSheets.length;i++) {
    sheets.push(document.styleSheets[i]);
    for (j=0;j<document.styleSheets[i].cssRules.length;j++) {
       // @import can only happen at the very beginning of a style sheet
       // except for the @charset rule
       var rule = document.styleSheets[i].cssRules[j];
       if (rule.type!=rule.CHARSET_RULE && rule.type!=rule.IMPORT_RULE) {
        break;
       }
       if (rule.type==rule.IMPORT_RULE && rule.styleSheet) {
          sheets.push(rule.styleSheet);
       }
    }
  }
  return sheets;
}


function _hideDiv(show) {
 return _animateDiv(false);
}

function _animateDiv(show) {
  if (document.getElementById("____divsheets")) {
    var div = document.getElementById("____divsheets");
    if (show) {
      div.style.display='block';
    } else {
      div.style.display='none';        
    }
  }
  return;
}

function displayStyleSheets() {
  if (document.getElementById("____divsheets")) {
    _animateDiv(true);
    var div = document.getElementById("____divsheets");
    div.style.display='block';
    return true;
  }
  var sheets = listStyleSheets();
  var div = document.createElement("div");
  div.style.color='#eee';
  div.setAttribute("id","____divsheets");
  var p = document.createElement("p");
  p.appendChild(document.createTextNode("Select the style sheets you want to invert:"));
  div.appendChild(p);
  var submit = document.createElement("input");
  submit.type="submit";
  submit.addEventListener("click",addAntiCss,false);
  submit.value="Invert";
  var close = document.createElement("input");
  close.type="submit";
  close.addEventListener("click",_hideDiv,false);
  close.value="Close list";
  var ul = document.createElement("ul");
  ul.setAttribute("id","____sheets");
  var styleSheetCounter = 0;
  var embeddedStyleSheetCounter = 0;
  for (i=0;i<sheets.length;i++) {
     sheet = sheets[i];
     var li = document.createElement("li");
     var input = document.createElement("input");
     input.type="checkbox";
     li.appendChild(input);
     if (sheet.href) {
       var anchor = document.createElement("a");
       anchor.style.color='#eee';
       anchor.style.backgroundColor='black';
       anchor.setAttribute("href",sheet.href);
       var text;
       if (sheet.title) {
         text = document.createTextNode(sheet.title);
       } else {
         text = document.createTextNode(sheet.href);
       }
       anchor.appendChild(text)
       li.appendChild(anchor)
     }  else {
        embeddedStyleSheetCounter = embeddedStyleSheetCounter + 1;
        var text = document.createTextNode("Embedded style sheet #" + embeddedStyleSheetCounter);
        li.appendChild(text);
     }
     ul.appendChild(li);
  }
  
  div.style.position='absolute';
  div.style.opacity=0.8;
  div.style.backgroundColor='black';
  div.style.top=0;
  div.style.left="50%";
  div.style.padding='1em';
  div.style.border="thin black solid";
  div.appendChild(ul);
  div.appendChild(submit);
  div.appendChild(close);
  body = document.getElementsByTagName("body")[0];
  body.appendChild(div);
   _animateDiv(true);
  return true;
}

function displayInvertedCss(selectors) {
  div = document.getElementById("____divsheets");
  if (div.getElementsByTagName("pre").length) {
    div.removeChild(div.getElementsByTagName("pre")[0]);
  }
  pre = document.createElement("pre");
  pre.style.whiteSpace="pre-line";
  overrideRule = " { position:static !important;float:none !important;padding:0 !important;margin:0 !important; background-image:none !important;}\n";
  newCssText = "No matching selectors";
  if (selectors.length) {
    newCssText = selectors.join(overrideRule) + overrideRule;
  }
  pre.appendChild(document.createTextNode(newCssText));
  div.appendChild(pre);

}


function addAntiCss() {
  var matchingPropertiesRegexp = new RegExp("^(margin(-?.*)?|padding(-?.*)?|float|position|background|background-image)$","i");
  selectors = new Array(); 
  var sheets = listStyleSheets();
  var listOfStyleSheets = document.getElementById("____sheets").getElementsByTagName("input");
  for (i=0;i<listOfStyleSheets.length;i++) {
     if (listOfStyleSheets[i].checked) {
      sheet = sheets[i];
      for (j=0;j<sheet.cssRules.length;j++) {
       rule = sheet.cssRules[j];
       if (rule.type==rule.STYLE_RULE) {
         for (k=0; k<rule.style.length;k++) {
           if (rule.style[k].match(matchingPropertiesRegexp) && selectors.indexOf(rule.selectorText)==-1) {
                selectors.push(rule.selectorText);
           }
         }
       }
      }
     }
  }
  displayInvertedCss(selectors);
  return false;
}

displayStyleSheets();