var url = 'http://api.fixer.io/latest?base=CAD'
var val="";



$(document).one('pagecreate',function(){ //page create function

	function getData(){


/*$.getJSON(json).done(function (data) { //pass in data as a parameter

		$.each(data, function(index, json) { //this passes in data as a parameter and for each data, we call the function
		console.log(json); //this is the json object printed out for each key and value
		val = json.rates;
		 var data=JSON.stringify(json, null, "\t");
		$("#testpara").text(data);

		});
	}); */

	$.getJSON(url).done( function(json){
		val = json.rates;
		console.log(val);
		var data=JSON.stringify(val, null, "\t");
	//	$("#testpara").text(data);
});

}

        getData(); //call the function

        function changeexchangeTextBox() {

        	$("#exchangetextbox").change(function() {
        		var cad = $("#exchangetextbox").val();

        		var usd = cad*val["USD"];


        		$("#usd").html("USD: $" +usd.toFixed(2));

        	})
var collapsibleHeader = $("<h3></h3>").text("Other Rates"); //print the title in the header


 collapsibleBody = "<p>";


	$.each(val, function(key, value) {
    //display the key and value pair
    if (key !== "USD") {
    collapsibleBody += " " + key + ':' + (value*cad).toFixed(2) + '<br>';
}//end if

collapsibleBody += "</p>"

});

 //print the answer in the collapsible body
 var div = $('<div data-role="collapsible"></div>').append(collapsibleHeader).append(collapsibleBody)
	    		$("#displayrates").append($(div).collapsible()); //this is used to append and initialize the collapsible widget, similar to listview refresh method




	    	}

	    	changeexchangeTextBox();





});//ends document on page create