<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7 no-js" lang="en-au"><![endif]-->
<!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 no-js" id="ie7" lang="en-au"><![endif]-->
<!--[if IE 8]><html class="lt-ie10 lt-ie9 no-js" id="ie8" lang="en-au"><![endif]-->
<!--[if IE 9]><html class="lt-ie10 no-js" id="ie9" lang="en-au"><![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en-au"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,user-scalable=no, scale=1, maximum-scale=1.0" />
        <title>Example - Facebook Friend Search</title>
        <link type="text/css" rel="stylesheet" href="styles.css" />
        <script>
          window.fbAsyncInit = function() {
            // init the FB JS SDK
            FB.init({
              appId      : '496972013696684',
              status     : true,
              cookie     : true,
              xfbml      : true
            });
            // Check login status and get it if required
            FB.getLoginStatus(function(response) {
              if (response.status !== 'connected') {
                FB.login({'scope': 'friends_status,read_friendlists'});
              }
             });
          };
          // Load the SDK's source Asynchronously
          // Note that the debug version is being actively developed and might
          // contain some type checks that are overly strict.
          // Please report such bugs using the bugs tool.
          (function(d, debug){
             var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
             if (d.getElementById(id)) {return;}
             js = d.createElement('script'); js.id = id; js.async = true;
             js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
             ref.parentNode.insertBefore(js, ref);
           }(document, /*debug*/ false));
        </script>
    </head>

    <body>

        <div class="page-wrapper">

            <h1>Search your friends</h1>
            <form class="fbfs" method="get" autocomplete="off">
                <span class="search-clearinput">Clear</span>
                <input type="search" autocomplete="off"
                       name="search" class="search"
                       placeholder="Start typing the name of your friend" />
                <ul class="facebook-friends"></ul>
            </form>

            <h2>Your selected friends</h2>
            <ul class="selected-users">
                <!--
                Faceabook users will be placed in here when the
                compontent user selects one from the dropdown.
                -->
            </ul>

        </div>

        <div id="fb-root"></div>

        <!-- JavaScript libraries and UX based code -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="scripts/jquery.1.8.3-min.js"><\/script>')</script>
        <script src="../node_modules/handlebars/dist/handlebars.js"></script>
        <script src="../dist/fbfs.js"></script>

        <script>
            // Launch FBFS
            $('.fbfs').fbfs({
                'onUserSelect': function (user) {
                    var $user_list = $('.selected-users')
                      , $user_item = $('<li class="su-user">' + user.name + '</li>');
                    $user_list.append($user_item);
                },
                'errorCallback': function (response) {
                    alert('Use must be logged into Facebook!');
                }
            });
        </script>

    </body>

</html>
