'use strict';

oml.ui.annotationPanel = function() {

    var $bar = Ox.Bar({size: 16});

    var $button = Ox.Button({
        disabled: true,
        style: 'symbol',
        title: 'add',
        tooltip: Ox._('Add Quote'),
        type: 'image'
    }).appendTo($bar);

    var $menuButton = Ox.MenuButton({
        items: [
            {id: 'showAnnotations', title: Ox._('Show Annotations'), disabled: true},
            {group: 'sort', min: 1, max: 1, items: [
                {id: 'all', title: Ox._('All Annotations'), checked: true},
                {id: 'my', title: Ox._('My Annotations'), checked: false},
            ]},
            {},
            {id: 'sortAnnotations', title: Ox._('Sort Annotations'), disabled: true},
            {group: 'sort', min: 1, max: 1, items: [
                {id: 'position', title: Ox._('By Position'), checked: true},
                {id: 'text', title: Ox._('By Note Text'), checked: false},
                {id: 'date', title: Ox._('By Date Added'), checked: false}
            ]},
        ],
        style: 'square',
        title: 'set',
        type: 'image',
        width: 16
    }).css({
        // borderColor: 'transparent',
        float: 'right'
    }).appendTo($bar);

    var ui = oml.user.ui;
    var that = Ox.SplitPanel({
        elements: [
            {
                element: $bar,
                size: 16
            },
            {
                element: oml.$ui.annotationFolder = oml.ui.annotationFolder()
            }
        ],
        orientation: 'vertical'
    });

    return that;

};