var empresa = {
    template: '#empresa',
    data: function () {
        return {
            titulo: 'Empresa',
            texto: `<p>Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar la belleza y cuidados personalizados de la piel, con base científica.</p>
                    <p>La línea profesional ESPECIFICOS Buenos Aires, fue creada hace diez años por iniciativa de un matrimonio de químicos cosméticos, con más de 25 años de experiencia en la industria del cuidado de la piel. Quienes han unido su pasión por la cosmética y experiencia para desarrollar y perfeccionar una extensa gama de productos que podrán dar solución a las demandas y expectativas de sus clientas más exigentes.</p>
                    <p>Tratamientos pensados desde una profesional de la estética hacia sus colegas, consciente de la problemática a la que cada una de las profesionales se enfrenta cada día. Combinando un enfoque personalizado de tratamientos con métodos no invasivos, basados en sistemas específicos para cada instancia de la piel.</p>
                    <p>Tratando y compensando los distintos biotipos cutáneos en cada necesidad en particular, con sistemas de vanguardia, siempre basados en el profundo estudio de la piel. Hoy, la Metodología Específica, combinando un enfoque personalizado de tratamientos estéticos, ingredientes puros concentrados, vehículos de alto desarrollo, protocolos de procedimiento innovadores, como también estrictos controles de calidad internacional, goza de una incuestionable reputación de excelencia.</p>
                    <p>La ética, el apoyo profesional constante y la formulación constituyen los valores fundamentales de ESPECIFICOS Buenos Aires. </p>`,
            timeline: [{
                title: 'Inicio',
                description: 'Non non ex eu sunt et adipisicing labore nostrud minim est irure anim occaecat.',
                date: '01 de Enero de 1990'
            }, {
                title: 'Primer evento',
                description: 'Commodo veniam consequat aliquip tempor exercitation.',
                date: '24 de Julio de 1993'
            }, {
                title: 'Segundo evento',
                description: 'Ut minim non duis laboris cillum officia eiusmod consectetur mollit cillum dolore minim.',
                date: '12 de Septiembre de 1994'
            }, {
                title: 'Tercer evento',
                description: 'Duis nulla elit consectetur consectetur ad duis eu et.',
                date: '01 de Diciembre de 1994'
            }, {
                title: 'Cuarto evento',
                description: 'Proident laboris amet cupidatat tempor nostrud magna dolor cupidatat minim proident sint.',
                date: '22 de Mayo de 1998'
            }, {
                title: 'Quinto evento',
                description: 'Non proident cupidatat incididunt cupidatat nostrud culpa id.',
                date: '30 de Agosto de 2015'
            }],
            scrolled: false
        }
    }
}
var elements = [];

var productos = {
    template: '#productos',
    data: function () {
        return {
            titulo: 'Productos',
            categories: Object.keys(productsByCategory).map(function (p) {
                return {
                    path: p,
                    name: p
                }
            }),
            activeCategory: 'higiene'
        }
    }
}

window.onscroll = function () {
    elements = elements.reduce(function (acc, e) {
        if (isInViewport(e)) {
            e.className = 'discover-li'
            return acc;
        } else {
            acc.push(e);
            return acc;
        }
    }, [])
    if (elements.length === 0) {
        window.onscroll = function () {};
    }
};

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    var html = document.documentElement;
    return (rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth))
}

Vue.directive('scroller', {
    inserted: function (el) {
        elements.push(el);
    }
});

Vue.component('empresa', empresa);
Vue.component('productos', productos);

var productsByCategory = {
    higiene: [{
        id: '1',
        name: 'Exfoliating scrub',
        shortDescription: 'Piel fresca, descongestiva y limpia. Prepara a la piel para recibir el tratamiento posterior',
        img: 'https://especificosba.com.ar/Images/thumbs/exfoliating_scrub.png'
    }, {
        id: '2',
        name: 'Emulsion de higiene',
        shortDescription: 'Emulsión de limpieza, demaquillante, de PH neutro, hipoalergénica. Indicada para todo tipo de piel',
        img: 'https://especificosba.com.ar/Images/thumbs/emulsion_higiene.png'
    }], 
    mascaras: [{
        id: '3',
        name: 'Dynamic Do All 1',
        shortDescription: 'Laboris officia adipisicing voluptate magna fugiat deserunt magna.',
        img: 'https://especificosba.com.ar/Images/thumbs/dda_1.png'
    },{
        id: '4',
        name: 'Dynamic Do All 2',
        shortDescription: 'Id officia ex laboris consectetur duis do quis.',
        img: 'https://especificosba.com.ar/Images/thumbs/dda_2.png'
    }, {
        id: '5',
        name: 'Refreshing mask',
        shortDescription: 'Dolore adipisicing laborum elit proident ipsum quis voluptate duis.',
        img: 'https://especificosba.com.ar/Images/thumbs/refreshing_mask.png'
    }, {
        id: '6',
        name: 'Specific mask',
        shortDescription: 'Pariatur deserunt quis minim eu enim excepteur non sit cillum commodo labore est nulla consectetur.',
        img: 'https://especificosba.com.ar/Images/thumbs/specific_mask.png'
    }],
}

function getProducts(category) {
    return productsByCategory[category]
}

var categoryComponent = {
    template: '#category',
    props: ['category'],
    data: function () {
        return {
            products: getProducts(this.category)
        }
    },
    watch: {
        $route: function (to, from) {
            this.products = getProducts(to.params.category)
        }
    }
}

var routes = [{
        path: '/',
        component: empresa
    },
    {
        path: '/empresa',
        component: empresa,
        text: 'Empresa'
    },
    {
        path: '/productos',
        component: productos,
        text: 'Productos',
        children: [{
            path: ':category',
            component: Vue.component('category', categoryComponent),
            props: true
        }]
    }
]

var router = new VueRouter({
    routes: routes
})

new Vue({
    el: '#app',
    router: router,
    data: {
        routes: routes
    }
})

Vue.http.get('https://especificosba.com.ar/listaprod_json.php?cat=Limpieza').then(function(data){
    console.log('data', data);
}, function (error){
    console.log('error', error)
});