web/MashUp/polemicaltimeline.php
changeset 216 d8c1b7e00533
equal deleted inserted replaced
215:137950e71b5c 216:d8c1b7e00533
       
     1 <?php
       
     2 
       
     3 /**
       
     4  * include some common code (like we did in the 90s)
       
     5  * People still do this? ;)
       
     6  */
       
     7  // configuration 
       
     8 include 'common.php';
       
     9  // objet actuel 
       
    10 include_once 'config.php';
       
    11 
       
    12 $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
       
    13 
       
    14 ?>
       
    15 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       
    16 <html lang="<?php echo($actual); ?>">
       
    17   <head>
       
    18     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       
    19     <title>Polemic tweet - <?php echo($config['title']); ?> - <?php echo($url); ?></title>
       
    20 	<meta name="keywords" content="<?php echo($config['keywords']); ?>"><!-- add timestampedmetadata -->
       
    21 	<!--<meta name="description" content="PoelmicTweet.fr : debate mapping, opinion, conference, video">-->
       
    22 	<meta name="description" content="<?php echo($config['description']); ?>">
       
    23 	<meta name="robots" content="index, follow">
       
    24 	
       
    25 	<!-- ICI : <?php echo($_SERVER['DOCUMENT_ROOT']); ?> -->
       
    26 	<!-- JAVASCRIPT --> 
       
    27 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
       
    28 	<script type="text/javascript">	
       
    29 		$.noConflict();
       
    30 	</script>
       
    31 	<script type="text/javascript" src="../res/raphael/raphael-min.js"></script>
       
    32 	<script type="text/javascript" src="../res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
       
    33 	<script type="text/javascript" src="../res/niceforms/niceforms.js"></script>
       
    34 	<script type="text/javascript" src="../res/jquery.url/jquery.url.js"></script>
       
    35 	<script type='text/javascript' src='../res/metadataplayer/src/js/LdtPlayer.js'></script>
       
    36 		
       
    37 	<!-- Framework CSS -->
       
    38     <link rel="stylesheet" href="../res/blueprint/screen.css" type="text/css" media="screen, projection">
       
    39     <link rel="stylesheet" href="../res/blueprint/print.css" type="text/css" media="print">
       
    40 	<link rel="stylesheet" href="../res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
       
    41 	<link rel="stylesheet" href="../res/css/custom.css" type="text/css" media="screen, projection">
       
    42 	<link rel="stylesheet" href="../res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
       
    43 	
       
    44 	<!-- FONT -->
       
    45 	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'>
       
    46 	<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'>
       
    47 	<link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'>
       
    48 	
       
    49 	<style type="text/css"> 
       
    50 		.tweetButton{float:left;margin-right:5px;}
       
    51 		.videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:638px;}
       
    52 		.videoLive{width:650px;height:640px;background:#fff;float:right;margin-top:20px;padding:5px;}
       
    53 					
       
    54 					.tweetExplain{background-image:url(../images/tweetExplainBgd.gif);width:250px;height:640px;padding:10px;position:absolute; margin-top:70px;}
       
    55 		.footer{margin-top:740px;width:960px;height:20px;position:absolute;text-align:center;}
       
    56 		.tooltip{
       
    57 			 z-index: 10000000000;
       
    58 		}
       
    59 		#tip{
       
    60 			 position : absolute;
       
    61 			 padding : 3px;
       
    62 			 z-index: 10000000000;
       
    63 			 max-width: 200px;
       
    64 		}	
       
    65 		#tip {
       
    66 				display: none;
       
    67 				background: transparent url("../images/white_arrow_long.png");
       
    68 				font-size: 12px;
       
    69 				height: 125px;
       
    70 				width: 180px;
       
    71 				padding: 10px;
       
    72 				padding-left: 15px;
       
    73 				padding-top: 15px;
       
    74 				padding-right: 15px;
       
    75 				color: black;
       
    76 				z-index: 10000000000;
       
    77 				font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
       
    78 				overflow:hidden;
       
    79 		}
       
    80 		#chartTimeline{
       
    81 			padding-top: 0px;
       
    82 			z-index: 9;
       
    83 			position : absolute;
       
    84 		}
       
    85 
       
    86 	</style>	
       
    87 	<script type="text/javascript">
       
    88   		// Configuration Polemical Timeline
       
    89   		<?php
       
    90   		if(is_array($config['metadata'])):
       
    91   			reset($config['metadata']);
       
    92   		    $first_key = key($config['metadata']);
       
    93   		?>
       
    94   		var metadatas = jQuery.parseJSON('<?php echo(json_encode($config['metadata'])); ?>');
       
    95   		var url = jQuery.url();
       
    96   		var metadata_key = url.fparam('metadata');
       
    97   		if(typeof metadata_key === "undefined" || metadata_key.length === 0) {
       
    98   			metadata_key = "<?php echo($first_key);?>";
       
    99   		} 
       
   100   		<?php else: ?>
       
   101   		var metadatas = { metadata: {url: "<?php echo($config['metadata'])?>", duration: <?php echo($config['duration'])?>} };
       
   102   		var metadata_key = "metadata"; 
       
   103   		<?php endif;?>
       
   104   		
       
   105 		var config = {
       
   106 					target:"chartTimeline",
       
   107 					x:8,
       
   108 					y:418,
       
   109 					width:<?php echo($player_width); ?>,
       
   110 					height:<?php echo($player_height); ?>,
       
   111 					heightmax:<?php echo($player_height); ?>,
       
   112 					duration:metadatas[metadata_key].duration,
       
   113 					metadata:metadatas[metadata_key].url
       
   114 					};
       
   115   	</script>
       
   116 	<script type='text/javascript' src='../res/metadataplayer.polemic/src/js/polemic.js'></script>
       
   117 	<script type="text/javascript">
       
   118 		jQuery.extend(__IriSP.lib,{jQueryToolTip:"../res/metadataplayer/res/js/jquery.tools.min.js"});
       
   119 
       
   120 		jQuery(document).ready(function() {
       
   121 			
       
   122 			jQuery("#mdselect_"+metadata_key).attr("selected","selected");
       
   123 			jQuery("#mdselect").change(function() {
       
   124 				var metadata_key = this.options[this.selectedIndex].value;
       
   125 				window.location.hash = "#metadata="+metadata_key;
       
   126 				window.location.href = window.location.href;
       
   127 				window.location.reload(true);
       
   128 				jQuery("#Embeded").attr('href','embed_form.php?metadata='+metadata_key);
       
   129 			});
       
   130 			if(metadata_key !== "metadata") {
       
   131 				jQuery("#Embeded").attr('href','embed_form.php?metadata='+metadata_key);
       
   132 			}
       
   133 			jQuery("#Embeded").fancybox({
       
   134 				'width'				: 360,
       
   135 				'height'			: 360,
       
   136 				'autoDimensions'	: false,
       
   137 				'transitionIn'		: 'none',
       
   138 				'transitionOut'		: 'none',
       
   139 				'type'				: 'iframe'
       
   140 			});
       
   141 			
       
   142 		});
       
   143 	</script>	
       
   144 	<script type="text/javascript">
       
   145 		var _gaq = _gaq || [];
       
   146 		_gaq.push(['_setAccount', 'UA-23581291-1']);
       
   147 		_gaq.push(['_trackPageview']);
       
   148 		
       
   149 		(function() {
       
   150 		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
       
   151 		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       
   152 		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
       
   153 		})();
       
   154 	</script>
       
   155   </head>
       
   156   <body>
       
   157   
       
   158 
       
   159   <!-- tooltip --> 
       
   160   <div id="tip">
       
   161   <div id="tipcolor" style="height:10px;width:10px"></div>
       
   162   <div id="tiptext"></div>
       
   163   </div>
       
   164 
       
   165     <div class="container">
       
   166       <img src="../images/ENMI_2010_logo.gif" class="logo">
       
   167 	  <ul class="menu"> 
       
   168 		  <li class="menuUnderline"><a href="../" class="menuLink" id="Accueil">
       
   169 		   <?php print $translate->_("Accueil"); ?></a></li>
       
   170 		  <li class="menuUnderline"><a href="embed_form.php" class="menuLink" id="Embeded">
       
   171 		    <?php print $translate->_("Partager"); ?></a></li>
       
   172 		  <li >&nbsp;</li>
       
   173 	  </ul>
       
   174 	<?php if(is_array($config['metadata'])):?>
       
   175 	<ul id="content_select_ul" class="menu mdselect">
       
   176 	    <?php print $translate->_("changer de contenu"); ?><br/>
       
   177 	    <select id="mdselect">
       
   178 	    	<?php foreach ($config['metadata'] as $key => $value):?>
       
   179 	    	<option value="<?php echo($key); ?>" id="mdselect_<?php echo($key); ?>" ><?php echo($value['display']); ?></option>
       
   180 	    	<?php endforeach;?>
       
   181 	    </select>
       
   182 	</ul>
       
   183 	<ul class="menu shortlang" >
       
   184 	<?php else:?>
       
   185 	<ul class="menu lang" >
       
   186 	<?php endif;?>	  
       
   187 	  <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
       
   188 	       <img src='../images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
       
   189 	        <?php print $translate->_("Japonais"); ?></a></li>
       
   190 	  <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
       
   191 	       <img src='../images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
       
   192 	       <?php print $translate->_("Français"); ?></a></li>
       
   193 	  <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
       
   194 	       <img src='../images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
       
   195 	       <?php print $translate->_("Anglais"); ?></a></li>
       
   196 	  </ul>	
       
   197 	
       
   198 	<!-- EXPLICATION  -->
       
   199 	  <div class="tweetExplain"  >
       
   200 		<h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?> </h3><br/>
       
   201 		<?php print $translate->_("ExplicationPT"); ?>
       
   202 	  </div>
       
   203 	 
       
   204 	  
       
   205 	  <!-- INFOS SUR LA CONF 
       
   206 	  	<div class="tweetExplain"  >
       
   207 		<h3 class="tweetWriterTitle"><?php echo($config['title']); ?></h3><br/>
       
   208 			<?php echo($config['description']); ?>
       
   209 	  </div>
       
   210 	  -->
       
   211 
       
   212 
       
   213 
       
   214 
       
   215 	  <div class="videoLive" >
       
   216 		<div class="videoLivePlayer">
       
   217 			<div id="chartTimeline"> </div>
       
   218 			<script type="text/javascript">
       
   219 				var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
       
   220 			</script>
       
   221 			<div id="player_project_embed" class="iri_player_embed"></div>
       
   222 			<script type="text/javascript">
       
   223 				var configMP = {
       
   224 						metadata:{
       
   225 							format:'cinelab',
       
   226 							src:config.metadata,
       
   227 							load:'jsonp'},
       
   228 						gui:{
       
   229 							width:config.width,
       
   230 							height:config.height,
       
   231 							mode:'video',
       
   232 							container:'player_project_embed',
       
   233 							debug:false,
       
   234 							css:'../res/css/LdtPlayer.css'},
       
   235 			
       
   236 						player:{
       
   237 							type:'jwplayer',
       
   238 							src:'../res/metadataplayer/res/swf/player.swf'}
       
   239 					};
       
   240 				__IriSP.init(configMP);
       
   241 			</script>
       
   242 		</div>
       
   243 	  </div>
       
   244 
       
   245  
       
   246       <div class="footer">
       
   247 		<hr>
       
   248 			<?php echo($config['partenaires']); ?>
       
   249 	  </div>   
       
   250 	
       
   251     </div>
       
   252 
       
   253   </body>
       
   254 </html>