function initialize(){
    //hideLoadingImage();
    initializeUnitMove(c1,uM1);
    initializeUnitMove(c2,uM2);
    initializeUnitMove(c3,uM3);
    updateChart();
}

function hideUnitMoves() {
    $("unitMove1").style.visibility = "hidden";
    $("unitMove2").style.visibility = "hidden";
    $("unitMove3").style.visibility = "hidden";
}

function displayUnitMoves() {
    $("unitMove1").style.visibility = "visible";
    $("unitMove2").style.visibility = "visible";
    $("unitMove3").style.visibility = "visible";
}  

function testUnitMoves(){
    

    if(c1.value==c2.value&&c2.value==c3.value){
        hideUnitMoves();
    }else{
        displayUnitMoves();
    }
}

//Update the chart according to user selection
function updateChart()
{
    displayLoadingImage();
    
    //
    //we encode the values of all form elements as query parameters
    //
    var elements = document.generalForm.elements;
    url =document.generalForm.elements.action.value + "?";
    for (var i = 0; i < elements.length; ++i)
    {
        var e = elements[i];
        url = url + e.name + "=" + escape(e.value);
        if (i<(elements.length-1)){
            url = url + "&";
        }
    }
        
    //Now we update the URL of the image to update the chart
    // document.write(url);
    getChart(url);
}
    
Event.observe(window, 'load', function() {
    Event.observe('c1', 'change',    function(){
        initializeUnitMove(c1,uM1);
        testUnitMoves();
    });
    Event.observe('c2', 'change',    function(){
        initializeUnitMove(c2,uM2);
        testUnitMoves();
    });
    Event.observe('c3', 'change',    function(){
        initializeUnitMove(c3,uM3);
        testUnitMoves();
    });
});