(function($) {
    
    var W = window, $W = box.dom(W), D = W.document, $D = box.dom(D);

    
    // set the transparent GIF URL (used for preloading images)
    box.store('const').addDatas('TRANSPARENT_GIF', '/extension/redoute/design/web/img/common/transparent.gif');
    
    box.dom(document).ready(function() {
        
        var $core = $('#core'),
            l10n = box.get('l10n:slideshow'),
            tplSlideshow;
            
        $('#page').append('<div id="slideshow" />');
        
        tplSlideshow = [
            '<div id="{data@slideId}">',
                '<img alt="" src="/extension/redoute/design/web/img/common/transparent.gif">',
            '</div>'
        ];
        
        box.get('ui').create('loader.slideshow', {
            html: '<div id="slideshowLoader" />',
            insertTarget: '#core',
            insertStyles: {opacity: 0},
            insertAnimStyles: {opacity: 1},
            insertAnimDuration: 200,
            removeAnimStyles: {opacity: 0},
            removeAnimDuration: 150
        });
        
        box.get('ui').create('slideshow.pageBg', {
            loader: 'slideshow',
            source: '#slideshowDatas .item',
            tplMain: tplSlideshow,
            tplToolbar: [],
            
            datasMain: {
                insertTarget: '#slideshow',
                insertMethod: 'prependTo',
                slideId: 'slideshowImage'
            }
        });
        
        var slideshow = box.get('ui:slideshow.pageBg');
        slideshow.goToSlide = function(n) {
            var that = this;
            if (this.available) {
                this.currentImage = null;
                this.available = false;
                this.current = n;
                this.preload.single(that.datas[that.current][this.useSrc]);
                this.image.animate({opacity: 0}, 400, function() {
                    that.loader.show();
                });
            }
        };
        
        $core.append('<div id="slideshowNav"><ul /></div>');
        $core.append('<div id="slideshowInfos" />');
        
        var $slideshowDatas = $('#slideshowDatas').find('.item'), 
            $slideshowNav = $('#slideshowNav').find('ul'),
            $slideshowInfos = $('#slideshowInfos');

        $slideshowDatas.each(function(index) {
            var n = index + 1;
            $slideshowNav.append('<li><a href="#" data-slide="' + index + '">' + n + '</a>');
        });
        $slideshowDatas.parent().remove();
        
        $slideshowNav.find('a').click(function(e) {
            e.preventDefault();
            
            var $this = $(this),
                $lis = $this.closest('ul').find('li'),
                $as = $lis.find('a'),
                targetSlide = $this.data('slide');
            
            $lis.removeClass('on dynBgColor2');
            $as.removeClass('dynColor1 dynBgColor1');
            $slideshowInfos.fadeOut(500, function() {
                $(this).empty();    
            });
            slideshow.goToSlide(targetSlide);
        });
       
        box.subscribe('change>ui:slideshow.pageBg', function(e) {
            $slideshowNav.find('li').eq(e.source.current).addClass('on dynBgColor2').find('a').addClass('dynColor1 dynBgColor1');
            
            var itemId = $(e.source.datas[e.source.current].description).last().data('item-id')
            $slideshowInfos.html('<div class="item" data-item-id="' + itemId + '">' +
                                 '  <h2>' + e.source.datas[e.source.current].title + '</h2>' +
                                 '  <div class="description">' + e.source.datas[e.source.current].description + '</div>',
                                 '  <div class="details">' + e.source.datas[e.source.current].details + '</div>',
                                 '</div>')
                           .fadeIn(300);
            
        });
    });
})(jQuery);