App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return [
      {country: 'USA', states: [
        {state: 'Alabama', 
         cities: [{city: "Birmingham"}, {city: "Athens"}]
        },
        {state: 'Colorado', 
         cities: [{city: "Boulder"}]
        }
      ]}, 
      {country: 'Canada', states: [
        {state: 'Nova Scotia', 
         cities: [{city: "Halifax"}, {city: "Sydney"}]
        },
        {state: 'Alberta', 
         cities: [{city: "Calgary"}]
        }
      ]},
       {country: 'Mexico', states: [
         {state: 'Oaxaca',
          cities: [{city: "El Rodeo"}, {city: "Astatla"}]
         }
      ]}
    ];
  },
  
  setupController: function(controller, model){
    controller.setProperties({
      model: model
    });
  }
});

App.IndexController= Ember.ArrayController.extend({
  selectedCountry: null,
  selectedState: null,
  selectedCity: null,
  states: function(){
    return this.get("selectedCountry.states") || this.get("content.firstObject.states");
  }.property("content.firstObject.states", "selectedCountry.states"),
  cities: function(){
    return this.get("selectedState.cities") || this.get("states.firstObject.cities");
  }.property("selectedState.cities", "states.firstObject.cities" ),
  
  updateSelects: function(){

   console.log("selected values");
   console.log(this.get('selectedCountry'), this.get('selectedState'), this.get('selectedCity'));
   console.log("computed values");
  console.log("States: ", this.get("states"));
  console.log("cities: ", this.get("cities"));
    //add any code to set selected properties
  }.observes('selectedCountry', 'selectedState', 'selectedCity')
});