function drawReportJS(report_id) {
    $.getJSON("/api/1.0/report_info/"+report_id+"/", function(data){
      gotReportDataJS(data);
    });
}

function gotReportDataJS(data) {
    report_data = data['report'];
    question_data = {};
    questions_to_load = 0;
    questions_loaded = 0;
    for(question in report_data['questions']){
        questions_to_load += 1;
        $.getJSON("/api/1.0/question_answers/"+question+"/"+report_data['user']+"/", function(data){
          gotReportQuestionDataJS(data, "user");
        });
    }
}


function gotReportQuestionDataJS(data, user) {
    question_data[data['question']['id']] = {}
    question_data[data['question']['id']]['user'] = data['question']
    questions_loaded += 1;
    if (questions_to_load == questions_loaded){
        drawReportJSGraph();
    }
}

function hexToRGBString(colorHex) {
    if(!colorHex) {
        colorHex = "666666";
    }
    colorHex = colorHex.toUpperCase()
    return parseInt(colorHex.substring(0,2),16) + ","+parseInt(colorHex.substring(2,4),16)+","+parseInt(colorHex.substring(4,6),16);
}

function drawReportJSGraph(){

    questions_to_graph = []
    for(question in question_data){

        question_to_graph = {}
        question_to_graph['data'] = []
        question_to_graph['lines'] = { show: true, fill: true, fillColor:"rgb("+hexToRGBString(report_data['questions'][question]['params']['color'])+")" }
        question_to_graph['color'] = "rgb("+hexToRGBString(report_data['questions'][question]['params']['color'])+")";
        question_to_graph['shadowSize'] = 0;
        
        
        

        question_answers = question_data[question]['user']['answers'];
        for (answer in question_answers){
            question_to_graph['data'].push([question_answers[answer]['created_on']*1000, question_answers[answer]['data']])
        }
        questions_to_graph.push(question_to_graph)
    }
    
    //console.log(questions_to_graph);
    $.plot($("#reportJS"), questions_to_graph,{ xaxis: { mode: "time" }, grid:{
        color: "rgb(205,205,205)",
        backgroundColor: "rgb(245,245,245)",
        borderWidth: 0,
        tickColor:"rgb(255,255,255)",

      } });
    
}