<!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>Live Video and Annotation</title>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />

    <!-- Framework CSS -->
    <link rel="stylesheet" href="<?php echo(registry_url('blueprint-screen','css'));?>" type="text/css" media="screen, projection"/>
    <link rel="stylesheet" href="<?php echo(registry_url('blueprint-print','css'));?>" type="text/css" media="print"/>
    <!--[if lt IE 8]><link rel="stylesheet" href="<?php echo(registry_url('blueprint-ie','css'));?>" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="<?php echo(registry_url('blueprint-plugins-fancy-type','css'));?>" type="text/css" media="screen, projection"/>
	<link rel="stylesheet" href="<?php echo(registry_url('custom','css'));?>" type="text/css" media="screen, projection"/>
	<link rel="stylesheet" href="<?php echo(registry_url('fancybox','css'));?>" type="text/css" media="screen">
	
	<style type="text/css">
	   .hidden {
	       display: none;
	   }
	
	    #onglets {
            float: left; width: 441px; margin: 5px 25px 0; list-style: none;
            border-left: 1px solid #999; padding: 0;
        }
        
        #onglets li {
            float: left; text-transform: uppercase; background: url(../res/css/twcx-img/bg_onglet.png) repeat-x;
            line-height: 12px; font-size: 12px; height: 12px; padding: 6px 10px; font-weight: bold;
            border: 1px #999; border-style: solid solid solid none; margin-top: 1px;
        }
        
        #onglets a {
            text-decoration: none; color: #666666;
        }
        
        #onglets a:hover {
            color: #0099ff;
        }
        
        #onglets li.selected {
            background-position: 0 -22px; padding-bottom: 8px; border-bottom: none; margin-top: 0;
        }
        
        #onglets li.selected a {
            color: #333333; 
        }
        
        div.ifwrap {
            float: left; border: 5px solid #ffffff; background: #999999; padding: 1px; width: 500px; height: 375px;
        }
        
        .ifwrap iframe {
            width: 500px; height: 375px; background: #000000; border: none; padding: 0; margin: 0;
        }
	</style>

	<!-- JAVASCRIPT -->
	<script type="text/javascript" src="<?php echo(registry_url('jquery','js'))?>"></script>
	<script type="text/javascript" src="<?php echo(registry_url('fancybox','js'))?>"></script>
	<script type="text/javascript" src="<?php echo(registry_url('jquery-tools','js'))?>"></script>
	<script type="text/javascript" src="<?php echo(registry_url('tw-widget','js'))?>"></script>
	
	<!-- FONT -->
	<link href='<?php echo(registry_url('PT-Sans_Narrow','font'))?>' rel='stylesheet' type='text/css'>
	<link href='<?php echo(registry_url('PT-Sans','font'))?>' rel='stylesheet' type='text/css'>
	<link href='<?php echo(registry_url('Geo','font'))?>' rel='stylesheet' type='text/css'>

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

    $("#onglets a").click(function() {
        $("div.ifwrap").hide();
        $("#onglets li").removeClass("selected");
        $(this).parent().addClass("selected");
        var hr = $(this).attr("href");
        if (hr[0] == '#') {
            $(hr).show();
        } else {
            $("#iframeWrap").show();
            $("#graphFrame").attr("src", hr);
        }
        return false;
    });

			doTimer();
			//$("txt").hide();
			$(".loginbutton").click(function() {
				document.location.href="<?php echo(URL_ROOT.$rep); ?>/client.php?CONNECT=true";
			});
			$("#IDENTIFIER").click(function() {
				document.location.href="<?php echo(URL_ROOT.$rep); ?>/client.php?CONNECT=true";
			});
			
			$("#messageSuccess").hide();
			$("#messageFailed").hide();


			function add_grammar(value) {
				$('#status').val($('#status').val()+value+" ");
				$('#status').change();
			}
			
			// BUTTONS
			$("#positive").click(function(){
				add_grammar("++");
			});
			$("#negative").click(function(){
				add_grammar("--");
			});
			$("#reference").click(function(){
				add_grammar("==");
			});
			$("#question").click(function(){
				add_grammar("??");
			});
			
			// SEND TWEETS
			$("#sendTweet").click(function(){
				var MyStatus = $('#status').val();
				$.post('tweet_ajax.php', {status:MyStatus}
				,function(data) {
				
					if(data=="true"){
						$("#messageSuccess").show('fast');
						$("#messageSuccess").delay(800).hide('slow');
						$('#status').val("<?php echo($config['hashtag']); ?>");
						$('#status').change();
					}else{
						$("#error").text(data);
						$("#messageFailed").show('fast');
						$("#messageFailed").delay(800).hide('slow');
					}
					
				});
				
			});

			$("#status").bind("change keyup paste blur focus",function() {
				newval = 140-$("#status").val().length;
				$('#tweetCounter').val(newval);
				if(newval < 0) {
					$('#tweetCounter').addClass("tweetCounterNegative");
				}
				else {
					$('#tweetCounter').removeClass("tweetCounterNegative");
				}
			});
			
			$(".timeFrame").tooltip();
			/*
			*   Lightbox button
			*/
			
			$("#Program").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});
			
			$("#ACCES").click(function() {
				$.fancybox.close();
			});
			
			// Buttons
			

        });

		//<!-- LIMIT TEXTAREA:
		function imposemax(Object) {
            return (Object.value.length <= 140);
		};
        // End -->
		
		//<!-- TIMER
	    var c=0;
        var t;
		var timer_is_on=0;

		function timedCount()
		{
			document.getElementById('txt').value=c;
			c = c+1;
			t = window.setTimeout("timedCount()",1000);
			$(".twtr-ft").hide();
			$(".twtr-hd").hide();
			//twtr-tweet
			$(".twtr-tweet").each(colorTweetings);
		
		}

		function colorTweetings (){
				var tweettemp = $(this).html();
				if (tweettemp.search(/\x3F\x3F/)!=-1){
					 $(this).css({'background-color': '#bfdbec','color':"#000"});
				}
				if (tweettemp.search(/\x2B\x2B/)!=-1){
					 $(this).css({'background-color': '#c5e7cd','color':"#fff"});
				}
				if (tweettemp.search(/\x2D\x2D/)!=-1){
					 $(this).css({'background-color': '#f6ced0','color':"#fff"});
				}
				if (tweettemp.search(/\x3D\x3D/)!=-1){
					 $(this).css({'background-color': '#ecedc1','color':"#000"});
				}
		};
			

		
		function doTimer()
		{
		if (!timer_is_on)
		  {
		  timer_is_on=1;
		  timedCount();
		  }
		}

		function stopCount()
		{
			clearTimeout(t);
			timer_is_on=0;
		}
		//
		//-->
	</script>
	
	<script type="text/javascript">
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-23581291-1']);
	  _gaq.push(['_trackPageview']);
	  _gaq.push(['_setAllowAnchor', true]);
	
	  (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 id="sendUsFeedBack"><a href="<?php echo($C_feedback_form_url); ?>" target="_blank"><img src="<?php echo(URL_ROOT); ?>images/sendusfeedback.png"></a></div>
    <div class="container">
      <img src="<?php echo($head_logo); ?>" class="Producteur logo">
      <div id="minilogo" style="height:5px;top:5px;"></div>
	  <ul class="menu">
	  <li class="menuUnderline"><a href="<?php echo(URL_ROOT); ?>" class="menuLink">
	  	<?php print $translate->_("Accueil"); ?> </a></li>
	  <li class="menuUnderline" ><a href="<?php echo($translate->_('config__link')); ?>" class="menuLink" target="_blank" id='Program'>
	  	<?php print $translate->_("Programme"); ?></a></li>
	  <li ><a href="../about.php" class="menuLink" >
	  	<?php print $translate->_("A propos"); ?></a></li>

	  </ul>
	  
	  	  <ul class="menu" >
	  <li class="menuUnderline"><a href="<?php URL_ROOT ?>client.php?lang=ja_JP" class="menuLink" >
	       <img src='<?php echo(URL_ROOT); ?>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 ?>client.php?lang=fr" class="menuLink">
	       <img src='<?php echo(URL_ROOT); ?>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 ?>client.php?lang=en" class="menuLink">
	       <img src='<?php echo(URL_ROOT); ?>images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
	       <?php print $translate->_("Anglais"); ?></a></li>
	  </ul>

	  
    <ul id="onglets">
        <li class="selected">
            <a href="#vlWrap"><?php echo($translate->_('Video')); ?></a>
        </li>
        <li>
            <a href="../sweet-tweet/small.html"><?php echo($translate->_('SemanticBoard')); ?></a>
        </li>
        <li>
            <a href="http://labs.knowtex.com/enmi2011"><?php echo($translate->_('SocialGraph')); ?></a>
        </li>
    </ul>
    <div class="ifwrap" id="vlWrap">
	  <?php if ($config['islive']):?>
	  <div class="videoLivePlayer">
			<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="500" height="375">
				<param name="movie" value="<?php echo(URL_ROOT); ?>res/mediaplayer/player.swf" />
				<param name="allowfullscreen" value="true" />
				<param name="allowscriptaccess" value="always" />
				<param name="wmode" value="transparent" />
				<param name="flashvars" value="autostart=true&live=true&image=<?php echo($big_visual_url); ?>&provider=rtmp&streamer=rtmp://media.iri.centrepompidou.fr/ddc_player/&file=livestream&controlbar=none&autostart=true" />
				<embed
					type="application/x-shockwave-flash"
					id="player2"
					name="player2"
					src="<?php echo(URL_ROOT); ?>res/mediaplayer/player.swf"
					width="500"
					height="375"
					allowscriptaccess="always"
					allowfullscreen="true"
					wmode="transparent"
					flashvars="autostart=true&live=true&provider=rtmp&streamer=rtmp://media.iri.centrepompidou.fr/ddc_player/&file=livestream&image=<?php echo($big_visual_url); ?>&controlbar=none&autostart=true"
					
				/>
			</object>
			
		</div>
		<?php elseif(isset($config['islive_embed']) && count($config['islive_embed'])>0):?>
		<div class="videoLivePlayer">
		    <?php echo($config['islive_embed']); ?>
		</div>
	  	<?php else: ?>
		<div class="videoLivePlayer">
			<img src="<?php echo($big_visual_url); ?>" width="500"  height="375" />
		</div>
		<?php endif; ?>
		
	  </div>
	  <div class="ifwrap hidden" id="iframeWrap">
        <iframe id="graphFrame"></iframe>
    </div>

	<div class="videoLiveProgram">
		
		<div class="arrowContainer">
			<div class="arrow"> </div>
		</div>
		<div class="videoLiveProgramTitle">
			<b><?php echo($translate->_('config__title')); ?></b></div>
		<div class="videoLiveProgramDescription">
			<br><?php echo($translate->_('config__description')); ?></div>
		
		
	</div>
	  
	  <div class="tweetWriter">
		<h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?></h3>
		<form  action="tweet.php" method="post" id="statusform" >
		<?php if (!isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
				echo("<div class='loginbutton' ><a href='".URL_ROOT."$rep/client.php?CONNECT=true' class='loginlink'>
				".$translate->_("Vous n'êtes pas connecté.")."</a></div>");
			  }else{
				echo("<textarea name='status' id='status' rows='3' cols='50' onkeypress='return imposemax(this);'>$config[hashtag]</textarea>");
			  }
		?>


				<div id="messageSuccess" style="background-color:lightgreen;">
					<?php print $translate->_("Envoyé"); ?><br><br>
				</div>
				
				<div id="messageFailed" style="background-color:red;">
					<?php print $translate->_("Erreur1"); ?><div id="error">&nbsp;</div><br/><br>
				</div>

			  
			
			<a class="button_w" href="#"  id="sendTweet" style="float:right;margin-right:15px;margin-left:35px;width:70px;" >
				<span><?php print $translate->_("Envoyer"); ?></span>
			</a>
			<!--<button name="s" type="button" id="sendTweet"
					style="float:right;margin-right:15px;margin-left:35px;width:70px;"  >Envoyer</button>-->
			<?php if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])): ?>
			<input id="tweetCounter" value="<?php echo(140-strlen($config['hashtag']));?>" disabled="disabled" size="3"/>
			<?php endif;?>
			<a
					
					id="positive"
					title="accord"
					class="tweetButton">++</a>
			<a
					
					id="negative"
					title="désaccord"
					class="tweetButton">--</a>
			<a
					
					id="reference"
					title="reference"
					class="tweetButton">==</a>
			<a
					
					id="question"
					title="question"
					class="tweetButton"> ??</a>
		</form>
	  </div>
	  
	  <div class="tweetReader">
			<script>
				new TWTR.Widget({
				  version: 2,
				  type: 'search',
				  search: '<?php echo($config['hashtag']); ?>',
				  interval: 3000,
				  title: '',
				  subject: '',
				  width: 377,
				  height: 450,
				  theme: {
					shell: {
					  background: '#ffffff',
					  color: '#ffffff'
					},
					tweets: {
					  background: '#ffffff',
					  color: '#444444',
					  links: '#1985b5'
					}
				  },
				  features: {
					scrollbar: true,
					loop: false,
					live: true,
					hashtags: true,
					timestamp: true,
					avatars: true,
					toptweets: true,
					behavior: 'all'
				  }
				}).render().start();
			</script>
	  </div>

      <div class="footer">
		<hr>
		 <?php
				echo($translate->_('config__partenaires'));
				
				if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
					echo("| 	<a href='clear.php'  class='footerLink'>".$translate->_("D&eacute;connexion")."</a>");
				}
		 ?>
		  <input type="hidden" id="txt"/>
		  
	  </div>
	

    </div>
	
  </body>
</html>
