Cufon.replace('.page-title', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#footer h2', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#offrir h2', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#mobile h2', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#search-left h2', { fontFamily: 'dekar', hover: true });	
	Cufon.replace('.actu', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#commerces-categories h1 ', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#loginform label', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#form-slide h4', { fontFamily: 'dekar', hover: true });
	Cufon.replace('#sliderContent h2', { fontFamily: 'dekar', hover: true });
	Cufon.replace('.panel h2', { fontFamily: 'dekar', hover: true });

	
    $(document).ready(function () {	
    	
    	$('#nav li').hover(
    		function () {
    			//show its submenu
    			$('ul', this).slideDown(300);
    
    		}, 
    		function () {
    			//hide its submenu
    			$('ul', this).slideUp(300);			
    		}
    	);
    	
    });

  	$(document).ready(function() {	
  	
  		//Get the height of the first item
  		$('#mask').css({'height':$('#panel-1').height()});	
  		
  		//Calculate the total width - sum of all sub-panels width
  		//Width is generated according to the width of #mask * total of sub-panels
  		$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
  		
  		//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
  		$('#panel div').width($('#mask').width());
  		
  		//Get all the links with rel as panel
  		$('a[rel=panel]').click(function () {
  		
  			//Get the height of the sub-panel
  			var panelheight = $($(this).attr('href')).height();
  			
  			//Set class for the selected item
  			$('a[rel=panel]').removeClass('selected');
  			$(this).addClass('selected');
  			
  			//Resize the height
  			$('#mask').animate({'height':panelheight},{queue:false, duration:500});			
  			
  			//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
  			$('#mask').scrollTo($(this).attr('href'), 800);		
  			
  			//Discard the link default behavior
  			return false;
  		});
  		
  	});


$(document).ready(function() {

	//Speed of the slideshow
	var speed = 5000;
	
	//You have to specify width and height in #slider CSS properties
	//After that, the following script will set the width and height accordingly
	$('#mask-gallery, #gallery li').width($('#slider').width());	
	$('#gallery').width($('#slider').width() * $('#gallery li').length);
	$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
	
	//Assign a timer, so it will run periodically
	
	$('#gallery li:first, #excerpt li:first').addClass('selected');

	//Pause the slidershow with clearInterval
	$('#btn-pause').click(function () {
		clearInterval(run);
		return false;
	});

	//Next Slide by calling the function
	$('#btn-next').click(function () {
		newsscoller(0);	
		return false;
	});	

	//Previous slide by passing prev=1
	$('#btn-prev').click(function () {
		newsscoller(1);	
		return false;
	});	
	
	//Mouse over, pause it, on mouse out, resume the slider show
	$('#slider').hover(
	
		function() {
			clearInterval(run);
		}, 
		function() {
			run = setInterval('newsscoller(0)', speed);	
		}
	); 	
	
});


function newsscoller(prev) {

	//Get the current selected item (with selected class), if none was found, get the first item
	var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
	var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

	//if prev is set to 1 (previous item)
	if (prev) {
		
		//Get previous sibling
		var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
		var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
	
	//if prev is set to 0 (next item)
	} else {
		
		//Get next sibling
		var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
		var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
	}

	//clear the selected class
	$('#excerpt li, #gallery li').removeClass('selected');
	
	//reassign the selected class to current items
	next_image.addClass('selected');
	next_excerpt.addClass('selected');

	//Scroll the items
	$('#mask-gallery').scrollTo(next_image, 800);		
	$('#mask-excerpt').scrollTo(next_excerpt, 800);					
	
}




$(function() {
				/*
				fancybox init on each cloud-zoom element
				 */
				$("#content .cloud-zoom").fancybox({
					'transitionIn'	:	'elastic',
					'transitionOut'	:	'none',
					'speedIn'		:	600,
					'speedOut'		:	200,
					'overlayShow'	:	true,
					'overlayColor'	:	'#000',
					'cyclic'		:	true,
					'easingIn'		:	'easeInOutExpo'
				});

				/*
				because the cloud zoom plugin draws a mousetrap
				div on top of the image, the fancybox click needs
				to be changed. What we do here is to trigger the click
				the fancybox expects, when we click the mousetrap div.
				We know the mousetrap div is inserted after
				the <a> we want to click:
				 */
				$("#content .mousetrap").live('click',function(){
					$(this).prev().trigger('click');
				});

				/*
				the content element;
				each list item / group with several images
				 */
				var $content	= $('#content'),
				$thumb_list = $content.find('.thumb > ul');
				/*
				we need to set the width of each ul (sum of the children width);
				we are also defining the click events on the right and left arrows
				of each item.
				 */
				$thumb_list.each(function(){
					var $this_list	= $(this),
					total_w		= 0,
					loaded		= 0,
					//preload all the images first
					$images		= $this_list.find('img'),
					total_images= $images.length;
					$images.each(function(){
						var $img	= $(this);
						$('<img/>').load(function(){
							++loaded;
							if (loaded == total_images){
								$this_list.data('current',0).children().each(function(){
									total_w	+= $(this).width();
								});
								$this_list.css('width', total_w + 'px');

								//next / prev events

								$this_list.parent()
								.siblings('.next')
								.bind('click',function(e){
									var current = $this_list.data('current');
									if(current == $this_list.children().length -1) return false;
									var	next	= ++current,
									ml		= -next * $this_list.children(':first').width();

									$this_list.data('current',next)
									.stop()
									.animate({
										'marginLeft'	: ml + 'px'
									},400);
									e.preventDefault();
								})
								.end()
								.siblings('.prev')
								.bind('click',function(e){
									var current = $this_list.data('current');
									if(current == 0) return false;
									var	prev	= --current,
									ml		= -prev * $this_list.children(':first').width();

									$this_list.data('current',prev)
									.stop()
									.animate({
										'marginLeft'	: ml + 'px'
									},400);
									e.preventDefault();
								});
							}
						}).attr('src',$img.attr('src'));
					});
				});
			});