import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'span',
    classNames: ['inline'],
    didReceiveAttrs() {
        let me = this;
        let previews = me.get('previews');
        if (Ember.$.type(previews) === 'string') {
            let sep = me.get('separator');
            me.set('previews', sep ? previews.split(sep) : [previews]);
        }
    },
    imageHeight: 22,
    imageStyle: 'border-radius: 8%; border: 1px solid #DCDCDC; max-width: 32px;',
    didInsertElement() {
        let me = this;
        let rel = me.get('elementId') + '_preview';
        let $overflow = '';

        me.$('a[data-rel="' + rel + '"]').colorbox({
            rel: rel,
            reposition: true,
            // scalePhotos: true,
            scrolling: false,
            photo: true,
            previous: '<i class="ace-icon fa fa-arrow-left"></i>',
            next: '<i class="ace-icon fa fa-arrow-right"></i>',
            close: '&times;',
            current: '{current} of {total}',
            maxWidth: '100%',
            maxHeight: '100%',
            onOpen: function() {
                $overflow = document.body.style.overflow;
                document.body.style.overflow = 'hidden';
            },
            onClosed: function() {
                document.body.style.overflow = $overflow;
            },
            onComplete: function() {
                Ember.$.colorbox.resize();
            }
        });

        Ember.run.once(() => {
            // add a custom loading icon
            $('#cboxLoadingGraphic').html('<i class="ace-icon fa fa-spinner orange fa-spin"></i>');
        });
    }
});