// vim: et:ts=4:sw=4:sts=4:ft=javascript

"use strict";

pandora.ui.appPanel = function() {
    var that = Ox.SplitPanel({
            elements: [
                {
                    element: pandora.$ui.mainMenu = pandora.ui.mainMenu(),
                    size: 20
                },
                {
                    element: pandora.$ui.mainPanel = pandora.ui.mainPanel()
                }
            ],
            orientation: 'vertical'
    });

    return that;
}

pandora.ui.mainMenu = function() {
    var that = Ox.MainMenu({
        extras: [],
        id: 'mainMenu',
        menus: [
            {
                'id': 'speedtransMenu',
                'title': 'Speedtrans',
                'items': [
                    { id: 'TestMenu1', title: 'Test Menu Item'},
                    { id: 'TestMenu2', title: 'Test Menu Itemm'}
                ]

            },
            {
                'id': 'fileMenu',
                'title': 'File',
                'items': [
                    { id: 'openLocalFileMenu', title: 'Open Local File', 'file': {
                        'maxFiles': 1
                        }
                    },
                    { id: 'openRemoteFileMenu',  title: 'Open online pan.do/ra file'},
                    { id: 'saveFileMenu', title: 'Save File', keyboard: 'shift control s'}
                ]
            }

        ]
    })
    .bindKeyboard()
    .bindEvent({
        click: function(data) {
//            Ox.print(data);
            var selected = data.id;
            if (data.id == 'saveFileMenu') {
                pandora.$ui.textArea.speedtrans.save();
    //            speedtrans.saveFile();
            } else if (data.id == 'openLocalFileMenu') {
                var file = data.files[0];
                Ox.oshash(file, function(oshash) {
                    console.log(oshash);
                    var url = window.URL.createObjectURL(file);
                    var options = {
                        'type': 'local',
                        'url': url,
                        'name': oshash
                    }
                    pandora.$ui.textArea.speedtrans.load(options);
                });
                //console.log(data.files[0]);                    
                
            } else if (data.id == 'openRemoteFileMenu') {
                pandora.$ui.openRemoteDialog = pandora.ui.openRemoteDialog().open();    
                
            } else if (data.id == 'TestMenu1') {
                alert("clicked TestMenu1");
            }
        },
        key_control_shift_s: function() {
            pandora.$ui.textArea.speedtrans.save();
        }
    });

    return that;
}

pandora.ui.mainPanel = function() {
    var that = Ox.SplitPanel({
        elements: [
            {
                element: pandora.$ui.videoPanel = pandora.ui.videoPanel(),
                size: 400,
                resizable: true,
                resize: [0,600]
            },
            {
                element: pandora.$ui.textPanel = pandora.ui.textPanel()
            }
        ],
        orientation: 'horizontal'
    });
    return that;
}

pandora.ui.videoPanel = function() {
    var that = pandora.$ui.videoPanel = Ox.SplitPanel({
        elements: [
            {
                element: pandora.$ui.videoPlayer = Ox.Element().text("no video yet"),
                size: 300
            },
            {
                element: pandora.$ui.helpPanel = pandora.ui.helpPanel()
            }
        ],
        orientation: 'vertical'
    });
    return that;
}


//FIXME: should be ui.videoPlayer
pandora.ui.videoPlayer = function(options) {
    var url = options.url;
    var timeline = options.timeline || "foo.png"; //FIXME
    var that = pandora.$ui.videoPlayer = Ox.VideoPlayer({
        video: url,
        controlsTop: ['fullscreen'],
        controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
        height: 300,
        width: 400,
        showControlsOnLoad: true,
        duration: 35,
        timeline: timeline,
        title: 'Test Video',
        enableTimeline: true,
        enableKeyboard: true,
        enableMouse: true,
        externalControls: true
//        enableTimeline: true                
    });
    return that;
};

    

pandora.ui.openRemoteDialog = function() {
//    var $inputs = Ox.InputGroup({
//        'inputs': [
//            Ox.Input({
//                'label': 'Pan.do/ra instance URL',
//                'id': 'pandoraInstance',
//                'width': 250           
//            }),
//            Ox.Input({
//                'label': 'Pan.do/ra Video ID',
//                'id': 'pandoraID',
//                'width': 250
//            })
//        ],
//        'width': 250
//    });

    //FIXME: convert to SelectInput
    var $input1 =  Ox.Input({
        'label': 'Pan.do/ra instance URL',
        'id': 'pandoraInstance',
        'labelWidth': 250,
        'width': 600        
    }).css({'margin': '4px'});

    var $input2 = Ox.Input({
        'label': 'Pan.do/ra Video ID',
        'id': 'pandoraID',
        'labelWidth': 250,
        'width': 600
    }).css({'margin': '4px'});
    

    var $content = Ox.Element().append($input1).append($input2);
    var that = Ox.Dialog({
        'content': $content.css({'padding': '12px'}),
        'buttons': [
            Ox.Button({
                'group': true,
                'id': 'loadRemoteVideoButton',
                'title': 'Load Video'
            }).bindEvent("click", function() {
                var pandoraInstance = $input1.value();
                var pandoraID = $input2.value();
                var base_url = pandoraInstance + "/" + pandoraID;
                var options = {
                    'name': base_url,
                    'url': base_url + "/480p.webm",
                    'type': 'remote'
                };
                pandora.$ui.textArea.speedtrans.load(options);
                that.close();
            })
        ],
        'closeButton': true,
        'title': 'Open Remote Video',
        'width': 700,
        'fixedSize': true
    });
    return that;
};


pandora.ui.helpPanel = function() {
    var that = Ox.Element().text("Help Panel");
    return that;
};

pandora.ui.textPanel = function() {
    var that = Ox.SplitPanel({
        elements: [
            {
                element: pandora.$ui.textArea = pandora.ui.textArea()
            },
            {
                element: pandora.$ui.textToolBar = pandora.ui.textToolBar(),
                size: 20
            }
        ],
        orientation: 'vertical'
    });
    return that;
}

pandora.ui.textArea = function() {
    var that = Ox.Input({
        type: 'textarea',
        width: 400,
        height: 400,
        changeOnKeypress: true
    });       
    var $video = pandora.$ui.videoPlayer;

    that.speedtrans = {
        spans: [],
        insertTc: function() {
            var eDom = that.find("textarea").get(0); //FIXME
            var scrollTop = eDom.scrollTop;
            var val = that.value();
            var pos = eDom.selectionStart;
            var tcNpt = ms2npt(pandora.$ui.videoPlayer.options("position") * 1000);
            var newVal = val.substring(0,pos) + "\n" + tcNpt + "\n" + val.substring(pos, val.length);   
            that.value(newVal);
            that.find("textarea").focus(); //FIXME
            eDom.selectionStart = pos + tcNpt.length + 2;
            eDom.selectionEnd = pos + tcNpt.length + 2;
            eDom.scrollTop = scrollTop + 15;
        },
        isTc: function() {
            var eDom = that.find("textarea").get(0);  
            var val = that.value();
            var pos = eDom.selectionStart;
            var word = that.speedtrans.getWord(pos, val);

            if (isValidTimecode(word)) {
                return npt2ms(word);
            } else {
                return false;
            }            
        },
        getWord: function(pos, val) {
            var c;
            var i = pos;
            var j = pos;
            while (c != " " && c != "\n") {
                if (i==0) {
                    i = -1;
                    break;
                }   
                i--;      
                c = val.substring(i,i+1);    
            }
            var firstLetter = i+1;
            var d;
            while (d != " " && d != "\n") {
                if (j >= val.length) {
                    break;
                }
                j++;    
                d = val.substring(j,j+1);    
            }
            var lastLetter = j;
            var word = val.substring(firstLetter, lastLetter);
            return word;
        },
        toSrt: function(fmt) {
            if (!fmt) var fmt = 'srt';
            var text = cleanNewlines(that.value());
            var lines = [];
            lines = text.split("\n");
            var i=0;
            var j=0;
            var spans = this.spans = [];
            while (i < lines.length) {
                var l = lines[i];
                if (isValidTimecode(l.trim())) {
                    var tcIn = l.trim();
                    var t = "";
                    var thisLine = '';
                    while (!isValidTimecode(thisLine.trim())) {
                        i++;
                        if (i >= lines.length) {
                            break;
                        } 
                        thisLine = lines[i];
                        if (!isValidTimecode(thisLine.trim())) {
                            t += thisLine + "\n";
                        }       
                    }
                    var tcOut = $.trim(thisLine);
                    spans[j] = {
                        tcInMs: npt2ms(tcIn),
                        tcOutMs: npt2ms(tcOut),
                        text: t,
                        index: j
                    };
                    //this.spans.push(spans[j]);
                    j++;
                } else {
                    i++;
                }
            }
            this.spans = spans;
            var duration = pandora.$ui.videoPlayer.options("duration");
            var srt = spansToSrt(duration, spans, fmt);
        //  console.log(srt);
            return srt;
        },

        save: function() {
            
            console.log(that.value());
            var filename = pandora.$ui.videoPlayer.options("video");
            console.log(filename);
            pandora.storage(filename, {'text': that.value()});
        },
        load: function(options) {
            console.log(options);
//            if (options.type == 'local') {
//                var file = options.file;
//                var name = file.name;
//                var url = window.URL.createObjectURL(file);
//            } else if (options.type == 'remote') {
//                var url = options.url;
//                var name = options.name;
//            }
            var val = pandora.storage(options.name) || {'text': ''};
            that.value(val.text);
            var videoOptions = {
                'url': options.url
            };
            pandora.$ui.videoPlayer = pandora.ui.videoPlayer(videoOptions);
            //pandora.$ui.videoPlayer = videoElem;
            pandora.$ui.videoPanel.replaceElement(0, pandora.$ui.videoPlayer);
            //console.log(filename);
            //$video.options("video", filename);
        }
    };
    that.bindEvent({
        key_control_space: function() {
            $video.options("paused", !$video.options("paused"));
            that.find("textarea").focus(); //FIXME
        },
        key_control_x: function() {
            that.speedtrans.insertTc();
        },
        key_control_shift_s: function() {
            that.speedtrans.save();
        }
    });
    that.dblclick(function() {
        var tc = that.speedtrans.isTc();
        if (tc) {
            $video.options("position", tc / 1000);
        }
    });
    return that;
}

pandora.ui.textToolBar = function() {
    var that = Ox.Bar();
    return that;
}