//Helium-css v1.0
//Copyright 2010, Charles Lawrence http://twitter.com/geuis
//License: MIT License(http://opensource.org/licenses/mit-license.php)
//release: 1/13/10

var helium = {

data:{
//timeout
//status,
//findinglist,
//pagelist,
//currenturl,
//pages,
//stylesheets
},

init:function(){

//load page data
helium.load();

helium.data.timeout = 3000;
helium.save();

helium.checkstatus();

},

checkstatus:function(){
//determine state
//0: not started
//1: finding stylesheets on all pages
//2: loading/parsing stylesheets
//3: check if selectors found on pages
//4: finished, show report

if(typeof helium.data.status === 'undefined')
helium.data.status = 0;


if( helium.data.status === 0 ){
//not started

//prompt for list of pages
var frag = document.createDocumentFragment();
frag.appendChild( document.createElement('div') );
frag.lastChild.setAttribute('id','cssdetectID');

var html = '<style>#cssdetectID{width:500px;height:300px;background-color:#fff;position:absolute;top:20%;left:50%;margin-left:-250px;z-index:90000000;border:2px solid #000;padding:15px;} #cssdetectTextarea{width:100%;min-height:200px;margin-bottom:10px;} #cssdetectStart, #cssdetectRestart{float:right; margin-left:10px;}</style>';
var style = '<h2>Paste a list of pages on your site you want to test:</h2><textarea id="cssdetectTextarea"></textarea><br/><input type="button" id="cssdetectStart" value="Start"/> <input type="button" id="cssdetectRestart" value="Reset to Beginning"/>';
frag.lastChild.innerHTML = html + style;
document.getElementsByTagName('body')[0].appendChild(frag);

//add listener to save list and start processing
document.getElementById('cssdetectStart').addEventListener('click',function(){

//currently based on new-line separated values. Eventually supports sitemap XML format and comma-delineated.
var list = document.getElementById('cssdetectTextarea').value.split('\n');

helium.setPageList(list);

//set status to 'finding'
helium.data.status = 1;

//copy pagelist
helium.data.findinglist = helium.data.pagelist.slice(0); //copy not reference
helium.save();

//navigate to first page
helium.nav( helium.data.findinglist );

},false);

//add listener to reset all data
document.getElementById('cssdetectRestart').addEventListener('click',function(){

//clear stored pages
document.getElementById('cssdetectTextarea').value = '';

helium.reset();

}, false);

return false;
}


if( helium.data.status === 1 ){
//finding stylesheets
helium.findstylesheets();

return false;
}

if( helium.data.status === 2 ){
//loading & parsing stylesheets
helium.getcss();

return false;
}

if( helium.data.status === 3 ){
//check if selectors found on pages
helium.checkcss();

return false;
}

if( helium.data.status === 4 ){
//Finished, issue report
helium.report();
}



},

//display final report for unused selectors
report:function(){

var frag = document.createDocumentFragment();
frag.appendChild( document.createElement('div') );
frag.lastChild.setAttribute('id','cssdetectID');

var div = frag.lastChild;

var flip=false;

var str = '<h2>CSS Detection Report</h2>';
str+= '<input type="button" id="cssreportResetID" value="New Test (Warning: This erases all data from the current test)"/>';
str+= '<p> <span class="green">**Green: unmatched selectors</span>, <span class="black">**Black: matched selectors that are defined with non-matched selectors</span>, <span class="red">**Red: a malformed selector</span> <span class="blue">**Blue: a selector with a pseudo-class. You must test these manually.</span></p>';

//loop through stylesheets
for(var i=0; i<helium.data.stylesheets.length; i++){

//add stylesheet link
str+= '<div><strong><a href="'+ helium.data.stylesheets[i].url +'">'+ helium.data.stylesheets[i].url +'</a></strong></div>';

var sels = helium.data.stylesheets[i].selectors;

if( sels.length > 0 ){
str+= '<ul>';
//display selectors that are false, ie never found on any tested pages
for(var d=0; d < sels.length; d++){

var tmpstr='';
var counttrue=0;

for(var e=0; e < sels[d].length; e++){

//identify selectors that were matched on a page somewhere, but are defined in combination with non-matched selectors.
if( sels[d][e].v === true && sels[d].length > 1){
if(e > 0){ tmpstr+=', '; }
tmpstr+= '<strong><span class="selector matchedselector">'+sels[d][e].s+'</span></strong>';
counttrue++;
}

//shows if a pseudo-class is found. Not currently testing these so the user must do so manually
if( sels[d][e].v === 'pseudo_class' ){
if(e > 0){ tmpstr+=', '; }
tmpstr+='<strong class="pseudoclass">'+'<span class="selector">'+sels[d][e].s+'</span>'+'</strong>';
}

//shows as a broken selecgtor, ie it is written in a way the browser cannot parse.
if( sels[d][e].v === 'broken_selector' ){
if(e > 0){ tmpstr+=', '; }
tmpstr+='<strong class="badselector">'+'<span class="selector">'+sels[d][e].s+'</span>'+'</strong>';
}

//shows if the selector was not found anywhere.
if( sels[d][e].v === false ){
if(e > 0){ tmpstr+=', '; }
tmpstr+= '<span class="selector">'+sels[d][e].s+'</span>';
}

}

//detect if multiple selectors defined together are all matched. Remove if so.
if( counttrue === sels[d].length )
tmpstr='';
counttrue = 0;

if(tmpstr !== ''){
if( flip ){
var classname=' class="alternate"';
flip = false;
}else{
var classname='';
flip = true;
}
str+='<li'+classname+'>'+tmpstr+'</li>';
}

}
str+= '</ul>';
}else{
str+= 'No unmatched selectors found.';
}
}

str+='<style>';
str+='#cssdetectID{ font-family:arial;font-size:13px; font-weight:bold; color:#009000; border:2px solid #000; position:absolute; top:50px; left:50%; width:80%; margin-left:-40%; z-index:999999999; background-color:#fff;padding:15px;}';
str+='#cssdetectID p .black, #cssdetectID .matchedselector{ color:#323839; }';
str+='#cssdetectID p .red, #cssdetectID .badselector{ color:#cc0000; }';
str+='#cssdetectID p .green{ color:#009000; }';
str+='#cssdetectID p .blue, #cssdetectID .pseudoclass{ color:#0000cc; }';
str+='#cssdetectID .alternate{ background-color:#EBFEFF; }';
str+='#cssdetectID li:hover{ background-color:#8AD9FF; }';
str+='#cssdetectID li strong{ font-weight:bold;}';
str+='#cssdetectID div{ margin-top:20px; padding:5px 0 5px 0; border-top:3px solid #cc0000;}';
str+='#cssdetectID div a{ font-weight:bold; font-size:14px; color:#0064B1}';
str+='#cssdetectID #cssreportResetID{ position:absolute; top:3px;right:3px; padding:3px; border:1px solid #323839; background-color:#fff; -moz-border-radius: 5px; -webkit-border-radius: 5px;}';
str+='#cssdetectID #cssreportResetID:hover{ cursor:pointer; }';
str+='#cssdetectID #cssreportResetID:active{ text-shadow: 1px 1px 2px #000; }';
str+='</style>';

div.innerHTML = str;
document.getElementsByTagName('body')[0].appendChild( frag );

//toggle selector visibility
var sels = document.querySelectorAll('#cssdetectID ul li');
for(var s=0; s<sels.length; s++){
(function(){
var i=s;
sels[i].addEventListener('click',function(){

this.style.opacity = '0.5';

},false);
})();
}

//setup click-selector testing on the current page
//var sels = document.querySelectorAll('#cssdetectID .selector');
//for(var s=0; s<sels.length; s++){
// (function(){
// var i=s;
// sels[i].addEventListener('click',function(){
// console.log( document.querySelectorAll( this.innerHTML ) );
// },false);
// })();
//}

//setup New Test button
document.getElementById('cssreportResetID').addEventListener('click',function(){

helium.reset();

},false);

},

reset:function(){
//resets to beginning
localStorage.removeItem('cssdetect');

var nodes = document.querySelectorAll('#cssdetectID');
for(var i=0;i<nodes.length;i++){
nodes[i].parentNode.removeChild(nodes[i]);
}

helium.init();
},

//check if selectors found on pages
checkcss:function(){


//delay time period set with helium.data.timeout. For purposes of waiting for content to render after load event(XHR)
setTimeout(function(){

//find the current page in the list of pages
for(var i=0; i<helium.data.pages.length; i++){
if( helium.data.pages[i].url === helium.data.currenturl ){

//loop through stylesheet links on page
for( var b=0; b<helium.data.pages[i].links.length; b++){

//find the stylesheet array element that matches the stylesheet link currently being worked on
var thislink = helium.data.pages[i].links[b];
for( var c=0; c < helium.data.stylesheets.length; c++){
if( helium.data.stylesheets[c].url === thislink ){

var stylesheet = helium.data.stylesheets[c];

//loop through selectors and test if active on this page.
//If it is a single selector( length===1 ), remove them from the array
//If length > 1, the "sub selector" gets an attribute of 'true' to indicate it was found
for( var d=0; d < stylesheet.selectors.length; d++ ){

for( var e=0; e < stylesheet.selectors[d].length; e++ ){

var response = helium.find( stylesheet.selectors[d][e].s );
if( response === true ){
stylesheet.selectors[d][e].v = true;
}
if( response === 'bad_selector'){
stylesheet.selectors[d][e].v = response;
}
if( response === 'pseudo_class' ){
stylesheet.selectors[d][e].v = 'pseudo_class';
}

}

}

//end the current loop
c = helium.data.stylesheets.length;
}
}

}

//end the current loop
i = helium.data.pages.length;
}

}

helium.save();

if( helium.data.pagelist.length > 0 ){
//navigate to next page
helium.nav();
}else{

helium.data.status = 4;
helium.save();

//do report
helium.report();

}

}, helium.data.timeout);


},

//search current page for selectors
find:function(selector){

//try/catch is used because querySelectorAll throws errors when syntactically invalid selectors are passed through. Useful for detection purposes.
try{
//returns true if selector found on page, false if not
if( document.querySelectorAll(selector).length > 0 ){
return true;
}
}catch(err){
return 'broken_selector';
}

//detect if the selector includes a pseudo-class, i.e. :active, :focus
var parse = selector.match(/\:+[\w-]+/gi);
if( parse !== null && parse.hasOwnProperty('length') && parse.length > 0){
return 'pseudo_class';
}else{
return false;
}

},

findstylesheets:function(){

var page = {
url: helium.data.currenturl,
links:[]
}

//find link elements on the page
var links = document.querySelectorAll("link[type='text/css'][rel='stylesheet']");

for(var i=0; i<links.length; i++){

//get href
var tmplink = links[i].getAttribute('href');

//append full URI if absent
if( tmplink.indexOf('http') !== 0 && tmplink.substr(0,2) !== '//') {
                // make sure that relative URLs work too
                if (tmplink.indexOf('/') != 0) {
                    var lastDir = window.location.pathname.lastIndexOf('/');
                    if (lastDir > 0) {
                        directory = window.location.pathname.substring(0, lastDir+1);
                    } else {
                        directory = '/';
                    }
                    tmplink = directory + tmplink;
                }
tmplink = window.location.protocol + '//' + window.location.hostname + ":" + window.location.port + tmplink;
}

//filter out urls not on this domain
if( tmplink.indexOf( window.location.hostname ) !== -1 ){
page.links.push( tmplink );

if( typeof helium.data.stylesheets === 'undefined' )
helium.data.stylesheets = [];

helium.data.stylesheets.push( tmplink );
}

}

//check if data field exists
if( typeof helium.data.pages === 'undefined' )
helium.data.pages = [];

//save pages
helium.data.pages.push( page );
helium.save();

//go to next page
if( helium.data.findinglist.length > 0){
helium.nav( helium.data.findinglist );
}else{

//remove duplicates from stylesheets list
helium.data.stylesheets.sort();
for( var i=0; i < helium.data.stylesheets.length-1; i++){
if(helium.data.stylesheets[i] === helium.data.stylesheets[i+1]){
helium.data.stylesheets.splice(i--,1);
}
}

for( var i=0; i < helium.data.stylesheets.length; i++ ){
var tmp = helium.data.stylesheets[i];
helium.data.stylesheets[i] = {
url: tmp,
selectors: []
}
}

//update status
helium.data.status = 2;
helium.save();

helium.checkstatus();

}
},

//list of stylesheet links on page
getcss:function(){

for(var i=0; i<helium.data.stylesheets.length; i++){

//get content of stylesheets via XHR
helium.get( helium.data.stylesheets[i].url, i, function(index, data){

//remove css comments
data = data.replace(/\/\*[\s\S]*?\*\//gim,"");

//parse selectors. ##NEWLINE REMOVAL IS HACKISH, CAN BE DONE BETTER WITH A BETTER REGEX
var selectors = data.replace(/\n/g,'').match(/[^\}]+[\.\#\-\w]?(?=\{)/gim);

//results of selector tests
var results = [];

for(var e=0; e<selectors.length; e++){

var sel = selectors[e].split(',');

//check for multiple selectors defined together. eg body,h1,h2,h3{}
if( sel.length > 0 ){

var arr = [];
for(var t=0; t < sel.length; t++ ){

arr.push({s: sel[t], v: false});

}

results.push( arr );

}else{
results.push( [{ s: selectors[e], v: false}] );
}

}

//store stylesheet results
helium.data.stylesheets[index].selectors = results;
helium.save();

//set status if the last request is done
if( index === helium.data.stylesheets.length-1 ){
helium.data.status = 3;

//navigate to first page in helium.pagelist
helium.nav();
}

});

}

},


//navigate to next page in list
nav:function( list ){

//if no list is provided, default to pagelist
if( !list ){
var list = helium.data.pagelist;
}

//remove first url in list
var next = list.shift();

//stores the url that is being redirected to
if( next !== undefined )
helium.data.currenturl = next;

helium.save();

//redirect
if( next !== undefined )
window.location = next;

},

//store list of pages to be checked
setPageList:function(pagelist){

helium.data.pagelist = pagelist;
helium.save();

},

//return info from localStorage
load:function(){

if( !localStorage.cssdetect )
localStorage.cssdetect = JSON.stringify({});

helium.data = JSON.parse( localStorage.cssdetect );

},

save:function(){

//store page data into localStorage
localStorage.cssdetect = JSON.stringify( helium.data );

},

    // when something goes wrong, nice to helium.clear() to nuke the local storage
    clear:function() {
        delete localStorage['cssdetect'];
    },

get:function(url, index, callback){
if(window.attachEvent){
var http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
var http = new XMLHttpRequest();
}
http.open("GET", url);
http.onreadystatechange=function() {
if(http.readyState === 4) {
callback(index, http.responseText);
}
}
http.send(null);
}

}