<?php

/**
 * include some common code (like we did in the 90s)
 * People still do this? ;)
 */
include_once './common.php';

/**
 * Do we already have a valid Access Token or need to go get one?
 */
if (!isset($_SESSION['TWITTER_ACCESS_TOKEN']) && isset($_GET['CONNECT']) ) {
    /**
     * Guess we need to go get one!
     */
    $token = $consumer->getRequestToken();
    $_SESSION['TWITTER_REQUEST_TOKEN'] = serialize($token);

    /**
     * Now redirect user to Twitter site so they can log in and
     * approve our access
     */
    $consumer->redirect();
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ENMI 2010 - Live Video and Annotation</title>

    <!-- Framework CSS -->
    <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

    <!-- Import fancy-type plugin for the sample page. -->
    
	<link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="res/css/custom.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="res/css/tabs-slideshow.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
	<link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" >

	<!-- JAVASCRIPT --> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<!--<script type="text/javascript" src="res/jquery.tools/jquery.tools.min.js"></script>-->
	<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
	<script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="res/niceforms/niceforms.js"></script>
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	
	<!-- FONT -->
	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'>

	<script type="text/javascript">	
	$(document).ready(function() {

			$(".loginbutton").click(function() {
				document.location.href="<?php URL_ROOT ?>?CONNECT=true";
			});
			$("#IDENTIFIER").click(function() {
				document.location.href="<?php URL_ROOT ?>?CONNECT=true";
			});
			$("#ACCES").click(function() {
				document.location.href="client.php";
			});
			$(".archivesVideoBox").mouseover(function() {
				//$(this).animate({'backgroundColor'});
				//$(this).css({'backgroundColor':'#d6d6d6'});
				$(this).css({'backgroundColor':'#fff'});
				$(this).cursor = "pointer";
			}).mouseout(function(){
				//$(this).css({'backgroundColor':'#f6f6f6'});
				$(this).css({'backgroundColor':'#f2f2f2'});
			});
			
			<!-- SLIDER -->
			$(".slidetabs").tabs(".images > div", {
				effect: 'fade',
				rotate: false,
				interval: 4000,
				clickable:false,
			}).slideshow();		

		$(".slidetabs").data("slideshow").play();
		});



		
	</script>
	<script type="text/javascript">
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-9955524-3']);
	  _gaq.push(['_setDomainName', '.iri.centrepompidou.fr']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
  </head>
  <body>
    <div class="container">
      <img src="images/ENMI_2010_logo.gif" class="logo">
	  <ul class="menu"> 
	  <li class="menuUnderline"><a href="<?php URL_ROOT ?>?CONNECT=true" target="_blank" class="menuLink">S'identifier</a></li>
	  <li class="menuUnderline"><a href="about.php" target="_blank" class="menuLink">A propos</a></li>
	  <li ><a href="mailto:contact@iri.centrepompidou.fr" class="menuLink" >Contact</a></li>
	  </ul>

	
	  <div class="introBox">

		  <div class="slider">
		  <!-- container for the slides -->
			<div class="images">
				<!-- first slide -->
				<div class="slides" style="background-image:url('images/slide0.gif');">
				<p class="slideTitle" >
					0. Comment utiliser Polemic tweet en 4 étapes : 
				</p>
				<p	style="padding-top:90px;padding-left:280px;width:520px;" class="slideText">
					Nous allons vous présenter comment utiliser  le tweet polemci en 4 étapes 
					cliquez sur les boutons ci dessous pour changer les slides.
				</p>
				</div>
				<div class="slides" style="background-image:url('images/slide1.jpg');">
				<p class="slideTitle" >
					1. Identifie toi
				</p>
				<br/><br/><br/><br/>
				<p style="width:400px;padding-left:400px;" class="slideText">
				<a class="button_b" href="#"  id="IDENTIFIER"><span>S'Identifier</span></a>sur l'application de tweet polemic,<br/> <br/>
				<a class="button_w" href="#"  id="ACCES"><span>ou accèder lecture seul.</span></a> 
				</p>
				</div>
				<!-- second slide -->
				<div class="slides" style="background-image:url('images/slide2.jpg');">
				<p class="slideTitle" >2. Exprime ton opinion </p>
				<br/><br/>
				<p	style="padding-top:90px;padding-left:280px;width:520px;" class="slideText">
				Utilise la syntaxe polémique en ajoutant<br/>
				les caractères suivants  ("??", "++", "--", "==") <br/>
				afin de te positionner par rapport aux propos de la conférence.
				</p>
				</div>
				<!-- third slide -->
				<div class="slides" style="background-image:url('images/slide3.gif');">
				<p class="slideTitle" >3. Visualise la polémique</p>
				<br/><br/>
				<p style="width:400px;padding-right:400px;" class="slideText">
				Après l'événement une timeline agrége les tweets de l'auditoire et présente le débat synchronisé à l'enregistrement video de la conférence.
				</p>
				</div>
				<!-- fourth slide -->
				<div class="slides" style="background-image:url('images/slide4.jpg');">
				<p class="slideTitle" >4. Prochain rendez vous ! </p>
				<br/><br/><br/>
				<p style="width:400px;padding-right:400px;" class="slideText">
				RSLN vous invite Jeudi 7 avril à 19h30, à une rencontre avec Mercedes Bunz sur le thème :
				"Comment les algorithmes ont fini par devenir des producteurs d'infos et pourquoi ils ne remplaceront pour autant jamais les journalistes."
				 </p>

				 <a class="button_b" href="client.php"><span> Cliquez ici pour allez sur la page de live</span> </a>
				 
				</div>
			</div>

			<!-- the tabs -->
			<div class="slidetabs">
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		  </div>
		  
		<div class="intro">
			
		</div>
		  
	  </div>
	  <!-- --> 
	  <div class="archivesBox">
	  <div class="archivesBoxHeader"></div>
		<div class="archivesBoxContainer">
			<!-- -->
			<h3 class="archivesTitle">Les derniers événements qui ont utilisé le tweet polemic : </h3>
			<div id="AVB1" class="archivesVideoBox">
			    <a href="http://amateur.iri.centrepompidou.fr/nouveaumonde/enmi/conf/program/2010_2" target="_blank">
					<img src="images/tail_enmi2010.jpg" width="270" height="150"/>
				</a>
				<div class="AVBtitle">ENMI 2010</div>
				<div class="AVBtext">
					par <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a> au Centre Pompidou
					<br/>les 14 et 15 décembre 2010 |· 08:30 - 10:30
				</div>
			</div>
			<!-- -->
			<div id="AVB3" class="archivesVideoBox">
				<a href="rsln/polemicaltimeline.php">
					<img src="images/tail_clay.jpg" width="270" height="150"/>
				</a>
				<div class="AVBtitle">Clay Shirky le net, le surplus cognitif</div>
				<div class="AVBtext">
					par <a href="http://www.rslnmag.fr/" target="_blank">RSLN</a> à Microsoft France
					<br/>le lundi 31 janvier 2011·| 08:30 - 10:30
				</div>
			</div>
			<!-- -->
			<div id="AVB2" class="archivesVideoBox">
				<a href="rsln-opendata/polemicaltimeline.php">
					<img src="images/tail_opendata.jpg" width="270" height="150"/>
				</a>
				<div class="AVBtitle">OPENDATA</div>
				<div class="AVBtext">
					par <a href="http://www.rslnmag.fr/" target="_blank">RSLN</a> à Microsoft France
					<br/>le jeudi 17 mars 2011 | 14:30 - 17:15
				</div>
			</div>
			
		</div>
		<div class="archivesBoxClear"></div>
		<div class="archivesBoxFooter"></div>
	  </div>
	 
      <div class="footer">
		<hr>
		<a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> Tweet polemic </a> 
		est une expérimentation de l'
		 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank">Institut de recherche et d’innovation </a>
		 <?php 
				if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
					echo("| 	<a href='clear.php'  class='footerLink'>D&eacute;connexion</a>");
				}
		 ?>
		  <input type="text" id="txt" size="3" style="visibility:hidden;"/>
	  </div>   
	

    </div>
	
	<!-- LIGHTBOX --> 
	<div style="display:none;">
		<div id="Aboutbox" >
		<div class="lightBorder">
			<div class="lightTitle">ENMI 2010</div>
			<div class="lightSubTitle">Annotation critique par tweet </div>
			<div class="lightDescription">À partir de cette interface ou de votre client twitter habituel, vous pouvez réagir en direct aux conférences en twittant. Vos tweets seront synchronisés avec l'enregistrement des conférences. Vous pourrez qualifier vos tweets en y intégrant la syntaxe ci-contre.
			</div>
			<div>
				<br/>
				<a class="button_b" href="#"  id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/>
				<a class="button_w" href="#"  id="ACCES"><span>Libre accès</span></a> 
			</div>
		</div>
		</div>
	</div>

	
  </body>
</html>
