@extends('layouts.app')

@section('oncss')
<style>


</style>
@endsection

@section('navBar')

@endsection


@section('title')


@endsection

@section('onbody')

  <!-- MAIN BANNER CONTAINER -->
  <div id="main-container" :class="banner[selected].bannerInfo.theme" >
    <back-ground :url="banner[selected].bg" :blur="banner[selected].blurQuantity" :go-out="goOut" :bg-color="this.banner[this.selected].bgColor"></back-ground>
    <youtube-player ref="ytube" :video-id="this.banner[selected].vRef" v-if="this.banner[selected].vRef!=''"></youtube-player>
    <div class="left-column">
      <div class="contenido">
        <div class="imagen" :class="{'slow animated zoomIn' : !goOut, 'slow animated zoomOut' : goOut}">
          <img :src="banner[selected].bg" @mouseover="setBackBlur(2, banner[selected].blurQuantity)" @mouseleave="setBackBlur(prevBlurQuantity, 0)" />
        </div>
      </div>
    </div>
    <div class="right-column">

      <div class="banner-nav">
        <div class="left-arrow" :class="{'text-transparent' : selected == 0}">
          <span class="arrow" @click="prevBanner()"><i class="fas fa-long-arrow-alt-left"></i></span>
        </div>
        <div class="indicators" :class="{'animated flipInY' : !goOut, 'animated flipOutY' : goOut}">
          <span class="actual">@{{this.selected+1}}</span>
          <span class="bar">/</span>
          <span class="total">@{{this.getTotalBanners}}</span>
        </div>
        <div class="right-arrow" :class="{'text-transparent' : (selected+1 == getTotalBanners)}">
          <span class="arrow" @click="nextBanner()"><i class="fas fa-long-arrow-alt-right"></i></span>
        </div>
        <div class="clearing"></div>
      </div>

      <div class="contenido":class="{'slow animated slideInUp' : !goOut, 'slow animated slideOutUp' : goOut}" >
        <div class="titulo">
          <span>@{{banner[selected].bannerInfo.titulo}}</span>
        </div>

        <div class="subtitulo">
          <span>@{{banner[selected].bannerInfo.subtitulo}}</span>
        </div>

        <div class="frase-titulo">
          <span>@{{banner[selected].bannerInfo.fraseTitulo}}</span>
        </div>

        <div class="texto">
          <p>@{{ limita(this.banner[selected].bannerInfo.fraseTexto, 1000) }}
           </p>
        </div>

        <div class="link">
          <a :href="this.banner[selected].bannerInfo.linkLink">@{{banner[selected].bannerInfo.linkTexto}}</a>
        </div>
      </div>

    </div>
    <div class="clearing"></div>
  </div>


  <!-- SECOND CONTAINER  -->
  <div id="second-container">
    <div class="left-column">
      <div class="contenido">

        <div class="big-titulo">
          <span>Catálogo</span><span class="titulo-small">Descarga en pdf</span>
        </div>

        <div class="subtitulo">
          <span>Visualiza todos nuestros productos</span>
        </div>

        <div class="texto">
          <p>Descarga nuestro catálogo y accede facilmente al total de productos disponibles
            en nuestros almacenes.
           </p>
        </div>

        <div class="link">
          <a href="#">Descargar</a>
        </div>
      </div>
    </div>
    <div class="right-column">
      <div class="contenido">

        <div class="big-titulo">
          <span>blog</span><span class="titulo-small">Recetas</span>
        </div>

        <div class="subtitulo">
          <span>Canelones con jamon y queso</span>
        </div>

        <div class="texto">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam.
           </p>
        </div>

        <div class="link">
          <a href="#">Ver más</a>
        </div>
      </div>
    </div>
    <div class="clearing"></div>
  </div>


@endsection

@section('after-header')
<div id="after-header">

  <div class="section-title">
    <div class="imagen" style="background: url('/imagenes/familias/chocolate.jpg'); background-size:cover;background-position:50% 50%;">
    </div>
    <div class="title">
      <div class="text-wraper">
        <span>Nuestros productos</span>
      </div>
      <div class="explication">
        <p>
          La mayor familia de productos posible está en nuestros almacenes.
          Haznos saber tus necesidades y haremos todo lo posible por satisfacerlas.
        </p>
        <div class="subtitle">
          <span>suministros para panadería · pastelería · heladería</span>
        </div>
      </div>
    </div>

    <div class="clearing"></div>
  </div>

  <div class="family">
      <div class="content" onclick="addClass(this, 'go-sub');">
        <div class="background" style="background: url('/imagenes/familias/nuts.jpg'); background-size:cover;background-position:50% 50%;">
          <div class="back-overlay"><span><a href="{{ $link }}"><i class="far fa-plus-square"></i></a></span></div>
        </div>
        <div class="name" onmouseover="removeClass(this.parentNode, 'go-sub')">
          <span>Avellanas</span><div class="back-top"><span><i class="far fa-caret-square-up"></i></span></div>
        </div>
        <div class="subfamilias">
          <ul>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
          </ul>
        </div>
      </div>
  </div>

  <div class="family">
      <div class="content" onclick="addClass(this, 'go-sub');">
        <div class="background" style="background: url('/imagenes/familias/nuts.jpg'); background-size:cover;background-position:50% 50%;">
          <div class="back-overlay"><span><i class="far fa-plus-square"></i></span></div>
        </div>
        <div class="name" onmouseover="removeClass(this.parentNode, 'go-sub')">
          <span>Avellanas</span><div class="back-top"><span><i class="far fa-caret-square-up"></i></span></div>
        </div>
        <div class="subfamilias">
          <ul>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
          </ul>
        </div>
      </div>
  </div>

  <div class="family">
      <div class="content" onclick="addClass(this, 'go-sub');">
        <div class="background" style="background: url('/imagenes/familias/nuts.jpg'); background-size:cover;background-position:50% 50%;">
          <div class="back-overlay"><span><i class="far fa-plus-square"></i></span></div>
        </div>
        <div class="name" onmouseover="removeClass(this.parentNode, 'go-sub')">
          <span>Avellanas</span><div class="back-top"><span><i class="far fa-caret-square-up"></i></span></div>
        </div>
        <div class="subfamilias">
          <ul>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
          </ul>
        </div>
      </div>
  </div>

  <div class="family">
      <div class="content" onclick="addClass(this, 'go-sub');">
        <div class="background" style="background: url('/imagenes/familias/nuts.jpg'); background-size:cover;background-position:50% 50%;">
          <div class="back-overlay"><span><i class="far fa-plus-square"></i></span></div>
        </div>
        <div class="name" onmouseover="removeClass(this.parentNode, 'go-sub')">
          <span>Avellanas</span><div class="back-top"><span><i class="far fa-caret-square-up"></i></span></div>
        </div>
        <div class="subfamilias">
          <ul>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
            <li><a href="{{ $link }}">Subfamilia 1</a></li>
          </ul>
        </div>
      </div>
  </div>



</div>

@endsection

@section('contact')
<div id="contactar">
  <div class="contact-form">
    <div class="titulo"><span>Déjanos ayudarte</span></div>
    <form action="" method="POST">

      <div class="line">
        <input class="alone" type="text" name="nombre" placeholder="nombre (requerido)" required />
      </div>

      <div class="line">
        <input type="phone" name="telefono" placeholder="teléfono"/>
        <input type="mail" name="email" placeholder="email (requerido)" required />
      </div>

      <div class="line message">
        <div class="titulo"><span>¿Cómo podemos ayudarte?</span></div>
        <textarea name="nombre"></textarea>
      </div>


      <div class="line">
        <input class="button-send" type="submit" value="Contactar"/>
      </div>

    </form>
  </div>
</div>
@endsection

@section('onjs')
<script>

// JS functions

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);

    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}


// JQUERY Functions

$(document).ready(function() {
  $('.open-menu').on('click', function() {
     $('.overlay').addClass('open');
  });


  $('.close-menu').on('click', function() {
    $('.overlay').removeClass('open');
  });

  var header = new Waypoint({
    element: $('#second-container'),
    handler: function(direction) {
      if(direction == 'down') {
        $([document.documentElement, document.body]).animate({
          scrollTop: $("#after-header").offset().top
        }, 600);
      }

    },
    offset: '70%'
  });

  var title = new Waypoint({
    element: document.getElementById('after-header'),
    handler: function(direction) {
      if(direction == 'down') {
         $('#after-header').children().children('.title').children('.text-wraper').children().addClass('animated fadeIn');
      }

      if(direction == 'up') {
        $([document.documentElement, document.body]).animate({
          scrollTop: $("#header").offset().top
        }, 600);
      }

    },
    offset: '10%'
  });

  var contactar = new Waypoint({
    element: $('#contactar'),
    handler: function(direction) {
      if(direction == 'down') {
        $([document.documentElement, document.body]).animate({
          scrollTop: $("#contactar").offset().top
        }, 600);
      }

    },
    offset: '90%'
  });

  var footer = new Waypoint({
    element: $('#footer'),
    handler: function(direction) {
      if(direction == 'down') {
        $([document.documentElement, document.body]).animate({
          scrollTop: $("#footer").offset().top
        }, 600);
      }

    },
    offset: '90%'
  });

});

// VUE COMPONENTS

Vue.component('back-ground', {
  props:['url', 'blur', 'goOut', 'bgColor'],
  data: function() {
    return {

    }
  },
  template:
  `<div class="background-img" :style="getStyles(this.url, this.getBlur)" :class="{'fadeblur' : this.goOut, 'fadeblurIn' : !this.goOut}"></div>`,
  methods: {
    getStyles : function(url, blur) {
      if(this.bgColor!='') {
        styles = 'backgroundImage:linear-gradient('+this.bgColor.replace(")", ", 0.8)")+', '+this.bgColor.replace(")", ", 0.6)")+', '+this.bgColor.replace(")", ", 0.6)")+', '+this.bgColor.replace(")", ", 0.1)")+'), url("'+url+'"); -webkit-filter: blur('+blur+'); -moz-filter: blur('+blur+'); -o-filter: blur('+blur+'); -ms-filter: blur('+blur+'); filter: blur('+blur+');';
      } else {
        styles = 'backgroundImage: linear-gradient(rgba(0,0,0, 0.6), rgba(0,0,0, 0.6), rgba(0,0,0, 0.6), rgba(0,0,0, 0.2)), url("'+url+'"); -webkit-filter: blur('+blur+'); -moz-filter: blur('+blur+'); -o-filter: blur('+blur+'); -ms-filter: blur('+blur+'); filter: blur('+blur+');';
      }
      return styles;
    }

   },
  mounted: function() {

  },
  computed: {
    getBlur : function() {
      return this.blur+'px';
    }
  },
  beforeUpdate : function() {

  }
});

Vue.component('youtube-player', {
  template:
  `<div class="background-vid">
    <div class="video-container">
      <div class="video-placeholder" >
        <div class="video-placeholder-cover">Placeholder</div>
      </div>
    </div>
    <div class="overlay-vid"> </div>
  </div>

  `,
  props: {'videoId': String },
  data(){
    return {
      'youtubeCallbackName': 'onYouTubeIframeAPIReady',
      'youtubeExistsFlag':   '$isYoutubeFrameAPIReady',
      YTPlayer : ''
    }
  },
  computed: {
    youtubeVideoID(){
      if(this.videoId.indexOf(':/') !== -1)
      {
        const catcher = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
        const res = catcher.exec(this.videoId);
        if(res && res[1]){
          return res[1];
        }
      }

      return this.videoId;
    }
  },
  mounted : function() {
    if(!this.hasYoutubeFrameAPI()){
      this.injectYoutubeFrameAPI();
    }
    this.whenYoutubeAPIReady().then(
      ()    => {
        const player = this.$el.querySelector('.video-placeholder');
        player.id = 'player-'
          + Math.floor(Math.random()*1024)
          + Date.now()
          + Math.floor(Math.random()*1024);

         this.YTPLayer = new YT.Player(player.id, {
              height: '130%',
              width: '120%',
              videoId: this.youtubeVideoID,
              playerVars: {
                  autoplay:'1',
                  rel:0,
                  showinfo:0,
                  controls:0,
                  loop:1,
                  iv_load_policy:0,
                  start:28,
                  mute:1,
                  end : 69,
                  playlist : this.youtubeVideoID
              },
         });
      },
      error => console.error(error)
    );
  },
  created : function() {

  },
  methods: {
    whenYoutubeAPIReady(){
      const existsFlag = this.youtubeExistsFlag;
      return new Promise(function(resolve, reject){
        let elapsed = 0;
        let intervalHandle;
        let checker = function(){
          elapsed += 48;
          if(!!window[existsFlag]){
            clearTimeout(intervalHandle);
            resolve();
          }
          else{
            if(elapsed <= 15000){
              intervalHandle = setTimeout(checker, 48);
            }
            else{
              reject("timeout");
            }
          }
        };

        setTimeout(checker,48);
      });
    },
    hasYoutubeFrameAPI(){
      if(!this.hasYTFrame)
      {
        this.hasYTFrame = !!(document.getElementsByClassName('.yt-frame-api').length);
      }
      return this.hasYTFrame;
    },

    injectYoutubeFrameAPI(){
      const youtubeExistsFlag   = this.youtubeExistsFlag;
      const youtubeCallbackName = this.youtubeCallbackName;

      window[this.youtubeCallbackName] = window[this.youtubeCallbackName] || function() {
        window[youtubeExistsFlag] = true;
        window[youtubeCallbackName] = null;
        delete window[youtubeCallbackName];
      }

      var tag       = document.createElement('script');
      var first     = document.getElementsByTagName('script')[0];
      tag.src       = "https://www.youtube.com/iframe_api";
      tag.className = "yt-frame-api";
      first.parentNode.insertBefore(tag, first);
    }
  }
});

var bus = new Vue();


// VUE main app function

const app = new Vue({
    el: '#first-view',
    data: {
        introMessage : "",
        scrolled: false,
        initial:false,
        fullLoaded:false,
        goOut : false,
        selected : 0,
        wheelMove : 0,
        prevBlurQuantity : 0,
        isFullscreen: false,
        banner : [
          {
            bg : "/imagenes/backgrounds/bakery_1920.jpg",
            vRef : "",
            blurQuantity : 20,
            bgColor : "rgb(255,255,255)",
            bannerInfo : {
              titulo : "Suministros de genero y material",
              subtitulo : "para",
              fraseTitulo : "panadería, pastelería y heladería",
              fraseTexto : `
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
              totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
              Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
              sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
              Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
              nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
              velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
              totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
              sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
              Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
              numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
              Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
              nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
              esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
              `,
              linkLink : "/nosotros/",
              linkTexto : "Quienes sómos",
              theme : 'dark'
            }
          },

        {
          bg : "/imagenes/backgrounds/cake_max_q.jpg",
          vRef : "",
          blurQuantity : 20,
          bgColor : "rgb(255,255,255)",
          bannerInfo : {
            titulo : "Nueva receta",
            subtitulo : "Haz las delicias de tus invitados",
            fraseTitulo : "Pastel de chocolate con oreo",
            fraseTexto : `
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
            sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
            velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
            sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
            sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
            numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
            esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            `,
            linkLink : "/recetas/pastel-chocolate-oreo",
            linkTexto : "Ver receta",
            theme : 'dark'
          }
        }

      ]
    },
    methods: {
      notify: function(message) {
        let mensaje = this.$toasted.show(message, {position : 'bottom-center', duration: 1500});
      },

      run: function() {
        this.goOut=!this.goOut;
      },
      handleScroll () {
        this.scrolled = window.scrollY > 0;
      },
      onMuoseOver () {
        //definimos fullLoaded
        this.fullLoaded = true;
      },
      increaseSel : function() {
        if(this.selected < this.banner.length-1) {
          this.selected++;
        }
      },
      decreaseSel : function() {
        if(this.selected > 0) {
          this.selected--;
        }
      },
      getSelected : function() {
        return this.selected;
      },
      setSelected : function(value) {
        this.selected==value;
      },
      setBackBlur : function(value, previous) {
        this.banner[this.selected].blurQuantity=value;
        this.prevBlurQuantity = previous;
      },
      nextBanner : function() {
        setTimeout(function() {this.run()}.bind(this), 100);
        setTimeout(function() {this.increaseSel()}.bind(this), 1000);
        setTimeout(function() {this.run()}.bind(this), 1000);
      },
      prevBanner : function() {
        setTimeout(function() {this.run()}.bind(this), 100);
        setTimeout(function() {this.decreaseSel()}.bind(this), 1000);
        setTimeout(function() {this.run()}.bind(this), 1000);
      },
      limita : function(area_texto, max) {
        if(area_texto.length>=max){
          area_texto=area_texto.substring(0,max);
          area_texto+='...';
        }
        return area_texto;
      },

      // DETECTING MOBILES

      isMobile: function() {
    	   var check = false;
        (function(a){
          if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
      }

    },
    created () {

      //this.addWheelEvent();
      //notify message
      // this.notify(this.introMessage);
      //register service worker
      if ('serviceWorker' in navigator && 'PushManager' in window) {
          window.addEventListener('load', function() {
              navigator.serviceWorker.register('/serv-worker.js').then(function(registration) {
                  // Registration was successful
                  console.log('ServiceWorker registration successful with scope: ', registration.scope);
              }, function(err) {
                  // registration failed :(
                  console.log('ServiceWorker registration failed: ', err);
              });
          });
      }

    },
    updated : function() {

    },
    ready () {

    },
    destroyed () {
      // this.removeWheelEvent();
      //removing scroll event
      // window.removeEventListener('scroll', this.handleScroll);
      //entering mouseover event
      // window.removeEventListener('mouseover', this.onMouseOver);

    },
    computed : {
      getTotalBanners : function() {
        return this.banner.length;
      }
    }

});


</script>
@endsection