var cityList = {
  myConn: false, // the XMLHttpRequest
  form: false, // the form
  target: false, // the target
  targetParent: false, // the target's parent
  loader: false, // the loader
  lang: false, // the language
  prev: "/scj/2004/sites/scj_brands/can/bugsmart",

  // Language specific text
  enLoading: "Loading data, please wait…",
  frLoading: "Téléchargement des données. Veuillez patienter…",
  enURL: "http://www.theweathernetwork.com/bugreport/",
  frURL: "http://www.meteomedia.com/bugreport/",
  tracking: "ref=scjsearch",

  // Initialize form behaviour
  init: function(formId, controlId, targetId, lang)
  {
    // Test for methods and elements
    if(!document.getElementById ||
       !document.getElementsByTagName ||
       !document.getElementById(formId) ||
       !document.getElementById(controlId) ||
       !document.getElementById(targetId))
    {
      return;
    }

    // Set and test XHConn
    cityList.myConn = new XHConn();
    if(!cityList.myConn) return;

    // Set the form element
    cityList.form = document.getElementById(formId);

    // Set the target element
    cityList.target = document.getElementById(targetId);

    // Set the parent of the target element
    cityList.targetParent = cityList.target.parentNode;

    // Set the language
    cityList.lang = lang;

    // Add the onchange event to the controller,
    var control = document.getElementById(controlId);
    cityList.addEvent(control,
                      "change",
                      function(){
                        if(this.value != '') cityList.getCity(this.value, cityList.lang);
                      });

    // Handle the form submit
    cityList.form.onsubmit = function()
    {
      var sel = cityList.form.elements[1];
      var selValue = sel[sel.selectedIndex].value;
      if (selValue != "")
      {
        var url = (lang == "en") ? cityList.enURL : cityList.frURL;
        //location.href = url + selValue + ".htm?" + cityList.tracking;
		if (window.urchinTracker) {
		  urchinTracker("/tracking/" + lang + "/weathernetwork/" + selValue);
		}
        window.open(url + selValue + ".htm?" + cityList.tracking, "weathernetwork", "");
      }
      return false;
    }
  },

  // Handle the form interaction
  getCity: function(id)
  {
    // Show loader
    cityList.buildLoader();

    // Build city option list
    var fnWhenDone = function(oXML)
    {
      // Test for XML
      if (!oXML.responseXML ||
          !oXML.responseXML.documentElement)
      {
        return false;
      }

      // Remove loader
      cityList.killLoader();

      // Build options
      var cities = oXML.responseXML.getElementsByTagName("city");
      for (var i = 0; i < cities.length; i++)
      {
        var option = cityList.target.appendChild(document.createElement("option"));
        option.appendChild(document.createTextNode(cities[i].firstChild.nodeValue));
        option.setAttribute("value", cities[i].getAttribute("id"));
      }
    };

    // Use XHConn's connect method
    //cityList.myConn.connect(cityList.prev+"/"+cityList.lang+"/cities/cities.php", "POST", "province="+id, fnWhenDone);
    cityList.myConn.connect("/cities/cities.php", "POST", "province="+id, fnWhenDone);
  },

  // Display loading message
  buildLoader: function()
  {
    var loadingText = (cityList.lang == "en") ? cityList.enLoading : cityList.frLoading;
    cityList.loader = document.createElement("p");
    cityList.loader.appendChild(document.createTextNode(loadingText));
    cityList.form.replaceChild(cityList.loader, cityList.target.parentNode);
  },

  // Remove Loading message
  killLoader: function()
  {
    // Replace loader
    cityList.form.replaceChild(cityList.targetParent, cityList.loader);

    // Remove previous city options
    var len = cityList.target.childNodes.length;
    for(var i = len; i > 1; i--)
    {
      cityList.target.removeChild(cityList.target.lastChild);
    }
  },

  // Event attachment API
  addEvent: function(obj, type, fn)
  {
    if (obj.addEventListener)
    {
      obj.addEventListener(type, fn, false);
    }
    else if (obj.attachEvent)
    {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function(){
        obj["e"+type+fn](window.event);
      };
      obj.attachEvent("on"+type, obj[type+fn]);
    }
  }
};

cityList.addEvent(window,
                  "load",
                  function(){
                    cityList.init("weather", "province", "city", "fr");
                  });