// セレクタ名が示すルールの display を block または none に切り替える
function switchDisplayStyleToBlockOrNone(selector) {
    var rule = getRuleBySelector(selector);
    if (rule != null) {
        rule.style.display = (rule.style.display == "none") ? "block" : "none";
    }
}

// 発言ヘッダのスタイルを変更する
function changeHeaderStyle() {
    // HTML に記述されている ID の値
    var ID_FONT_SETTING = "uhs-font";
    var ID_MAIL_SETTING = "uhs-mail";
    var ID_DATE_SETTING = "uhs-date";
    var ID_ID_SETTING   = "uhs-id";
    // CSS に記述されているセレクタ名称
    var SELECTOR_UTTERANCE_HEADER = ".utterance-header";
    var SELECTOR_UTTERANCE_MAIL   = ".utterance-mail";
    var SELECTOR_UTTERANCE_DATE   = ".utterance-date";
    var SELECTOR_UTTERANCE_ID     = ".utterance-id";
    // フォントサイズのデフォルト設定
    var DEFAULT_FONT_UNIT = "%";
    var DEFAULT_FONT_SIZE = 100;
    
    // フォントサイズ設定
    var InputedFontSize = parseInt(document.getElementById(ID_FONT_SETTING).value);
    var fontSize = isNaN(InputedFontSize) ? DEFAULT_FONT_SIZE : InputedFontSize;
    fontSize = String(fontSize) + DEFAULT_FONT_UNIT;
    var ruleOfHeader = getRuleBySelector(SELECTOR_UTTERANCE_HEADER);
    if (ruleOfHeader != null) {
        ruleOfHeader.style.fontSize = fontSize;
    }
    // メールアドレス表示・非表示
    var checkedMail = document.getElementById(ID_MAIL_SETTING).checked;
    var ruleOfMail = getRuleBySelector(SELECTOR_UTTERANCE_MAIL);
    if (ruleOfMail != null) {
        ruleOfMail.style.display = checkedMail ? "inline" : "none";
    }
    // 投稿日表示・非表示
    var checkedDate = document.getElementById(ID_DATE_SETTING).checked;
    var ruleOfDate = getRuleBySelector(SELECTOR_UTTERANCE_DATE);
    if (ruleOfDate != null) {
        ruleOfDate.style.display = checkedDate ? "inline" : "none";
    }
    // Id表示・非表示
    var checkedId = document.getElementById(ID_ID_SETTING).checked;
    var ruleOfId = getRuleBySelector(SELECTOR_UTTERANCE_ID);
    if (ruleOfId != null) {
        ruleOfId.style.display = checkedId ? "inline" : "none";
    }
}

// 引数の selector が表す CSS のルールオブジェクトを取得する。
// 同セレクタ名のルールオブジェクトが存在する場合、
// 先に存在する方のルールオブジェクトを返却する。
function getRuleBySelector(selector) {
    var styleSheetNum = document.styleSheets.length;
    for (var i = 0; i < styleSheetNum; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.disabled) {
            continue;
        }
        var rules;
        if (sheet.rules != undefined) {
            // IE
            rules = sheet.rules;
        } else if (sheet.cssRules != undefined) {
            // FireFox, Opera
            rules = sheet.cssRules;
        }
        var ruleNum = rules.length;
        for (var j = 0; j < ruleNum; j++) {
            var rule = rules[j];
            if (rule.selectorText == selector) {
                return rule;
            }
        }
    }
    return null;
}

