'use strict';

oml.ui.viewer = function() {

    var ui = oml.user.ui,

        frame = Ox.Element(),
        that = Ox.Element()
            .bindEvent({
                oml_itemview: function(data) {
                    if (ui.item != item && ui.itemView == 'book') {
                        that.updateElement(ui.item);
                    }
                },
                oml_showannotations: function() {
                    panel.toggleElement(1);
                }
            }),
        panel = Ox.SplitPanel({
                elements: [
                    {
                        element: frame
                    },
                    {
                        collapsed: !ui.showAnnotations,
                        collapsible: true,
                        element: oml.$ui.annotationPanel = oml.ui.annotationPanel(),
                        size: 256,
                        tooltip: Ox._('Annotations')
                            + ' <span class="OxBright">'
                            + Ox.SYMBOLS.shift + 'A</span>'
                    }
                ],
                orientation: 'horizontal'
            })
            .appendTo(that),
        $iframe, item;

    that.updateElement = function() {
        item = ui.item;
        if (item && item.length) {
            oml.api.get({id: item, keys: ['mediastate']}, function(result) {
                if (result.data.mediastate == 'available') {
                    oml.$ui.annotationPanel.empty()
                    if ($iframe) {
                        $iframe.remove()
                    }
                    $iframe = Ox.Element('<iframe>').css({
                        width: '100%',
                        height: '100%',
                        border: 0
                    }).onMessage(function(data, event) {
                        console.log('got', event, data)
                        if (event == 'addAnnotation') {
                            console.log('adding', data.id)
                            oml.$ui.annotationPanel.append(oml.ui.annotation(data, $iframe));
                        } else if (event == 'removeAnnotation') {
                            console.log('do it ...', data)
                            oml.$ui.annotationPanel.find('#a-' + data.id).remove()
                        } else if (event == 'selectAnnotation') {
                            console.log('select', data)
                        } else if (event == 'deselectAnnotation') {
                            console.log('deselect', data)
                        }
                        that.triggerEvent(event, data);
                    }).appendTo(frame);
                    $iframe.attr({
                        src: '/' + item + '/reader/'
                    });
                }
            });
        }
        return that;
    };
    that.postMessage = function(event, data) {
        $iframe && $iframe.postMesage(event, data)
    };

    return that.updateElement();
};