// JavaScript Document
var $c = jQuery.noConflict();
$c(function(){ 
var rotate=true;
	$c(document).ready(function() {
			//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
			$c('#carousel_ul li:first').before($c('#carousel_ul li:last')); 
			
			
			//when user clicks the image for sliding right        
			$c('#right_scroll').click(function(){
			
				//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
				var item_width = $c('#carousel_ul li').outerWidth() ;
				
				//calculae the new left indent of the unordered list
				var left_indent = parseInt($c('#carousel_ul').css('left')) - item_width;
				
				//make the sliding effect using jquery's anumate function '
				$c('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
					
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					$c('#carousel_ul li:last').after($c('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					$c('#carousel_ul').css({'left' : '-133px'});
				}); 
			});
			
			//when user clicks the image for sliding left
			$c('#left_scroll').click(function(){
				
				var item_width = $c('#carousel_ul li').outerWidth() ;
				
				/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
				var left_indent = parseInt($c('#carousel_ul').css('left')) + item_width;
				
				$c('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
				
				/* when sliding to left we are moving the last item before the first list item */            
				$c('#carousel_ul li:first').before($c('#carousel_ul li:last')); 
				
				/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
				$c('#carousel_ul').css({'left' : '-133px'});
				});
				
				
			});
			
			$c(function() { 
			 // setInterval(update, 3000); 
			}); 
			 
			function update() { 
			  if(rotate==true)
			  $c('#right_scroll img').click(); 
			} 
			
			$c('#carousel_inner li').mouseenter(function()
			{ 
				nonOverIt(this)
			});
			
			function overIt($el)
			{
				$c($el).css({'background-color':'#808080'})
				$c($el).find('a').css({'color':'#ffffff'})
				
				var thisId=$el.id;
				
				if(!thisId)
				thisId = $el.attr('id');
				
				var temp =thisId
				temp2=temp.replace("art","")
				$c("#numArticle").html("Article "+temp2+" / "); 
				
				
				$c('#dossierDuMoisImage').find('img').attr("src",$c($el).find('img').attr("src"));
				$c('#dossierDuMoisImage').find('a').attr("href",$c($el).find('a').attr("href"));
				$c('#moisArticleTitre').text($c($el).find('a').text());
				$c('#moisTeaser span').text($c($el).find('.articleTeaser').text());
				
			}
			
			function nonOverIt($el)
			{
				//alert("test2")
				$c('#carousel_inner li').css({'background-color':'#e7e7e7'})

				$c('#carousel_inner li').find('a').css({'color':'#636363'})
				
				overIt($el)
			}
			
			
			
			$c('#carousel_inner li').click(function()
			{ 
				temp="a#"+this.id+"Link"
				//alert(temp)
				window.location=$c(temp).attr("href")
			});
			
			nonOverIt($c('#carousel_inner #art1'))


	  });
    });
	
	// JavaScript Document
var $n = jQuery.noConflict();
$n(function(){ 
var rotate=true;
	$n(document).ready(function() {
			//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
			//$n('#carousel_ul li:first').before($n('#carousel_ul li:last')); 
			
			
			//when user clicks the image for sliding right        
			$n('#bottom_scroll').click(function(){
			
				//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '	
				
				//nombre d'élément visible
				var visible=3;
				
				var item_heigth = $n('#mainNews div').outerHeight() ;
				
				//calculae the new left indent of the unordered list
				var top_indent = parseInt($n('#mainNews').css('top')) - (item_heigth+49);
				
				//teille à garder visible
				var totalSize= ($n("#mainNews > div").size() -visible) * (item_heigth+49)*-1
				
				//grandeur des élément visible
				visible=visible * (item_heigth+49);
				
				//make the sliding effect using jquery's anumate function '
				/*
				alert("top: "+parseInt($n('#mainNews').css('top')))
				alert("totalsize: "+totalSize)
				alert("top_indent: "+top_indent)
				*/
				if((totalSize<=top_indent))
				$n('#mainNews:not(:animated)').animate({'top' : top_indent},500,function(){    
					
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					//$n('#carousel_ul li:last').after($n('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					//$n('#mainNews').css({'top' : '129px'});
				}); 
			});
			
			
			/**/
			//when user clicks the image for sliding left
			$n('#top_scroll').click(function(){
				
				//nombre d'élément visible
				var visible=3;
				
				var item_heigth = $n('#mainNews div').outerHeight() ;
				
				//calculae the new left indent of the unordered list
				var top_indent = parseInt($n('#mainNews').css('top')) + (item_heigth+49);
				
				//teille à garder visible
				var totalSize= ($n("#mainNews > div").size() -visible) * (item_heigth+49)
				
				//grandeur des élément visible
				visible=visible * (item_heigth+49);
				
				//make the sliding effect using jquery's anumate function '
				/*
				alert("top: "+parseInt($n('#mainNews').css('top')))
				alert("totalsize: "+totalSize)
				alert("top_indent: "+top_indent)
				*/
				if((top_indent<(item_heigth+49)))
				$n('#mainNews:not(:animated)').animate({'top' : top_indent},500,function(){    
					
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					//$n('#carousel_ul li:last').after($n('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					//$n('#mainNews').css({'top' : '129px'});
				}); 
				
				
			});
			
			
			$n('.newsItem').mouseenter(function()
			{ 
				//var temp ="#"+this.id
				$n(this).find('a').css({'color':'#AA0F3B'}); 
				

			});
			
			$n('.newsItem').mouseleave(function() {
			  	$n(this).find('a').css({'color':'#636363'}); 
			}); 
			
			
			$n('.n').click(function()
			{ 
				window.location = $n(this).find('a').attr('href'); 
			});
			
			
			
	  });
    });
	
var $e = jQuery.noConflict();
$e(function(){ 
var rotate=true;
	$e(document).ready(function() {
			//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
			//$e('#carousel_ul li:first').before($e('#carousel_ul li:last')); 
			
			
			//when user clicks the image for sliding right        
			$e('#eventBottom_scroll').click(function(){
			
				//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '	
				
				//nombre d'élément visible
				var visible=4;
				
				var item_heigth = $e('#mainEvent div').outerHeight() ;
				
				//calculae the new left indent of the unordered list
				var top_indent = parseInt($e('#mainEvent').css('top')) - (item_heigth+27);
				
				//teille à garder visible
				var totalSize= ($e("#mainEvent > div").size() -visible) * (item_heigth+27)*-1
				
				//grandeur des élément visible
				visible=visible * (item_heigth+27);
				
				//make the sliding effect using jquery's anumate function '
				/*
				alert("top: "+parseInt($e('#mainNews').css('top')))
				alert("totalsize: "+totalSize)
				alert("top_indent: "+top_indent)
				*/
				if((totalSize<=top_indent))
				$e('#mainEvent:not(:animated)').animate({'top' : top_indent},500,function(){    
					
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					//$e('#carousel_ul li:last').after($e('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					//$e('#mainNews').css({'top' : '129px'});
				}); 
			});
			
			
			/**/
			//when user clicks the image for sliding left
			$e('#eventTop_scroll').click(function(){
				
				//nombre d'élément visible
				var visible=4;
				
				var item_heigth = $e('#mainEvent div').outerHeight() ;
				
				//calculae the new left indent of the unordered list
				var top_indent = parseInt($e('#mainEvent').css('top')) + (item_heigth+27);
				
				//teille à garder visible
				var totalSize= ($e("#mainEvent > div").size() -visible) * (item_heigth+27)
				
				//grandeur des élément visible
				visible=visible * (item_heigth+27);
				
				//make the sliding effect using jquery's anumate function '
				/*
				alert("top: "+parseInt($e('#mainNews').css('top')))
				alert("totalsize: "+totalSize)
				alert("top_indent: "+top_indent)
				*/
				if((totalSize>top_indent))
				$e('#mainEvent:not(:animated)').animate({'top' : top_indent},500,function(){    
					
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					//$e('#carousel_ul li:last').after($e('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					//$e('#mainNews').css({'top' : '129px'});
				}); 
				
				
			});
			
			
			$e('.eventItem').mouseenter(function()
			{ 
				//var temp ="#"+this.id
				$e(this).find('a').css({'color':'#AA0F3B'}); 
				

			});
			
			$e('.eventItem').mouseleave(function() {
			  	$e(this).find('a').css({'color':'#636363'}); 
			}); 
			
			
			$e('.eventItem').click(function()
			{ 
				window.location = $e(this).find('a').attr('href'); 
			});
			
			
			
	  });
    });
	
	var $d = jQuery.noConflict();
$d(function(){ 
var rotate=true;
	$d(document).ready(function() {
		
			$d('#dossierWrapper').mouseenter(function()
			{ 
				//var temp ="#"+this.id
				
				//alert($d('#dossierWrapper #moisArticleTitre').find('a').attr('href'))
				$d('#moisArticleTitre').css({'color':'#AA0F3B'}); 
				
			});
			
			$d('#dossierWrapper').mouseleave(function() {
			  	$d('#moisArticleTitre').css({'color':'#636363'}); 
			}); 
			
			$d('#dossierWrapper').click(function()
			{ 
				window.location = $d(this).find('a').attr('href'); 
			});
			
			
			
	  });
    });
	
var $hf = jQuery.noConflict();
$hf(function(){ 
var rotate=true;
	$hf(document).ready(function() {
			//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
			//$hf('#carousel_ul li:first').before($hf('#carousel_ul li:last')); 
			
		
			
			
			/**/
			//when user clicks the image for sliding left
			$hf('#leftArrayHf').click(function(){
				
				//nombre d'élément visible
				var visible=3;
				
				var item_width = $hf('#carousselHf_ul li').width() ;
				//alert("top: "+parseInt($hf('#carousselHf_ul').css('top')))
				//calculae the new left indent of the unordered list
				var left_indent = parseInt($hf('#carousselHf_ul').css('left')) - (item_width+5);
				
				//teille à garder visible
				var totalSize= ($hf("#carousselHf_ul > li").size() -visible) * (item_width+5)*-1
				//alert($hf("#carousselHf_ul > li").size())
				//grandeur des élément visible
				visible=visible * (item_width+5);
				
				//make the sliding effect using jquery's anumate function '
				/*
				alert("left: "+parseInt($hf('#carousselHf_ul').css('top')))
				alert("totalsize: "+totalSize)
				alert("left_indent: "+left_indent)
				*/
				if((totalSize<=left_indent))
				$hf('#carousselHf_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
				$hf('#rightArrayHf').css('color', '#000000')	
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					//$hf('#carousel_ul li:last').after($hf('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					//$hf('#mainNews').css({'top' : '129px'});
				});  
				else
				$hf('#leftArrayHf').css('color', '#ffffff')
				
				
				
			});
			
			
			
			$hf('#rightArrayHf').click(function(){
				
				//nombre d'élément visible
				
				
				var item_width = $hf('#carousselHf_ul li').width() ;
				//alert("top: "+parseInt($hf('#carousselHf_ul').css('top')))
				//calculae the new left indent of the unordered list
				var left_indent = parseInt($hf('#carousselHf_ul').css('left')) + (item_width+5);
		
				/*
				alert("left: "+parseInt($hf('#carousselHf_ul').css('left')))
				alert("totalsize: "+totalSize)
				alert("left_indent: "+left_indent)
				*/
				if((0>=left_indent))
				$hf('#carousselHf_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
					
					$hf('#leftArrayHf').css('color', '#000000')	
					//get the first list item and put it after the last list item (that's how the infinite effects is made) '
					//$hf('#carousel_ul li:last').after($hf('#carousel_ul li:first')); 
					
					//and get the left indent to the default -210px
					//$hf('#mainNews').css({'top' : '129px'});
				}); 
				else
				$hf('#rightArrayHf').css('color', '#ffffff')
				
				
				
			});
			
			
			$hf('#carousselHf_ul li').mouseenter(function()
			{ 
				//$hf('#hf').find('h2').css({'color':'#636363'}); 
				$hf(this).find('img').css({'height':'60px','width':'41px','margin-top':'0px'});
				
				var temp ="#"+this.id
				//alert("im in")
				$hf(this).find('img').css({'color':'#AA0F3B'}); 
				$hf('#imageHf').find('img').attr("src",$hf(this).find('div.liImage img').attr("src"));
				$hf('#texteHf h2').text($hf(this).find('div.liTitle').text());
				$hf('#texteHf #hfTeaser').text($hf(this).find('div.liTexte').text());
				//alert($hf(this).find('div.liImage img').attr("src"))
				

			});
			
			$hf('#carousselHf_ul li').mouseleave(function()
			{ 
				
			//	$hf(this).find('img').css({'height':'47px'},{'width':'32px'},{'margin-top':'13px'});
				$hf(this).find('img').css({'height':'47px','width':'32px','margin-top':'13px'});

			});
			
			$hf('#imageHf, #texteHf').mouseenter(function()
			{ 
				//var temp ="#"+this.id
				$hf('#texteHf').find('h2').css({'color':'#AA0F3B'}); 
				

			});
			
			$hf('#imageHf, #texteHf').mouseleave(function() {
			  	$hf('#texteHf').find('h2').css({'color':'#636363'}); 
			}); 
			
			
			$hf('#texteHf').click(function()
			{ 
				window.location = $hf('#imageHf').find('a').attr('href'); 
				alert("test");
			});
			
			
			$hf('#imageHf').find('img').attr("src",$hf('#carousselHf_ul').children('li:first').find('div.liImage img').attr("src"));
			$hf('#texteHf h2').text($hf('#carousselHf_ul').children('li:first').find('div.liTitle').text());
			$hf('#texteHf #hfTeaser').text($hf('#carousselHf_ul').children('li:first').find('div.liTexte').text());
			/*
			$hf('.eventItem').mouseleave(function() {
			  	$hf(this).find('a').css({'color':'#000000'}); 
			}); 
			
			
			$hf('.eventItem').click(function()
			{ 
				window.location = $hf(this).find('a').attr('href'); 
			});
			*/
			
			
	  });
    });