if (typeof jQuery != 'undefined') {
    if(jQuery.fn.jquery === '3.1.1'){
        console.log('Good version...')
        widget_code()
    }else{
        console.log('[load needed version...]')
        load_jq_script()
        setTimeout(()=> widget_code(),1000)
    }
}else{
    console.log('[jquery undefined...]')
    load_jq_script()
    setTimeout(()=> widget_code(),1000)
}
function widget_code() {
    const id_user = '8144069'

    var idTime = null
    const PostList = {
        template: `
          <article id="post-355" class="post-355 post type-post status-publish format-standard has-post-thumbnail  category-arts-culture category-diy category-vintage-projects-for-kids tag-antique-diy-for-kids tag-by-victoria-prima tag-diy tag-free-book tag-simple-diy single-post-content">
          <div class="post-header-inner">
            <div class="post-header-title"><h1 class="single-post-title" v-html="title"></h1></div>
          </div>
          <div class="single-featured">
            <img style="width:100%" :src="img_url" :alt="title"/>
          </div>
          <div class="post-meta single-post-meta">
           <span style="color:grey">CODEC sponsored article, {{ date_publish }}</span>
          </div>
          <div class="entry-content clearfix single-post-content" v-html="content_body"></div>
          </article>
        `,
        created() {
            // загружаем данные, когда представление создано
            // и данные реактивно отслеживаются
            console.log("CREATED COMPONENT")
            if(this.$route.params.camp_id != null){
                this.camp_id = this.$route.params.camp_id
                console.log('route camp_id:', this.camp_id)
                localStorage.setItem('camp_id_widget', this.camp_id)
            }
            if (this.$route.params.id != null) {
                var self = this
                this.id_post = this.$route.params.id
                console.log('route id_post:', this.id_post)
                setTimeout(self.get_one_post(this.id_post), 300)
            }
        },
        data: function () {
            return {
                id_post: null,
                content_body: null,
                title: null,
                date_publish: null,
                posts: [],
                post: [],
                img_url: null,
                shop: null,
                camp_id: null,
            }
        },
        watch: {
            '$route'(to, from) {
                start_widget.reload_flag = true
                this.get_my_data()
            },
            post: function (value) {
                clearTimeout(idTime)
                vue_cont.related_post(this.id_post)
                console.log('one_post', value)
                if (value != undefined) {
                    this.content_body = value.body
                    this.title = value.title
                    this.date_publish = value.created.replace('T',' ')
                    this.img_url = value.featured
                    this.shop = value.shop
                    this.id_post = value.id
                    document.title = value.title
                    stats_views.set_statistic_click(value.id, value.shop, this.camp_id)
                    stats_views.set_time_stat_one(this.camp_id, this.id_post) // set time 10 sec

                    if (value.body.indexOf("twitter") > 0) {
                        console.log("mounted twitter")
                        $.getScript('//platform.twitter.com/widgets.js')
                    }
                    if (value.body.indexOf("instagram") > 0) {
                        console.log("mounted instagram")
                        $.getScript('//www.instagram.com/embed.js')
                    }
                    this.add_vue_cont()
                    $('html, body').animate({scrollTop: 0}, 800);
                    setTimeout(this.set_statistic, 500) //enable
                }
            }
        },
        methods: {
            get_my_data: function () {
                clearTimeout(idTime)
                console.log('my_data_id_post:', this.id_post)
                vue_cont.related_post(this.id_post)
                var index = this.$route.params.index
                this.posts = this.$route.params.posts
                this.content_body = this.posts[index].body
                this.id_post = this.$route.params.id
                this.title = this.posts[index].title
                this.date_publish = this.posts[index].created
                this.img_url = this.posts[index].featured
                this.camp_id = this.posts[index].camp_id
                document.title = this.posts[index].title
                stats_views.set_statistic_click(this.id_post, this.posts[index].shop, this.posts[index].camp_id) // click stats
                stats_views.set_time_stat_one(this.posts[index].camp_id, this.id_post) // set time 10 sec
                //подгрузка ембедов загрука скриптов тут при переходе по ссылкам
                if (this.content_body.indexOf("twitter") > 0) {
                    console.log("mounted twitter")
                    $.getScript('//platform.twitter.com/widgets.js')
                }
                if (this.content_body.indexOf("instagram") > 0) {
                    console.log("mounted instagram")
                    $.getScript('//www.instagram.com/embed.js')
                }
                $('html, body').animate({scrollTop: 0}, 100);
                localStorage.setItem('camp_id_widget', this.camp_id)
                setTimeout(this.set_statistic, 500) //enable
            },
            get_one_post: function (id_post, camp_id) {
                console.log('[get_one_post start]')
                console.log('id_post:', id_post)
                console.log('camp_id:', camp_id)
                if(typeof camp_id === 'undefined' || camp_id==null ){
                    var camp_id_loc = localStorage.getItem('camp_id_widget')
                    if(camp_id_loc!=null && camp_id_loc!=''){
                        this.camp_id = camp_id_loc
                    }
                }
                var url = '//admin.codecprime.com/get_one_post/' + id_user + '/' + id_post
                var self = this
                $.getJSON(url, function (data) {
                    self.post = data
                })
            },
            set_statistic: function () {
                //start statistics views
                stats_views.stat_visible_user('0')
                stats_views.stat_visible_user('1')
                stats_views.stat_visible_user('2')
                stats_views.stat_visible_user('3')
                stats_views.stat_visible_user('4')
                stats_views.stat_visible_user('5')
            },
            add_vue_cont: function () {
                if (typeof vue_cont !== 'undefined') {
                    console.log("Mounted start Vue")
                    $('.single-container').empty()
                    $('.video_responsive').remove()
                    $('.post-header-inner').empty()
                    $('.post-share').empty()
                    $('.single-container').append('<style>iframe{width:100%}</style>')
                    $('.single-container').append(vue_cont.$el)
                } else {
                    console.log('vue_cont undefined:', vue_cont)
                }
            },
        },
    }
    const RelatedPost = {
        template: `
          <div>
          <h1 v-html="title"></h1>
          <span>{{ date_publish }}</span>
          <img style="width:100%" :src="img_url" :alt="title"/>
          <div v-html="content_body"></div>
          </div>
        `,
        data: function () {
            return {
                title: null,
                date_publish: null,
                content_body: null,
                post: [],
                img_url: null,
                id_post: null,
                camp_id: null,
            }
        },
        created() {
            if(this.$route.params.camp_id != null){
                this.camp_id = this.$route.params.camp_id
                console.log('route camp_id:', this.camp_id)
                localStorage.setItem('camp_id_widget', this.camp_id)
            }
            if (this.$route.params.id != null) {
                console.log('Related component id:', this.$route.params.id)
                this.get_one_post()
            }
        },
        watch: {
            '$route'(to, from) {
                this.get_one_post()
            },
            post: function (value) {
                clearTimeout(idTime)
                console.log("Related component id=" + this.$route.params.id)
                console.log("value=", value)
                vue_cont.related_post(this.$route.params.id)
                if (value != undefined) {
                    this.content_body = value.body
                    this.title = value.title
                    this.date_publish = value.created
                    this.id_post = value.id
                    document.title = value.title
                    this.img_url = value.featured
                    stats_views.set_statistic_click(value.id, value.shop, this.camp_id)
                    stats_views.set_time_stat_one(this.camp_id, this.id_post) // set time 10 sec
                    //подгрузка ембедов загрука скриптов тут при переходе по ссылкам
                    if (value.body.indexOf("twitter") > 0) {
                        console.log("mounted twitter")
                        $.getScript('//platform.twitter.com/widgets.js')
                    }
                    if (value.body.indexOf("instagram") > 0) {
                        console.log("mounted instagram")
                        $.getScript('//www.instagram.com/embed.js')
                    }
                    //load ads google asynh
                    $('html, body').animate({scrollTop: 0}, 800);
                    setTimeout( this.set_statistic, 500) //enable
                }
            },
        },
        methods: {
            get_one_post: function () {
                var id_post = this.$route.params.id
                console.log('get_one_post_related=' + id_post)
                if(typeof camp_id === 'undefined' || camp_id==null ){
                    var camp_id_loc = localStorage.getItem('camp_id_widget')
                    if(camp_id_loc!=null && camp_id_loc!=''){
                        this.camp_id = camp_id_loc
                    }
                }
                var url = '//admin.codecprime.com/get_one_post/' + id_user + '/' + id_post
                var self = this
                $.getJSON(url, function (data) {
                    self.post = data
                });
            },
            set_statistic: function () {
                stats_views.stat_visible_user('0')
                stats_views.stat_visible_user('1')
                stats_views.stat_visible_user('2')
                stats_views.stat_visible_user('3')
                stats_views.stat_visible_user('4')
                stats_views.stat_visible_user('5')
            },
        },
    }
    const CustomLink = {
        template: `
          <div>
          <h1 v-html="title"></h1>
          </div>
        `,
        data: function () {
            return {
                id:null,
                title:'You gan other website...' +
                    'if you want read any post then click header. Thanks.',
                shop_id: null, //for statistics
                camp_id: null, //for stats
            }
        },
        created() {
            if (this.$route.params.id != null) {
                console.log('Custom Link component id:', this.$route.params.id)
                clearTimeout(idTime)
                this.id = this.$route.params.id
                this.shop_id = this.$route.params.shop
                this.camp_id = this.$route.params.camp_id
                this.get_save_stat_and_go_user()
            }
        },
        methods: {
            get_save_stat_and_go_user: function (){
                var go_link = this.$route.params.go_link
                if(go_link != null){
                    stats_views.set_statistic_click(this.id, this.shop_id, this.camp_id)
                    var win = window.open(go_link, '_blank');
                    win.focus();
                }
            },
        },
    }
    //Router
    const router = new VueRouter({
        //mode: 'history',
        //base: '/test2.html/',
        routes: [
            {
                path: '/codec/:id',
                name: 'postlink',
                component: PostList
            },
            {
                path: '/codec/:id',
                name: 'postRelated',
                component: RelatedPost
            },
            {
                path: '/codec/:id',
                name: 'customLink',
                component: CustomLink
            },
        ]
    })
    var vue_cont = new Vue({
        data: {
            id: '',
            title: '',
            content_body: '',
            date_publish: '',
            relt: [],
            relateds: '',
        },
        router,
        template:
                `
          <div>
          <transition name="fade">
            <router-view></router-view>
          </transition>
          <h2 v-if="relateds.length>0">Related posts:</h2>
          <div class="row">
            <template v-for="(rel, index) in relateds">
              <div class="col-md-3">
                <router-link :to="{ name: 'postRelated', params: { id: rel.id, camp_id: rel.camp_id }}"><img
                    class="card-img-top" style="width:100%;border-radius:4px;" :src="rel.featured"
                    :alt="rel.title"/></router-link>
                <span class="post-title">
                                <router-link
                                    :to="{ name: 'postRelated', params: { id: rel.id, camp_id: rel.camp_id }}">{{ rel.title }}</router-link>
                              </span>

              </div>
            </template>
          </div>
          </div>
        `,
        watch: {
            relt: function (value) {
                console.log("relt=", value)
                if (value != 'undefined') {
                    this.relateds = value
                }
            }
        },
        methods: {
            related_post: function (id_post) {
                var url = '//admin.codecprime.com/related_post/' + id_user + '/' + id_post
                var self = this // create a closure to access component in the callback below
                $.getJSON(url, function (data) {
                    self.relt = data
                });
            },

        }
    }).$mount()
    var num_show = '1'
    var session = null
    var url_json = '//admin.codecprime.com/get_post_list/' + id_user + '/' + num_show
    const stats_views = new Vue({
        data: function () {
            return {
                shop_id: null,
                posts: [],
                seconds: 0,
                camp_id: null,
            }
        },
        methods: {
            stat_visible_user: function (val) {
                if(val == '0' && document.getElementById('unit_0')!=null) {
                    document.addEventListener('scroll', this.onScrollU1)
                }else if(val == '1' && document.getElementById('unit_1')!=null) {
                    document.addEventListener('scroll', this.onScrollU2)
                }else if(val == '2' && document.getElementById('unit_2')!=null) {
                    document.addEventListener('scroll', this.onScrollU3)
                }else if(val == '3' && document.getElementById('unit_3')!=null) {
                    document.addEventListener('scroll', this.onScrollU4)
                }else if(val == '4' && document.getElementById('unit_4')!=null) {
                    document.addEventListener('scroll', this.onScrollU5)
                }else if(val == '5' && document.getElementById('unit_5')!=null) {
                    document.addEventListener('scroll', this.onScrollU6)
                }
            },
            onScrollU1: function () {
                const vis_user = document.getElementById('unit_0')
                const posTop = vis_user.getBoundingClientRect().top
                console.log("vis_user.clientHeight=", vis_user.clientHeight)
                console.log("window.innerHeight=", window.innerHeight)
                console.log("posTop=", posTop)
                if (posTop + vis_user.clientHeight <= window.innerHeight && posTop >= 0) {
                    console.log("Visible block unit1=", posTop)
                    document.removeEventListener('scroll', this.onScrollU1);
                    console.log('send statistic unit1')
                    this.set_statistic(1)
                }
            },
            onScrollU2: function () {
                const vis_user = document.getElementById('unit_1')
                const posTop = vis_user.getBoundingClientRect().top
                if (posTop + vis_user.clientHeight <= window.innerHeight && posTop >= 0) {
                    console.log("Visible block unit2=", posTop)
                    document.removeEventListener('scroll', this.onScrollU2);
                    this.set_statistic(2)
                }
            },
            onScrollU3: function () {
                const vis_user = document.getElementById('unit_2')
                const posTop = vis_user.getBoundingClientRect().top
                if (posTop + vis_user.clientHeight <= window.innerHeight && posTop >= 0) {
                    console.log("Visible block unit3=", posTop)
                    document.removeEventListener('scroll', this.onScrollU3);
                    this.set_statistic(3)
                }
            },
            onScrollU4: function () {
                const vis_user = document.getElementById('unit_3')
                const posTop = vis_user.getBoundingClientRect().top
                if (posTop + vis_user.clientHeight <= window.innerHeight && posTop >= 0) {
                    console.log("Visible block unit4=", posTop)
                    document.removeEventListener('scroll', this.onScrollU4);
                    this.set_statistic(4)
                }
            },
            onScrollU5: function () {
                const vis_user = document.getElementById('unit_4')
                const posTop = vis_user.getBoundingClientRect().top
                if (posTop + vis_user.clientHeight <= window.innerHeight && posTop >= 0) {
                    console.log("Visible block unit5=", posTop)
                    document.removeEventListener('scroll', this.onScrollU5);
                    this.set_statistic(5)
                }
            },
            onScrollU6: function () {
                const vis_user = document.getElementById('unit_5')
                const posTop = vis_user.getBoundingClientRect().top
                if (posTop + vis_user.clientHeight <= window.innerHeight && posTop >= 0) {
                    console.log("Visible block unit6=", posTop)
                    document.removeEventListener('scroll', this.onScrollU6);
                    this.set_statistic(6)
                }
            },
            set_statistic: function (val) {
                var self = this
                this.posts = start_widget.posts
                $.getJSON("//admin.codecprime.com/get_view_stats", function (data) {
                    var infoStat = data
                    //infoStat.url = location.href
                    infoStat.id_publisher = id_user
                    infoStat.unit = val
                    infoStat.views_shown = 1
                    infoStat.camp_id = self.posts[val-1].camp_id
                    console.log("infoStatView=", infoStat)
                    $.post("//stats.codecprime.com/my_save_widget_views", infoStat)
                })
            },
            set_statistic_click: function(id, shop, camp_id){
                var infoStat = {}
                infoStat.url = location.href
                infoStat.id_post = id
                infoStat.click = 1
                infoStat.camp_id = camp_id
                infoStat.shop = shop
                infoStat.id_client = id_user
                console.log("infoStatClick=", infoStat)
                $.post("//stats.codecprime.com/my_save_widget_click", infoStat)
            },
            set_time_stat_one: function(camp_id, id_post) {
                console.log('[set_time_stat_one]')
                this.camp_id = camp_id
                this.id_post = id_post
                this.seconds = 0
                session = Math.floor(Math.random() * 10000000);
                var dataTime = {
                    seconds: this.seconds,
                    post_id: this.id_post,
                    camp_id: camp_id,
                    session: session,
                }
                console.log('SetStatsTime=', dataTime)
                idTime = setTimeout(this.set_time_stat, 10000)
                $.post("//stats.codecprime.com/my_save_time_sec", dataTime)
            },
            set_time_stat: function() {
                this.seconds = Number.parseInt(this.seconds) + 10
                var dataTime = {
                    seconds: this.seconds,
                    post_id: this.id_post,
                    camp_id: this.camp_id,
                    session: session,
                }
                console.log('SetStatsTime=', dataTime)
                idTime = setTimeout(this.set_time_stat, 10000)
                $.post("//stats.codecprime.com/my_save_time_sec", dataTime)
            },
        },
    });
    const start_widget = new Vue({
        el: '#app_codec_widget',
        data: {
            posts: [],
            res_req: false,
            reload_flag: false,
            targ: null,
            device: null,
        },
        router,
        watch: {
            reload_flag: function (val){
                if(val) {
                    console.log('[[watch posts start]]')
                    this.get_num_show()
                    this.get_list_start()
                }
            }
        },
        template: `
          <div id="app_codec_widget">
          <div class="text-center" v-if="posts.length==0">
            <img src="//admin.codecprime.com/load32nofon.gif"/>
          </div>
          <div class="row">
            <template v-for="(post, index) in posts">
              <div v-if="post.go_link"  :id="'unit_'+index" class="col-md-4">
                <router-link :to="{ name: 'customLink', params: { id: post.id, go_link: post.go_link, shop: post.shop, camp_id: post.camp_id }}">
                  <img style="width:100%;border-radius:4px;" :src="post.featured" :alt="post.title"/>
                  <h4 style="color:black">{{ post.title }}</h4>
                  <p v-if="post.summary" style="color:grey">{{ post.summary }}</p>
                </router-link>
              </div>
              <div v-else :id="'unit_'+index" class="col-md-4">
                <router-link :to="{ name: 'postlink', params: { id: post.id, posts: posts, index: index, camp_id: post.camp_id }}">
                  <img style="width:100%;border-radius:4px;" :src="post.featured" :alt="post.title"/>
                  <h4 style="color:black">{{ post.title }}</h4>
                  <p v-if="post.excerpt" style="color:grey">{{post.excerpt}}</p>
                </router-link>
              </div>
            </template>
          </div>
          </div>
        `,
        mounted() { // when the Vue app is booted up, this is run automatically.
            //targetting check this Country and Device
            this.get_targ_and_dev()
            setTimeout(()=>{
                this.get_num_show()
                this.get_list_start()
            },400)

            setTimeout(()=>{
                stats_views.stat_visible_user('0')
                stats_views.stat_visible_user('1')
                stats_views.stat_visible_user('2')
                stats_views.stat_visible_user('3')
                stats_views.stat_visible_user('4')
                stats_views.stat_visible_user('5')
            }, 700)
        },
        methods: {
            get_list_start: function (){
                var self = this // create a closure to access component in the callback below
                $.getJSON(url_json, function (data) {
                    console.log('data num show:', data)
                    if(data!='error') {
                        self.posts = data;
                    }else{
                        num_show = '1'
                        if(this.targ!=null && this.device!=null) {
                            console.log('targ not null 1 num!!!')
                            url_json = '//admin.codecprime.com/get_post_list/' + id_user + '/' + num_show + '/' + this.targ + '/' + this.device
                        }else{
                            url_json = '//admin.codecprime.com/get_post_list/' + id_user + '/' + num_show
                        }

                        self.res_req = true
                    }
                }).always(function (){
                    if(self.res_req){
                        console.log('always json reload')
                        self.get_list_post_json()
                    }
                    self.reload_flag = false
                })
            },
            get_list_post_json: function (){
                var self = this // create a closure to access component in the callback below
                if(this.targ!=null && this.device!=null){
                    url_json = '//admin.codecprime.com/get_post_list/' + id_user + '/' + num_show + '/' + this.targ + '/' + this.device
                }
                $.getJSON(url_json, function (data) {
                    console.log('data2 num show:', data)
                    if(data!='error') {
                        self.posts = data;
                        localStorage.setItem('num_show_widget', num_show)
                    }
                })
            },
            get_num_show: function (){
                console.log('get_nym_show start!')
                var num_show_loc = localStorage.getItem('num_show_widget')
                if(num_show_loc!=null || num_show_loc!='') {
                    num_show = Number.parseInt(num_show_loc)+1
                    if(this.targ!=null && this.device!=null){
                        console.log('targ not null!!!')
                        url_json = '//admin.codecprime.com/get_post_list/' + id_user + '/' + num_show + '/' + this.targ + '/' + this.device
                    }else {
                        url_json = '//admin.codecprime.com/get_post_list/' + id_user + '/' + num_show + '/'
                    }
                }
                localStorage.setItem('num_show_widget', num_show)
            },
            get_targ_and_dev: function (){
                var self = this
                $.getJSON("//admin.codecprime.com/get_view_stats", function (data) {
                    var infoStat = data
                    if(infoStat.country!=null) {
                        self.targ = infoStat.country
                    }
                    if(infoStat.device!=null){
                        self.device = infoStat.device
                    }
                    console.log("get_targetting=", infoStat)
                })
            },
        },
    });
}
function load_jq_script(){
    var js_script = document.createElement('script')
    js_script.type = "text/javascript"
    js_script.src = "https://code.jquery.com/jquery-3.1.1.min.js"
    js_script.async = true
    document.getElementsByTagName('head')[0].appendChild(js_script);
}