var temoignagebeautifier = {

    currentHash: '',
    beautify: function() {
        jQuery(document).ready(function() {
            // Sur changement de hash dans l'adresse (gnagnaga#HASH)
            var timer = setInterval(function() {
                if (temoignagebeautifier.currentHash != window.location.hash) {
                    temoignagebeautifier.onLocationHashChange();
                }
                temoignagebeautifier.currentHash = window.location.hash;
            }, 100);

            $('div.temoignage').hide();
            var divCarousel = $('<div id="carousel">');
            var divCarouselList = $('<div id="divCarouselList">');
            var divCarouselPrev = $('<div id="divCarouselPrev"><a href="#"><img src="' + SkinBaseUrl + 'buttonGauche.gif" alt="&lt;"/></a></div>')
            var divCarouselNext = $('<div id="divCarouselNext"><a href="#"><img src="' + SkinBaseUrl + 'buttonDroit.gif" alt="&gt;"/></a></div>')
            var divCarouselMask = $('<div id="divCarouselMask">');
            var pageContentContainer = $('#listetemoignages');
            pageContentContainer.prepend(divCarousel);
            var listWidth = 0;
            var imgWidth = 0;

            // construit le carousel
            divCarousel.append(divCarouselPrev);
            divCarousel.append(divCarouselNext);
            divCarousel.append(divCarouselMask);
            divCarouselMask.append(divCarouselList);
            divCarouselMask.css({ overflow: 'hidden'
            });
            divCarouselList.css({
                position: 'relative'
            });
            divCarouselPrev.css({ float: 'left' });
            divCarouselNext.css({ float: 'right' });

            // ajoute les previews au carousel
            $('div.temoignage').each(function() {
                var div = $(this);
                var indexTemoignage = div.attr('id').replace('temoignage', '')
                var preview = $('img:first', this).clone();

                preview.addClass('temoignagePreview').attr('id', 'preview' + indexTemoignage).css({ border: '3px solid white' });
                divCarouselList.append(preview);
                imgWidth = preview.outerWidth(true);
                listWidth += imgWidth;
                divCarouselList.width(listWidth);

                preview.click(function() {
                    temoignagebeautifier.onPreviewClick($(this));
                });
            });

            $('a', divCarouselPrev).click(function() {
                divCarouselMask.animate({ scrollLeft: '-=' + imgWidth * 3 });
                return false;
            });
            $('a', divCarouselNext).click(function() {
                divCarouselMask.animate({ scrollLeft: '+=' + imgWidth * 3 });
                return false;
            });


            // sélectionne le témoignage précisé dans l'url
            temoignagebeautifier.onLocationHashChange();
        });
    },

    showTemoignage: function(indexTemoignage) {
        if ($('.temoignageVisible').length > 0) {
            $('.temoignageVisible').slideUp(200, function() {
                $(this).removeClass('temoignageVisible')
                if (!$('#temoignage' + indexTemoignage).is('.temoignageVisible')) {
                    $('#temoignage' + indexTemoignage).slideDown(200, function() {
                        $(this).addClass('temoignageVisible')
                    });
                }
            });
        } else {
            $('#temoignage' + indexTemoignage).slideDown(200, function() {
                $(this).addClass('temoignageVisible')
            });
        }
    },

    onPreviewClick: function(preview) {
        var indexTemoignage = preview.attr('id').replace('preview', '');
        window.location.hash = '#' + indexTemoignage;
    },

    selectTemoignage: function(indexTemoignage) {
        window.location.hash = '#' + indexTemoignage;
        $('.temoignagePreview').css({ border: '3px solid white' });
        $('#preview' + indexTemoignage).css({ border: '3px solid #e8ac50' });
        temoignagebeautifier.showTemoignage(indexTemoignage);
        temoignagebeautifier.makePreviewVisible(indexTemoignage);
    },

    onLocationHashChange: function() {
        var anchorUrl = window.location.hash.substring(1);
        if (anchorUrl.length > 0) {
            temoignagebeautifier.selectTemoignage(anchorUrl);
        } else {
            temoignagebeautifier.selectTemoignage($('.temoignagePreview:first').attr('id').replace('preview', ''));
        }
    },

    makePreviewVisible: function(indexTemoignage) {
        var preview = $('#preview' + indexTemoignage);
        var left = preview.position().left;
        // si la preview n'est pas visible en entier, on scroll la vue
        if ($('#divCarouselMask').scrollLeft() > left || $('#divCarouselMask').scrollLeft() + $('#divCarouselMask').width() < left + preview.outerWidth(true)) {
            $('#divCarouselMask').animate({ scrollLeft: left });
        }
    }


}