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

"use strict";

var goDocStorage = null;

var goPaper = null;

var go_paper_x_dim = 920;
var go_paper_y_dim = 445;

var gameOnCurrentTimeXPos = 0;
var gameOnCurrentTimelineRect = null;

var num_midi_pitches = 128;


function updateGameOnCurrentTimeline()
{
    gameOnCurrentTimeXPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  go_paper_x_dim;
    //console.log("*** x pos = " + gameOnCurrentTimeXPos);

    gameOnCurrentTimelineRect.attr({x: gameOnCurrentTimeXPos});
}

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 displayActiveTrackLayers(docStorage)
{
    console.log("displayActiveTrackLayers()");

    goPaper.clear();

    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) {

        // calculate range of midi pitches present
        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;

            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;
            }
            }
        }
        }
    }
    //console.log("*** max pitch = " + max_midi_pitch + ", min pitch = " + min_midi_pitch);
    
    var raw_midi_range = max_midi_pitch - min_midi_pitch;
    var midi_range = Math.max(4,raw_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 block_events = track_block.events;
            
            for (var ne=0; ne<block_events.length; ne++) {
            
            var note_event = block_events[ne];
            
            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);
            
            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);
            rect.attr({stroke:"black",fill:"#2E52A4"});
            }
        }
        }
    }
    }

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

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

    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
}