<!DOCTYPE html>
<html lang="en">
<!-- <html ng-app='Angular'> -->
<head>
    <!-- <script src="node_modules/angular/angular.js"></script> -->
    <!-- <script src="core-js/client/shim.min.js"></script> -->

    <!-- <script src="zone.js/dist/zone.js"></script> -->
    <!-- <script src="systemjs/dist/system.src.js"></script> -->
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <!-- <script src="systemjs.config.js"></script> -->
    <!-- <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script> -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Favicon -->
      <link rel="shortcut icon" href="favicona.ico" type="image/x-icon">
      <link rel="icon" href="favicona.ico" type="image/x-icon">


    <title>Peoplestream</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="css/freelancer2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

    <script>
      var pathname = window.location.pathname;
      var name = cap(pathname.split("/")[pathname.split("/").length - 1].replace(".html","").replace("%20", " ").replace("-", " "));
      var psAPI = window.location.host;
      console.log(name);
      function handle(callback){
        $.getJSON('//' + psAPI + '/getTwitterNameFromName/' + name, function(data){
          callback(data.Twitter.substring(1));
        });
      }

      handle(function(data){
      // Twitter Bio
      var handle = data;
      console.log(handle);
      $.getJSON('//' + psAPI + '/twitterBio/' + handle, function(data){
        $("#skills").text(data.description);
      });

      // Tweets
      $.getJSON('//' + psAPI + '/twitter/' + handle, function(data){
        for(var a=0; a<4; a++){
          $(".tweetcontent:eq(" + a + ")").text(data[a].text)
        }
      });

      // Profile image
      var imageSrc = "";
      $.getJSON('//' + psAPI + '/scrape/' + handle, function(data){
        $('.twimg').attr("src", data.image);
      });

      // News articles
      $.getJSON('//' + psAPI + '/news/' + name, function(data){
        for(var a=0; a<8; a++){
          $(".article:eq(" + a + ")").html("<a href='" + data[a][0].link + "'>" + data[a][0].title + "</a>");
        }
      });

      $("#name").text(name);
      $(".displayhandle").text("@" + handle);
      // Wikipedia infobox
      var banned = ['signature', 'birth date', 'spouse', 'children', 'parents', 'relatives', 'caption'];
      $.getJSON('//' + psAPI + '/wiki/' + name, function(data){
        var result = $.parseJSON(data);
        $.each(result, function(k, v) {
          k = cap(k.replaceAll("_", " "));
          kl = k.toLowerCase();
          vl = v.toLowerCase();
          if(!(banned.indexOf(kl) > -1) && !(vl.indexOf('.jpg') > -1) && !(vl.indexOf('.png') > -1) && !(vl.indexOf('.jpeg') > -1) && !(kl.indexOf('alt') > -1) && !(kl.indexOf('birth') > -1)){
            $("#infobox").append("<tr><th>"+k+"</th><td>" + v + "</td></tr>");
          }
        })});

      String.prototype.replaceAll = function(search, replace) {
        if (replace === undefined) {
          return this.toString();
        }
        return this.split(search).join(replace);
      }

      function cap(str){
        return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
      }
    });
    function cap(str){
      return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }
    </script>
</head>

<body id="page-top" class="index">

    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>

                <a href="index.html"><img  src="logo.png"  style="width:100px"></a>
                <!--<a class="navbar-brand" href="#page-top">PeopleStream</a-->

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#portfolio">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">News</a>
                    </li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img src="https://thebenclark.files.wordpress.com/2014/03/facebook-default-no-profile-pic.jpg" class="twimg img-circle" style="width:230px;height:230px;"alt="..">
                    <div class="intro-text">
                        <span id="name" class="name"></span>
                        <hr class="star-light">
                        <span id="skills">
                          &nbsp;
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Portfolio Grid Section -->
    <section id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row">
                <table id="infobox">
                </table>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>News</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="newswrapper">
                  <ul class="articles">
                    <li class="article"></li>
                    <li class="article"></li>
                    <li class="article"></li>
                    <li class="article"></li>
                    <li class="article"></li>
                    <li class="article"></li>
                  </ul>
                </div>
            </div>
        </div>
    </section>

    <head>
	<meta charset="UTF-8">
	<title>Twitter Client</title>
   	<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">

</head>
<body>

		<span class="first">
			Twitter Activity
			<span class="icon-edit new"></span>
		</span>
		<ul class="timeline">
			<li>
				<div class="avatar">
          <img class="twimg" src="https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg">
					<div class="hover">
						<div class="icon-twitter"></div>
					</div>
				</div>
				<div class="bubble-container">
					<div class="bubble">
					<div class="retweet">
						<div class="icon-retweet"></div>
					</div>
						<h3 class="displayhandle"></h3> <br/>
            <span class="tweetcontent">
              loading...
            </span>
						<div class="over-bubble">
							<div class="icon-mail-reply action"></div>
							<div class="icon-retweet action"></div>
							<div class="icon-star"></div>
						</div>
					</div>

					<div class="arrow"></div>
				</div>
			</li>
			<li>
				<div class="avatar">
					<img class="twimg" src="https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg">
					<div class="hover">
						<div class="icon-twitter"></div>
					</div>
				</div>
				<div class="bubble-container">
					<div class="bubble">
						<h3 class="displayhandle"></h3><br/>
            <span class="tweetcontent">
              loading...
            </span>
            <div class="over-bubble">
							<div class="icon-mail-reply action"></div>
							<div class="icon-retweet action"></div>
							<div class="icon-star"></div>
						</div>
					</div>
					<div class="arrow"></div>
				</div>
			</li>
			<li>
				<div class="avatar">
					<img class="twimg" src="https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg">
					<div class="hover">
						<div class="icon-twitter"></div>
					</div>
				</div>
				<div class="bubble-container">
					<div class="bubble">
					<h3 class="displayhandle"></h3><br/>
          <span class="tweetcontent">
            loading...
          </span>
						<div class="over-bubble">
							<div class="icon-mail-reply action"></div>
							<div class="icon-retweet action"></div>
							<div class="icon-star"></div>
						</div>
					</div>
					<div class="arrow"></div>
				</div>
			</li>
			<li>
				<div class="avatar">
					<img class="twimg" src="https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg">
					<div class="hover">
						<div class="icon-twitter"></div>
					</div>
				</div>
				<div class="bubble-container">
					<div class="bubble">
						<h3 class="displayhandle"></h3><br/>
            <span class="tweetcontent">
              loading...
            </span>
            <div class="over-bubble">
							<div class="icon-mail-reply action"></div>
							<div class="icon-retweet action"></div>
							<div class="icon-star"></div>
						</div>
					</div>
					<div class="arrow"></div>
				</div>
			</li>
		</ul>

	</div>
</body>



    <!-- Footer -->
    <footer class="text-center">
        <!-- <div class="footer-above">
            <div class="container">
                <div class="row">
                    <div class="footer-col col-md-4">
                        <h3>Location</h3>
                        <p>3481 Melrose Place
                            <br>Beverly Hills, CA 90210</p>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>Around the Web</h3>
                        <ul class="list-inline">
                            <li>
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
                            </li>
                            <li>
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
                            </li>
                            <li>
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
                            </li>
                            <li>
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
                            </li>
                            <li>
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-dribbble"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>About Freelancer</h3>
                        <p>Freelance is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="footer-below">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        Copyright &copy; PeopleStream 2017
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
    <div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md">
        <a class="btn btn-primary" href="#page-top">
            <i class="fa fa-chevron-up"></i>
        </a>
    </div>

    <!-- Portfolio Modals -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Project Title</h2>
                            <hr class="star-primary">
                            <img src="img/portfolio/cabin.png" class="img-responsive img-centered" alt="">
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
                            <ul class="list-inline item-details">
                                <li>Client:
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>
                                </li>
                                <li>Date:
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>
                                </li>
                                <li>Service:
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>
                                </li>
                            </ul>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Project Title</h2>
                            <hr class="star-primary">
                            <img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
                            <ul class="list-inline item-details">
                                <li>Client:
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
                                    </strong>
                                </li>
                                <li>Date:
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
                                    </strong>
                                </li>
                                <li>Service:
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
                                    </strong>
                                </li>
                            </ul>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Theme JavaScript -->
    <script src="js/freelancer.js"></script>

</body>

</html>
