$(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 = $('#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() {
        $('#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
    */
    $('#msg_grid').bind('click', function(e) {
        hideControls();
        $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
        pause();
        $('#msg_thumbs').stop().animate({ 'top': '0px' }, 500);
        e.preventDefault();
    });

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

    /**
    * pause or play icons
    */
    $('#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
    */
    $('#msg_next').bind('click', function(e) {
        pause();
        next();
        e.preventDefault();
    });
    $('#msg_prev').bind('click', function(e) {
        pause();
        prev();
        e.preventDefault();
    });

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

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

    /**
    * stops the slideshow
    */
    function pause() {
        $('#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 = $('#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 = $('#msg_wrapper').find('img');
            if ($currentImage.length) {
                $currentImage.fadeOut(function() {
                    $(this).remove();
                    $('<img />').load(function() {
                        var $image = $(this);
                        resize($image);
                        $image.hide();
                        $('#msg_wrapper').empty().append($image.fadeIn());
                    }).attr('src', source);
                });
            }
            else {
                $('<img />').load(function() {
                    var $image = $(this);
                    resize($image);
                    $image.hide();
                    $('#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() {
        $('#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;
        }

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

    /**
    * click next or previous on the thumbs wrapper
    */
    $('#msg_thumb_next').bind('click', function(e) {
        next_thumb();
        e.preventDefault();
    });
    $('#msg_thumb_prev').bind('click', function(e) {
        prev_thumb();
        e.preventDefault();
    });
    function next_thumb() {
        var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(current_thumb + 1) + ')');
        if ($next_wrapper.length) {
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
										.fadeOut(function() {
										    ++current_thumb;
										    $next_wrapper.fadeIn();
										});
        }
    }
    function prev_thumb() {
        var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(current_thumb - 1) + ')');
        if ($prev_wrapper.length) {
            $('#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)
    */
    $('#msg_thumbs .msg_thumb_wrapper > a').bind('click', function(e) {
        var $this = $(this);
        $('#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 = 328;
        var containerheight = 427;

        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
        'width': 328,
        'height': 427
        });
    }
});