function initSlideShow(idslide) {
    /**
    * interval : time between the display of images
    * playtime : the timeout for the setInterval function
    * current  : number to control the current image
    * current_thumb : the index of the current thumbs wrapper
    * nmb_thumb_wrappers : total number	of thumbs wrappers
    * nmb_images_wrapper : the number of images inside of each wrapper
    */
    var interval			= 4000;
    var playtime;
    var current 			= 0;
    var current_thumb 		= 0;
    var nmb_thumb_wrappers	= $('#'+idslide+' #msg_thumbs .msg_thumb_wrapper').length;
    var nmb_images_wrapper  = 6;
    /**
    * start the slideshow
    */
    play();

    /**
    * show the controls when
    * mouseover the main container
    */
    slideshowMouseEvent();
    function slideshowMouseEvent(){
    	$('#'+idslide+' #msg_slideshow').unbind('mouseenter')
    					   .bind('mouseenter',showControls)
    					   .andSelf()
    					   .unbind('mouseleave')
    					   .bind('mouseleave',hideControls);
    	}

    /**
    * clicking the grid icon,
    * shows the thumbs view, pauses the slideshow, and hides the controls
    */
    $('#'+idslide+' #msg_grid').bind('click',function(e){
    	hideControls();
    	$('#'+idslide+' #msg_slideshow').unbind('mouseenter').unbind('mouseleave');
    	pause();
    	$('#'+idslide+' #msg_thumbs').stop().animate({'top':'0px'},500);
    	e.preventDefault();
    });

    /**
    * closing the thumbs view,
    * shows the controls
    */
    $('#'+idslide+' #msg_thumb_close').bind('click',function(e){
    	showControls();
    	slideshowMouseEvent();
    	$('#'+idslide+' #msg_thumbs').stop().animate({'top':'-230px'},500);
    	e.preventDefault();
    });

    /**
    * pause or play icons
    */
    $('#'+idslide+' #msg_pause_play').bind('click',function(e){
    	var $this = $(this);
    	if($this.hasClass('msg_play'))
    		play();
    	else
    		pause();
    	e.preventDefault();
    });

    /**
    * click controls next or prev,
    * pauses the slideshow,
    * and displays the next or prevoius image
    */
    $('#'+idslide+' #msg_next').bind('click',function(e){
    	pause();
    	next();
    	e.preventDefault();
    });
    $('#'+idslide+' #msg_prev').bind('click',function(e){
    	pause();
    	prev();
    	e.preventDefault();
    });

    /**
    * show and hide controls functions
    */
    function showControls(){
    	$('#'+idslide+' #msg_controls').stop().animate({'right':'15px'},500);
    }
    function hideControls(){
    	$('#'+idslide+' #msg_controls').stop().animate({'right':'-110px'},500);
    }

    /**
    * start the slideshow
    */
    function play(){
    	next();
    	$('#'+idslide+' #msg_pause_play').addClass('msg_pause').removeClass('msg_play');
    	playtime = setInterval(next,interval)
    }

    /**
    * stops the slideshow
    */
    function pause(){
    	$('#'+idslide+' #msg_pause_play').addClass('msg_play').removeClass('msg_pause');
    	clearTimeout(playtime);
    }

    /**
    * show the next image
    */
    function next(){
    	++current;
    	showImage('r');
    }

    /**
    * shows the previous image
    */
    function prev(){
    	--current;
    	showImage('l');
    }

    /**
    * shows an image
    * dir : right or left
    */
    function showImage(dir){
    	/**
    	* the thumbs wrapper being shown, is always
    	* the one containing the current image
    	*/
    	alternateThumbs();

    	/**
    	* the thumb that will be displayed in full mode
    	*/
    	var $thumb = $('#'+idslide+' #msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
    				.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
    				.find('img');
    	if($thumb.length){
    		var source = $thumb.attr('alt');
    		var $currentImage = $('#'+idslide+' #msg_wrapper').find('img');
    		if($currentImage.length){
    			$currentImage.fadeOut(function(){
    				$(this).remove();
    				$('<img />').load(function(){
    					var $image = $(this);
    					resize($image);
    					$image.hide();
    					$('#'+idslide+' #msg_wrapper').empty().append($image.fadeIn());
    				}).attr('src',source);
    			});
    		}
    		else{
    			$('<img />').load(function(){
    					var $image = $(this);
    					resize($image);
    					$image.hide();
    					$('#'+idslide+' #msg_wrapper').empty().append($image.fadeIn());
    			}).attr('src',source);
    		}

    	}
    	else{ //this is actually not necessary since we have a circular slideshow
    		if(dir == 'r')
    			--current;
    		else if(dir == 'l')
    			++current;
    		alternateThumbs();
    		return;
    	}
    }

    /**
    * the thumbs wrapper being shown, is always
    * the one containing the current image
    */
    function alternateThumbs(){
    	$('#'+idslide+' #msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
    					.hide();
    	current_thumb = Math.ceil(current/nmb_images_wrapper);
    	/**
    	* if we reach the end, start from the beggining
    	*/
    	if(current_thumb > nmb_thumb_wrappers){
    		current_thumb 	= 1;
    		current 		= 1;
    	}
    	/**
    	* if we are at the beggining, go to the end
    	*/
    	else if(current_thumb == 0){
    		current_thumb 	= nmb_thumb_wrappers;
    		current 		= current_thumb*nmb_images_wrapper;
    	}

    	$('#'+idslide+' #msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
    					.show();
    }

    /**
    * click next or previous on the thumbs wrapper
    */
    $('#'+idslide+' #msg_thumb_next').bind('click',function(e){
    	next_thumb();
    	e.preventDefault();
    });
    $('#'+idslide+' #msg_thumb_prev').bind('click',function(e){
    	prev_thumb();
    	e.preventDefault();
    });
    function next_thumb(){
    	var $next_wrapper = $('#'+idslide+' #msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
    	if($next_wrapper.length){
    		$('#'+idslide+' #msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
    						.fadeOut(function(){
    							++current_thumb;
    							$next_wrapper.fadeIn();
    						});
    	}
    }
    function prev_thumb(){
    	var $prev_wrapper = $('#'+idslide+' #msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
    	if($prev_wrapper.length){
    		$('#'+idslide+' #msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
    						.fadeOut(function(){
    							--current_thumb;
    							$prev_wrapper.fadeIn();
    						});
    	}
    }

    /**
    * clicking on a thumb, displays the image (alt attribute of the thumb)
    */
    $('#'+idslide+' #msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
    	var $this 		= $(this);
    	$('#'+idslide+' #msg_thumb_close').trigger('click');
    	var idx			= $this.index();
    	var p_idx		= $this.parent().index();
    	current			= parseInt(p_idx*nmb_images_wrapper + idx + 1);
    	showImage();
    	e.preventDefault();
    }).bind('mouseenter',function(){
    	var $this 		= $(this);
    	$this.stop().animate({'opacity':1});
    }).bind('mouseleave',function(){
    	var $this 		= $(this);
    	$this.stop().animate({'opacity':0.5});
    });

    /**
    * resize the image to fit in the container (400 x 400)
    */
    function resize($image){
    	var theImage 	= new Image();
    	theImage.src 	= $image.attr("src");
    	var imgwidth 	= theImage.width;
    	var imgheight 	= theImage.height;

    	var containerwidth  = 500;
    	var containerheight = 400;

    	if(imgwidth	> containerwidth){
    		var newwidth = containerwidth;
    		var ratio = imgwidth / containerwidth;
    		var newheight = imgheight / ratio;
    		if(newheight > containerheight){
    			var newnewheight = containerheight;
    			var newratio = newheight/containerheight;
    			var newnewwidth =newwidth/newratio;
    			theImage.width = newnewwidth;
    			theImage.height= newnewheight;
    		}
    		else{
    			theImage.width = newwidth;
    			theImage.height= newheight;
    		}
    	}
    	else if(imgheight > containerheight){
    		var newheight = containerheight;
    		var ratio = imgheight / containerheight;
    		var newwidth = imgwidth / ratio;
    		if(newwidth > containerwidth){
    			var newnewwidth = containerwidth;
    			var newratio = newwidth/containerwidth;
    			var newnewheight =newheight/newratio;
    			theImage.height = newnewheight;
    			theImage.width= newnewwidth;
    		}
    		else{
    			theImage.width = newwidth;
    			theImage.height= newheight;
    		}
    	}
    	$image.css({
    		'width'	:theImage.width,
    		'height':theImage.height
    	});
    }
};