﻿/* jQuery extensions
---------------------------- */
/*  

*/
jQuery.fn.carousel = function(args) {

    return this.each(function(i) {
        var container = $(this);
        var thumbsCount = 0;

        var opts = {
            animationSpeed: 'fast',
            animationEasing: 'swing',
            width: 580, // largeur du scroller
            height: 60, // hauteur du scroller
            next: '.gallery-next',
            previous: '.gallery-previous',
            target: '#gallery-viewer',  // va contenir l'image taille originale
            title: '#gallery-title',    // va contenir le titre de l'image en cours
            caption: '#gallery-caption' // va contenir une description de l'image en cours
        };

        $.extend(opts, args);

        opts.thumbs = opts.thumbs || {};
        opts.thumbs = $.extend({
            maxVisible: 0,  // nombre maximum de thumb visible, 
            toScroll: 1,    // nombre de thumbs à scroller lorqu'on clique sur prev/next
            autoSize: true, // si à true, la largeur du premier thumb est utisé comme width
            width: 0,       // si on veut forcer la largeur des thumbs, autoSize doit être à false
            hspacing: 10    // spacing entre les thumbs
        }, opts.thumbs);

        opts.target = $(opts.target);   // grande image
        opts.title = $(opts.title);     // titre pour l'image
        opts.caption = $(opts.caption); // caption pour l'image

        opts.target.css({ 'position': 'relative' });
        container.css({
            position: 'relative',
            width: opts.width + 'px',
            overflow: 'hidden',
            height: opts.height + 'px'
        });

        container.wrap('<div class="gallery-items-container"></div>');

        container.scrollNext = function() {
            if ($('li', this).not(':animated').length != $('li', this).length) {
                // do nothing
            } else {
                $('li', this).animate({
                    left: '+=-' + (opts.thumbs.width + opts.thumbs.hspacing) * opts.thumbs.toScroll
                }, opts.animationSpeed, 'swing',
                function() {
                    var t = $(this);
                    if (t.position().left < 0 - (opts.thumbs.width)) {
                        t.detach().css('left', $('li:last', container).position().left + (opts.thumbs.width + opts.thumbs.hspacing)).appendTo(container);
                    }
                });
            }
        };

        container.scrollPrev = function() {
            if ($('li', this).not(':animated').length != $('li', this).length) {
                // do nothing
            } else {
                $('li', this).animate({
                    left: '+=' + (opts.thumbs.width + opts.thumbs.hspacing) * opts.thumbs.toScroll
                }, opts.animationSpeed, 'swing',
              function() {
                  var t = $(this);
                  if (t.position().left > opts.width) {
                      t.detach()
                          .css('left', $('li:first', container).position().left - (opts.thumbs.width + opts.thumbs.hspacing))
                          .prependTo(container);
                  }
              });
            }
        };

        container.show = function(index, sender) {
            if (sender == null)
                sender = this.find('li:eq(' + index + ')');

            // construit le tag pour l'image
            var title = $('img:eq(0)', sender).attr('alt');
            var caption = unescape(sender.data('caption'));
            var img = $('<img src="' + sender.data('original') + '" alt="' + title + '"/>');
            img.css({ 'z-index': 1, 'position': 'absolute' }).fadeTo(0, 0);

            // fait disparaître l'ancienne image en fondu
            var oldImg = $('img', opts.target);
            if (oldImg.length > 0)
                oldImg.fadeTo('fast', 0, function() { $(this).remove(); });
            // fait apparaître la nouvelle image en fondu
            opts.target.append(img);
            img.fadeTo('fast', 1, function() {
                opts.title.html(title);
                opts.caption.html(caption);
                $(this).css('z-index', 2);
            });
        };

        // appeler lorsque tout a été initalisé
        container.init = function() {
            container.width(opts.thumbs.maxVisible == 0 ? opts.width : opts.thumbs.maxVisible * (opts.thumbs.hspacing + opts.thumbs.width));
            if (container.width() > thumbsCount * (opts.thumbs.width + opts.thumbs.hspacing)) {
                $(opts.previous).hide();
                $(opts.next).hide();
            }
            if (thumbsCount > 0)
                container.show(0);
            else {
                opts.title.hide(0);
                opts.caption.hide(0);
                opts.target.hide(0);
                container.parent().hide(0);
                container.hide(0);
            }
        };

        // boucle dans chaque item de la liste
        $('li', this).each(function(i) {
            var c = $(this);
            thumbsCount++;
            var t = c.children('img');
            if (i == 0 && opts.thumbs.autoSize)
                opts.thumbs.width = t.width();
            c.data('original', c.children('.original').html());
            c.data('caption', escape(c.children('.caption').html()));

            // thumb container style
            c.css({
                display: 'block',
                listStyleType: 'none',
                position: 'absolute',
                left: i * (opts.thumbs.width + opts.thumbs.hspacing)
            })
          .fadeTo(0, 0.5)
          .click(function() { container.show(i, $(this)); })
          .hover(function() { $(this).css('cursor', 'pointer').fadeTo('fast', 1); }, function() { $(this).fadeTo('fast', 0.5); });
        });

        // bouton previous et next
        $(opts.previous).css({ 'cursor': 'pointer' }).click(function() { container.scrollPrev(); });
        $(opts.next).css({ 'cursor': 'pointer' }).click(function() { container.scrollNext(); });

        // initalise les derniers trucs et good to go
        container.init();
    });
};
