$(document).ready(function () {
    /**
    * 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 = $('#msgImages .msgImageWrapper').length;
    var nmb_images_wrapper = $('#msgImages .msgImageWrapper a').length; ;

    $('ul.imagePaging li').click(function () {
        pause();
        $('ul.imagePaging li').removeClass('active');
        $(this).addClass('active');
        var imageId = $(this).children(0).attr('rel');
        current = imageId;
        showImage('r');
    });

    /**
    * start the slideshow	
    */
    play();

    /**
    * show the controls when 
    * mouseover the main container
    */
    slideshowMouseEvent();
    function slideshowMouseEvent() {
        $('#msgSlideShow').unbind('mouseenter')
									   .bind('mouseenter', showControls)
									   .andSelf()
									   .unbind('mouseleave')
									   .bind('mouseleave', hideControls);
    }
    /**
    * pause or play icons
    */
    $('#msgPausePlay').bind('click', function (e) {
        var $this = $(this);
        if ($this.hasClass('msgPlay'))
            play();
        else
            pause();
        e.preventDefault();
    });

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

    /**
    * click on the image nav bar item
    * pause the slideshow,
    * and display the image associated with the clicked button
    */


    /**
    * show and hide controls functions
    */
    function showControls() {
        $('#msgControls').stop().animate({ 'right': '15px' }, 500);
    }
    function hideControls() {
        $('#msgControls').stop().animate({ 'right': '-110px' }, 500);
    }
    /**
    * start the slideshow
    */
    function play() {
        next();
        $('#msgPausePlay').addClass('msgPause').removeClass('msgPlay');
        playtime = setInterval(next, interval)
    }

    /**
    * stops the slideshow
    */
    function pause() {
        $('#msgPausePlay').addClass('msgPlay').removeClass('msgPause');
        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) {
        alternateThumbs();
        /**
        * the image that will be displayed in full mode
        */
        var $image = $('#msgImages .msgImageWrapper:nth-child(1)')
								.find('a:nth-child(' + current + ')')
								.find('img');
        if ($image.length) {
            var source = $image.attr('alt');
            var $currentImage = $('#msgWrapper').find('img');
            if ($currentImage.length) {
                $currentImage.fadeOut(function () {
                    $(this).remove();
                    $('<img />').load(function () {
                        var $image = $(this);
                        $image.hide();
                        $('#msgWrapper').empty().append($image.fadeIn());
                    }).attr('src', source);
                });
                activateImagePager();
            }
            else {
                $('<img />').load(function () {
                    var $image = $(this);
                    $image.hide();
                    $('#msgWrapper').empty().append($image.fadeIn());
                }).attr('src', source);
                activateImagePager();
            }

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

    function alternateThumbs() {
        $('#msgImages').find('.msgImageWrapper:nth-child(1)').hide();
        /**
        * if we reach the end, start from the beggining
        */
        if (current > nmb_images_wrapper) {
            current = 1;
        }
        /**
        * if we are at the beggining, go to the end
        */
        else if (current == 0) {
            current = nmb_images_wrapper;
        }

        $('#msgImages').find('.msgImageWrapper:nth-child(1)')
									.show();
    }

    function activateImagePager() {
        $('ul.imagePaging li').removeClass('active');
        var anchor = current;
        if (anchor > 0) {
            anchor++;
            $('ul.imagePaging li:nth-child(' + anchor + ')').addClass('active');
        }
    }
});