(function (ns) {
    /**
     * @alias app.gallery.View
     */
    ns.View = function () {
        this.construct.apply(this, arguments);
    };

    ns.View.prototype.construct = function (options) {
        this.options = $.extend(
            {
                type: undefined,
                containerId: undefined
            },
            options
        );

        //console.log(PhotoSwipe._updateHash);

        this.container = $('#' + this.options.containerId);
        if (!this.container.length) {
            alert('Gallery container was not found.');
            return;
        }

        switch (this.options.type) {
            case 'list':
                this.initListView();
                break;

            case 'slider':
                this.initSliderView();
                break;

            default:
                alert('Unknown gallery type.');
                return;
        }
    };

    /**
     * @see https://fancyapps.com/fancybox/3/docs/#options
     */
    ns.View.prototype.initListView = function () {
        $('a', this.container).fancybox({
            buttons: [
                "close"
            ],
            hash: false,
            beforeShow: function (instance, slide) {
                var hash = instance.group[slide.index].opts.$orig.data('id');
                window.location.hash = '#' + hash;
            },
            beforeClose: function () {
                window.location.hash = '#';
            }
        });

        setTimeout(function () {
            var location = '' + window.location;
            if (-1 === location.indexOf('#')) {
                window.location.replace(location + '#');
            } else {
                var hash =  window.location.hash.substring(1);
                $('a', this.container).each(function (i) {
                    var $a = $(this);
                    if ($a.data('id') === hash) {
                        $a.trigger('click');
                        return false;
                    }
                });
            }
        }, 100);

    };

    /**
     * @see http://dimsemenov.com/plugins/royal-slider/documentation
     */
    ns.View.prototype.initSliderView = 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
            }
        });
    };

    /**
     * Create slideId => slideNum map
     * Method should be called before slider initialization
     */
    ns.View.prototype.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;
    };
})(qs.defineNS('app.gallery'));