<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Novo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"  href="/stylesheets/main2.css">
  </head>
  <body>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '188221571965007',
          cookie     : true,
          xfbml      : true,
          version    : 'v2.12'
        });
        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
      };
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
       function statusChangeCallback(response){
         if(response.status === 'connected'){
           console.log('Logged in and authenticated');
           setElements(true);
           testAPI();
         } else {
           console.log('Not authenticated');
           setElements(false);
         }
       }
      function checkLoginState() {
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
      }
      function testAPI(){
        FB.api('/me?fields=name,email,birthday,location,friends,posts', function(response){
            if(response && !response.error){
              console.log(response);
              buildProfile(response);
            }
            
            

            FB.api('me/friends?fields=photos{images}', function(response1){
              if(response1 && !response1.error){
                //buildCover(response);
              }

                  FB.api('me/friends', function(response2){
                  if(response2 && !response2.error){
                    buildCover(response1,response2);
                  }
                });
            });

        })
      }
      
      function buildProfile(user){
        let profile = `
          <h3>${user.name}</h3>
          <ul class="list-group">
            <li class="list-group-item">User ID: ${user.id}</li>
            <li class="list-group-item">Email: ${user.email}</li>
            <li class="list-group-item">Birthday: ${user.birthday}</li>
            <li class="list-group-item">User ID: ${user.location.name}</li>
          </ul>
        `;
        document.getElementById('profile').innerHTML = profile;
      }
      
      function buildCover(feed,feed2){
        let output = '<h3>Cover</h3>';
        for(let i in feed.data){
          if(feed.data[i].id){
            output += `
              <div class="col-md-4 col-sm-6">
               <div class="thumbnail" >
                  <span>
                      <img src="${feed.data[i].photos.data[0].images[0].source}" 
                       id="index_images">
                      <div class="centered" ><button id="image_button">
                        ${feed2.data[i].name}
                      </button></div>
                  </span>
               </div>
              </div>

            `;
          }

        }
        
        document.getElementById('cover').innerHTML = output;
      }
      
      function setElements(isLoggedIn){
        if(isLoggedIn){
          document.getElementById('logout').style.display = 'block';
          document.getElementById('profile').style.display = 'block';
          document.getElementById('fb-btn').style.display = 'none';
          document.getElementById('heading').style.display = 'none';
        } else {
          document.getElementById('logout').style.display = 'none';
          document.getElementById('profile').style.display = 'none';
          document.getElementById('fb-btn').style.display = 'block';
          document.getElementById('heading').style.display = 'block';
        }
      }
      function logout(){
        FB.logout(function(response){
          setElements(false);
        });
      }
    </script>



    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Novo</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a id="logout" href="#" onclick="logout()">Logout</a></li>
            <fb:login-button
              id="fb-btn"
              scope="public_profile,email,user_birthday,user_location,user_posts,user_friends,user_status,user_photos,user_likes"
              onlogin="checkLoginState();">
            </fb:login-button>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <h3 id="heading">Log in to view your profile</h3>
      <div id="profile"></div>
      <div id="cover"></div>      
    </div>
  </body>
</html>