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

"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;

    var site_name  = gs.xsltParams.site_name;
    var collection = gs.cgiParams["c"];

    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;
    }
    }

    console.log("docStorage = " + docStorage);
    //console.log("docOID = " + docOID);
    //console.log("*** docOID in docStorage = " + (docOID in docStorage));
    console.log("*** palTracks = " + (JSON.stringify(docStorage.palTracks)));
    console.log("*** popTracks = " + (JSON.stringify(docStorage.popTracks)));
    
    //console.log("*** palTracks.length = " + (Object.keys(docStorage.palTracks).length));

/*
    
    //if ((docStorage==null) || !(docOID in docStorage) || (docOID in Storage && !(docStorage[docOID].palTracks.length) )) {
    if ((docStorage==null) || !(docStorage.palTracks) || (docStorage.palTracks && (Object.keys(docStorage.palTracks).length==0))) {
    

    console.log("**** Need to retrieve Respooled data from DL");

    if (docStorage==null) {
        docStorage = {palTracks:{}, popTracks:{}};
    }
    gs.functions.getArchivesMetadata(collection, site_name, docOID,
                     "docStorage", 0,  function(metadata) {
                         var metaval_encoded_str = metadata.getValue();
                         var metaval_str = decodeURIComponent(metaval_encoded_str)
                         console.log("***!!! metadata = '" + metaval_str + "'");
                         if (metaval_str != "") {
                         var metaval = eval("("+metaval_str+")");
                         console.log("***!!! metadata JSON = " + JSON.stringify(metaval));
                         docStorage = metaval;
                         }
                         else {
                         docStorage = {palTracks:{}, popTracks:{}};
                         }
                         goDocStorage = docStorage;
                     }
                    );
    
    }
*/
    
    //console.log("*** returning docStorage.palTracks " + JSON.stringify(docStorage.palTracks));
    
    return docStorage;
}


function saveDocStorage(log_prefix)
{
    var docOID = gs.cgiParams.d;
    var site_name = gs.xsltParams.site_name;
    var collection = gs.cgiParams["c"];

    if (hasLocalStorage) {
    console.log(log_prefix + ": Saving in Browser localStorage track data for '" + docOID + "'");
    localStorage.setItem(docOID,JSON.stringify(goDocStorage));
    }

    /*
    var goDocStorageStrEncoded = encodeURIComponent(JSON.stringify(goDocStorage));

    console.log(log_prefix+": Away to save metadata to DL: " + goDocStorageStrEncoded);

    gs.functions.setArchivesMetadata(collection, site_name, docOID,
                     "docStorage", null, goDocStorageStrEncoded, null, "override",
                     function(response){
                     console.log("**** saved Respooled metadata to the DL server")
                     console.log("*** response: " + JSON.stringify(response));
                     }
                    );
*/
}

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

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

    return palActiveLayers;
}

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

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

    return popActiveLayers;
}


function getPalTracks(docOID) {

    if (!("palTracks" in goDocStorage)) {
    goDocStorage = {palTracks:{}, popTracks:{}};
    }
    
    return goDocStorage.palTracks;
    
}

function getPopTracks(docOID) {

    if (!("popTracks" in goDocStorage)) {
    goDocStorage = {palTracks:{}, popTracks:{}};
    }
    
    return goDocStorage.popTracks;
    
}

function populatePalList(docStorage)
{
    // populate pal List
    var docOID = gs.cgiParams.d;

    if (hasLocalStorage) {

    var palTracks = getPalTracks(docOID);

    //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 populatePopList(docStorage)
{
    // populate pop List
    var docOID = gs.cgiParams.d;
    var hasPopTracks = false;
    
    if (hasLocalStorage) {

    var popTracks = getPopTracks(docOID);
    
    //console.log("*** popTracks = " + JSON.stringify(popTracks));
    var popListKeys = Object.keys(popTracks).sort();

    if (popListKeys.length>0) {
        hasPopTracks = true;
    }
    for (var i=0; i<popListKeys.length; i++) {
        var key = popListKeys[i];
        var track = popTracks[key];
        var name = key;
        var cb_name = name.replace(/[ -]/g,"");
        var cb_value = name;

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

        $('#popList').append('<div id="pop'+cb_name+'"><input type="checkbox" '
                 + '" name="'+cb_name+'" value="' + cb_value + '"'
                 + opt_checked + '>' 
                 + name + '</div>');
    }
    }

    if (!hasPopTracks) {
    // Put in some fake data for now
    console.log("**** adding baseline Popup Trivia item");
    
    $('#popList').append('<input type="checkbox" id="popPopupTrivia"    name="PopupTrivia" value="Popup Trivia" checked="checked"/>Popup Trivia<br />');

    if (hasLocalStorage) {
        var popTracks = getPopTracks(docOID);
        popTracks["Popup Trivia"] = "";
    }

    
    //$('#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",[]);

    var docOID = gs.cgiParams.d;
    
    if (hasLocalStorage) {

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

    var palTracks = getPalTracks(docOID);

    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;
            
            var rx_dim;
            var ry_dim;
            
            if (note_event.type && (note_event.type=="drum")) {
                ry_org = 0;
                
                rx_dim = 1;
                ry_dim = go_paper_y_dim;
            }
            else {
                var midi_pitch = note_event.midiPitch;

                //var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
                //var rx_org = startPercTime * go_paper_x_dim;
                ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing) - midi_y_dim_spacing;
                
                rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
                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) {
                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';
    
    if (gs.xsltParams.interface_name == "dlfm") {
    
    $("#gameOnPaper>svg").panzoom({
        $zoomIn: $(".zoom-in"),
        $zoomOut: $(".zoom-out"),
        $zoomRange: $(".zoom-range"),
        $reset: $(".reset")
    });

    $("#gameOnPaper>svg").panzoom("option", "contain", true );

    }


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

    populatePalList(goDocStorage);
    populatePopList(goDocStorage);
    
    displayActiveTrackLayers(goDocStorage);
}

// pal routines

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

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

    var docOID = gs.cgiParams.d;
    var palTracks = getPalTracks(docOID);

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

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

    saveDocStorage("palDeleteConfirmed()");    
}


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 docOID = gs.cgiParams.d;
    var palTracks = getPalTracks(docOID);

    var json_edit_str = trackEditor.getSession().getValue();
    console.log("**** palSave() trackEditor.getSession value = " + 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;       
    }
    }

    saveDocStorage("palSave()");
    
}

function palEdit()
{
    var docOID = gs.cgiParams.d;
    var palTracks = getPalTracks(docOID);

    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
}

//
// Popup Info Overlay routines
//


function popCreate()
{
    $('#create-info-popup').dialog('open');

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

function popDeleteConfirmed()
{
    //var popActiveLayers = $('input[type=checkbox]:checked', '#popForm');

    var popActiveLayersID   = getActiveOverlayLayers("name");
    var popActiveLayersValue = getActiveOverlayLayers("value");

    var docOID = gs.cgiParams.d;
    var popTracks = getPopTracks(docOID);

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

    var value = popActiveLayersValue[i];
    delete popTracks[value]; 
    }

    //console.log("***### pop mode, skipping saving for now");
    saveDocStorage("popDeleteConfirmed()");
        
}


function popDelete()
{
    $('#delete-info-popup').dialog('open');

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

function popSave()
{
    var docOID = gs.cgiParams.d;
    var popTracks = getPopTracks(docOID);

    var text_edit_str = infoEditor.getSession().getValue();
    console.log("**** popSave() infoEditor.getSession value = " + text_edit_str);

    var popActiveLayers = getActiveOverlayLayers();
    //var json_edit = eval("("+json_edit_str+")");

    var key = popActiveLayers[0];
    //console.log("**** Saving under key[" + key + "]: " + JSON.stringify(val));
    console.log("**** Saving under key[" + key + "]: " + text_edit_str);
    popTracks[key] = text_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));
        popTracks[key] = val;       
    }
    }
    */
    
    //console.log("***### pop mode, skipping saving for now");
    saveDocStorage("popSave()");
    
}


function popEdit()
{
    var docOID = gs.cgiParams.d;
    var popTracks = getPopTracks(docOID);

    var popActiveLayers = getActiveOverlayLayers("value");

    //var edit_json = {};
    var edit_text = "";
  
    for (var i=0; i<popActiveLayers.length; i++) {
    var track_name = popActiveLayers[i];
    //edit_json[track_name] = popTracks[track_name];
    edit_text += popTracks[track_name];
    }

    //infoEditor.setValue(JSON.stringify(edit_json,null,'\t'));
    infoEditor.setValue(edit_text);
    infoEditor.clearSelection();

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

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