'use strict';

function Behavior(value) {
    this.s = [];
    this.v = value;
}

Behavior.prototype = (function() {
    var inits = [];
    return {
        next : function(value) {
            if (value != this.v) {
                this.v = value;
                for(var s in this.s)
                    this.s[s](value);
            }
        },
        value : function() {
            return this.v;
        },
        subscribe : function(cb, init) {
            this.s.push(cb);
            if (typeof init === 'function') inits.push(init);
        },
        init : function() {
            for (var i in inits) inits[i]();
            inits = [];
        },
        link : function(b, f) {
            var t = this;
            function cb(v) {
                t.next(f(v));
            }
            cb(b.value());
            b.subscribe(cb);
        }
    };
})();

function make(value) { return new Behavior(value); }

var idGen = (function() {
    var ctr = 0, re = /^<(\w+)([ >])/;
    return function() {
        var id = '' + ctr++;
        return { v : id, r : function(s) {
            return s.replace(re, '<$1 id="' + id + '"$2');
        }}
    };
})();

function Select(b, f) {
    var id = idGen();
    if (document) b.subscribe(function(v) {
        document.getElementById(id.v).outerHTML = id.r(f(v));
        b.init();
    });
    return id.r(f(b.value()));
}

function Edit(text, classes) {
    var id = idGen(), dom;
    if (document) text.subscribe(
        function(v) { dom.value = v; },
        function() {
            console.log('init!');
            dom = document.getElementById(id.v);
            dom.onchange = function() {
                text.next(dom.value);
            };
        }
    );
    return '<input type="text" id="' + id.v + '" class="' + classes.join(' ') + '" value="' + text.value() + '">';
}

/*var b = make('test');
var a = make('ppp');

console.log(b.value());
b.subscribe(function(val) { console.log('b =', val); })
a.subscribe(function(val) { console.log('a =', val); })


b.link(a, function(v) { return '123' + v});

//a.next('567');

document.body.insertAdjacentHTML('beforeend', Select(b, (v) => '<H1> b = ' + v + '</H1>'));

document.body.insertAdjacentHTML('beforeend', Edit(a, []));

b.init();

b.next('next');

//a.next('text');
//a.next('toxt');
*/