function doGallery(divID, nmb_images_wrapper, interval, mainWidth, mainHeight) {
    //mainWidth = 750
    //mainHeight = 600

    var TOTAL_IMAGES = 0;
    jQuery(document).ready(function () {

        TOTAL_IMAGES = jQuery("#" + divID + " .msg_thumbs").find("img").length;
        /**
        * 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 = jQuery("#" + divID + ' #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() {
            jQuery("#" + divID + ' #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
        */
        jQuery("#" + divID + ' #msg_grid').bind('click', function (e) {
            hideControls();
            jQuery("#" + divID + ' #msg_slideshow').unbind('mouseenter').unbind('mouseleave');
            pause();
            jQuery("#" + divID + ' #msg_thumbs').stop().animate({ 'top': '0px' }, 500);
            e.preventDefault();
        });

        /**
        * closing the thumbs view,
        * shows the controls
        */
        jQuery("#" + divID + ' #msg_thumb_close').bind('click', function (e) {
            showControls();
            slideshowMouseEvent();
            jQuery("#" + divID + ' #msg_thumbs').stop().animate({ 'top': '-230px' }, 500);
            e.preventDefault();
        });

        /**
        * pause or play icons
        */
        jQuery("#" + divID + ' #msg_pause_play').bind('click', function (e) {
            var $this = jQuery(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
        */
        jQuery("#" + divID + ' #msg_next').bind('click', function (e) {
            pause();
            next();
            e.preventDefault();
        });
        jQuery("#" + divID + ' #msg_prev').bind('click', function (e) {
            pause();
            prev();
            e.preventDefault();
        });

        /**
        * show and hide controls functions
        */
        function showControls() {
            jQuery("#" + divID + ' #msg_controls').stop().animate({ 'right': '15px' }, 500);
        }
        function hideControls() {
            jQuery("#" + divID + ' #msg_controls').stop().animate({ 'right': '-110px' }, 500);
        }

        /**
        * start the slideshow
        */
        function play() {
            next();
            jQuery("#" + divID + ' #msg_pause_play').addClass('msg_pause').removeClass('msg_play');
            playtime = setInterval(next, interval)
        }

        /**
        * stops the slideshow
        */
        function pause() {
            jQuery("#" + divID + ' #msg_pause_play').addClass('msg_play').removeClass('msg_pause');
            clearTimeout(playtime);
        }

        /**
        * show the next image
        */
        function next() {
            ++current;

            //Reached at the end of slide-show
            if (current > TOTAL_IMAGES) {
                current = 0;
                current_thumb = 0;
                current = 1;
            }
            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 = jQuery("#" + divID + ' #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('image');
                var alt = $thumb.attr('alt');
                var $currentImage = jQuery("#" + divID + ' #msg_wrapper').find('img');

                if ($currentImage.length) {
                    $currentImage.fadeOut(function () {
                        jQuery(this).remove();
                        jQuery('<img />').load(function () {
                            var $image = jQuery(this);
                            resize($image);
                            $image.hide();
                            jQuery("#" + divID + ' #msg_wrapper').empty().append($image.fadeIn());
                        }).attr('src', source).attr('alt', alt);

                        jQuery("#" + divID + ' .msg_image_caption').html(alt);
                        //alert(alt);
                        //
                    });
                }
                else {
                    jQuery('<img />').load(function () {
                        var $image = jQuery(this);
                        resize($image);
                        $image.hide();
                        jQuery("#" + divID + ' #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() {
            jQuery("#" + divID + ' #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;
            }

            jQuery("#" + divID + ' #msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
									.show();
        }

        /**
        * click next or previous on the thumbs wrapper
        */
        jQuery("#" + divID + ' #msg_thumb_next').bind('click', function (e) {
            next_thumb();
            e.preventDefault();
        });
        jQuery("#" + divID + ' #msg_thumb_prev').bind('click', function (e) {
            prev_thumb();
            e.preventDefault();
        });
        function next_thumb() {
            var $next_wrapper = jQuery("#" + divID + ' #msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(current_thumb + 1) + ')');
            if ($next_wrapper.length) {
                jQuery("#" + divID + ' #msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
										.fadeOut(function () {
										    ++current_thumb;
										    $next_wrapper.fadeIn();
										});
            }
        }
        function prev_thumb() {
            var $prev_wrapper = jQuery("#" + divID + ' #msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(current_thumb - 1) + ')');
            if ($prev_wrapper.length) {
                jQuery("#" + divID + ' #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)
        */
        jQuery("#" + divID + ' #msg_thumbs .msg_thumb_wrapper > a').bind('click', function (e) {
            var $this = jQuery(this);
            jQuery("#" + divID + ' #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 = jQuery(this);
            $this.stop().animate({ 'opacity': 1 });
        }).bind('mouseleave', function () {
            var $this = jQuery(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 = mainWidth;
            var containerheight = mainHeight;

            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
            });
        }
    });
}


