google.load('visualization', '1', {packages: ['table', 'gauge', 'intensitymap', 'barchart', 'piechart', 'geomap', 'imagesparkline', 'scatterchart', 'areachart', 'linechart', 'columnchart']});
google.setOnLoadCallback(start);

var chart;
var params;

var data = "";
var currentType = "geomap";
var src_orig = "";
var LASTAUTOVAL = "";
var COLORS = ["008000"];
var COLOR_DEFAULT = "3e79ad";
var COLOR_BUTTONS = 0;
var CURRENT_COLOR = 0;
var COLUMN_CODE = false;

function $$(e) { return document.getElementById(e); }

function addRegionData(s, isocode) {
        // Check if item is already in list
        data = $$("id_data").value;
        preset = "";
        
        if (data.indexOf(isocode) != -1) {
            preset = data.substr(data.indexOf(isocode)+4);
            preset = preset.substr(0, preset.indexOf("]"));
            while (preset.substr(0, 1) == " ") { preset = preset.substr(1); }
        }
        
        v = prompt("Value for " + s + ":", preset);
        if ((v) && (v.length > 0)) {
            if (preset.length == 0) {
                $$("id_data").value += ', ["' + isocode + '", ' + v + ']';
            } else {
                new_value = data.substr(0, data.indexOf(isocode)+4);
                data = data.substr(new_value.length);
                data = data.substr(data.indexOf("]"));
                new_value += " " + v + data;
                $$("id_data").value = new_value;
            }                    
        }

        refreshData();
}

function start() {       
    $$("id_select_geomap").selected = true;
    $$("id_regionWorld").selected = true;
 
    $("#autocomplete").autocomplete({
        data: ISOCODES,
        width:200,
        height:400        
    });
    $("#autocomplete").bind("result", function(e, ui) { 
        // Reset input field
        $$("autocomplete").value =LASTAUTOVAL;

        s = String(ui);        
        short = s.substr(s.indexOf("(")+1, 2);
        
        addRegionData(ui, short);        
    });

    $("#colorpicker").colorpicker({
        color: COLORS[0],
        flat: true,
        submit: function(e, ui) { 
            $$("colorpicker").style.display = "none";
            setColor(CURRENT_COLOR, ui.hex);
        } 
    });
    
    chart = new GVis("chart", currentType);
    src_orig = $$("source").innerHTML;

    // Auto Refresh Now
    updateUI();
    refreshData();
}

function updateUI() {
    // Fill Out Textareas with Demo Code
    $$("id_data").value = DefaultDataTypes[currentType].data;
    $$("id_dataInfo").innerHTML = "<a href='" + DefaultDataTypes[currentType].data_url + "' target='_blank'>data format</a>";
    $$("id_params").value = DefaultDataTypes[currentType].params;
    $$("id_paramsInfo").innerHTML = "<a href='" + DefaultDataTypes[currentType].params_url + "' target='_blank'>options</a>";
}

function refreshData() {
    eval("data = [" + $$("id_data").value + "];");
    eval("params = " + $$("id_params").value + ";");
    
    chart.clear();

    COLUMN_CODE = false;
        
    labelarr = $$("id_colLabels").value.split(",");    
    chart.setColumnLabels(labelarr);
    chart.setRows(data);    

    if (labelarr.length > 1) {
        info = chart.getColumnInfo();
        COLUMN_CODE = "";
        for (var i=0; i<info.length; i++) {
            COLUMN_CODE += '"' + info[i][0] + '": "' + info[i][1] + '", ';
        }
    }

    chart.draw(params);

    // Show Source Code
    src = src_orig;
    src = src.replace(/__METAPKG__/g, currentType);
    src = src.replace("__META1__", "");
    src = src.replace("__METADATA__", $$("id_data").value);
    src = src.replace("__METAPARAMS__", $$("id_params").value);
    if (COLUMN_CODE) {
        src = src.replace("__METACOL__", "chart.addColumns({ " + COLUMN_CODE.substr(0, COLUMN_CODE.lastIndexOf(",")) + " });\n          ");    
    } else {
        src = src.replace("__METACOL__", "");    
    }
    $$("source").innerHTML = src; 
}

function changeType(type) {
    DefaultDataTypes[currentType].data = $$("id_data").value;
    DefaultDataTypes[currentType].params = $$("id_params").value;
     
    currentType = type;
    
    if (type == "geomap") {
        $$("id_region").style.display = "inline";
    } else {
        $$("id_region").style.display = "none";
    }        
    
    updateUI();

    chart.setType(type);
    updateColorTag();
    refreshData();
}

function colorButton_add() {
    if ($$("cb" + COLOR_BUTTONS)) {
        $$("cb" + COLOR_BUTTONS).style.display = "block";    
    } else {
        html = "<div class='colorbutton' id='cb" + COLOR_BUTTONS + "' onclick='showColorPicker(" + COLOR_BUTTONS + ")'></div>";
        $$("colorbuttons").innerHTML += html;
        if (COLORS[COLOR_BUTTONS]) {
        } else {
            COLORS[COLOR_BUTTONS] = COLOR_DEFAULT;
        }
        $$("cb" + COLOR_BUTTONS).style.background = "#" + COLORS[COLOR_BUTTONS];
    }
    COLOR_BUTTONS += 1;
    updateColorTag();    
}

function colorButton_del() {
    if (COLOR_BUTTONS > 0) {
        $$("cb" + parseInt(COLOR_BUTTONS-1)).style.display = "none";
        COLOR_BUTTONS -= 1;
    }
    updateColorTag();
}

function showColorPicker(colorbutton_id) {
    if (($$("colorpicker").style.display == "block") && (CURRENT_COLOR == colorbutton_id)) {
        $$("colorpicker").style.display = "none";
        return ;    
    }
    CURRENT_COLOR = colorbutton_id;
    $("#colorpicker").colorpicker("setColor", COLORS[CURRENT_COLOR]);    
    $$("colorpicker").style.display = "block";
}

function setColor(color_id, color) {
    // After clicking on done on the colorpicker
    $$("cb" + color_id).style.background = "#" + color;
    COLORS[color_id] = color;
    updateColorTag();
}

function removeColorTag() {
    v = $$("id_params").value;
    if (v.indexOf("colors") > -1) {
        v1 = v.substr(0, v.indexOf("colors"));
        v2 = v.substr(v.indexOf("colors"));
        v2 = v2.substr(v2.indexOf("],")+2);
        while((v2.length>0) && (v2.substr(0,1) == " ")) { v2 = v2.substr(1); }
        vr = v1 + v2;
        $$("id_params").value = vr;
    }
}

function addColorTag(c) {
    removeColorTag();
    v = $$("id_params").value;
    v = "{ colors:" + c + "," + v.substr(v.indexOf("{")+1);
    $$("id_params").value = v;
}

function updateColorTag() {
    // Update Color HTML Tag
    if (COLOR_BUTTONS == 0) {
        // Remove any tag
        removeColorTag();
    } else {
        /* Depending on the map type the color has to be either #ABCABC or 0xABCABC */
        /* 0x: geomap
            #: all others 
        */
        if (chart.chart_type == "geomap") {
            prefix = "0x";
            suffix = "";
        } else {
            prefix = '"#';
            suffix = '"';
        }
        
        o = "[";
        for (var i=0; i<COLOR_BUTTONS; i++) {
            o += prefix + COLORS[i] + suffix + ", ";
        }
        o = o.substr(0, o.length-2) + "]";
        addColorTag(o);
    }
    refreshData();
}

function setRegion(r) {
    v = $$("id_params").value;
    
    if (v.indexOf("region") == -1) {
        v = '{ region:"' + r + '",' + v.substr(v.indexOf("{")+1);
    } else {
        v1 = v.substr(0, v.indexOf("region"));
        v2 = v.substr(v.indexOf("region")+9);
        v2 = v2.substr(v2.indexOf('"')+1);
        v = v1 + 'region:"' + r + '"' + v2;
    }
    $$("id_params").value = v;
    refreshData();
}