pandora.ui.annotationsPanel = function(layers) {
    console.log('annotationsPanel init')
    var layers = layers || [];
    //Ox.print("layers", layers);
    var showLayers = {};
    layers.forEach(function(v,i) {
        showLayers[v.id] = true;
    });

    Ox.print("annotation layers", layers);
    var that = Ox.AnnotationPanel({
        'layers': Ox.clone(layers, true),
        'width': 256,
        'range': 'position',
        'showLayers': showLayers
    });

    that.interval = setInterval(function() {
        //console.log("interval");
        var changed = pandora.$ui.textArea.changed;
        if (changed) {
            //console.log("interval changed");
            pandora.$ui.textArea.changed = false;
            var currentTrack = pandora.$ui.textArea.currentTrack;
            //Ox.print("current layers", pandora.$ui.textArea.speedtrans.toSrt("layers"));
            //Ox.print("layer", currentTrack);
            
            //var currentLayers = that.options('layers');
            //console.log("current layers", layers);
            //console.log("current track", currentTrack);
            var layerIndex = Ox.getIndexById(layers, currentTrack);
            layers[layerIndex].items = pandora.$ui.textArea.speedtrans.toSrt("layers");
            Ox.print("setting these layers", layers);
            that.options('layers', Ox.clone(layers, true));
            //that.updateLayer(currentTrack, pandora.$ui.textArea.speedtrans.toSrt("layers"));
        }
    }, 1500);
    

    var $panelMenuButton = Ox.MenuButton({
        'title': 'edit',
        'type': 'image',
        'style': 'symbol',
        'tooltip': 'Add Layer',
        'items': [
            {
                'id': 'newSRT',
                'title': 'New Layer'
            },
            {
                'id': 'openSRT',
                'title': 'Import SRT ...'
            }
        ]

    }).css({'float': 'right'}).bindEvent("click", function(data) {
        if (data.id == 'openSRT') {
            pandora.$ui.openSRTDialog.open();
        } else if (data.id == 'newSRT') {
            var title = pandora.utils.getUntitledName();            
            pandora.storage(pandora.$ui.textArea.storage)[title] = '';
            pandora.$ui.textArea.currentTrack = title;
            pandora.$ui.annotationsPanel.addLayer({
                'id': title,
                'title': title,
                'items': []
            });
            pandora.$ui.selectAnnotationType.value(title);
            pandora.utils.updateFolderMenus();
        }
    });

//    var $addButton = Ox.Button({
//        'title': 'add',
//        'type': 'image',
//        'style': 'symbol',
//        'tooltip': 'New annotation layer'
//    }).css({'float': 'right'}).bindEvent("click", function() {
//        pandora.$ui.newSRTDialog.open();    
//    });

//    var $loadSRTButton = Ox.Button({
//        'title': 'upload',
//        'type': 'image',
//        'style': 'symbol',
//        'tooltip': 'Import SRT'
//    }).css({'float': 'right'}).bindEvent("click", function() {
//        pandora.$ui.openSRTDialog.open();
//    });

    Ox.print("panel menu button", $panelMenuButton);
    $(that.find('.OxBar')[0]).append($panelMenuButton);  

//    that.updateLayers = function() {
//        var layers = that.getLayers();
//        that.options("layers", layers);
//    };

    return that;
};