<?php
	include 'connect.php';
	$sql = 'SELECT * FROM pictures WHERE status LIKE "%uploaded%" ORDER BY position ASC';
	$stmt = $pdo -> prepare($sql);
	$stmt -> execute();
	$post = $stmt -> fetchAll();
?>
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen,handheld">
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 760px)"/>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/instafeed.min.js"></script>
<script>

	$(document).ready(function(){
		//muestra y oculta el panel de navegacion
		$("#button").on('click',function(){
			$("#nav-header").toggleClass('poof');
		});

	$('#images > div').on('click',function(){
		var $source = $(this).css("background-image");
		$("#bigPicture").css({
			'background-image': $source,
			'display' : 'block'
		})
		$("body").css("overflow","hidden");
	});

	$("#bigPicture").on('click',function(){
		$(this).css("display","none");
		$("body").css("overflow","visible");
	})

	});
</script>

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: '26210237',
        clientId: 'f2c993f2126f4ad890e2cc9fa18a56d2',
        accessToken: '26210237.f2c993f.f3cd2d8ca970475b9f4ce36d077dfd94',
        limit: '20',
        template: '<a target="blank" href="{{link}}"><div id="igphoto" style="background-image:url(\'{{image}}\');background-position: center center;background-repeat: no-repeat;overflow: hidden; background-size: cover;"></div></a>',
        resolution: 'standard_resolution',
        filter: function(image) {
            return image.tags.indexOf('bmx') >= 0;
        },
        after: function () {
        var images = $("#instafeed").find('a');
        $(images.slice(12, images.length)).remove();
    }
    });
    userFeed.run();
</script>

	<title> Gonzalo Bellanti </title>
</head>
<body>
	<?php include 'header.php'; ?>
	<div id="site-wrapper">
		<div id="banner"></div>
		<section>
			<h2> PICTURES </h2>
			<div id="bigPicture">

			</div>
			<div id="images">
				<?php

				//TODO: FETCH IMAGES FROM DB
				foreach ($post as $row) {
					echo '<div style="background-image: url(' . $row -> path . ')"></div>';
				}

				?>
			</div>
		</section>
		<section id="instagram">
			<h2> SOCIAL MEDIA </h2>
			<div id="instafeed">

			</div>
			<a id="instagram-more" href="http://www.instagram.com/gonzalobellanti" target="blank"> See more </a>
		</section>
	</div>
	<footer>
		<div class="footer-box-1">
			<img class="footer-img" src="images/eighties.png"/>
			<img class="footer-img" src="images/nightrider.png"/>
		</div>
		<div class="footer-box-2">
			<a href=""> Website made by me from scratch </a>
		</div>
	</footer>
</body>
</html>
