<?php
require_once('includes/common.php');
include('includes/functions.php');


	$t=mysql_query("SELECT * FROM `prenotazioni` ORDER BY id DESC LIMIT 20") or die("Non sono riuscito a trovare le prenotazioni ".mysql_error());
	$prenotazioni = array();
	if(mysql_num_rows($t)>0){
		while ($riga = mysql_fetch_assoc($t)) {
			$prenotazioni[$riga['id']] = array(
			"chi" => $riga['chi'],
			"cosa" => $riga['cosa'],
			"quando" => $riga['quando'],
			"quanto" => $riga['quanto'],
			"cattivi" => $riga['cattivi'],
			"destinatari" => $riga['destinatari']);
		}
	}
	
	$totale = 0;
	$r=mysql_query("SELECT count(id) as cnt FROM `prenotazioni`") or die("Non sono riuscito a trovare le prenotazioni ".mysql_error());
	if(mysql_num_rows($r)>0){
		while ($riga = mysql_fetch_assoc($r)) {
			$totale = $riga['cnt'];
		}
	}
	mysql_free_result($t);
	mysql_free_result($r);

?>

<html lang="en"><head>
    <meta charset="utf-8">
<title>Ecco le prenotazioni per Ponte Vecchio offerte dalla citt&agrave; di Firenze sino ad ora</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

<link rel="stylesheet" href="css/chosen.css" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" href="css/bootstrap.min.css"media="screen">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chosen.jquery.js"></script>

    <style>

    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
      background-color: #f5f5f5;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 60px;
    }
    .carousel-inner{
    	-webkit-box-shadow: 0 4px 8px rgba(114, 112, 112, 1);
		-moz-box-shadow: 0 4px 8px rgba(114, 112, 112, 1);
		box-shadow: 0 4px 8px rgba(114, 112, 112, 1);
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 500px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
    }

    .carousel-caption {
      background-color: #000;
      filter: alpha(opacity=60);
      -moz-opacity:0.6;
      -khtml-opacity: 0.6;
      opacity: 0.6;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }





    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }

    }
    
    #form{
padding: 19px 29px 29px;
margin: -80 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #c9c9c9;
border-radius: 10px;
    }
    #form input{
    	height: 30px;
    }
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

  <body>
<div><a class="btn" href="#top" id="toTop" style="left: 10px;top: 10px;position: fixed; display: none;"><i class="icon-arrow-up"></i>Torna in cima</a></div>



    <!-- Carousel
    ================================================== -->
    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/ponte_vecchio.jpg" alt="Ponte Vecchio">
          <div class="container">
            <div class="carousel-caption">
              <h1>Lista delle prenotazioni</h1>
              <p class="lead">Ecco le prenotazioni per Ponte Vecchio offerte dalla citt&agrave; di Firenze sino ad ora</p>
              <p><a href="prenota_ponte_vecchio.html" class="btn btn-primary btn-large">Prenota anche tu!</a></p>
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.carousel -->



    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      <div class="row" id="form">
        <div class="span11">
                <br />
        <br />
        <br />
        <br />
        <h2>Ci sono attualmente <?php echo $totale ?> prenotazioni</h2>
<input type="search" id="cerca" placeholder="cerca fra le prenotazioni" class="span8"><br />
	      	<ul id="lista_prenotazioni">
        <?php foreach($prenotazioni as $id => $riga){
			echo "<li id='".$id."'><h3 class='text-info'>#".$id." ".ucfirst($riga['cosa'])."</h3> <strong>" . ucfirst($riga['chi']) . "</strong> ha prenotato Ponte Vecchio il giorno " . $riga['quando'] . " <a href='prenota.php?id=".$id."'>vedi</a></li>";    		
        }
        ?>
        	</ul><a href="javascript:void(0);" id="loadMore" class="btn btn-primary span8"><i class="icon-white icon-refresh"></i> Carica le prossime 20</a>
        	
        <br />
        <br />
        <br />
        <br />
<a href="prenota_ponte_vecchio.html" class="btn btn-success">Prenota anche tu!</a>&nbsp;
<a target="_blank" class="btn btn-primary" href="http://www.facebook.com/prenotaPonteVecchio">Seguici su Facebook <i class="icon-white icon-thumbs-up"></i></a>
Condividi su: 
<a target="_blank" class="btn" href="http://www.facebook.com/sharer.php?u=http://play.trombi.it/prenota_ponte_vecchio.html"><img src="images/facebook.png"  alt="Facebook" title="Facebook"border="null" /></a>
<a target="_blank" href="https://twitter.com/share" class="btn twitter-share-button" data-url="hhttp://play.trombi.it/prenota_ponte_vecchio.html" data-text="Prenota anche tu una serata a Palazzo Vecchio!" data-lang="it" data-size="large" data-related="gtrombi" data-hashtags="prenotaPonteVecchio,grazieMatteoRenzi,renzi"> </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a target="_blank" class="btn" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http://play.trombi.it/prenota_ponte_vecchio.html"><img src="images/googleplus.png" alt="Google+" title="Google+" border="null" /></a>

        </div><!-- /.span4 -->
      </div><!-- /.row -->



      <!-- FOOTER -->
      <footer>
        <p>Pur lasciando la totale responsabilità di quel che viene scritto a chi lo scrive, mi riservo la libertà di eliminare post fuori luogo, a mio insindacabile giudizio!</p>
	<p>un ringraziamento a <a target="_blank" href="http://paniscus.org">Lisa</a> per i gentili e preziosi consigli</p>
        <p><a class="btn" href="http://giacomo.trombi.it"><img src="images/blogger.png" border="null" width="24px" height="24px" /> blog del trombi</a> <a class="btn" href="http://fugadeibaccelli.trombi.it/"><img src="images/wordpress.png" border="null" width="24px" height="24px" /> la fuga dei baccelli</a> <a class="btn" href="http://www.youtube.com/user/gtrombi/videos"><img src="images/you_tube.png" border="null" width="24px" height="24px" /> youtube channel</a></p>
      </footer>

    </div><!-- /.container -->

	<div id="modalWindow" class="modal hide fade">
	</div>
    <script>
$(function() {
	
	$('#cerca').autocomplete({
	      source: function( request, response ) {
		$.ajax({
		  url: "http://play.trombi.it/cercaPrenotazione.php",
		  dataType: "json",
		  type: "get",
		  data: {
		    term: request.term
		  },
		  success: function( data ) {
		    response( $.map( data, function( item ) {
		      return {
		        label: item.nome,
		        value: item.id
		      }
		    }));
		  }
		});
	      },
	      minLength: 3,
	      select: function( event, ui ) {
		$('#cerca').val('');
		$.ajax({
		  url: "http://play.trombi.it/prenotazione.php",
		  data: { id: ui.item.value },
		  type: 'post',
		  success: function( data ) {
			$('#modalWindow').html(data);
			$('#modalWindow').modal();
			$('#closeModal').click(function(){
				$('#modalWindow').modal('hide')
			});
		  }
	      });
	     }
	    });
	
	


	$('#toTop').click(function(){$(window).scrollTop()});
	$(window).scroll(function() {
	    if ($(this).scrollTop()) {
		$('#toTop:hidden').stop(true, true).fadeIn();
	    } else {
		$('#toTop').stop(true, true).fadeOut();
	    }
	});

	$('#loadMore').click(function(){
		$('#loadMore').hide();
		var lastId = $('li').last().attr('id');
 		$.ajax({
			type: 'POST',
			url: 'http://play.trombi.it/vista_prenotazioni.php',
			data: {id: lastId},
			success: function(html){
				if(html.length > 50){
					$('#lista_prenotazioni').append(html);
					$('li:not(visible)').each(function(){
						$(this).show('slow');
					});
					$('#loadMore').show();
				}else{
					$('#loadMore').hide();
				}				
			}
		});
       	});
});
</script>
</body></html>
