var p1=document.generalForm.p1;
var p2=document.generalForm.p2;

function initialize(){
    changeP1Position();
    changeP2Position();
    initializeUnitMoves();
    updateChart();
}

function initializeUnitMoves(){
    initializeUnitMove(c1,uM1);    
    initializeUnitMove(c2,uM2);
    
    if(c1.value==c2.value){
        hideUnitMove1();
        hideUnitMove2();
    }else{
    displayUnitMove1();
    displayUnitMove2();
}
}

function changeP1Position(){
    if(p1.value=="-1"){
        p2.value="1";
    }
    if(p1.value=="1"){
        p2.value="-1";
    }  
}

function changeP2Position(){
    if(p2.value=="-1"){
        p1.value="1";
    }
    if(p2.value=="1"){
        p1.value="-1";
    }
}

//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(){
            initializeUnitMoves();
        });
        Event.observe('p1', 'change',    function(){
            changeP1Position();
        });
        Event.observe('c2', 'change',    function(){
            initializeUnitMoves();
        });
        Event.observe('p2', 'change',    function(){
            changeP2Position();
        });
    });