// The html form using this script defines the following array:
//
//varr CO_CI = new Array(56);
//CO_CI["Alameda County"] = [ 'Alameda','Albany','Berkeley','Castro Valley','Dublin','Emeryville','Fremont','Hayward','Livermore','Newark','Oakland','Pleasanton','San Leandro','San Lorenzo','Sunol','Union City' ];
//CO_CI["Alpine County"] = [ 'Kirkwood','Markleeville' ];
//etc.

var CityAreas = [];     // list of cities selected
var CityCounty = [];    // saves the county name of each city selected

function getWindowWidth_old() {
  if(window.innerWidth) {
      return window.innerWidth;
  }
  return document.body.clientWidth
}

function getWindowWidth() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

  return myWidth;
}


function CityClicked(id) {
  var box = document.getElementById(id);

  CityAreas[box.value] = box.checked ? 1 : 0;

  return;
}

function SelectAll(county) {

  for (i in CO_CI[county]) {
    city = CO_CI[county][i];
    CityAreas[city] = 1;
  }
  ShowCities(county);

  return;
}



function ShowCities(county) {
  var co;

  if( county != null ) {
    co = county;
  }
  else {
    var obj = document.getElementById('COLIST');
    co = obj.options[obj.selectedIndex].value;
  }

  var cities = CO_CI[co];
  var CityList = [];
  var n = 1;

  if(document.getElementById('citybuttons').style.opacity == 0) {
    document.getElementById('citybuttons').style.opacity = 1;
  }

//alert("winwidth=" + winwidth);

  for (i in CO_CI[co]) {
    city = CO_CI[co][i];
    var checked = '';
    if( CityAreas[city] &&  CityAreas[city] == 1 ) {
       checked = 'checked';
    }
    var id= "box_" + n;
    CityList.push( '<input ' + checked + ' id=' + id + ' onClick="CityClicked(\'' + id +
      '\');" type="checkbox" name="CityArea" value="' + city + '">' +
      '<label for="' + id + '">' + city + '</label>');
    CityCounty[city] = co;
    n++;
  }

  var cols = 4;
  var winwidth = getWindowWidth();

//alert("winwidth=" + winwidth);
  if(n > 25 && winwidth > 910) {
    cols = 5;
  }

  var size_class = 's11x';
  if( n > 36 ) size_class = 's10x';

  //document.getElementById('citylist').innerHTML = cities;
  //var s = CityList.join("<br>\n");
  //alert("CityList length=" + CityList.length);
  //alert("s=" + s);

//  var Intro = "<p class=bb>Cities in " + co + "</p>\n";
  var Table = "<table width=100% bgcolor=#eeeeee><tr>";

  n = 1;
  for (i in CityList) {
    Table += "<td nowrap class=" + size_class + ">" + CityList[i] + "</td>";
    if( (n%cols) == 0 ) {
      Table += "</tr>\n<tr>";
    }
    n++;
  }
  Table += '<tr><td class="ind2em">';
  Table += '<input type=BUTTON class="s10x" onClick="SelectAll(\'' + co +
	   '\')" value="Select all"></tr>';


  Table += "</table>\n";
  //alert("Table=" + Table);


//  document.getElementById('citylist').innerHTML = Intro + Table;
  document.getElementById('citylist').innerHTML = Table;
  return;
}

function CheckAreas() {

//alert("Top of CheckAreas");
  var len;
  var city;

  //var selobj = document.getElementById('A1');  // A1 is our first list
  var obj = document.getElementById('CLIST');  // our hidden variable

  //if( selobj.options.length )
  //  len = selobj.options.length;
  //else
  //  len = 0;

  var added = '';
  for (city in CityAreas) {
    if( CityAreas[city] == 1 ) {
      //selobj.options[len++] = new Option(city, city, false, true);
      added += "," + city;
    }
  }
  added = added.substr(1);
  obj.value = added;

//alert("added=" + added);

  return true;
}

// Display a list of cities selected with a checkbox[] to reset.
//

function ReviewCities() {

  var CityList = [];

  var n = 1;
  for (var city in CityAreas) {
    if( CityAreas[city] == 1 ) {
      var co = CityCounty[city];
      co = co.replace(/ County$/, '');
      var id= "rev_" + n++;
      CityList.push( '<input checked value="' + city + '" onClick="CityClicked(\'' + id + '\');"' +
	' type="checkbox" id="' + id + '" name="CityArea"><label for="' + id + '"><b>' + city + '</b> (' + co + ')</label>');
    }
  }

  var cols = 2;
  var winwidth = getWindowWidth();
//alert(winwidth);
  if( winwidth > 968 )
    cols = 3;

  n = 1;
  var list = '';
  for (var i in CityList.sort()) {
    list += '<td nowrap class="s11x">' + CityList[i] + '</td>';
    if( (n++%cols) == 0 ) {
      list += "</tr><tr>\n";
    }
  }

  if( n == 1 )
    list = "No cities selected.";
  else {
    list = list.replace(/, $/, '');
    list = list.replace(/, <br>$/, '');
    list = '<table width=100% bgcolor=#eeeeee><tr>' + list + '</table>';
  }

  document.getElementById('citylist').innerHTML = list;
// alert("list=" + list);

  return false;
}

function ResetForm() {

  document.myform.reset();
  ClearCities();

  return;
}

function ClearCities() {

  for (var i in CityAreas)
    CityAreas[i] = 0;

  document.getElementById('citylist').innerHTML = '';
  return;
}