/*
This example shows elements that are editable inline — either a span or a
div.
*/
'use strict';

Ox.load('UI', function() {

    var $box = Ox.Element()
            .attr({id: 'box'})
            .appendTo(Ox.$body);

    Ox.loop(1, 4, function(i) {
        Ox.$('<span>')
            .addClass('label')
            .html((i > 1 ? '&nbsp;' : '') + 'Editable ' + i + ':&nbsp;')
            .appendTo($box);
        Ox.EditableContent({
                placeholder: 'Placeholder ' + i,
                tooltip: 'Doubleclick to edit'
            })
            .appendTo($box);
    });
    
    Ox.$('<div>')
        .addClass('label')
        .html('Editable 4:')
        .appendTo($box);
    Ox.EditableContent({
            placeholder: 'Placeholder 4',
            tooltip: 'Doubleclick to edit',
            type: 'div'
        })
        .appendTo($box);

});