/*
 * This file is part of yoob.js version 0.7-PRE
 * Available from https://github.com/catseye/yoob.js/
 * This file is in the public domain.  See http://unlicense.org/ for details.
 */
if (window.yoob === undefined) yoob = {};

/*
 * Functions for creating elements.
 *
 * I dunno -- maybe just setting innerHTML would be better.
 */

yoob.makeCanvas = function(container, width, height) {
    var canvas = document.createElement('canvas');
    if (width) {
        canvas.width = width;
    }
    if (height) {
        canvas.height = height;
    }
    container.appendChild(canvas);
    return canvas;
};

yoob.makeButton = function(container, labelText, fun) {
    var button = document.createElement('button');
    button.innerHTML = labelText;
    container.appendChild(button);
    if (fun) {
        button.onclick = fun;
    }
    return button;
};

yoob.checkBoxNumber = 0;
yoob.makeCheckbox = function(container, checked, labelText, fun) {
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.id = 'cfzzzb_' + yoob.checkBoxNumber;
    checkbox.checked = checked;
    var label = document.createElement('label');
    label.htmlFor = 'cfzzzb_' + yoob.checkBoxNumber;
    yoob.checkBoxNumber += 1;
    label.appendChild(document.createTextNode(labelText));
    
    container.appendChild(checkbox);
    container.appendChild(label);

    if (fun) {
        checkbox.onchange = function(e) {
            fun(checkbox.checked);
        }
    }
    return checkbox;
};

yoob.makeTextInput = function(container, size, value) {
    var input = document.createElement('input');
    input.size = "" + (size || 12);
    input.value = value || "";
    container.appendChild(input);
    return input;
};

yoob.makeSlider = function(container, min, max, value, fun) {
    var slider = document.createElement('input');
    slider.type = "range";
    slider.min = min;
    slider.max = max;
    slider.value = value || 0;
    if (fun) {
        slider.onchange = function(e) {
            fun(0 + slider.value);
        }
    }
    container.appendChild(slider);
    return slider;
};

yoob.makeParagraph = function(container, innerHTML) {
    var p = document.createElement('p');
    p.innerHTML = innerHTML || '';
    container.appendChild(p);
    return p;
};

yoob.makeSpan = function(container, innerHTML) {
    var span = document.createElement('span');
    span.innerHTML = innerHTML || '';
    container.appendChild(span);
    return span;
};

yoob.makeDiv = function(container, innerHTML) {
    var div = document.createElement('div');
    div.innerHTML = innerHTML || '';
    container.appendChild(div);
    return div;
};

yoob.makeTextArea = function(container, cols, rows, initial) {
    var textarea = document.createElement('textarea');
    textarea.rows = "" + rows;
    textarea.cols = "" + cols;
    if (initial) {
        container.value = initial;
    }
    container.appendChild(textarea);
    return textarea;
};

yoob.makeLineBreak = function(container) {
    var br = document.createElement('br');
    container.appendChild(br);
    return br;
};

yoob.makeSelect = function(container, labelText, optionsArray) {
    var label = document.createElement('label');
    label.innerHTML = labelText;
    container.appendChild(label);

    var select = document.createElement("select");

    for (var i = 0; i < optionsArray.length; i++) {
        var op = document.createElement("option");
        op.value = optionsArray[i][0];
        op.text = optionsArray[i][1];
        if (optionsArray[i].length > 2) {
            op.selected = optionsArray[i][2];
        } else {
            op.selected = false;
        }
        select.options.add(op);
    }

    container.appendChild(select);
    return select;
};

@@ -1473,32 +1473,33 @@
 cked);%0A        %7D
+;
 %0A    %7D%0A    retur
@@ -2031,12 +2031,17 @@
 fun(
-0 + 
+parseInt(
 slid
@@ -2048,16 +2048,21 @@
 er.value
+, 10)
 );%0A     
@@ -2061,24 +2061,25 @@
 );%0A        %7D
+;
 %0A    %7D%0A    c
@@ -3771,12 +3771,1109 @@
  select;%0A%7D;%0A
+%0ASliderPlusTextInput = function() %7B%0A    this.init = function(cfg) %7B%0A        this.slider = cfg.slider;%0A        this.textInput = cfg.textInput;%0A        this.callback = cfg.callback;%0A        return this;%0A    %7D;%0A%0A    this.set = function(value) %7B%0A        this.slider.value = %22%22 + value;%0A        this.textInput.value = %22%22 + value;%0A        this.callback(value);%0A    %7D;%0A%7D;%0A%0Ayoob.makeSliderPlusTextInput = function(container, label, min_, max_, value, callback) %7B%0A    yoob.makeSpan(container, label);%0A    var slider = yoob.makeSlider(container, min_, max_, value);%0A    var s = %22%22 + value;%0A    var textInput = yoob.makeTextInput(container, s.length + 1, s);%0A    slider.onchange = function(e) %7B%0A        textInput.value = slider.value;%0A        fun(parseInt(slider.value, 10));%0A    %7D;%0A    textInput.onchange = function(e) %7B%0A        var v = parseInt(textInput.value, 10);%0A        if (v !== NaN) %7B%0A            slider.value = %22%22 + v;%0A            fun(v);%0A        %7D%0A    %7D;%0A    return new SliderPlusTextInput().init(%7B%0A        'slider': slider,%0A        'textInput': textInput,%0A        'callback': callback%0A    %7D);%0A%7D;%0A

Add yoob.SliderPlusTextInput object.