v0.0

//------ PERSISTS ------//
/**
 * TODO:
 * - Implement Frontpage
 * - Fix double draw call on chart
 */
//Members
var jsondat;    //JSON Data Store
var chart = {}; //Chart Data Store
chart.Dataset = {}; //Dataset collection
var geoloc = {};    //Geolocation Data Store
//Functions
//Chart
function refactor() {
    //update names
    chart.Dataset.people = $('.chrtperssel:checkbox:checked').map(function () {
        return this.name.replace(/_/g,' ');
    }).get();
    //alert(chart.Dataset.people.join(','));
    draw();
}

function gmaps_set() {
    //Find height and mass for lat, lng use
    for (var i = 0; i < jsondat.people.length; i++) {
        if (jsondat.people[i].name == geoloc.target) {
            geoloc.tlat = 60;   //Test values, place with algorithm
            geoloc.tlng = 75;
            break;
        }
    }
    //Generate map settings
    var mc = new google.maps.LatLng(geoloc.tlat, geoloc.tlng);
    var opt = {
        center: mc,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    //Render map
    geoloc.map = new google.maps.Map($('#geocvs'), opt);
}

function draw() {
    //alert(chart.Dataset.type);
    //Compile Data
    for (var k = 0; k < chart.Dataset.people.length; k++) {
        for (var l = 0; l < jsondat.people.length; l++) {
            if (chart.Dataset.people[k] == jsondat.people[l].name) {
                chart.Dataset.data[k] = (chart.Dataset.type == 'height') ?
                    jsondat.people[l].height : jsondat.people[l].mass;
                //console.log(chart.Dataset.people[k] + ':' + chart.Dataset.data[k]);
            }
        }
    }

    var bgc = {};   //Background colour data
    var bc = {};    //Border colour data
    var t;          //Generate spectrum colour distribution for bar colours
    for (var i = 0; i < chart.Dataset.people.length; i++) {
        t = i / chart.Dataset.people.length * 255;
        bgc[i] = 'rgba(' + Math.round(255 - t)
            + ', ' + Math.round(255-(2*Math.abs(t-127)))
            + ', ' + Math.round(t) + ', 0.4)';
        t = (i / chart.Dataset.people.length * 200) + 55;
        bc[i] = 'rgba(' + Math.round(255 - t)
            + ', ' + Math.round(255 - (2 * Math.abs(t - 127)))
            + ', ' + Math.round(t) + ', 0.4)';
    }
    //Draw
    chart.inst = new Chart(chart.ctx, {
        type: 'bar',
        data: {
            labels: chart.Dataset.people,
            datasets: [{
                label: chart.Dataset.type,
                data: chart.Dataset.data,
                backgroundColor: bgc,
                borderColor: bc,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}
//------ END PERSIST ------//
$(document).ready(function () {
    //------ JSON INIT ------//
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "res/pe3.json",
        success: function (jdat) {
            jsondat = jdat;
            $.each(jsondat.people, function (i, person) {
                $("#plist").append('<li><a href="#' + person.name.replace(/ /g, '_')
                    + '">' + person.name + '</a></li>');
                //------ TEXT DISPLAY ------//
                $('a[href="#' + person.name.replace(/ /g, '_') + '"]').click(function (e) {
                    //--Override default behaviour
                    e.preventDefault();
                    //--Generate page
                    var tgthref = e.target.href.split("#", 2)[1].replace(/_/g, ' '); //get selection
                    //find entry in list
                    var ptr = {};
                    for (var j = 0; j < jsondat.people.length; j++) {
                        if (jsondat.people[j].name == tgthref) {
                            ptr = jsondat.people[j];
                        }
                    }
                    //Pull data from other JSON links in JSON
                    if (ptr.homeworld != '') {  //Check for empty
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: ptr.homeworld + "?format=json",
                            success: function (dat) {
                                $('#hw').html(dat.name);
                            }
                        });
                    } else {
                        $('#hw').html('');
                    }

                    if (typeof ptr.films !== undefined && ptr.films.length > 0) { //empty, null check
                        for (var j = 0; j < ptr.films.length; j++) {
                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: ptr.films[i] + "?format=json",
                                success: function (dat) {
                                    $('#fl').html(dat.title + '<br>');
                                }
                            });
                        }
                    } else {
                        $('#fl').html('');
                    }

                    if (typeof ptr.species !== undefined && ptr.species.length > 0) { //empty, null check
                        for (var j = 0; j < ptr.species.length; j++) {
                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: ptr.species[i] + "?format=json",
                                success: function (dat) {
                                    $('#sp').html(dat.name + '<br>');
                                }
                            });
                        }
                    } else {
                        $('#sp').html('');
                    }

                    if (typeof ptr.vehicles !== undefined && ptr.vehicles.length > 0) { //empty, null check
                        for (var j = 0; j < ptr.vehicles.length; j++) {
                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: ptr.vehicles[i] + "?format=json",
                                success: function (dat) {
                                    $('#vh').html(dat.name + '<br>');
                                }
                            });
                        }
                    } else {
                        $('#vh').html('');
                    }

                    if (typeof ptr.starships !== undefined && ptr.starships.length > 0) { //empty, null check
                        for (var j = 0; j < ptr.starships.length; j++) {
                            $.ajax({
                                type: "GET",
                                dataType: "json",
                                url: ptr.starships[i] + "?format=json",
                                success: function (dat) {
                                    $('#ss').html(dat.name + '<br>');
                                }
                            });
                        }
                    } else {
                        $('#ss').html('');
                    }

                    //populate table
                    $('#nm').html(ptr.name);
                    $('#ht').html(ptr.height+'m');
                    $('#ms').html(ptr.mass+'kg');
                    $('#hc').html(ptr.hair_color);
                    $('#sc').html(ptr.skin_color);
                    $('#ec').html(ptr.eye_color);
                    $('#by').html(ptr.birth_year);
                    $('#gd').html(ptr.gender);
                    $('#cr').html(ptr.created);
                    $('#et').html(ptr.edited);
                    $('#ur').html('<a href="' + ptr.url + '">Original</a>');
                    //--Switch to page
                    $(':mobile-pagecontainer').pagecontainer('change', '#txtdis', { allowSamePageTransition: true });
                });
                //------ END TEXTDIS ------//
                //------ SELECT INIT ------//
                $('#chrtpersonsel').append('<input type="checkbox" name="'
                    + person.name.replace(/ /g, '_') + '" id="'
                    + person.name.replace(/ /g, '_') + '" class="chrtperssel"><label for="'
                    + person.name.replace(/ /g, '_') + '">'
                    + person.name + '</label>'
                    );
                $('#' + person.name.replace(/ /g, '_')).change(function () {
                    refactor();
                });
                //------ END SELINIT ------//
                //------ GEOLOC INIT ------//
                //Populate options list
                $('#geosel').append('<option value="'
                    + person.name.replace(/ /g, '_') +'">'
                    + person.name + '</option>'
                    );
                //------ END GEOLOC ------//
            });
        }
    });
    //------ END JSONINIT ------//

    //------ CHART FUNCTIONS ------//
    //Init Chart
    chart.ctx = $('#chrtcvs');
    chart.Dataset.type = 'height'; //Default
    refactor();
    //Events
    $('#chrtdatsel').change(function () {
        chart.Dataset.type = $('#chrtdatsel').val();
        draw();
    });
    //------ END CHRTFUNC ------//
    //------ GEOLOC INIT ------//
    $('#geosel').change(function () {
        geoloc.target = $('#geoloc').val().replace(/_/g, ' ');
        gmaps_set();
    })
    //------ END GEOLOC ------//
});