jimmyhchan/demo.html

## demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>LinkedIn Colleague Search</title>
  <style type="text/css" media="screen">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
      outline: 0;
    }
    body {
      line-height: 1;
      color: black;
      background: white;
    }
    ol, ul {
      list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
      border-collapse: separate;
      border-spacing: 0;
    }
    caption, th, td {
      text-align: left;
      font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: "";
    }
    blockquote, q {
      quotes: "" "";
    }
  </style>
  <style type="text/css" media="screen">
    #body {
      margin: 0 auto;
      width: 252px;
    }

    ul.user-list {
      list-style: none;
      width: 252px;
    }

    li.user {
      float: left;
      height: 61px;
      width: 61px;
      position: relative;
      margin-right: 2px;
      margin-bottom: 2px;
    }

    .user.first {
      clear: left;
    }

    .profile-photo {
      height: 61px;
      width: 61px;
      background-color: #AAA;
      cursor: pointer;
    }

    .profile-info {
      display: none;
      position: absolute;
      bottom: -150px;
      left: 0;
      height: 150px;
      width: 200px;
      z-index: 20;
      background-color: #DDD;
    }

    .profile-info .content {
      position: relative;
    }

    .profile-info .close {
      border: 1px solid black;
      text-align: center;
      line-height: 20px;
      height: 20px;
      width: 20px;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  </style>
  <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="https://github.com/janl/mustache.js/raw/master/mustache.js"></script>
  <script type="text/javascript">
  // WARNING: If your XDRPC is on same host, you MUST adjust document.domain to the lowest common denominator
  document.domain = "linkedin.biz";
  </script>
</head>
<body style="background: #ccc">
  <p>
    Look at moo!
  </p>
  <script type="text/javascript" src="http://platform.linkedin.com/in.js">
    api_key: F1o04RFEfDGcJ_Nu8WhuPpk2Nx8sr8h3RhDT2FIz8dTiRBSMSi2tOEqEjUln9U3Q
    authorize: true
    extensions: SearchCompany@http://medwards-md.linkedin.biz/~medwards/search/searchcompany.js
  </script>
  <script type="IN/SearchCompany" data-id="1337"></script>
</body>
</html>

## searchcompany.js
/*jslint white:false */
/*globals IN, Mustache, Sslac, console */
IN.$extensions("SearchCompany", function SearchCompany() {
  // NOTE: This is required for development in linkedin.biz domains
  var ORIGINAL_XDURL = IN.ENV.url.xd_us_html;
  // END REQUIRED

  Sslac.Class("IN.Tags.SearchCompany").Extends("IN.Tags.Base").Constructor(function(el, attributes) {
    this.Parent(el, attributes);
    this.companyId = attributes.id || "";
    this.template = [
              '<h3>Find your colleagues</h3>',
              '<form>',
              '  <input type="text" name="keywords" placeholder="Type a name, postion or skill" >',
              '  </input><input type="submit" id="company-search-submit" name=></input>'+
              '</form>',
              '<ul class="user-list">',
              '{{#users}}',
              '  <li class="user">',
              '    <img src="{{pictureUrl}}{{^pictureUrl}}http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png{{/pictureUrl}}" class="profile-photo"/>',
              '    <div class="profile-info">',
              '      <div class="content">',
              '        <h2>{{firstName}} {{lastName}}</h2>',
              '        <h3>{{headline}}</h3>',
              '        <h4>{{#location}}{{name}}{{/location}}</h4>',
              '        <div class="close">X</div>',
              '      </div>',
              '    </div>',
              '  </li>',
              '{{/users}}',
              '</ul>'
            ].join('');

      IN.Event.onOnce(IN, "auth", function () {
        //do initial search
        this.doSearch();
      }, this);


      $('.user-list').ready(function () {
        var people = $('.profile-photo');

        people.click(function () {
          $('.user .profile-info').hide()
          $(this).siblings('.profile-info').show();
        });

        $('.profile-info .close').click(function () {
          $(this).parents('.profile-info').hide();
        })
      });

  })
  .Method("render", function( result ){
      // Parse data and render.
      var view = { users: result.people.values };
      var markup = Mustache.to_html(this.template, view);
      // console.log(markup);
      this.el().innerHTML = markup;
  })
  .Method("doSearch", function( keywords, callback ){
      IN.API.Raw("people-search:(people:(id,first-name,last-name,headline,distance,picture-url,location,site-standard-profile-request,industry))?count=20&facet=current-company," + this.companyId).result(function peopleSearchCallback(result) {
        // Do stuff here.
        this.render(result);
      }, this);
  });

    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = "http://jchan-md.linkedin.biz/~jchan/search/xdrpc.html";
    // END REQUIRED


    // var win = new IN.Objects.SmartWindow({
    //   mode: "embedded",
    //   url: "http://jheuser-md.linkedin.biz/~hackday/hackday/plugin/plugin.html"
    // });
    // win.place(this.el());

    // NOTE: This is required for development on linken.biz domains
    IN.ENV.url.xd_us_html = ORIGINAL_XDURL;
    // END REQUIRED

  IN.addTag("SearchCompany", IN.Tags.SearchCompany);

  // console.log("HelloWorld Extension has Executed");
});
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<title>LinkedIn Colleague Search</title>
	<style type="text/css" media="screen">
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}
	/* remember to define focus styles! */
	:focus {
	outline: 0;
	}
	body {
	line-height: 1;
	color: black;
	background: white;
	}
	ol, ul {
	list-style: none;
	}
	/* tables still need 'cellspacing="0"' in the markup */
	table {
	border-collapse: separate;
	border-spacing: 0;
	}
	caption, th, td {
	text-align: left;
	font-weight: normal;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: "";
	}
	blockquote, q {
	quotes: "" "";
	}
	</style>
	<style type="text/css" media="screen">
	#body {
	margin: 0 auto;
	width: 252px;
	}

	ul.user-list {
	list-style: none;
	width: 252px;
	}

	li.user {
	float: left;
	height: 61px;
	width: 61px;
	position: relative;
	margin-right: 2px;
	margin-bottom: 2px;
	}

	.user.first {
	clear: left;
	}

	.profile-photo {
	height: 61px;
	width: 61px;
	background-color: #AAA;
	cursor: pointer;
	}

	.profile-info {
	display: none;
	position: absolute;
	bottom: -150px;
	left: 0;
	height: 150px;
	width: 200px;
	z-index: 20;
	background-color: #DDD;
	}

	.profile-info .content {
	position: relative;
	}

	.profile-info .close {
	border: 1px solid black;
	text-align: center;
	line-height: 20px;
	height: 20px;
	width: 20px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	}
	</style>
	<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="https://github.com/janl/mustache.js/raw/master/mustache.js"></script>
	<script type="text/javascript">
	// WARNING: If your XDRPC is on same host, you MUST adjust document.domain to the lowest common denominator
	document.domain = "linkedin.biz";
	</script>
	</head>
	<body style="background: #ccc">
	<p>
	Look at moo!
	</p>
	<script type="text/javascript" src="http://platform.linkedin.com/in.js">
	api_key: F1o04RFEfDGcJ_Nu8WhuPpk2Nx8sr8h3RhDT2FIz8dTiRBSMSi2tOEqEjUln9U3Q
	authorize: true
	extensions: SearchCompany@http://medwards-md.linkedin.biz/~medwards/search/searchcompany.js
	</script>
	<script type="IN/SearchCompany" data-id="1337"></script>
	</body>
	</html>
	/jslint white:false /
	/globals IN, Mustache, Sslac, console /
	IN.$extensions("SearchCompany", function SearchCompany() {
	// NOTE: This is required for development in linkedin.biz domains
	var ORIGINAL_XDURL = IN.ENV.url.xd_us_html;
	// END REQUIRED

	Sslac.Class("IN.Tags.SearchCompany").Extends("IN.Tags.Base").Constructor(function(el, attributes) {
	this.Parent(el, attributes);
	this.companyId = attributes.id \|\| "";
	this.template = [
	'<h3>Find your colleagues</h3>',
	'<form>',
	' <input type="text" name="keywords" placeholder="Type a name, postion or skill" >',
	' </input><input type="submit" id="company-search-submit" name=></input>'+
	'</form>',
	'<ul class="user-list">',
	'{{#users}}',
	' <li class="user">',
	' <img src="{{pictureUrl}}{{^pictureUrl}}http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png{{/pictureUrl}}" class="profile-photo"/>',
	' <div class="profile-info">',
	' <div class="content">',
	' <h2>{{firstName}} {{lastName}}</h2>',
	' <h3>{{headline}}</h3>',
	' <h4>{{#location}}{{name}}{{/location}}</h4>',
	' <div class="close">X</div>',
	' </div>',
	' </div>',
	' </li>',
	'{{/users}}',
	'</ul>'
	].join('');

	IN.Event.onOnce(IN, "auth", function () {
	//do initial search
	this.doSearch();
	}, this);


	$('.user-list').ready(function () {
	var people = $('.profile-photo');

	people.click(function () {
	$('.user .profile-info').hide()
	$(this).siblings('.profile-info').show();
	});

	$('.profile-info .close').click(function () {
	$(this).parents('.profile-info').hide();
	})
	});

	})
	.Method("render", function( result ){
	// Parse data and render.
	var view = { users: result.people.values };
	var markup = Mustache.to_html(this.template, view);
	// console.log(markup);
	this.el().innerHTML = markup;
	})
	.Method("doSearch", function( keywords, callback ){
	IN.API.Raw("people-search:(people:(id,first-name,last-name,headline,distance,picture-url,location,site-standard-profile-request,industry))?count=20&facet=current-company," + this.companyId).result(function peopleSearchCallback(result) {
	// Do stuff here.
	this.render(result);
	}, this);
	});

	// NOTE: This is required for development on linken.biz domains
	IN.ENV.url.xd_us_html = "http://jchan-md.linkedin.biz/~jchan/search/xdrpc.html";
	// END REQUIRED


	// var win = new IN.Objects.SmartWindow({
	// mode: "embedded",
	// url: "http://jheuser-md.linkedin.biz/~hackday/hackday/plugin/plugin.html"
	// });
	// win.place(this.el());

	// NOTE: This is required for development on linken.biz domains
	IN.ENV.url.xd_us_html = ORIGINAL_XDURL;
	// END REQUIRED

	IN.addTag("SearchCompany", IN.Tags.SearchCompany);

	// console.log("HelloWorld Extension has Executed");
	});