/gist:c132a4939fedddaaffa6 Secret

## gistfile1.pl
use Mojolicious::Lite;

get '/product' => sub {
	my $self = shift;
	my $prodID = $self->param('product');
	my $url = 'http://www.thinkgeek.com' . $prodID;
	my $price = $self->ua->get($url)->res->dom->find('form#buy h3')->text;
	my $stock = $self->ua->get($url)->res->dom->find('form#buy p.availability:first_child span.in_stock:first_child')->text;
	my @results = ($price, $stock);
	$self->render(json => @results);
};

get '/list' => sub {
	my $self = shift;
	my $url = "http://www.thinkgeek.com/interests/starwars/?icpg=logo_starwars";
	my @urls = $self->ua->get($url)->res->dom->find('.product a')->attr('href')->each;
	my @titles = $self->ua->get($url)->res->dom->find('.product a h4')->text->each;#eeeh kinda relying a bit much on these two arrays always being in the same order... not safe
	$self->render(json =>  (@urls, @titles));
};

get '/' => 'root';

app->start;

__DATA__
@@ root.html.ep
<html>
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>

		<div id="main_content">

		</div>
		<div id="dummy_content" style="display:none">
			<div class="product_container" style="float:left">
				<h2 class="title"><a href="http://thinkgeek.com"></a></h2>
				<button class="refreshButtons">Check Price</button>
				<h3 class="price_stock">Click to Check Price</h3>
			</div>
		</div>
		<script>
			function getPrice(e){
				\$.getJSON('/product?product=' + \$(e).attr('ref'), function(data) {
					var price = data[0]
					var stock = data[1];
					\$(e).parent().find('h3').text(price + " -- " +  stock);
				});

			}
			\$(document).ready(function() {
				\$.getJSON('/list', function(data) {
					var template = \$('#dummy_content').html();
					var urls = data[0];
					var titles = data[1];
					for(var i = 0; i < urls.length; i++){
						var url = urls[i];
						var title = titles[i];
						var tmp = template;
						var href = \$(tmp).find('h2 a').attr('href');
						tmp = \$(tmp).find('h2 a').attr('href', href + url);
						tmp = \$(tmp).find('h2 a').text(title);
						tmp = \$(tmp).find('button').attr('ref', urls);
						\$('#main_content').append(tmp);
					}
					\$('.refreshButtons').on('click', function(){
						getPrice(this);
					});
				});
			});
		</script>
	</body>
</html>
	use Mojolicious::Lite;

	get '/product' => sub {
	my $self = shift;
	my $prodID = $self->param('product');
	my $url = 'http://www.thinkgeek.com' . $prodID;
	my $price = $self->ua->get($url)->res->dom->find('form#buy h3')->text;
	my $stock = $self->ua->get($url)->res->dom->find('form#buy p.availability:first_child span.in_stock:first_child')->text;
	my @results = ($price, $stock);
	$self->render(json => @results);
	};

	get '/list' => sub {
	my $self = shift;
	my $url = "http://www.thinkgeek.com/interests/starwars/?icpg=logo_starwars";
	my @urls = $self->ua->get($url)->res->dom->find('.product a')->attr('href')->each;
	my @titles = $self->ua->get($url)->res->dom->find('.product a h4')->text->each;#eeeh kinda relying a bit much on these two arrays always being in the same order... not safe
	$self->render(json => (@urls, @titles));
	};

	get '/' => 'root';

	app->start;

	__DATA__
	@@ root.html.ep
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>

	<div id="main_content">

	</div>
	<div id="dummy_content" style="display:none">
	<div class="product_container" style="float:left">
	<h2 class="title"><a href="http://thinkgeek.com"></a></h2>
	<button class="refreshButtons">Check Price</button>
	<h3 class="price_stock">Click to Check Price</h3>
	</div>
	</div>
	<script>
	function getPrice(e){
	\$.getJSON('/product?product=' + \$(e).attr('ref'), function(data) {
	var price = data[0]
	var stock = data[1];
	\$(e).parent().find('h3').text(price + " -- " + stock);
	});

	}
	\$(document).ready(function() {
	\$.getJSON('/list', function(data) {
	var template = \$('#dummy_content').html();
	var urls = data[0];
	var titles = data[1];
	for(var i = 0; i < urls.length; i++){
	var url = urls[i];
	var title = titles[i];
	var tmp = template;
	var href = \$(tmp).find('h2 a').attr('href');
	tmp = \$(tmp).find('h2 a').attr('href', href + url);
	tmp = \$(tmp).find('h2 a').text(title);
	tmp = \$(tmp).find('button').attr('ref', urls);
	\$('#main_content').append(tmp);
	}
	\$('.refreshButtons').on('click', function(){
	getPrice(this);
	});
	});
	});
	</script>
	</body>
	</html>