Add :active to buttons for iPhone

window.addEventListener('load', function (event) {
    var stylesheets = window.document.styleSheets;

    for(var i = 0; i < stylesheets.length; i++) {
        parseStylesheet(stylesheets[i]);
    }
    
    function parseStylesheet(stylesheet) {
        if(stylesheet.imports) {
            for (var i = 0; i < stylesheet.imports.length; i++) {
                parseStylesheet(stylesheet.imports[i]);
            }
        }
        
        for(var i = 0; i < stylesheet.rules.length; i++) {
            parseCSSRule(stylesheet.rules[i], stylesheet);
        }
    }
    
    function parseCSSRule(rule, stylesheet) {
        if (re_interactive.test(rule.selectorText)) {
            var style = rule.style.cssText;
            var affectedItems = re_affected.exec(rule.selectorText)[i];
            
            // create new selector using class version
            var classname = affectedItems.replace(re_pseudo, '$1');
            var selector = rule.selectorText.replace(re_selector, '.$2' + classname);
                            
            // add new rule to the style sheet
            stylesheet.addRule(selector, style);
        }
    }
    
    var buttons = document.getElementsByTagName('button');
    for(var i = 0; i < buttons.length; i++) {
        // mousedown and mouse up fire at the same time. use touchstart and touchend
        buttons[i].addEventListener('touchstart', function (event) {this.className = ' active';});
        buttons[i].addEventListener('touchend', function (event) {this.className = this.className.replace(/(^|\s)active(\s|$)/, '');});
    }
});