var transcript = [];
var translation = [];

var times = [1000, 5000, 7000, 11000, 13000, 17000, 19000, 25000, 30000];

document.observe('dom:loaded', function() {
    $('rightBar').remove();
    var i = 0;
    $$('.transcription').each(function(e){
        var content = e.firstChild.nodeValue;
        var start = times[i];
        var end = times[i+1];
        transcript.push(createCaption(i, start, end, content));
        i++;
    });
    $$('.translation').each(function(e){
        e.defaultValue = e.firstChild.nodeValue;
        e.observe('click', translate);
    });

    embedTransPlayer('/static/players/transplayer/transplayer.swf', '/static/demo.flv','none');
    setTimeout("$('mpl').setPlayerCaptions(transcript);", 1000);

    $('languageSelect').observe('change', function(f){
        var v = $F('languageSelect');
        setPlayerCaptions(v);
    });
});

function createTranslation() {

    $$('textarea.translation').each(function(element) {
        element.saveChanges();
    });

    translation = [];
    var i = 0;
    $$('.translation').each(function(e){
        var content = e.firstChild.nodeValue;
        var start = times[i];
        var end = times[i+1];
        if(content != "" && content != e.defaultValue) {
            translation.push(createCaption(i, start, end, content));
        }
        i++;
    });
    $('mpl').setPlayerCaptions(translation);
}

function createCaption(id, start, end, content) {
    var duration = end - start;
    return {id:id + "-foo", startTime: start, duration: duration, content: content};
}

function translate(event) {
    clicked(event.element());
}

function clicked(element) {
    //close and save all others
    $$('textarea.translation').each(function(element) {
        element.saveChanges();
    });
    var input = new Element('textarea', { 'style': 'width: 100%', 'class': 'translation'});
    if(element.firstChild != null && element.firstChild.nodeValue != element.defaultValue) {
        input.value = element.firstChild.nodeValue; 
    }
    input.saveChanges = saveCaption;
    element.update(input);

    //
    input.observe("keypress", keyPressHandler);
    if (Prototype.Browser.WebKit) {
        input.observe("keydown", keyPressHandler);
    }
    else if (Prototype.Browser.IE) {
        input.observe("keyup", keyPressHandler);
    }
    input.focus();
}

function keyPressHandler(event) {
    var element = event.element();
    if ((event.keyCode == Event.KEY_RETURN && event.type != "keyup") || event.keyCode == Event.KEY_DOWN) {
        determineNextElement(element);
        if (nextElement != null) {
            clicked(nextElement);
            $$('textarea.translation').first().focus();
        }
        else {
            element.saveChanges();
        }
        event.stop();
    }
    else if (event.keyCode == Event.KEY_ESC) {
        element.saveChanges();
    }
    else if (event.keyCode == Event.KEY_UP) {
        determinePreviousElement(element);
        if (nextElement != null) {
            clicked(nextElement);
            $$('textarea.translation').first().focus();
        }
    }
}

function determineNextElement(element) {
    try {
        nextElement = element.up('tr').next('tr', 1).down('.translation');
    } catch(exception) {
        nextElement = null;
    }
}

function determinePreviousElement(element) {
    try {
        nextElement = element.up('tr').previous('tr', 1).down('.translation');
    } catch(exception) {
        nextElement = null;
    }
}

var saveCaption = function() {
    var element = this
    determineNextElement(element);
    if (element.up() != null) {
        element.up().observe("click", translate);
    }
    if (element.value == "" || (element.up() != null && element.up('td').defaultValue == element.value)) {
        //nothing changed so just return to the last value
        element.replace(element.up().defaultValue);
    }
    else {
        element.replace(element.value);
    }
    createTranslation();
};

function getCaptionStatistics() {
    return [
        {"languageName": "English", "languageCode": "eng", "percentageComplete": 100},
        {"languageName": "YourSubtitles", "languageCode":"u", "percentageComplete": 100}
    ];
}

function setPlayerCaptions(language) {
    //yes this is lame, but it makes the flash player happy. If I set the value right away it just vomits
    if(language == "u") {
        setTimeout("$('mpl').setPlayerCaptions(translation);", 500);
    }
    else if (language == "eng") {
        setTimeout("$('mpl').setPlayerCaptions(transcript);", 500);
    }
    else {
        setTimeout("$('mpl').setPlayerCaptions([{}]);", 500);        
    }
}