<?php

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

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="<?php echo($actual); ?>">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Polemic tweet - <?php echo($config['title']); ?></title>
	<meta name="keywords" content="<?php echo($config['keywords']); ?>"><!-- add timestampedmetadata -->
	<!--<meta name="description" content="PoelmicTweet.fr : debate mapping, opinion, conference, video">-->
	<meta name="description" content="<?php echo($config['description']); ?>">
	<meta name="robots" content="index, follow">
	
	<!-- ICI : <?php echo($_SERVER['DOCUMENT_ROOT']); ?> -->
	<!-- 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/raphael/raphael-min.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>
		
	<!-- 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">
	<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/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
	
	<!-- 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'>
	
	<style type="text/css"> 
		.tweetButton{float:left;margin-right:5px;}
		.videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:638px;}
		.videoLive{width:650px;height:640px;background:#fff;float:right;margin-top:20px;padding:5px;}
					
					.tweetExplain{background-image:url(../images/tweetExplainBgd.gif);width:250px;height:640px;padding:10px;position:absolute; margin-top:70px;}
		.footer{margin-top:740px;width:960px;height:20px;position:absolute;text-align:center;}
		.tooltip{
			 z-index: 10000000000;
		}
		#tip{
			 position : absolute;
			 padding : 3px;
			 z-index: 10000000000;
			 max-width: 200px;
		}	
		#tip {
				display: none;
				background: transparent url("../images/white_arrow_long.png");
				font-size: 12px;
				height: 125px;
				width: 180px;
				padding: 10px;
				padding-left: 15px;
				padding-top: 15px;
				padding-right: 15px;
				color: black;
				z-index: 10000000000;
				font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
				overflow:hidden;
		}
		#chartTimeline{
			padding-top: 0px;
			z-index: 9;
			position : absolute;
		}

	</style>
	<script type="text/javascript">
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-23581291-1']);
	  _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>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#Embeded").fancybox({
				'width'				: 360,
				'height'			: 360,
				'autoDimensions'	: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});
			
		});
	</script>
	
  </head>
  <script type="text/javascript">
  	// Configuration Polemical Timeline
	var config = {
					target:"chartTimeline",
					x:8,
					y:418,
					width:650,
					height:480,
					heightmax:480,
					duration:<?php echo($config['duration']); ?>,
					metadata:"<?php echo($config['metadata']); ?>"
					}
  </script>
  <script type='text/javascript' src='../res/metadataplayer.polemic/src/js/polemic.js'></script>
  
  <body>
  

  <!-- tooltip --> 
  <div id="tip">
  <div id="tipcolor" style="height:10px;width:10px"></div>
  <div id="tiptext"></div>
  </div>

    <div class="container">
      <img src="../images/ENMI_2010_logo.gif" class="logo">
	  <ul class="menu"> 
		  <li class="menuUnderline"><a href="../" class="menuLink" id="Accueil">
		   <?php print $translate->_("Accueil"); ?></a></li>
		  <li class="menuUnderline"><a href="embed_form.php" class="menuLink" id="Embeded">
		    <?php print $translate->_("Partager"); ?></a></li>
		  <li >&nbsp;</li>
	  </ul>
	  
	<ul class="menu lang" > 
	  <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
	       <img src='../images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
	        <?php print $translate->_("Japonais"); ?></a></li>
	  <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
	       <img src='../images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
	       <?php print $translate->_("Français"); ?></a></li>
	  <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
	       <img src='../images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
	       <?php print $translate->_("Anglais"); ?></a></li>
	  </ul>	
	
	<!-- EXPLICATION  -->
	  <div class="tweetExplain"  >
		<h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?> </h3><br/>
		<?php print $translate->_("ExplicationPT"); ?>
	  </div>
	 
	  
	  <!-- INFOS SUR LA CONF 
	  	<div class="tweetExplain"  >
		<h3 class="tweetWriterTitle"><?php echo($config['title']); ?></h3><br/>
			<?php echo($config['description']); ?>
	  </div>
	  -->




	  <div class="videoLive" >
		<div class="videoLivePlayer">

		<div id="chartTimeline"> </div>	
		<script type="text/javascript">
			var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
		</script>
		
		<script type='text/javascript' src='../res/metadataplayer/src/js/LdtPlayer.js'></script>
		<script type="text/javascript">
			$.extend(__IriSP.lib,{jQueryToolTip:"../res/metadataplayer/res/js/jquery.tools.min.js"});
		</script>
		
		<div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div>
			<script type="text/javascript">
				var configMP = {
						/*metadata:{
							format:'cinelab',
							src:'metadata.json',
							load:'json'},*/
						metadata:{
							format:'cinelab',
							src:'<?php echo($config['metadata']); ?>',
							load:'jsonp'},
						gui:{
							width:650,
							height:480,
							mode:'video',
							container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed',
							debug:false,
							css:'../res/css/LdtPlayer.css'},
	
						player:{
							type:'jwplayer',
							src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'}
					};
				__IriSP.init(configMP);     
			</script>
		</div>	
	  </div>

 
      <div class="footer">
		<hr>
			<?php echo($config['partenaires']); ?>
	  </div>   
	
    </div>

  </body>
</html>
