Script

$(function(){
  var PARSE_APP_ID = "KmgKIBTeOp0vAuNpqAhfskNfgBGTdEaUnaXwDOoY";
  var PARSE_REST_API_KEY = "ZUfcs4gvWlHX6A556buvZgLne6M7swy6DdKeFhR0";

  loadCountries();

  function loadCountries(){
    $.ajax({
      method : 'get',
      headers : {
        'X-Parse-Application-Id' : PARSE_APP_ID,
        'X-Parse-REST-API-Key' : PARSE_REST_API_KEY,
        'Content-type' : 'application/json'
      },
      url : 'https://api.parse.com/1/classes/Country',
      success : countryLoaded,
      error : error
    });
  }

  function countryLoaded(data){
    $('#output').empty();
    for ( var c in data.results ) {
      var country = data.results[c];
      var countryUl = $('<ul></ul>');

      var addCityBtn = $('<span id="add-city">+</span>');
      addCityBtn.data('country' , country);
      addCityBtn.click(addCity);

      var removeBtn = $('<span id="remove-country">▼</span>');
      removeBtn.data('country' , country);
      removeBtn.click(removeCountry);

      //var renameBtn = $('<span id="rename-country">▲</span>');
      //renameBtn.data('country' , country);
      //renameBtn.click(renameCountry);


      countryUl.data('country' , country);
      countryUl.text(country.name);
      countryUl.addClass(country.name);
      countryUl.append(removeBtn)
        .append(addCityBtn)
        //.append(renameBtn);
      countryUl.appendTo($('#output'));

      countryUl.dblclick(renameCountry);
    }
  }

  $('#add-new-country').click(addCountry);

  function addCountry(){
    var newCountryName = $('#country-input').val();
    $.ajax({
      method : 'post',
      headers : {
        'X-Parse-Application-Id' : PARSE_APP_ID,
        'X-Parse-REST-API-Key' : PARSE_REST_API_KEY,
        'Content-type' : 'application/json'
      },
      data : JSON.stringify(
        {
          "name" : newCountryName
        }
      ),
      url : 'https://api.parse.com/1/classes/Country',
      success : loadCountries,
      error : error
    });
  }

  function addCity(){
    var townName = prompt("Enter name of the city");
    var country = $(this).data('country');

    $.ajax({
      method : 'post',
      headers : {
        'X-Parse-Application-Id' : PARSE_APP_ID,
        'X-Parse-REST-API-Key' : PARSE_REST_API_KEY,
        'Content-type' : 'application/json'
      },
      url : 'https://api.parse.com/1/classes/City/',
      data: JSON.stringify(
        {
          "name": townName,
          "country":
          {
            "__type": "Pointer",
            "className": "Country",
            "objectId": country.objectId
          }
        }
      ),
      success : loadCountries,
      error : error
    });
  }

  function renameCountry(){
    var country = $(this).data('country');
    var oldCountryName = country.name;
    var newCountryName = prompt("Rename country," + oldCountryName) || oldCountryName;

    $.ajax({
      method : 'put',
      headers : {
        'X-Parse-Application-Id' : PARSE_APP_ID,
        'X-Parse-REST-API-Key' : PARSE_REST_API_KEY,
        'Content-type' : 'application/json'
      },
      data : JSON.stringify
      (
        {
          "name" : newCountryName
        }
      ),
      url : 'https://api.parse.com/1/classes/Country' + country.objectId,
      success : loadCountries,
      error : error
    });
  }

  function removeCountry(){
    var country = $(this).data('country');
    $.ajax({
      method : "delete",
      headers : {
        'X-Parse-Application-Id' : PARSE_APP_ID,
        'X-Parse-REST-API-Key' : PARSE_REST_API_KEY,
        'Content-type' : 'application/json'
      },
      url : "https://api.parse.com/1/classes/Country/" + country.objectId,
      success : loadCountries,
      error : error
    });
  }

  function addCity(){
    var cityName = prompt("Enter name of the city");
    var country = $(this).data('country');

    $.ajax({
      method : 'post',
      headers : {
        'X-Parse-Application-Id' : PARSE_APP_ID,
        'X-Parse-REST-API-Key' : PARSE_REST_API_KEY,
        'Content-type' : 'application/json'
      },
      url : "https://api.parse.com/1/classes/City/",
      data : JSON.stringify(
        {
          "name" : cityName,
          "country" :
          {
            "__type" : "Pointer",
            "className" : "Country",
            "objectId" : country.objectId
          }
        }
      ),
      success : loadCountries,
      error : error
    });
  }

  $('#country-input').on('keyup' , function(){
    var visibility = $('p').css('display');
    var value;
    var $countries;
    value = $(this).val().toLowerCase();
    $countries = $('p');
    if (value === '') {
      $countries.show();
    } else {
      $countries
        .hide()
        .filter(function (_, country) {
          return $(country).html().toLowerCase().indexOf(value.toLowerCase()) !== -1;
        })
        .show();
    }
  });

  function error(err){
    console.log("An error appeard");
  }
});