/***
 スタイルシートの直接操作
***/
var styles = {
    sheet: null,// cssRulesの初期値はnull。append後cssRules[0]に実体が入る
    create: function() {
        var elem = document.createElement("style");
        document.head.appendChild(elem);
        this.sheet = elem.sheet;
    },
    search: function(selector) {
        if (!this.sheet || !selector) return -1;
        var rules = this.sheet.cssRules;
        for (var i=0, len=rules.length, index=-1; i<len; i++) {
            if (!rules[i].selectorText) continue;   // @import などのルールを除外
            if (rules[i].selectorText === selector) {
                index = i;
                break;
            }
        }
        return index;
    },
    write: function(selector, propval) {
        if (!this.sheet || !selector || !propval) return;
        var index = this.search(selector);

        if (typeof propval !== "string") {
            // 対象とするセレクタのルールが存在しない場合、ルールを最終位置に作成
            if (index < 0) {
                index = this.sheet.cssRules.length;
                this.sheet.insertRule(selector + " {}", index);
            }
            // 対象プロパティの値のみ上書き
            propval.forEach(function(elem) {
                this.sheet.cssRules[index].style[elem[0]] = elem[1];
            }, this);
        } else {        // ルール（セレクタ単位）をまるごと書き換え
            this.sheet.insertRule(selector + " {" + propval + "}", this.sheet.cssRules.length);
            if (index >= 0) {
                // 対象とするセレクタのルールが既に存在していた場合、削除する
                // 削除しないと書き換えるたびにルールがどんどん増えていく
                // CSSルールが増えてもパフォーマンス的に問題ないかもしれないけど
                // なんとなく不要なルールは消しておきたいかなと。
                this.sheet.deleteRule(index);
            }
        }
    },
    read: function(selector) {  // 前提：本シート内には同一セレクタは存在しない
        if (!this.sheet || !selector) return "";
        var rules = this.sheet.cssRules;
        var csstext = "";
        var index = this.search(selector);
        if (index >= 0) {
            csstext = rules[index].cssText;
        }
        return csstext;
    },
    delete: function(selector) {
        if (!this.sheet || !selector) return;
        var index = this.search(selector);
        if (index >= 0) {
            this.sheet.deleteRule(index);
        }
    }
};

var gCount = 0;

styles.create();
writeStyles(0);

window.onload = function() {
	document.getElementById("btn").addEventListener('click', function(e) {
        var elem = document.createElement("div");
        elem.textContent = "element " + (gCount++);
        document.getElementById("box").appendChild(elem);
        elem.parentNode.scrollTop = elem.offsetTop;
        console.log(styles.read("#box > div"));
    });
    document.getElementById("sel").addEventListener('change', function(e) {
        writeStyles(e.target.selectedIndex);
    });
};

function createPopval(color, size, height, bcol) {
    return [["color", color],
            ["fontSize", size],      // プロパティ名はキャメルケース
            ["height", height],
            ["lineHeight", height],
            ["backgroundColor", bcol],
            ["textAlign", "center"]];
}
/*
function createPopval(color, size, height, bcol) {
    return "color:" + color + ";"
            + "font-size:" + size + ";" // insertRules()はキャメルケースじゃだめ
            + "height:" + height + ";"
            + "line-height:" + height + ";"
            + "background-color:" + bcol + ";"
            + "text-align:" + "center;";
}
*/
function writeStyles(type) {
    var selector = "#box > div";
    var propval = null;
    switch (type) {
        case 0: propval = createPopval("#000", "16px", "30px", "#eee"); break;
        case 1: propval = createPopval("#f00", "16px", "50px", "#800"); break;
        case 2: propval = createPopval("#0f0", "32px", "50px", "#080"); break;
        case 3: propval = createPopval("#0ff", "12px", "20px", "#00f"); break;
    }
    styles.write(selector, propval);
}