var app = window.app || {};

app.Gallery = qs.createObject();
app.Gallery.prototype = {
    initialize: function (options) {
        this.options = $.extend({
            containerId: undefined
        }, options);

        this.container = $('#' + this.options.containerId);
        this.initRoyalSlider();
        return this;
    },

    /**
     * Create slideId => slideNum map
     * Method should be called before slider initialization
     */
    createId2numMap: function () {
        var map = {}, i, l, id, slide, slides = this.container.children();
        for (i = 0, l = slides.length; i < l; ++i) {
            slide = slides[i];
            id = (slide.dataset) ? slide.dataset.id : slide.getAttribute('data-id');
            map[+id] = i;
        }
        return map;
    },

    /**
     * @see http://dimsemenov.com/plugins/royal-slider/documentation
     */
    initRoyalSlider: function () {
        this.container.css('display', '');
        this.container.royalSlider({
            addActiveClass: true,
            arrowsNav: false,
            controlNavigation: 'none',
            autoScaleSlider: true, 
            autoScaleSliderWidth: 960,     
            autoScaleSliderHeight: 640,
            imageScalePadding: 10,
            imageScaleMode: 'fit',
            loop: true,
            fadeinLoadedSlide: false,
            globalCaption: true,
            keyboardNavEnabled: true,
            globalCaptionInside: false,
            hashchange: {
                enabled: true,
                change: true,
                prefix: 'image-',
                map: this.createId2numMap()
            },
            visibleNearby: {
                enabled: true,
                centerArea: 0.5,
                center: true,
                breakpoint: 650,
                breakpointCenterArea: 0.64,
                navigateByCenterClick: true
            }
        });
    }
};