chirags/gist:1296676

## gistfile1.html
<!--
 * Copyright (c) 2011 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->
<!doctype html>
<html><head>
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//github.com/janl/mustache.js/raw/master/mustache.js"></script>
<style>
  body { font-family: 'Droid Sans', sans-serif; background: #F1F1F1; }
  ul { padding: 0; }
  li { list-style-type: none; }
  #request { text-align: center; font-size: 24pt; margin-top: 30px; }
  #request input {
    font-size: 24pt;
    text-align: center;
    color: #77a;
    background: white url(http://www.google.com/images/icons/product/gplus-32.png) no-repeat left
  }
  #update {
    border-top: 1px solid #EEE;
    clear: both;
    font-size: 13px;
    line-height: 1.4;
    padding: 0 20px;
    position: relative;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  #container {
    background: white;
    margin: 0 auto;
    position: relative;
    width: 960px;
  }
</style>
<script>
var SEARCH_URL = "https://www.googleapis.com/plus/v1/activities?key=INSERT_GOOGLE_API_KEY&sortBy=best&query=";
var params = {dataType: 'jsonp'};
$(document).ready(function() {
  var TEMPLATE = $('#update_template').html();
  $('#message').keyup(function() {
    params.url = SEARCH_URL + document.getElementById("message").value;
    $.ajax(params).done(onData);
  });
  function onData(resp) {
    if (resp.items) {
      $('#updates').html(Mustache.to_html(TEMPLATE, resp));
    }
  }
});
</script>
</head>
<body>
<div id="request"><span><input id="message"/></span></div>
<div id="container"><ul id="updates"></ul></div>
<script id="update_template" type="text/x-mustache-tmpl">
{{%IMPLICIT-ITERATOR}}
{{#items}}
  <li id="update">
    {{#actor}}
    <h3><span><img src="{{#image}}{{url}}{{/image}}?sz=48">
      {{displayName}}
    </span></h3>
    {{/actor}}
    {{#object}}
      {{#attachments}}
        {{#image}}<img src="{{url}}" />{{/image}}
      {{/attachments}}
    <div class="content">{{{content}}}</div>
    {{/object}}
  </li>
{{/items}}
</script>
</body></html>
	<!--
	* Copyright (c) 2011 Google Inc.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	-->
	<!doctype html>
	<html><head>
	<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet'>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="//github.com/janl/mustache.js/raw/master/mustache.js"></script>
	<style>
	body { font-family: 'Droid Sans', sans-serif; background: #F1F1F1; }
	ul { padding: 0; }
	li { list-style-type: none; }
	#request { text-align: center; font-size: 24pt; margin-top: 30px; }
	#request input {
	font-size: 24pt;
	text-align: center;
	color: #77a;
	background: white url(http://www.google.com/images/icons/product/gplus-32.png) no-repeat left
	}
	#update {
	border-top: 1px solid #EEE;
	clear: both;
	font-size: 13px;
	line-height: 1.4;
	padding: 0 20px;
	position: relative;
	box-sizing: border-box;
	word-wrap: break-word;
	}
	#container {
	background: white;
	margin: 0 auto;
	position: relative;
	width: 960px;
	}
	</style>
	<script>
	var SEARCH_URL = "https://www.googleapis.com/plus/v1/activities?key=INSERT_GOOGLE_API_KEY&sortBy=best&query=";
	var params = {dataType: 'jsonp'};
	$(document).ready(function() {
	var TEMPLATE = $('#update_template').html();
	$('#message').keyup(function() {
	params.url = SEARCH_URL + document.getElementById("message").value;
	$.ajax(params).done(onData);
	});
	function onData(resp) {
	if (resp.items) {
	$('#updates').html(Mustache.to_html(TEMPLATE, resp));
	}
	}
	});
	</script>
	</head>
	<body>
	<div id="request"><span><input id="message"/></span></div>
	<div id="container"><ul id="updates"></ul></div>
	<script id="update_template" type="text/x-mustache-tmpl">
	{{%IMPLICIT-ITERATOR}}
	{{#items}}
	<li id="update">
	{{#actor}}
	<h3><span><img src="{{#image}}{{url}}{{/image}}?sz=48">
	{{displayName}}
	</span></h3>
	{{/actor}}
	{{#object}}
	{{#attachments}}
	{{#image}}<img src="{{url}}" />{{/image}}
	{{/attachments}}
	<div class="content">{{{content}}}</div>
	{{/object}}
	</li>
	{{/items}}
	</script>
	</body></html>