source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js@ 29980

"use strict";

var goDocStorage = null;

var goPaper = null;
var go_top_level_group = null;;

var go_paper_x_dim = 920;
var go_paper_y_dim = 445;

var gameOnCurrentTimeXPos = 0;
var gameOnCurrentTimelineRect = null;

var num_midi_pitches = 128;

var group_x_scale;
var group_y_scale;
var group_rotate;
var group_x_trans;
var group_y_trans;

function updateGameOnCurrentTimeline()
{
    gameOnCurrentTimeXPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  go_paper_x_dim;

    var gameOnCurrentTimeYPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  go_paper_y_dim;
    //console.log("*** x pos = " + gameOnCurrentTimeXPos);

    gameOnCurrentTimelineRect.attr({x: gameOnCurrentTimeXPos});

    if (gs.xsltParams.interface_name == "respooled") {
    //go_top_level_group.translate(group_x_scale*go_paper_y_dim, go_paper_y_dim+(gameOnCurrentTimeYPos * group_x_scale * Math.abs(group_y_scale)));
    go_top_level_group.translate(group_x_trans, go_paper_y_dim+(gameOnCurrentTimeYPos * group_x_scale * Math.abs(group_y_scale)));
    }

}

function getDocStorage(docOID)
{
    var docStorage = null;

    if (hasLocalStorage) {

    if (goDocStorage == null) {
        var docStorageStr = localStorage.getItem(docOID);
        //console.log("***docStorageStr = " + docStorageStr);
    
        //var docStorage = (docStorageStr != null) ? eval("("+docStorageStr+")") : {palTracks:{}, popTracks:{}};
        docStorage = eval("("+docStorageStr+")") || {palTracks:{}, popTracks:{}};
        goDocStorage = docStorage;
    }
    else {
        docStorage = goDocStorage;
    }
    }

    return docStorage;
}

function getActiveTrackLayers(opt_field)
{
    var field = opt_field || "name";

    var palActiveLayers = [];
    $('#palForm input:checked').each(function() {
        palActiveLayers.push(this[field]);
    });

    return palActiveLayers;
}

function populatePalList(docStorage)
{
    // populate pal List
    if (hasLocalStorage) {

    var palTracks = docStorage.palTracks || {};

    //console.log("*** palTracks = " + JSON.stringify(palTracks));
    var palListKeys = Object.keys(palTracks).sort();

    for (var i=0; i<palListKeys.length; i++) {
        var key = palListKeys[i];
        var track = palTracks[key];
        var name = key;
        var cb_name = name.replace(/[ -]/g,"");
        var cb_value = name;

        var opt_checked = (i==0) ? ' checked="checked"' : "";

        $('#palList').append('<div id="pal'+cb_name+'"><input type="checkbox" '
                 + '" name="'+cb_name+'" value="' + cb_value + '"'
                 + opt_checked + '>' 
                 + name + '</div>');
    }
    }
    else {
    // Put in some fake data for now
    $('#palList').append('<input type="checkbox" id="palPianoHero"    name="PianoHero" value="Piano Hero" checked="checked"/>Piano Hero<br />');
    $('#palList').append('<input type="checkbox" id="palDrumbeatHero" name="DrumbeatHero"  value="Drum-beat Hero" />Drum-beat Hero<br />');
    }
}


function computeMidiStats(track)
{
    var min_midi_pitch = num_midi_pitches-1;
    var max_midi_pitch = 0;

    var track_chromatic_durations = [];
    for (var i=0; i<12; i++) {
    track_chromatic_durations[i] = 0;
    }

    
    // Process each block within the track
    for (var b=0; b<track.length; b++) {
    var track_block = track[b];
    //var base_ctime = track_block.baseCTime;
    var block_events = track_block.events;

    var block_chromatic_durations = [];
    for (var i=0; i<12; i++) {
        block_chromatic_durations[i] = 0;
    }
    
    for (var ne=0; ne<block_events.length; ne++) {
        var midi_pitch = block_events[ne].midiPitch;

        if (midi_pitch < min_midi_pitch) {
        min_midi_pitch = midi_pitch;
        }
        if (midi_pitch > max_midi_pitch) {
        max_midi_pitch = midi_pitch;
        }

        var chromatic_pitch = midi_pitch % 12;
        var chromatic_duration = block_events[ne].duration;
        block_chromatic_durations[chromatic_pitch] += chromatic_duration;

        track_chromatic_durations[chromatic_pitch] += chromatic_duration;
    }

    if (!("_computedKey" in track_block)) {
        var strongest_profile = khKeyDetection(block_chromatic_durations);
        track_block._computedKey = strongest_profile;
        console.log("***### key prediction: " + strongest_profile);
    }

    }

    if (!("_computedKey" in track)) {
    var strongest_profile = khKeyDetection(track_chromatic_durations);
    track._computedKey = strongest_profile;
    }

    return { "max_midi_pitch": max_midi_pitch, "min_midi_pitch": min_midi_pitch};
}


function displayActiveTrackLayers(docStorage)
{
    console.log("displayActiveTrackLayers()");

    goPaper.clear();
    
    // Clear takes out any previous group element, so need to be regenerated
    go_top_level_group = new goPaper.group("gameOnPaper",[]);

    if (hasLocalStorage) {

    // 'palTracks' have the form:
    //    palTracks[save_name] = [ { name: "my recording 1", baseCTime: 123.3, events: [ .... ] } ]

    var palTracks = docStorage.palTracks || {};

    var total_duration = mediaPlayer.duration;
    //console.log("*** total duration = " + total_duration);

    var atl = getActiveTrackLayers("value");
    //console.log("*** atl = " + JSON.stringify(atl));

    var min_midi_pitch = num_midi_pitches-1;
    var max_midi_pitch = 0;

    for (var i=0; i<atl.length; i++) {
        var storage_name = atl[i];
        var track = palTracks[storage_name];

        if (track != null) {

        var midi_stats = computeMidiStats(track);
        console.log("*** midi stats = " + JSON.stringify(midi_stats));

        if (midi_stats.min_midi_pitch < min_midi_pitch) {
            min_midi_pitch = midi_stats.min_midi_pitch;
        }
        if (midi_stats.max_midi_pitch > max_midi_pitch) {
            max_midi_pitch = midi_stats.max_midi_pitch;
        }

        }
    }
    //console.log("*** max pitch = " + max_midi_pitch + ", min pitch = " + min_midi_pitch);
    
    var raw_midi_range = max_midi_pitch - min_midi_pitch + 1;
    var midi_range = Math.max(4,raw_midi_range); 
    
    //console.log("*** midi_range = " + midi_range);

    var midi_y_dim_spacing = go_paper_y_dim / midi_range;


    for (var i=0; i<atl.length; i++) {
        var storage_name = atl[i];
        var track = palTracks[storage_name];

        if (track != null) {

        for (var b=0; b<track.length; b++) {

            var track_block = track[b];
            var base_ctime = track_block.baseCTime;
            
            var track_fill = track_block.fill;
            var track_fillbackground = track_block.fillBackground;

            var block_events = track_block.events;
            
            var block_min_midi_pitch = num_midi_pitches-1;
            var block_max_midi_pitch = 0;
            
            var block_events_len = block_events.length; 
            for (var ne=0; ne<block_events_len; ne++) {
            
            var note_event = block_events[ne];
            var midi_pitch = note_event.midiPitch;

            var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
            var rx_org = startPercTime * go_paper_x_dim;
            var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
            
            var rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
            var ry_dim = midi_y_dim_spacing;
            
            var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim-0.2);
            //rect.attr({stroke:"none", strokeWidth:0.2, fill:"#2E52A4"});
            //rect.attr({stroke:"black",fill:"#2E52A4"});
            var fill = note_event.fill || track_fill || "#2E52A4";
            rect.attr({"stroke":"black","stroke-width":0.25, "fill":fill});
            go_top_level_group.push(rect);

            if (midi_pitch < block_min_midi_pitch) {
                block_min_midi_pitch = midi_pitch;
            }
            if (midi_pitch > block_max_midi_pitch) {
                block_max_midi_pitch = midi_pitch;
            }
            }

            var block_midi_range = block_max_midi_pitch - block_min_midi_pitch + 1;

            var last_event = block_events[block_events_len-1];
            var last_note_off = last_event.midiNoteOff;
            var block_duration = (base_ctime + last_note_off)/1000.0
;
            var block_x_org = (base_ctime/total_duration) * go_paper_x_dim;
            var block_x_dim = (block_duration/total_duration) * go_paper_x_dim;

            var block_y_org = go_paper_y_dim - ((block_max_midi_pitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
            var block_y_dim = midi_y_dim_spacing * (block_midi_range);

            if (gs.xsltParams.interface_name != "respooled") {
            var block_rect = goPaper.rect(block_x_org-1,block_y_org-1,block_x_dim+2,block_y_dim+2); // fudge factor!
            var fillbackground = track_fillbackground || "rgba(46, 82, 164, 0.5)";
            block_rect.attr({"stroke":"none", "stroke-width":0, "fill":fillbackground});
            
            var block_tip = track_block.name;

            if ("_computedKey" in track_block) {

                var computedKey = track_block._computedKey;
                var key = computedKey.key;
                block_tip += " , Key: " + key;

                if ("score" in computedKey) {
                var perc = 100*computedKey.score;
                block_tip += " with " + perc.toFixed(1) + "% confidence rating";
                }
            }

            block_rect.attr({ "title": block_tip});

            go_top_level_group.push(block_rect);
            }

        }
        }
    }
    }

    gameOnCurrentTimelineRect = goPaper.rect(-2,0,1,go_paper_y_dim);
    gameOnCurrentTimelineRect.attr({fill: "red", stroke: "red"});
    go_top_level_group.push(gameOnCurrentTimelineRect);

    go_top_level_group.scale(group_x_scale,group_y_scale);
    go_top_level_group.rotate(group_rotate,0,0);
    //go_top_level_group.translate(group_x_scale*go_paper_y_dim,go_paper_y_dim);
    go_top_level_group.translate(group_x_trans,group_y_trans);
}

function initGameOn()
{
    console.log("initGameOn()");

    if (gs.xsltParams.interface_name == "respooled") {
    group_x_scale = 2.0;
    group_y_scale = -5.0;
    group_rotate  = 90.0;

    group_x_trans = 15 + group_x_scale * go_paper_y_dim;
    group_y_trans = go_paper_y_dim;
    }
    else {
    group_x_scale = 1.0;
    group_y_scale = 1.0;
    group_rotate  = 0.0;

    group_x_trans = 0.0;
    group_y_trans = 0.0;
    }

    goDocStorage = getDocStorage(gs.cgiParams.d);

    //var gmp_x_dim = $('#gameOnPaper').width();
    //var gmp_y_dim = $('#gameOnPaper').height();

    //console.log("*** gmp_x_dim = " + gmp_x_dim);
    //console.log("*** gmp_y_dim = " + gmp_y_dim);


    //var goPaper = Raphael("gameOnPaper",gmp_x_dim,gmp_y_dim);
    goPaper = Raphael("gameOnPaper",go_paper_x_dim,go_paper_y_dim);
    goPaper.canvas.style.backgroundColor = '#FFFFFF';


    console.log("Browser supports LocalStorage: " + hasLocalStorage);

    populatePalList(goDocStorage);
    displayActiveTrackLayers(goDocStorage);
}


function palDeleteConfirmed()
{
    //var palActiveLayers = $('input[type=checkbox]:checked', '#palForm');

    var palActiveLayersID   = getActiveTrackLayers("name");
    var palActiveLayersValue = getActiveTrackLayers("value");

    var palTracks = goDocStorage.palTracks || {};

    for (var i=0; i<palActiveLayersID.length; i++) {
    var id = palActiveLayersID[i];
    $('#pal'+id).remove();

    var value = palActiveLayersValue[i];
    delete palTracks[value]; 
    }
}


function palDelete()
{
    $('#delete-recording-popup').dialog('open');

    return false;  // no need to process the event any further
}

function palDisplay()
{
    displayActiveTrackLayers(goDocStorage);

    return false;  // no need to process the event any further
}

function palSave()
{
    var palTracks = goDocStorage.palTracks || {};

    var json_edit_str = trackEditor.getSession().getValue();
    console.log("**** json edit str = " + json_edit_str);

    var json_edit = eval("("+json_edit_str+")");

    for (var key in json_edit){
    if (json_edit.hasOwnProperty(key)) {
        //console.log("*** key = " + key);
        var val = json_edit[key];
        console.log("**** Saving under key[ " + key + "]: " + JSON.stringify(val));
        palTracks[key] = val;       
    }
    }

    if (hasLocalStorage) {
    var docOID = gs.cgiParams.d;
    console.log("Saving in Browser localStorage track data for '" + docOID + "'");
    localStorage.setItem(docOID,JSON.stringify(goDocStorage));
    }
}

function palEdit()
{
    var palTracks = goDocStorage.palTracks || {};

    var palActiveLayers = getActiveTrackLayers("value");

    var edit_json = {};

    for (var i=0; i<palActiveLayers.length; i++) {
    var track_name = palActiveLayers[i];
    edit_json[track_name] = palTracks[track_name];
    }

    trackEditor.setValue(JSON.stringify(edit_json,null,'\t'));
    trackEditor.clearSelection();

    $('#edit-recording-popup').dialog('open');

    return false;  // no need to process the event any further
}