var domChanger = require("domChanger");
var nanoajax = require("nanoajax");
var config = window.config || {};

var requestBody = JSON.stringify({
    url: config.url,
    interests: config.interests
});
var interval = config.interval || 30000;
var groupSize = config.groupSize || 1;

var isSuccess = function(code) {
    return code >= 200 && code <= 299;
};

var asError = function(message, code) {
    if (code === 0) {
        message = "Error - server down";
    }
    return [{
        name: message,
        stages: [{
            name: "Error",
            status: "Failed"
        }]
    }];
};

var Stage = function() {
    var render = function(stage) {
        var stageProps = {
            class: "stage " + stage.status.toLowerCase()
        };
        return ["div", stageProps, stage.name];
    };

    return {
        render: render
    };
};

var StageList = function() {
    var stageContainerProps = {
        class: "stage-container"
    };
    var render = function(stages) {
        return ["div", stageContainerProps, stages.map(function(stage) {
            return [Stage, stage];
        })];
    };

    return {
        render: render
    };
};

var PipelineName = function() {
    var pipelineNameProps = {
        class: "pipeline-name"
    };
    var render = function(name) {
        return ["div", pipelineNameProps, name];
    };

    return {
        render: render
    };
};

var Pipeline = function() {
    var pipelineProps = {
        class: "pipeline"
    };
    var render = function(pipeline) {
        return ["div", pipelineProps, [
            [StageList, pipeline.stages],
            [PipelineName, pipeline.name]
        ]];
    };

    return {
        render: render
    };
};

var PipelineList = function() {
    var pipelineListProps = {
        id: "dashboard"
    };
    var mapper = function(pipeline) {
        return [Pipeline, pipeline];
    };
    var groupProps = {
        class: "pipeline-group pipeline-group-" + groupSize
    };
    var render = function(pipelines) {
        var len = pipelines.length,
            groups = [],
            i,
            group;
        for (i = 0; i < len; i += groupSize) {
            group = pipelines.slice(i, i + groupSize).map(mapper);
            groups.push(["div", groupProps, group]);
        }
        return ["div", pipelineListProps, groups];
    };

    return {
        render: render
    };
};

var Dashy = function(emit, refresh) {
    var pipelines = [];
    var responseHandler = function(code, responseText, request) {
        if (isSuccess(code)) {
            pipelines = JSON.parse(responseText);
            console.log("tick!");
        } else {
            pipelines = asError(responseText, code);
            console.error(responseText);
        }
        refresh();
    };
    var ajaxOptions = {
        url: "/dashy",
        type: "POST",
        body: requestBody
    };
    var tick = function() {
        nanoajax.ajax(ajaxOptions, responseHandler);
    };
    var render = function() {
        return [PipelineList, pipelines];
    };

    tick();
    setInterval(tick, interval);
    return {
        render: render
    };
};

var instance = domChanger(Dashy, document.getElementById("app"));
instance.update();

@@ -688,37 +688,39 @@
 = %7B%0A            
+%22
 class
+%22
 : %22stage %22 + sta
@@ -926,21 +926,23 @@
         
+%22
 class
+%22
 : %22stage
@@ -1234,37 +1234,39 @@
 ops = %7B%0A        
+%22
 class
+%22
 : %22pipeline-name
@@ -1466,37 +1466,39 @@
 ops = %7B%0A        
+%22
 class
+%22
 : %22pipeline%22%0A   
@@ -1766,69 +1766,8 @@
 ) %7B%0A
-    var pipelineListProps = %7B%0A        id: %22dashboard%22%0A    %7D;%0A
     
@@ -1875,21 +1875,23 @@
         
+%22
 class
+%22
 : %22pipel
@@ -2265,43 +2265,15 @@
 turn
- %5B%22div%22, pipelineListProps,
  groups
-%5D
 ;%0A  
@@ -3081,23 +3081,8 @@
 %7D;%0A%0A
-var instance = 
 domC
@@ -3130,18 +3130,8 @@
 p%22))
-;%0Ainstance
 .upd

Remove extra div from HTML