var WeightVisWrapper = (function() {
    var attributeNames = 
        ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"];

    function WeightVisWrapper() {
        this.container = d3.select("body").append("div").remove();
        this.svgContainer = this.container.append("div");
        this.controlContainer = this.container.append("div");
        this.svg = this.svgContainer.append("svg");
        this.netVisualizer = new NetVisualizer(this.svg);
        this.resizeHooks = [];
        this.readyHooks = [];
        this.ready = false;

        this.svgContainer
            .style("margin-top", "1.5em")
            .style("margin-bottom", "1em")
            .style("height", "100%")
            .style("width", "100%");

        this.spinner = this.container.append("div")
            .attr("class", "mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active spinner")
            .style("position", "absolute")
            .style("left", "50%")
            .style("top", "50%");
        componentHandler.upgradeElement(this.spinner.node());

        this.controlContainer
            .style("margin-left", "auto")
            .style("margin-right", "auto")
            .style("width", "50%");
        this.button = this.controlContainer.append("button")
            .attr("class", "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored")
            .attr("data-pressed", "false")
            .style("float", "left");
        this.button.append("i")
            .attr("class", "material-icons play")
            .text("play_arrow");
        this.button.append("i")
            .attr("class", "material-icons pause")
            .style("display", "none")
            .text("pause");
        componentHandler.upgradeElement(this.button.node());
        var sliderContainer = this.controlContainer.append("p")
            .style("margin-top", "1.4em");
        this.slider = sliderContainer.append("input")
            .attr("class", "mdl-slider mdl-js-slider visSlider")
            .attr("type", "range")
            .attr("min", "0")
            .attr("max", "1")
            .attr("value", "0")
            .attr("tabindex", "0");
        componentHandler.upgradeElement(this.slider.node());
    }

    WeightVisWrapper.prototype.load = function(url, callback) {
        var self = this;
        this.netVisualizer.load(url, function(){
            var inputNodes = self.svg.selectAll(".layer-1")[0];
            for (node=0; node<inputNodes.length; node++) {
                self.svg
                    .append("text")
                    .attr("class", "attribute")
                    .attr("text-anchor", "middle")
                    .attr("font-weight", "bold")
                    .attr("font-size", attrFontSize + "px")
                    .attr("pointer-events", "none") // disable hovering
                    .attr("cursor", "default")
                    .text(attributeNames[node]);
            }
            self.resizeHooks.push(function() { self.netVisualizer.reposition(); });
            self.resizeHooks.push(function() { self.placeAttributes(); });
            self.netVisualizer.hookStepper(function(step) { self.slider.node().MaterialSlider.change(step); });
            self.netVisualizer.hookStop(function() {
                self.button.attr("data-pressed", "false");
                self.button.select(".play").style("display", "");
                self.button.select(".pause").style("display", "none");
                if (self.slider.node().value >= self.slider.node().max * 0.95) {
                    self.slider.node().MaterialSlider.change(0); // wrap at right end
                }
            });
            self.slider.attr("max", self.netVisualizer.getSteps() - 1);
            self.slider.node().addEventListener("input", function() { self.netVisualizer.showStep(this.value); });
            self.button.node().addEventListener("click", function toggle() {
                if (self.button.attr("data-pressed") != "true") {
                    var step = self.slider.node().value;
                    self.netVisualizer.animate(15, 10, step);
                    self.button.attr("data-pressed", "true");
                    self.button.select(".play").style("display", "none");
                    self.button.select(".pause").style("display", "");
                } else {
                    self.netVisualizer.stopAnimation();
                    self.button.attr("data-pressed", "false");
                    self.button.select(".play").style("display", "");
                    self.button.select(".pause").style("display", "none");
                }
            });
            self.ready = true;
            callback();
            self.readyHooks.forEach(function(hook) { hook(); });
            console.log("ready"); // DEBUG
        });
    };

    WeightVisWrapper.prototype.afterLoad = function(cb) {
        if (!this.ready) {
            this.readyHooks.push(cb);
        } else {
            cb();
        }
    };

    var attrFontSize = 20;
    WeightVisWrapper.prototype.placeAttributes = function() {
        var inputNodes = this.svg.selectAll(".layer-1")[0];
        var attrs = this.svg.selectAll(".attribute")[0];
        for (node=0; node<inputNodes.length; node++) {
            var iNode = d3.select(inputNodes[node]);
            d3.select(attrs[node])
                .attr("x", iNode.attr("cx"))
                .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2));
        }
    };

    WeightVisWrapper.prototype.addPlaceholder = function(el) {
        el.appendChild(this.spinner.node().cloneNode(true));
    };

    WeightVisWrapper.prototype.openIn = function(el) {
        d3.select(el).select(".spinner").remove();
        el.appendChild(this.svgContainer.node());
        el.appendChild(this.controlContainer.node());
        this.reposition();
    };

    WeightVisWrapper.prototype.remove = function(el) {
        this.svgContainer.node().parentNode.removeChild(this.controlContainer.node());
        this.svgContainer.node().parentNode.appendChild(this.spinner.node().cloneNode(true));
        this.svgContainer.node().parentNode.removeChild(this.svgContainer.node());
        this.container.node().appendChild(this.controlContainer.node());
        this.container.node().appendChild(this.svgContainer.node());
        this.netVisualizer.stopAnimation();
        this.slider.node().MaterialSlider.change(0);
    };

    WeightVisWrapper.prototype.reposition = function() {
        this.svg
            .style("width", this.svgContainer.style("width"))
            .style("height", this.svgContainer.style("height"));
        this.resizeHooks.forEach(function (hook) { hook(); });
        this.netVisualizer.reposition();
    };

    WeightVisWrapper.prototype.animate = function(secs, steps) {
        this.netVisualizer.animate(secs, steps);
        this.button.attr("data-pressed", "true");
        this.button.select(".play").style("display", "none");
        this.button.select(".pause").style("display", "");
    };

    return WeightVisWrapper;
})();

/* helps with impress.js' stepenter/stepleave events */
var VisIntegrater = (function() {
    function VisIntegrater(enterCb, leaveCb) {
        var self = this;
        this.slide = document.currentScript.parentElement;
        this.container = d3.select(this.slide).select(".visContainer");
        console.log(this.slide);
        this.slide.addEventListener("impress:stepenter", function() {
            enterCb(self.slide);
        });
        this.slide.addEventListener("impress:stepleave", function() {
            leaveCb(self.slide);
        });
    }

    return VisIntegrater;
})();