var chartUrlTemplate = new Template('http://chart.apis.google.com/chart?cht=#{type}&chs=400x180&chd=t:#{dataString}&chco=#{color}&#{labelVerb}=#{labels}&chtt=#{title}');
var chart={title:'', type:'',dataString:'', color:'', labelVerb:'', labels:''};
function addInputPairs(){
    var content = '';
    var num = $('numOfValues').value;
    $R(1,num).each(function(num) {
      content+='<tr><td><input type="text" class="chartValue" id="chartValue'+num+'" /></td><td><input type="text" class="chartLegend" maxLength="32" id="chartLegend'+num+'" /></td></tr>';
    });
    $('chartTable').update(content);
}
function fillFormWithSamples(){
    $("chartTitle").value = "Sample chart title";
    var num = $('numOfValues').value;
    $R(1,num).each(function(num){
        $("chartValue"+num).value = num;
        $("chartLegend"+num).value = "Legend "+num;
    });
}
function initSelectors(){
    var content = '';
    $R(1,20).each(function(num) {
      content+='<option id="numSelector'+num+'" value="'+num+'" label="'+num+'">'+num+'</option>';
    });
    $('numOfValues').update(content);
    $('numSelector10').selected = true;
    $('p3').selected = 'selected';
    addInputPairs();
}
function collectLabels(){
    var labels = '';
    $$('.chartLegend').each(function(label){
        if(label.value.length>0){
            labels+=encodeURIComponent(label.value) + '|';
        }
    });
    if(labels.length>1){
        labels = labels.substr(0, labels.length-1);
    }
    return labels;
}
function collectData(delim){
    var data = '';
    $$('.chartValue').each(function(val){
        if(val.value.length>0){
            data+=encodeURIComponent(val.value) + delim;
        }
    });
    if(data.length>1){
        data = data.substr(0, data.length-1);
    }
    return data;
}
function getSelectedColor(){
    var color = $$('.colorPicker').find(function(picker){
        return picker.checked;    
    }).value;
    color = color.substr(1,color.length-1);
    return color;
}
function collectColors(){
    var data = '';
    $$('.colorPicker').each(function(val){
        if(val.value.length>0){
            data+=val.value.substr(1,val.value.length-1) + ',';
        }
    });
    if(data.length>1){
        data = data.substr(0, data.length-1);
    }
    return data;
}
function generateChart(){
    var delim = "|";
    chart.title = encodeURIComponent($('chartTitle').value);
    chart.type=$('chartType').value;
    
    chart.color = getSelectedColor();
    if(chart.type == 'p' || chart.type == 'p3' || chart.type == 'bvs'){
        chart.labelVerb = 'chl';   
    }
    else{
        chart.labelVerb = 'chdl';
    }
    if(chart.type == 'p' || chart.type == 'p3' || chart.type == 'bvs' || chart.type == 'v'){
        delim = ',';
    }
    else{
        chart.color=collectColors();    
    }
    chart.dataString = collectData(delim);
    chart.labels = collectLabels();
    $('chartImg').src = chartUrlTemplate.evaluate(chart);
    $('imgTag').value = '<a href="http://charts.moneylope.com"><img src="'+$('chartImg').src + '" title="Generated with charts.moneylope.com" /></a>';
}
function chartTypeChanged(){
    chart.type=$('chartType').value;
}
function selectCode(){
    $('imgTag').select();
}
function initUI(){
    initSelectors();
    chartTypeChanged();
    fillFormWithSamples();
    generateChart();
}