CCOM4030
/
artesanias


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740
							<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
n't h    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
        <!--these three for the calendar-->
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
        <link href="css/robotocondensed.css" rel="stylesheet">
        <link rel="stylesheet" href="calendar_files/css/demo.css"/>
        <link rel="stylesheet" href="css/file.css"/>
        <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
        <!--this is for the search bar-->
        <link rel = "stylesheet" href = "css/searchbar1.css">

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, height=device, heigth viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" href="lib/OnsenUI/css/onsenui.css">
        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
        <script src="lib/OnsenUI/js/onsenui.min.js"></script>
        <script src="js/jquery_.js"></script>


    </head>
    <body>

      <script type="text/javascript" src="js/saveLocal.js"></script>


            <!--the toolbar is where it will have the main name of the app and the ICP logo (top center)-->
           <ons-page>
            <ons-toolbar>
                <div class="center">Artesanias PR</div>
                <div class="right"><img class="list-item__thumbnail" src="img/ICP.png"></div>
            </ons-toolbar>
            <!--The tabbar is the place where the user can get acces to the different sections of the app-->
            <!--Each tab will hace a page name (which we use to reference and define them later one), then we have a laber, this is what will be used as a name for that page in the tabbar-->
            <ons-tabbar swipeable position="bottom" modifier="autogrow">
                <ons-tab page="home.html" label="Hogar" active></ons-tab>
                <ons-tab page="renglones.html" label="Artesanías"></ons-tab>
                <ons-tab page ="search.html" label="Buscar"> </ons-tab>
                <ons-tab page="ferias.html" label="Eventos"></ons-tab>
                <ons-tab page="instituto.html" label="ICP"></ons-tab>
            </ons-tabbar>
        </ons-page>
        </ons-navigator>


<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->

        <template id="home.html">

            <ons-page id="home" class="red">

                <ons-card id="azar">

                    <!--<div class="title" id="Title"></div>-->
                    <div id="image"></div><br>
                    <div class="content" id="Content"></div>
                    <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
                    <!--For now all this information is stored inside a .csv file-->
                    <script type="text/javascript" src="js/azar.js"> </script>

                </ons-card>


            </ons-page>

        </template>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
        <!--Here it's in the artesanos tab-->
        <template id="artesanos.html">
            <ons-page id="artesanos">
                <!-- This button lets the user go back to the previous page-->
                <ons-toolbar>
                    <div class="left"><ons-back-button>Atrás</ons-back-button></div>
                    <div class="center"></div>
                </ons-toolbar>

                <ons-pull-hook id="pull-hook" threshold-height="120px">
                    <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
                </ons-pull-hook>

                
                <ons-list id="artesanos-list" src="">
                    <ons-list-header>Artesanos</ons-list-header>
                </ons-list>

                <script>
                    
                    ons.getScriptPage().onInit = function () {
                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;


                        //var File = this.data.title.toUpperCase() + '.json' ;
                        var Esp = this.data.esp.split(', ');
                        var artesanos_json = this.data.json;


                        //Convertir en mayuscula primera letra del string.
                        for(var i=0; i<Esp.length; i++) {
                            Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
                        };

                        var pullHook = document.getElementById('pull-hook');
                        var icon = document.getElementById('pull-hook-icon');
                        pullHook.addEventListener('changestate', function (event) {
                            switch (event.state) {
                                case 'initial':
                                    icon.setAttribute('icon', 'fa-arrow-down');
                                    icon.removeAttribute('rotate');
                                    icon.removeAttribute('spin');
                                    break;
                                case 'preaction':
                                    icon.setAttribute('icon', 'fa-arrow-down');
                                    icon.setAttribute('rotate', '180');
                                    icon.removeAttribute('spin');
                                    break;
                                case 'action':
                                    icon.setAttribute('icon', 'fa-spinner');
                                    icon.removeAttribute('rotate');
                                    icon.setAttribute('spin', true);
                                    break;
                            }
                        });

                        var getArtesania = function (num) {

                            var Artesanos = ``;

                            console.log('Filtrado de ',Esp[num])

                            var results = [];
                            var searchVal = "my Name";
                            for (var i=0 ; i < artesanos_json.length ; i++)
                            {
                                if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
                                    results.push(artesanos_json[i]);
                                }
                            }

          /*var arr1=artesanos_json.filter(function(item){
              return item.Nombre=="Ana";
          });*/

                            for(var i=0; i<results.length; i++) {

                                //if(Esp[num] in artesanos_json.) {}
                                Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
                                //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
                            }


                            return {
                                name: Esp[num],
                                artesan: Artesanos
                            };
                        };

                        var getData = function () {
                            const data = [];
                            for (var i = 0; i < Esp.length; i++) {
                                data.push(getArtesania(i));
                            }
                            return data;
                        };


                        var createArtesano = function (Artesano) {

                            return ons.createElement(`
              <ons-list-item expandable tappable>
                <div class="center" >${Artesano.Nombre}</div>
                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
                                                 Tel\u00e9fono: ${Artesano["Telefono 1"]}<br>
                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
                                                 </div>
              </ons-list-item>`
                                                    );
                        };

                        //var Artesanias = getData();
                        //artesanos_json

                        for (Artesano of artesanos_json) {

                            var cont = 0;
                            var lista = document.getElementById('artesanos-list');

                            //Recopilar datos no vacios.
                            if (Artesano.Municipio.trim().length != 0) {
                                cont ++;
                            }
                            if (Artesano["Telefono 1"].trim().length != 0) {
                                cont ++;
                            }
                            if (Artesano["E-mail"].trim().length != 0 & Artesano["E-mail"].toUpperCase().trim() != "NO TIENE") {
                                cont ++;
                            }
                            if (Artesano.Especificacion.trim().length != 0) {
                                cont ++;
                            }


                            //info a pasar
                            //'title':'${Artesano.Nombre}','esp': '${info}'
                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["E-mail"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}' } })" tappable>
                        <div class="title">${Artesano.Nombre}</div>
                    </ons-list-item>`);


                            if(cont == 0){
                                console.log(Artesano.Nombre+' no tiene ningun tipo de informacion.');
                                //return ons.createElement(``);
                            }
                            else {
                                lista.appendChild(item);
                            }

                        };

                    };
                </script>

                <style>
                    .pull-hook-content {
                        color: #333;
                        transition: transform .25s ease-in-out;
                    }
                </style>

            </ons-page>

        </template>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->

         <template id="artesanias.html">
             <ons-page id="artesanias">

                 <ons-toolbar>
                     <div class="left"><ons-back-button>Atrás</ons-back-button></div>
                     <div class="center"></div>
                 </ons-toolbar>

                 <ons-pull-hook id="pull-hook" threshold-height="120px">
                     <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
                 </ons-pull-hook>

                 <ons-list id="artesania-list" src="">
                     <ons-list-header>Artesanias</ons-list-header>
                 </ons-list>

                 <script>

                     ons.getScriptPage().onInit = function () {
                         this.querySelector('ons-toolbar div.center').textContent = this.data.title;

                         //var File = this.data.title.toUpperCase() + '.json' ;
                         var Esp = this.data.esp.split(', ');
                         var artesanos_json = this.data.json;

                         //Convertir en mayuscula primera letra del string.
                         for(var i=0; i<Esp.length; i++) {
                             Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
                         };

                         var pullHook = document.getElementById('pull-hook');
                         var icon = document.getElementById('pull-hook-icon');
                         pullHook.addEventListener('changestate', function (event) {
                             switch (event.state) {
                                 case 'initial':
                                     icon.setAttribute('icon', 'fa-arrow-down');
                                     icon.removeAttribute('rotate');
                                     icon.removeAttribute('spin');
                                     break;
                                 case 'preaction':
                                     icon.setAttribute('icon', 'fa-arrow-down');
                                     icon.setAttribute('rotate', '180');
                                     icon.removeAttribute('spin');
                                     break;
                                 case 'action':
                                     icon.setAttribute('icon', 'fa-spinner');
                                     icon.removeAttribute('rotate');
                                     icon.setAttribute('spin', true);
                                     break;
                             }
                         });

                         var getArtesania = function (num) {

                             var Artesanos = ``,
                                 ArtesanosInfo = ``;

                             //console.log('Filtrado de ',Esp[num])

                             var results = [];
                             var searchVal = "my Name";
                             for (var i=0 ; i < artesanos_json.length ; i++)
                             {
                                 if (artesanos_json[i].Especificacion.includes(Esp[num])) {
                                     results.push(artesanos_json[i]);
                                 }
                             }

                             /*var arr1=artesanos_json.filter(function(item){
                             return item.Nombre=="Ana";
                             });*/

                             for(var i=0; i<results.length; i++) {

                                 //if(Esp[num] in artesanos_json.) {}
                                 Artesanos+=`${results[i].Nombre}|`
                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["E-mail"]}|${results[i].Especificacion}&&`
                                 //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
                             }

                             return {
                                 name: Esp[num],
                                 artesan: Artesanos,
                                 info: ArtesanosInfo
                             };
                         };

                         var getData = function () {
                             const data = [];
                             for (var i = 0; i < Esp.length; i++) {
                                 data.push(getArtesania(i));
                             }
                             return data;
                         };
                         var createArtesania = function (Artesania) {

                             //console.log('Devuelto elemento')
                             var listaArt=``;
                             var arts = Artesania.artesan.split('|');
                             var artsInfo = Artesania.info.split('&&');

                             for(var i=0; i<arts.length; i++) {
                                 var lot = artsInfo[i].split('|'),
                                     mun = lot[0],
                                     tel = lot[1],
                                     email = lot[2],
                                     esp = lot[3],
                                     redes = lot[4];

                                 listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i]}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}', redes: '${redes}'}} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
                             }


                             return ons.createElement(`
              <ons-list-item expandable tappable>
                <div class="center" >${Artesania.name}</div>
                <div class="expandable-content">Artesanos que trabajan con ${Artesania.name}
                <ons-card>${listaArt}</ons-card></div>
                </ons-list-item>`
                                                     );
                         };

                         var Artesanias = getData();

                         for (Art of Artesanias) {

                             var Artesania = createArtesania(Art);
                             document.getElementById('artesania-list').appendChild(Artesania);
                         };
                         pullHook.onAction = function (done) {

                             setTimeout(function() {
                                 document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
                                 done();
                             }, 400);
                         }

                     };
                 </script>

                 <style>
                     .pull-hook-content {
                         color: #333;
                         transition: transform .25s ease-in-out;
                     }
                 </style>
             </ons-page>
        </template>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
<!----------------------------------------------------------------------------------->
        <!-->
            The searchfunctions.js file is just a file that has all the definitions of the functions used later on in the switch
        <!-->
        <script src = "js/searchfunctions.js"></script>
        <script>
            //all_artesanos is the JSON file that has all the artesanos
            var all_artesanos = JSON.parse(window.localStorage.getItem("TODOS"));

            function filter(){
                //finds the values of the search bar which are sent from the block of code after this script
                //input is the one you use to filter by any parameter
                //inputarte is the one you use to filter by the type of art the artists make
                //inputmuni is the one you use to filter by municipio
                //informacion is the variable that has all the information that will be sent to this tab, what we're going to use here is just to declare which artists are seen (informacion[i].style.display = "list-item") and which are not seen (informacion[i].style.display = "none")
                var input = document.getElementById('searchbar').value;
                var inputarte = document.getElementById('searchartesania').value;
                var inputmuni = document.getElementById('searchbarmunicipio').value;
                var informacion = document.getElementsByClassName('artists');
                //just making sure everything is at the same format by taking out special characters, trimming it and putting it in lowercase (same thing will be done to the arguments it's being compared to later on)
                //acento_replace(): it's a function I made that takes out any special characters of a word and changes them back to the plain ones (quitar acentos o cosas asi)
                input = acento_replace(input.trim().toLowerCase());
                inputarte = acento_replace(inputarte.trim().toLowerCase());
                inputmuni = acento_replace(inputmuni.trim().toLowerCase());
                //default case is where evey one of them has nothing or less than 3 characters (displays every artist until it passes that length)
                if (input.length <= 3 && inputarte.length <= 3 && inputmuni.length <= 3){
                    for (var i = 0; all_artesanos.length; i++){
                        informacion[i].style.display = "list-item";
                    }
                }
                else{
                    var cases = 0;
                    cases = getcasenum(input,inputarte,inputmuni);
                    //take every one of them out first (dont display any)
                    for (var i = 0; i < all_artesanos.length; i++){
                        informacion[i].style.display = "none";
                    }
                    switch(cases){
                        //cases == 1 when only inputmuni has been writen on
                        case 1:
                            filter_municipios(inputmuni);
                            break;
                        //cases == 2 when only inputarte has been written on
                        case 2:
                            filter_artesanias(inputarte);
                            break;
                        //cases == 3 when inputarte and inputmuni has been written on
                        case 3:
                            search_art_mun(inputarte,inputmuni);
                            break;
                        //cases == 4 when input has been writen on
                        case 4:
                            filter_any(input);
                            break;
                        //cases == 5 when input and inputmuni has been written on
                        case 5:
                            search_any_mun(input,inputmuni);
                            break;
                        //cases == 6 when input and inputart has been written on
                        case 6:
                            search_any_art(input,inputarte);
                            break;
                        //cases == 7 when input, inputart and inputmuni has been writen on
                        case 7:
                            search_any_art_mun(input,inputarte,inputmuni);
                            break;
                    }
                }
            }
        </script>

        <template id="search.html">
          <ons-navigator swipeable animation="slide" id="SNavigator">
            <ons-page id="Buscar">
                <!--
                    This is the search bars, each time you type a character into any of the search bars, they will run the filter() function with what they all have as arguments (even if the other search bars have nothing in them)
                    The first search bar is to find by any information related to the artist
                    The second searchbar is to find by the type of artwork they work on
                    The third searchbar is to find by the municipio where the artists works or lives?
                -->
                <p style="text-align: center; margin-top: 10px;">
                    <ons-search-input placeholder="Busqueda en cualquiera" id = "searchbar"
                        onkeyup = "filter()"></ons-search-input>
                    <ons-search-input placeholder="Busqueda por artesanias" id = "searchartesania"
                        onkeyup = "filter()"></ons-search-input>
                    <ons-search-input placeholder = "Busqueda por municipio" id = "searchbarmunicipio"
                        onkeyup = "filter()"></ons-search-input>
                </p>

                <ons-list id="results" src="">
                </ons-list>

                <script>
                    //This is basically declaring what we refer to as informacion in the filter() function
                    //It iterates though each artists in the all_artesanos json file from before, it displays their name in the "Buscar" page, and it gets prepared so that when its clicked it redirects to the "artesano.html" page with the other aditional information that we have other than the name. 
                    for (i = 0; i < all_artesanos.length;i++){
                        var artesano = ons.createElement(`<ons-list-item class = "artists"
                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["E-mail"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}' } })" tappable>
                        <div>${all_artesanos[i].Nombre}</div>
                    </ons-list-item>`);
                        document.getElementById('results').appendChild(artesano);
                    }
                </script>

            </ons-page>
        </template>

        <!-- ---------------------------------------------------------------------------------------------------------------------------------------- -->
        <!--This page is used so that we can display the information of a specific artists, and whenever the artists is missing information then we just dont include that in the page-->
        <template id= "artesano.html">
            <ons-page id = "artesano">
                <ons-toolbar>
                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
                    <div class = "center"></div>
                </ons-toolbar>
                <body>
                    <!-- This is where we'll put all the information of that artsts -->
                    <ons-card id="all"></ons-card>
                </body>
                <script>
                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
                    ons.getScriptPage().onInit = function () {
                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;

                        var data = '',
                            mun = this.data.mun,
                            tel = this.data.tel,
                            em = this.data.email,
                            esp = this.data.esp,
                            redes = this.data.redes;

                        //here the email is the string made from the start to where the '#' is.
                        email = em.slice(0, em.search("#"));

                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
                        //but if theres only one then you just write it into the page
                        if(esp.trim() != ""){
                            if(esp.includes(";", 0)){
                                esp=esp.replace(/;/g,", ");
                                data+='Tipos de artesanias: '+esp+'<br>';
                            }
                            else {
                                data+='Tipo de artesania: '+esp+'<br>';
                            }
                        }

                        //console.log("Las redes son..."+this.data.redes);

                        //Here it's writing their municipio into the page
                        if(mun.trim() != ""){
                            data+='Municipio: '+ mun +'<br>';
                        }

                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
                        if(email.trim() != "" & email.toUpperCase().trim() != "NO TIENE"){
                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+email+'"><u>'+email+'</u></a><br>';
                        }

                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
                        if(tel.trim() != "" ){
                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
                        }

                        console.log("Redes: "+redes);

                        //Here it has to decide what to do depending on the links they give to their social media pages
                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
                        //If it's none of them then it will not display anything.
                        if(redes.includes("facebook")){
                            console.log(redes.substring(1,redes.length-2));
                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
                        }
                        else if(redes.includes("instagram")){
                            console.log(redes.substring(1,redes.length-2));
                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
                        }
                        else if(redes.includes("myspace")){
                            console.log(redes.substring(1,redes.length-2));
                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
                        }
                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
                            redes = redes.substr(0, redes.length-1);
                            console.log(redes);
                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
                        }
                        else if(redes.includes("#") || redes.includes("mailto")){
                            console.log("tiene un disparate");
                        } else {
                            console.log("no tiene nada");
                        }

                        //This is the part that allows eveything (data) to be displayed
                        document.getElementById("all").innerHTML = `${data}`;

                    }
                </script>
            </ons-page>
        </template>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->

        <template id="renglones.html">
          <ons-navigator swipeable animation="slide" id="myNavigator">
            <ons-page id="renglones">

            <!--div class="search-bar">
                 <p style="text-align: center; margin-top: 10px;">
                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
                </p>
            </div-->

            <ons-card id="list">
              <script type="text/javascript" src="js/renglones.js"></script>
            </ons-card>

                <!--Javascript function to hide other open expandables-->
                <script>
                    const hideAll = () => {
                        Array.from(document.querySelector('#list').children)
                            .forEach(item => {
                                if (item.expanded) {
                                    item.hideExpansion();
                                }
                            });
                        };
                </script>

                <style>
                    .intro {
                        text-align: center;
                        padding: 20px;
                        margin-top: 30px;
                    }

                    ons-card {
                        cursor: pointer;
                        color: #333;
                    }

                    .card__title,
                    .card--material__title {
                        font-size: 15px;
                    }
                </style>
            </ons-page>


        </template>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->

        <template id="ferias.html">
            <ons-page id="ferias">
                <!--<ons-card>

                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
                </div>

                </ons-card>-->
                <br><br><br>
                <button onclick="redirect()">Pasar a la pagina de eventos</button>

              <script>
              function redirect() {
                location.replace("https://facebook.com/icppr")
              }
              </script>
            </ons-page>
        </template>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->

        <template id="instituto.html">
            <ons-page id="instituto">
                <ons-card>

                    <h1>Instituto de Cultura Puertorriqueña</h1>
                    <h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
                    </h3>

                    <body>
                        <br>
                        El Instituto de Cultura Puertorriqueña (ICP) tiene como misión investigar, conservar, promover y divulgar la cultura puertorriqueña en su diversidad y complejidad. Con la memoria y la promesa de la cultura, los distintos niveles, sectores, edades e intereses de la comunidad crean el conjunto de modos de vida, costumbres y manifestaciones artísticas que nos identifica como país. El ICP existe para preservar y divulgar estos saberes, difundir internacionalmente nuestro talento y enriquecer el amor a lo propio.
                        <br><br>
                        Nuestras tradiciones no son rígidos objetos de museo, sino actividades vivas en constante renovación y reapropiación, según van también desarrollándose nuevas tradiciones. El respeto a la diversidad, a lo híbrido, a lo apropiado y a lo replanteado también son parte esencial de esta institución que busca activamente la colaboración de todos en un quehacer que debe ser siempre compartido de la mano con su ingente diversidad.
                        <br><br>
                        Prof. Carlos R. Ruiz Cortés<br>
                        Director Ejecutivo<br>
                        Instituto de Cultura Puertorriqueña<br>
                        Directorio Artesanal Cultural PR <img src="img/gobierno.png" style="width:35px;height:35px;border:0;">
                        <br><br>
                    </body>


                    Visita nuestra <a href="https://www.icp.pr.gov/">Página Web</a> o síguenos en nuestras redes sociales: <br>
                    <a href="https://twitter.com/icppr"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
                    </a>
                    <a href="https://facebook.com/icppr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
                    </a>
                    <a href="https://youtube.com/user/icppr"><img src="img/youtube.png" alt="Youtube" style="width:35px;height:35px;border:0;">
                    </a>
                    <a href="https://instagram.com/icppr"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
                    </a>
                    <!--</div>
                <!--</p>-->
                </ons-card>
            </ons-page>
        </template>

  <script src="js/load.js"></script>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>