How can I sort javascript array in the following order

I have an array which I want to sort in the following order: gBookingsArray’s StartDate without the value ‘Call to Confirm’ and gBookingsArray’s Distance other than empty should come at the top of the array sorted by gBookingsArray’s Distance then followed by rows where gBookingsArray’s Location is “To Be Announced” and gBookingsArray’s Distance is empty and then followed by rows where gBookingsArray’s StartDate with value ‘Call to Confirm’ should come at the bottom of with array sorted by gBookingsArray’s Distance.

After sorting the array gBookingsArray[2] shoud be first then gBookingsArray[0] then gBookingsArray[1] then gBookingsArray[4] and gBookingsArray[3]

My Array:

gBookingsArray[0] = new Object();
gBookingsArray[0].StartDate = 'Fri November 15, 2013';
gBookingsArray[0].Location = 'A';
gBookingsArray[0].Distance = 10;

gBookingsArray[1] = new Object();
gBookingsArray[1].StartDate = 'Fri November 15, 2113';
gBookingsArray[1].Location = 'To Be Announced';
gBookingsArray[1].Distance = '';

gBookingsArray[2] = new Object();
gBookingsArray[2].StartDate = 'Wed November 13, 2013';
gBookingsArray[2].Location = 'B';
gBookingsArray[2].Distance = 5;

gBookingsArray[3] = new Object();
gBookingsArray[3].StartDate = 'Call to Confirm';
gBookingsArray[3].Location = 'AAA';
gBookingsArray[3].Distance = 20;

gBookingsArray[4] = new Object();
gBookingsArray[4].StartDate = 'Call to Confirm';
gBookingsArray[4].Location = 'BBB';
gBookingsArray[4].Distance = 1;

function SortDistance(A, B)
    {
        try
        {
            if(A[3] == 'Call to Confirm' ||  B[3] == 'Call to Confirm')
                return -1;

            if(A[7] == '' ||  B[7] == '')
                return -1;

            if (A[7] < B[7])
                return -1;


            if (A[7] > B[7])
                return 1;

            return 0;
        }
        catch (err)
        {
            alert(err.name + ': ' + err.message); alert('SortDistance(A, B)');
        }
    }

    function SortCallToConfirmDistance(A, B)
    {
        try
        {
            if(A[3] == 'Call to Confirm' &&  B[3] == 'Call to Confirm')
            {
                if (A[7] < B[7])
                return -1;


                if (A[7] > B[7])
                return 1;
            }

            return 0;
        }
        catch (err)
        {
            alert(err.name + ': ' + err.message); alert('SortCallToConfirmDistance(A, B)');
        }
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>
<body>
 gBookingsArray's StartDate without the value 'Call to Confirm' and gBookingsArray's Distance other than empty should come at the top of the array sorted by gBookingsArray's Distance<br />
 <br />
  then followed by rows where gBookingsArray's Location is "To Be Announced" and gBookingsArray's Distance is empty <br />
  and then followed by rows where gBookingsArray's StartDate with value 'Call to Confirm' should come at the bottom of with array sorted by gBookingsArray's Distance.
<script type="text/javascript">
/*<![CDATA[*/
var gBookingsArray=[];
gBookingsArray[0] = new Object();
gBookingsArray[0].StartDate = 'Fri November 15, 2013';
gBookingsArray[0].Location = 'A';
gBookingsArray[0].Distance = 10;

gBookingsArray[1] = new Object();
gBookingsArray[1].StartDate = 'Fri November 15, 2113';
gBookingsArray[1].Location = 'To Be Announced';
gBookingsArray[1].Distance = '';

gBookingsArray[2] = new Object();
gBookingsArray[2].StartDate = 'Wed November 13, 2013';
gBookingsArray[2].Location = 'B';
gBookingsArray[2].Distance = 5;

gBookingsArray[3] = new Object();
gBookingsArray[3].StartDate = 'Call to Confirm';
gBookingsArray[3].Location = 'AAA';
gBookingsArray[3].Distance = 20;

gBookingsArray[4] = new Object();
gBookingsArray[4].StartDate = 'Call to Confirm';
gBookingsArray[4].Location = 'BBB';
gBookingsArray[4].Distance = 1;

 for (var ary1=[],ary2=[],ary3=[],ary4=[],z0=0;z0<gBookingsArray.length;z0++){
  if (gBookingsArray[z0].StartDate!='Call to Confirm'&&typeof(gBookingsArray[z0].Distance)=='number'){
   ary1.push(gBookingsArray[z0]);
  }
  else if (gBookingsArray[z0].Location=='To Be Announced'&&typeof(gBookingsArray[z0].Distance)!='number'){
   ary2.push(gBookingsArray[z0]);
  }
  if (gBookingsArray[z0].StartDate=='Call to Confirm'&&typeof(gBookingsArray[z0].Distance)=='number'){
   ary3.push(gBookingsArray[z0]);
  }
  else {
   ary4.push(gBookingsArray[z0]);
  }
 }

ary1.sort(function(a,b){ return a.Distance-b.Distance})
ary3.sort(function(a,b){ return a.Distance-b.Distance})

ary1=ary1.concat(ary2,ary3,ary4);

for (var m='',z0=0;z0<ary1.length;z0++){
 m+='StartDate:'+ary1[z0].StartDate+'\
';
 m+='Location:'+ary1[z0].Location+'\
';
 m+='Distance:'+ary1[z0].Distance+'\
\
';
}

alert(m);
/*]]>*/
</script>
</body>

</html>

Thank you for your reply but it is not working the way I want. May be I didn’t explain it properly.

I want to sort gBookingsArray in the following manner.

gBookingsArray.StartDate != ‘Call to Confirm’ and gBookingsArray.Distance != ‘’ should come at the top of the array sorted by gBookingsArray.Distance ASC

then followed by rows

where gBookingsArray.Location == “To Be Announced” and gBookingsArray.Distance == ‘’ sorted by gBookingsArray.StartDate ASC

and then followed by rows

where gBookingsArray’s StartDate == ‘Call to Confirm’ should come at the bottom of with array sorted by gBookingsArray.Distance ASC .

Please see the attachment. This is how I want to sort.

you will need to post the array that is to be used for your attached thumbnail