// ---------------------------------------------------------------------------------
//
// Component: img-res
//
// Input Props:
//      - src: local path to image (ie. "img/tralala.png")
//      - src-xs: local path to image for mobile (ie. "img/tralala-xs.png")
//
//
Vue.component('img-res',
{
    props:
        [
            'src', 'srcXs'
        ],
    data: function ()
    {
        return {
            isNowMobile: false
        }
    },
    computed:
        {
            cHasImgXs: function ()
            {
                return this.srcXs != undefined && this.srcXs != 'null' && this.srcXs != null && this.srcXs != '' ? this.srcXs : null
            }
        },
    mounted: function ()
    {
        this.$nextTick(function ()
        {
            window.addEventListener('resize', this.getWindowWidth);

            //Init
            this.getWindowWidth();
        });
    },
    methods:
        {
            getWindowWidth: function (event)
            {
                this.isNowMobile = document.documentElement.clientWidth < 768;
            },
        },
    template: '<img class="forSize" :src="cHasImgXs && isNowMobile ? srcXs : src" />'
});