'use strict';

oml.ui.annotation = function(data, $iframe) {
    var $arrayEditable = Ox.ArrayEditable({
        editing: true,
        type: 'textarea'
    }).css({
        minHeight: '16px'
    });
    var that = Ox.Element().attr({
        id: 'a-' + data.id
    }).addClass(
        'OxSelectable'
    ).css({
        borderBottom: '1px solid rgb(208, 208, 208)',
    }).append(
        Ox.Element().addClass('OxSelectable').css({
            backgroundColor: 'white',
            color: 'black',
            fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
            fontSize: '14px',
            lineHeight: '21px',
            padding: '8px'
        }).html(Ox.encodeHTMLEntities(data.text).replace(/\n/g, '<br/>')).on({
            click: function(event) {
                $iframe.postMessage('selectAnnotation', {
                    id: data.id
                })
            }
        })
    ).append($arrayEditable);
    that.annotate = function() {
        var item = {
            id: 'note', value: '', editable: true
        }
        $arrayEditable.addItem(0, item)
            .options({selected: item.id})
            .editItem();
    }
    return that;
};