<?php

include('includes/connect.php');
include('includes/functions.php');

$sql = "
	SELECT
	  projecten.id_project,
	  projecten.id_categorie,
	  projecten.datum,
	  projecten.naam,
	  projecten.opdrachtgever,
	  projecten.website,
	  projecten.locatie,
	  projecten.aankomend,
	  projecten.werkzaamheden,
	  projecten.beschrijving,
	  projecten.hoofdfoto,
	  categorie.categorie
	FROM
	  categorie
	  RIGHT OUTER JOIN projecten ON (categorie.id_categorie = projecten.id_categorie)
	WHERE projecten.aankomend = 'F'
	ORDER BY projecten.datum DESC
";

$result = mysql_query($sql);

$sql_categorie = "
	SELECT
	  categorie.id_categorie,
	  categorie.categorie
	FROM
	  categorie
";

$result_categorie = mysql_query($sql_categorie);

?>
<!DOCTYPE html>
<html lang="en-US">
<head>

<!-- Basic Page Head -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>InvertEvents | Portfolio</title>
<meta name="description" content="Invert Events is een bedrijf dat al sinds 2005 gespecialiseerd is in de (site) productie van evenementen, kermissen en festivals. Enkele voorbeelden waarvoor Invert Events voor ingeschakelt is: Sinterklaas intocht Eindhoven, Ameezing Eindhoven, Best kept secret festival, PSV Kampioenschap, Musical Carnaval X, Lakedance festival, Pop on top en nog veel meer. Wij hebben de kennis over de facilitaire en logistieke voorbereidingen, indeling en inkoop van de juiste materialen voor uw evenement.">
<meta name="author" content="Visual Act">
<meta name="keywords" content="kermis festival evenementen amazing carnaval organisatie psv eindhoven inkoop gespecialiseerd evenement">

<!-- Mobile Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- Favicons -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="assets/img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/apple-touch-icon-144x144-precomposed.png">

<!-- Css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bxslider.css">
<link rel="stylesheet" type="text/css" href="assets/css/font.awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/magnific.popup.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">

<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">

</head>
<body>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Site Loader -->
<div class="site-loader">
	<img src="assets/img/loader.gif" alt="Loading">
</div>
<!-- Site Loader End -->

<!-- Site Back Top -->
<div class="site-back-top" title="Back to top">
	<i class="fa fa-angle-up"></i>
</div>
<!-- Site Back Top End -->

<!-- Site Header -->
<header>
	<div class="site-wrapper">
        <div class="site-header">
            <!-- Header Top -->
            <div class="header-top">
                <ul class="clearfix">
                    <li class="ht-phone"><i class="fa fa-phone"></i> &nbsp; +31 6 24 28 18 40</li>
                    <li class="ht-lang">
                        <div class="fm-social ">
                   			 <ul class="social-icons social-round clearfix">
                       			 <li class="facebook"><a href="https://www.facebook.com/InvertEvents" target="blank"><i class="fa fa-facebook"></i></a></li>
                        		 <li class="linkedin"><a href="http://nl.linkedin.com/pub/swen-roux/1a/2b3/118" target="blank"><i class="fa fa-linkedin"></i></a></li>
                    </ul>

                </div>
                    </li>
                    <li class="ht-search">

                    </li>
                </ul>
            </div>
            <!-- Header Top End -->

            <!-- Header Bottom -->
            <div class="header-bottom">
                <div class="hb-toggle"><i class="fa fa-bars"></i></div>
                <div class="hb-logo"><a href="index.php"><img src="assets/img/logo.png" alt="Invert events"></a></div>
                <div class="hb-menu">
                    <nav>
                        <ul class="clearfix">
							<li><a href="index.php" >Home</a></li>
                            <li><a href="over_invertevents.php">Wat doet Invert Events</a></li>
                            <li><a href="portfolio.php">Portfolio</a></li>
                            <li><a href="contact-1.php">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- Header Bottom End -->
        </div>
    </div>
    <div class="site-banner">
	<div class="banner-image">
    	<img src="assets/img/slide-1.jpg" alt="Banner">
    </div>
    <div class="banner-caption shadow">
    	<div class="caption-wrapper">
            <h1>PORTFOLIO</h1>
            <p>&nbsp;</p>
        </div>
    </div>
</div>
</header>
<!-- Site Header End -->

<!-- Site Main -->
<main>
    <div class="site-wrapper">
        <!-- Section Breadcrumb -->
        <div class="site-block white" id="section-breadcrumb">
            <ol class="breadcrumb">
                <li><a href="index.html">Home</a></li>
                <li class="active">portfolio</li>
            </ol>
        </div>
        <!-- Section Breadcrumb End -->

        <!-- Section Filter -->
        <section class="site-block grey" id="section-works-filter">
            <div class="works-filter">
                <div class="row">
                    <div class="col-md-3">
                        <h5>Filter op:</h5>
                    </div>
                    <div class="col-md-9 align-right">
                        <ul class="clearfix">

                            <li class="active"><a href="#" class="all">Alle projecten</a></li>
						<?php

						while($row = mysql_fetch_array($result_categorie)){
							$id_categorie					= $row[0];
							$categorie						= $row[1];
						?>
                            <li><a href="#" class="<?php echo $id_categorie?>"><?php echo $categorie; ?></a></li>
						<?php } ?>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- Section Filter End -->

        <!-- Section Works -->
        <section class="site-block white" id="section-works">
            <h2 class="section-title">Onze gerealiseerde projecten</h2>
            <div class="works-list type-one">
                <div class="row">
<?php
		while($row = mysql_fetch_array($result)){

			$id_project					= $row[0];
			$id_categorie				= $row[1];
			$datum						= NLDatum($row[2]);
			$naam						= $row[3];
			$opdrachtgever				= $row[4];
			$website					= $row[5];
			$locatie					= $row[6];
			$aankomend					= $row[7];
			$werkzaamheden				= $row[8];
			$beschrijving				= $row[9];
			$hoofdfoto					= $row[10];
			$project_categorie			= $row[11];
?>
                    <div class="col-md-4 col-sm-6 work <?php echo $id_categorie; ?>">
                        <div class="work-item">
                            <div class="wi-over">
                                <h4><?php echo $naam; ?></h4>
                                <h5><?php echo $project_categorie; ?></h5>
                                <ul class="clearfix">
                                    <li><a href="portfolio-detail.php?id_project=<?php echo $id_project; ?>"><i class="fa fa-file-text-o"></i></a></li>
                                </ul>
                            </div>
                            <img src="fotoos/<?php echo $hoofdfoto; ?>" alt="<?php echo $naam ?>" height="200" class="img-full">
                        </div>
                    </div>
<?php } ?>
                </div>
            </div>
        </section>
        <!-- Section Works End -->
    </div>
</main>
<!-- Site Main End -->

<?php include('includes/footer.inc'); ?>