// สร้าง dom 
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  root: '#app', // ชื่อ root app
  id: 'io.framework7.myfirstapp', // App bundle ID
  name: 'Framework7', // ชื่อ app
  theme: 'auto', // Automatic theme detection        
});





 // สร้าง view  
 var view = app.views.create('.view-main', {
 // จับ event เมื่อ page(html class page) ทำการ init หรือเริ่มต้น 
 on: {
    pageInit: function () {
    // เรียก api json ของกรมอุตุ 
           app.request.json('http://data.tmd.go.th/api/WeatherForecastDaily/V1?type=json',function (data) {
    // ใส่ข้อความใน html class block-title
           $$(".block-title").html("รายงานอากาศวันที่ "+data.DailyForecast.Date);
    // loop เพื่อแสดงข้อมูลจาก json
                for (var key in data.DailyForecast.RegionsForecast) {
    
  
      var htmlstring = '';
      
      htmlstring += '<div class="card">';
      htmlstring += ' <div class="card-header">'+data.DailyForecast.RegionsForecast[key].RegionName+'</div> ';
      htmlstring += ' <div class="card-content card-content-padding">';
      htmlstring += ' '+data.DailyForecast.RegionsForecast[key].Description+'    ';
      htmlstring += ' </div>';
      htmlstring += '</div>';
      
      // เพิ่มข้อมูลเข้า id whdata_content
      $$("#whdata_content").append(htmlstring);
    
    
                  }
             
             });
     
    }
  }
});