/gist:3023937

## gistfile1.html
<html>
<head>
<script type="text/javascript" src="/files/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/files/js/jquery.backstretch.min.js"></script>
<style type="text/css">
.tag {
background: black;
color: white;
width: 200px;
height: 50px;
cursor: pointer;
}

.keyword {
float: left;
background: blue;
border-radius: 3px;
padding: 3px;
margin-left: 10px;
cursor: pointer;
}

.keyword:hover {
background: green;
}

.comment {
margin-top: -45px;
margin-left: 200px;
padding: 15px 12px;
width: 472px;
height: 117px;
font-size: 16px;
font-family: Helvetica;
color: #353535;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 3px 5px RGBA(0,0,0,0.15);
-webkit-box-shadow: inset 0 3px 5px RGBA(0,0,0,0.15);
-moz-box-shadow: inset 0 3px 5px RGBA(0,0,0,0.15);
outline-color: #FBFACB;
resize: none;
}

.keyword-item {
display: block;
margin-bottom: 50px;
}

.comment:focus {
outline: none;
}
</style>
<script type="text/javascript">
var count = 0;
$(function() {

	$.ajaxSetup({
     beforeSend: function(xhr, settings) {
         function getCookie(name) {
             var cookieValue = null;
             if (document.cookie && document.cookie != '') {
                 var cookies = document.cookie.split(';');
                 for (var i = 0; i < cookies.length; i++) {
                     var cookie = jQuery.trim(cookies[i]);
                     // Does this cookie string begin with the name we want?
                 if (cookie.substring(0, name.length + 1) == (name + '=')) {
                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                     break;
                 }
             }
         }
         return cookieValue;
         }
         if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
             // Only send the token to relative URLs i.e. locally.
             xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
         }
     }
});

	$.post("/person/keywords/get/", function(data){
		for(i=0; i<data.length; i++)
		{
			count = count + 1;
			$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
		}
	});

	$(".keyword-sets").on('click', "[id^=keyword]", function(event) {
		event.preventDefault();
		alert("yes");
	});

	$(".comment").click(function(event) {
		return false;
	});

	$(".follow-set").on('click', "#follow-{{username}}", function() {
		$.post("/person/follow/", {'username': '{{username}}'}, function(data){
		if(data == "login")
		{
		window.location.href='/';
		}
		else
		{
		$("#follow-{{username}}").remove();
		$(".follow-set").append('<span class="tag" id="unfollow-{{username}}">Followed</span>');
		}
	 	});
	});
	$(".follow-set").on('mouseover', "#unfollow-{{username}}", function(){
	$(this).text("UnFollow");
	}).on('mouseout', "#unfollow-{{username}}", function(){
	$(this).text("Followed");
	});
	$(".follow-set").on('click', "#unfollow-{{username}}", function() {
		$.post("/person/unfollow/", {'username': '{{username}}'},
function(data){
		if(data == "login")
		{
		window.location.href='/';
		}
		else
		{
		$("#unfollow-{{username}}").remove();
		$(".follow-set").append('<span class="tag" id="follow-{{username}}">Follow</span>');
		}
		});
	});
})
</script>
</head>
<body>
<h1>{{username}}</h1>
{%if not current_user %}
	<div class="follow-set">
	{% if not followed %}
		<span class="tag" id="follow-{{username}}">
		Follow
	{% else %}
		<span class="tag" id="unfollow-{{username}}">
		Followed
	{% endif %}
	</span>
	</div>
	<div class="keywords-set">
	</div>
{% endif %}
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="/files/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/files/js/jquery.backstretch.min.js"></script>
	<style type="text/css">
	.tag {
	background: black;
	color: white;
	width: 200px;
	height: 50px;
	cursor: pointer;
	}

	.keyword {
	float: left;
	background: blue;
	border-radius: 3px;
	padding: 3px;
	margin-left: 10px;
	cursor: pointer;
	}

	.keyword:hover {
	background: green;
	}

	.comment {
	margin-top: -45px;
	margin-left: 200px;
	padding: 15px 12px;
	width: 472px;
	height: 117px;
	font-size: 16px;
	font-family: Helvetica;
	color: #353535;
	border: 1px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 3px 5px RGBA(0,0,0,0.15);
	-webkit-box-shadow: inset 0 3px 5px RGBA(0,0,0,0.15);
	-moz-box-shadow: inset 0 3px 5px RGBA(0,0,0,0.15);
	outline-color: #FBFACB;
	resize: none;
	}

	.keyword-item {
	display: block;
	margin-bottom: 50px;
	}

	.comment:focus {
	outline: none;
	}
	</style>
	<script type="text/javascript">
	var count = 0;
	$(function() {

	$.ajaxSetup({
	beforeSend: function(xhr, settings) {
	function getCookie(name) {
	var cookieValue = null;
	if (document.cookie && document.cookie != '') {
	var cookies = document.cookie.split(';');
	for (var i = 0; i < cookies.length; i++) {
	var cookie = jQuery.trim(cookies[i]);
	// Does this cookie string begin with the name we want?
	if (cookie.substring(0, name.length + 1) == (name + '=')) {
	cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
	break;
	}
	}
	}
	return cookieValue;
	}
	if (!(/^http:./.test(settings.url) \|\| /^https:./.test(settings.url))) {
	// Only send the token to relative URLs i.e. locally.
	xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
	}
	}
	});

	$.post("/person/keywords/get/", function(data){
	for(i=0; i<data.length; i++)
	{
	count = count + 1;
	$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
	}
	});

	$(".keyword-sets").on('click', "[id^=keyword]", function(event) {
	event.preventDefault();
	alert("yes");
	});

	$(".comment").click(function(event) {
	return false;
	});

	$(".follow-set").on('click', "#follow-{{username}}", function() {
	$.post("/person/follow/", {'username': '{{username}}'}, function(data){
	if(data == "login")
	{
	window.location.href='/';
	}
	else
	{
	$("#follow-{{username}}").remove();
	$(".follow-set").append('<span class="tag" id="unfollow-{{username}}">Followed</span>');
	}
	});
	});
	$(".follow-set").on('mouseover', "#unfollow-{{username}}", function(){
	$(this).text("UnFollow");
	}).on('mouseout', "#unfollow-{{username}}", function(){
	$(this).text("Followed");
	});
	$(".follow-set").on('click', "#unfollow-{{username}}", function() {
	$.post("/person/unfollow/", {'username': '{{username}}'},
	function(data){
	if(data == "login")
	{
	window.location.href='/';
	}
	else
	{
	$("#unfollow-{{username}}").remove();
	$(".follow-set").append('<span class="tag" id="follow-{{username}}">Follow</span>');
	}
	});
	});
	})
	</script>
	</head>
	<body>
	<h1>{{username}}</h1>
	{%if not current_user %}
	<div class="follow-set">
	{% if not followed %}
	<span class="tag" id="follow-{{username}}">
	Follow
	{% else %}
	<span class="tag" id="unfollow-{{username}}">
	Followed
	{% endif %}
	</span>
	</div>
	<div class="keywords-set">
	</div>
	{% endif %}
	</body>
	</html>