﻿/* 
---------------------------- */
(function($) {

    $.banners = {
        version: '2.1.4',
        slideshowActive: false,
        slideshowTimer: 0,
        slideshowResetTimer: 0,
        currentIndex: 0,
        itemCount: 0
    };

    $.banners.opts = {
        target: '',
        targetContent: '',
        targetContentTitle: '',
        targetContentText: '',
        transition: 'fade', /* fade|slide */
        transitionSpeed: 'normal',
        culture: 'en',
        width: -1,
        normalClass: '',
        selectedClass: 'active',
        showStartPauseButton: false,
        slideshowSpeed: 5000,
        autoStartSlideshow: false,
        onStart: $.noop,
        onPause: $.noop,
        onLoad: $.noop,
        onChange: $.noop
    };

    $.banners.objects = {
        startPauseButton: null,
        controlBar: null,
        banners: null,
        content: null
    };

    /* $.banners.markups: 
    * TBD */
    $.banners.markups = {};
    $.banners.markups.banner = '<div class="banner"></div>';
    $.banners.markups.img = '<img class="banner-img" src="" />';
    $.banners.markups.bannerTitle = '<div class="title"></div>';
    $.banners.markups.bannerText = '<div class="text"></div>';

    /* $.banners.sel: 
    * TBD */
    $.banners.sel = {};
    $.banners.sel.nextBanner = '.next-banner';
    $.banners.sel.currentBanner = '.current-banner';
    $.banners.sel.contentTitle = '.title';
    $.banners.sel.contentText = '.text';

    /* static functions
    ------------------------------------*/

    /* $.banners.slideshow: 
    * Affiche les bannières dans un style slideshow,
    * les unes après les autres. */
    $.banners.slideshow = function(args) {
        // pas besoin de slideshow si on a qu'une seule image
        if ($.banners.itemCount > 1) {
            var opts = { 'speed': this.opts.slideshowSpeed, 'action': null };
            $.extend(opts, args);

            /* validation des options */
            if (opts.action != null && opts.action != 'start' && opts.action != 'stop' && opts.action != 'reset')
                throw 'Invalid value for [action] option. Valid values: \'start\', \'stop\', null';

            /* Démarrage ou arrêt du slideshow */
            if (opts.action == 'reset') {
                clearInterval(this.slideshowTimer);
                clearTimeout(this.slideshowResetTimer);
                this.slideshowResetTimer = 0;
                this.slideshowTimer = 0;
                this.slideshowActive = false;
                this.slideshowResetTimer = setTimeout('$.banners.slideshow()', opts.speed);
            } else if (opts.action == 'start' || (opts.action == null && !this.slideshowActive)) {
                this.slideshowActive = true;
                this.slideshowTimer = setInterval('$.banners.showNext()', opts.speed);
                if ($.banners.opts.showStartPauseButton && $.banners.objects.startPauseButton != null)
                    $.banners.objects.startPauseButton.text($.banners.opts.culture == 'en' ? 'Pause' : 'Arrêt');
            } else if (opts.action == 'stop' || (opts.action == null && this.slideshowActive)) {
                clearInterval(this.slideshowTimer);
                this.slideshowTimer = 0;
                if ($.banners.opts.showStartPauseButton && $.banners.objects.startPauseButton != null)
                    $.banners.objects.startPauseButton.text($.banners.opts.culture == 'en' ? 'Start' : 'Démarrer');
            }
        }
    };

    /* $.banners.showNext: 
    * TBD */
    $.banners.showNext = function() {
        this.showIndex((this.currentIndex + 1 > this.itemCount - 1) ? 0 : this.currentIndex + 1);
    };

    /* $.banners.showPrevious: 
    * TBD */
    $.banners.showPrevious = function() {
        this.showIndex(this.currentIndex - 1 > -1 ? this.currentIndex - 1 : this.itemCount - 1);
    };

    /* $.banners.showIndex: 
    * TBD */
    $.banners.showIndex = function(index) {
        // Change la bannière courante
        $.banners.currentIndex = index;
        // Cherche le url a loader
        var li = $('li:eq(' + index + ')', $.banners.objects.controlBar);
        var url = li.children('a').data('url');
        var next = $($.banners.sel.nextBanner);
        /* on va créée le div contenant la prochaine 
        * bannière ici, s'il n'existe pas déjà */
        if (!next.length) {
            next = $($.banners.markups.banner).addClass($.banners.sel.nextBanner.substr(1)).append('<img class="banner-img" src="' + url + '" onload="$.banners.opts.onLoad(this);" />').appendTo($.banners.objects.banners);
            //$.banners.opts.onLoad();
        }
        var current = $($.banners.sel.currentBanner);
        // Change la la classe active
        $('li', $.banners.objects.controlBar).removeClass($.banners.opts.selectedClass).eq(index).addClass($.banners.opts.selectedClass);
        // Trouve la bannière à afficher
        var target = next.find('.banner-img[src="' + url + '"]');
        if (target.length <= 0) {
            // Si la bannière n'a pas été créée encore
            $.banners.loadIndex(index, url);
        } else {
            // Charge le contenu s'il y a lieu
            if ($.banners.objects.content != null) {
                $.banners.objects.content.children($.banners.sel.contentTitle).html($('.title', li).html());
                $.banners.objects.content.children($.banners.sel.contentText).html($('.text', li).html());
            }
            // Animation
            if ($.banners.opts.transition == 'slide') {
                throw 'Not yet implemented';
            } else {
                //$.banners.opts.onLoad();
                target.parent().hide(0).css({ 'z-index': 3 }).fadeIn($.banners.opts.transitionSpeed, function() {
                    // Change les classes des bannières pour mettre la 'next' comme 'courante'
                    next.removeClass($.banners.sel.nextBanner.substr(1)).addClass($.banners.sel.currentBanner.substr(1)).css('z-index', '2');
                    current.removeClass($.banners.sel.currentBanner.substr(1)).addClass($.banners.sel.nextBanner.substr(1)).css('z-index', '1');
                });
                $.banners.opts.onChange(index);
            }
        }
    };
    /* $.banners.loadIndex: 
    * TBD */
    $.banners.loadIndex = function(index, url) {
        if (typeof (url) == 'undefined')
            var url = $('li:eq(' + index + ')', $.banners.objects.controlBar).children('a').data('url');
        var banner = $($.banners.sel.nextBanner).css({ 'z-index': '1', 'visibility': 'hidden' });
        $('img.banner-img', banner).remove();
        /*var img = new Image;
        img.className = "banner-img";*/

        var img = $('<img class="banner-img" src="' + url + '" onload="$.banners.opts.onLoad(this);"/>').appendTo(banner);
        if (!img.get(0).complete) {
            img.bind('load', function() {
                var img = $(this);
                img.unbind('load');
                img.parent().show();
                img.parent().css('visibility', 'visible');
                //$.banners.opts.onLoad();
                $.banners.showIndex(index);
            });
        } else {
            img.parent().show();
            img.parent().css('visibility', 'visible');
            $.banners.opts.onLoad(img.get(0));
            $.banners.showIndex(index);
        }
    };

    $.fn.banners = function(args) {

        $.extend($.banners.opts, args);

        $.banners.objects.controlBar = $(this);
        $.banners.objects.banners = $($.banners.opts.target);
        if ($.banners.opts.targetContent != '')
            $.banners.objects.content = $($.banners.opts.targetContent);

        /* si la première image n'est pas wrapper correctement dans une div.banner */
        $.banners.objects.banners.children('img').wrap($($.banners.markups.banner));
        /* la première est présentement la bannière courante */
        $.banners.objects.banners.children('.banner').addClass($.banners.sel.currentBanner.substr(1)).css('z-index', 3).children('img').addClass('banner-img');

        var li = $('li', this);
        $.banners.itemCount = li.length;

        /* cache les points si on en a 1 ou moins */
        if ($.banners.itemCount < 2)
            li.hide(0);

        li.each(function(i) {
            var dom = this;
            var $this = $(this);
            var a = $('a', this);
            var url = a.attr('href');

            /* Ajoute la classe, et la classe active sur le premier item */
            $this.addClass($.banners.opts.normalClass + (i == 0 ? ' ' + $.banners.opts.selectedClass : ''));

            a.attr({ 'href': 'javascript:;' })
                .text(i)
                .data('url', url)
                .click(function() {
                    if ($('.banner:animated', $.banners.objects.banners).length <= 0 && $.banners.currentIndex != i) {
                        $.banners.slideshow({ 'action': 'reset' }); $.banners.opts.onPause();
                        $.banners.showIndex(i);
                    }
                })
                .hover(function() { $(this).addClass($.banners.opts.selectedClass); },
                        function() { if ($.banners.currentIndex != i) $(this).removeClass($.banners.opts.selectedClass); });

            if ($.banners.opts.showStartPauseButton) {
                throw 'Not yet implemented.';
                /*$('<a class="start-pause"></a>')
                /*.attr({ 'href': 'javascript:;' })
                .text('Pause')
                .click(function() { $.banners.slideshow(); return false; })
                .wrap('<li class="start-pause" />')
                .appendTo($.banners.objects.controlBar);*/
            }

        });

        //$.banners.opts.onLoad();

        if ($.banners.opts.autoStartSlideshow)
            $.banners.slideshow();
    };
})(jQuery);
