/* jslint browser:true */
/* global body, options */
"use strict";

document.addEventListener("DOMContentLoaded", function(){

var menu = function (ev) {
    var target = ev.target;
    if (target.tagName.toLowerCase() === "span") {
        target = target.parentNode;
    }
    var id = target.id;
    if (!id) {
        ev.stopPropagation();
        return;
    }
    if (body.classList.contains(id)) {
        body.classList.remove(id);
        body.classList.remove("sidebar-active");
        document.activeElement.blur();
    } else if (body.classList.contains("sidebar-active")) {
        var other = null;
        for (var i = 0; i < body.classList.length; i+=1) {
            if (body.classList.item(i) !== id &&
                    body.classList.item(i) !== "sidebar-active") {
                other = body.classList.item(i);
                break;
            }
        }
        body.classList.remove(other);
        body.classList.add(id);
    } else {
        body.classList.add(id);
        body.classList.add("sidebar-active");
    }
    ev.stopPropagation();
    options.classname = body.className;
    localStorage.setItem("options", JSON.stringify(options));

};

var settings = function(attr, dir, amount) {
    var chapter = document.getElementsByClassName("chapter")[0];
    var cursize = parseInt(window.getComputedStyle(chapter)[attr]);
    chapter.style[attr] = cursize + dir*amount + "px";
};

var contrast = function() {
    var main = document.getElementsByClassName("main")[0];
    var curcolor = window.getComputedStyle(main).color;
    if (curcolor === "rgb(51, 51, 51)") {
        main.style.color = "white";
        main.style.backgroundColor = "#222";
    } else {
        main.style.color = "#333";
        main.style.backgroundColor = "white";
    }
};

var align = function(dir) {
    var chapter = document.getElementsByClassName("chapter")[0];
    chapter.style.textAlign = dir; 
};

var option = function(el, name) {
    return function() {
        options[name] = el.checked;
        localStorage.setItem("options", JSON.stringify(options));
    };
};

document.getElementsByClassName("menu")[0].addEventListener("click", menu);
document.getElementById("font-minus").addEventListener("click", function() {
    settings("fontSize", -1, 2);
});
document.getElementById("font-plus").addEventListener("click", function() {
    settings("fontSize", 1, 2);
});
document.getElementById("line-minus").addEventListener("click", function() {
    settings("lineHeight", -1, 4);
});
document.getElementById("line-plus").addEventListener("click", function() {
    settings("lineHeight", 1, 4);
});
document.getElementById("width-minus").addEventListener("click", function() {
    settings("maxWidth", -1, 50);
});
document.getElementById("width-plus").addEventListener("click", function() {
    settings("maxWidth", 1, 50);
});
document.getElementById("contrast").addEventListener("click", contrast);
document.getElementById("left").addEventListener("click", function() {
    align("left");
});
document.getElementById("justify").addEventListener("click", function() {
    align("justify");
});

var main = document.getElementsByClassName("main")[0];

main.addEventListener("click", function() {
    if (options.click) {
        body.className = "";
        options.classname = body.className;
        localStorage.setItem("options", JSON.stringify(options));
    }
});

window.addEventListener("scroll", function() {
    if (!options.position) {
        return;
    } else {
        options.positions[window.location.pathname] = this.scrollY;
        localStorage.setItem("options", JSON.stringify(options));
    }
});

if(options.position && options.positions[window.location.pathname]) {
    window.scrollTo(0, options.positions[window.location.pathname]);
}

var labels = document.getElementsByClassName("option");
for (var i = 0; i < labels.length; i+=1) {
    var label = labels[i];
    var input = label.getElementsByTagName("input")[0];
    input.checked = options[label.dataset.name];
    label.addEventListener("click", option(input, label.dataset.name));
}

var cur_path = window.location.pathname;
var contents = document.getElementsByClassName("contents")[0];
var chapters = contents.getElementsByTagName("li");
for (i = 0; i < chapters.length; i+=1) {
    var anchor = chapters[i].getElementsByTagName("a")[0];
    if (anchor.pathname === cur_path) {
        chapters[i].classList.add("active");
    }
}

});