<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript">
    // FUNCIONES PARA LA BUSQUEDA 
    function sendMessage(tripId){
        var user = "${person.user_id}";        
        apprise("Escribe el mensaje que quieres escribir dentro de este viaje",
        {'input': true, 'animate':true, 'verify':true, 'textOk':'Enviar', 'textCancel':'Cancelar'}, function(msg){
            if(msg != false) { 
                $.ajax({
                    type: "POST",
                    url: "trips/sendMsg",
                    dataType: 'json',
                    data: ({tripId: tripId, userId: user, msg: msg}),
                    success: function(data){
                        apprise("Mensaje enviado con exito!");
                    },
                    failure: function() {
                        apprise("Error enviando el mensaje");
                    }
                });
            }
        });
    }    
    function buscar(){
        var origen = $("#searchOrigen").val();
        var destino = $("#searchDestino").val();
        $.ajax({
            type: "POST",
            url: "search",
            dataType: 'json',
            data: ({origen: origen, destino: destino}),
            success: function(data){
                var cItems = '';
                var cThumbs = '';
                        
                //Limpiamos los mapas existentes y borramos el carousel anterior
                G.cleanMaps();                        
                $("#carrouselThumbs #cThumb").remove();
                $("#carrouselItems").html("");
                        
                $.each(data, function(i, item) {
                    cItems = '<li style="z-index:1;"><div id="cItem" style="width: 750px">';
                    cItems += '<div id="map_canvas' + i + '" style="float:left; width:550px; height:348px;"></div>';
                    cItems += '<div style="float:left; width:200px; height:348px;">';
                    cItems += '<p class="resultTextTitle">Viaje del usuario</p>';
                    cItems += '<p class="resultText">'+ item.user.nombre + '</p>';
                    cItems += '<p class="resultTextTitle">Origen</p>';
                    cItems += '<p class="resultText">'+ item.origen + '</p>';
                    cItems += '<p class="resultTextTitle">Destino</p>'; 
                    cItems += '<p class="resultText">'+item.destino + '</p>';
                    cItems += '<p class="resultTextTitle">Hora de salida</p>'; 
                    cItems += '<p class="resultText">'+ item.hora_salida+ '</p>';
                    cItems += '<p class="resultTextTitle">Hora de llegada</p>'; 
                    cItems += '<p class="resultText">'+  item.hora_llegada + '</p>';
                    cItems += '<p class="resultInput"><input value="Contactar" type="button" onclick="sendMessage('+item.viaje_id+');"/></p>';
                    cItems += '</div>';
                    cItems +='</li>';

                    cThumbs = '<li id="cThumb"><a href="#"></a><div></div></li>';

                    $("#carrouselItems").append(cItems);
                    $("#initThumb").after(cThumbs);
                                                        
                    //Inicializamos el mapa 
                    G.initializeMap();
                    //Creamos la ruta comprobando si tiene waypoints y se actualiza el mapa anterior
                    if (item.waypoints.length > 0){
                        //Creamos los waypoints para luego crear la ruta.
                        var waypoints = new Array();
                        for (var index in item.waypoints) {
                            waypoints[index] = item.waypoints[index].ruta;
                        }
                                
                        console.log("Array que funciona: " + new Array(item.waypoints[0].ruta));
                        console.log("Array que no funciona: " + waypoints);
                                
                        G.calcRoute(item.origen, item.destino, i, waypoints);
                    } else {
                        G.calcRoute(item.origen, item.destino, i);
                    }
                            
                });
                        
                //Creamos el carousel
                var slide = new $.Slideshow("", "#ei-slider");
                        
                if ($("#datos").css("display") == "none"){
                    $("#datos").toggle();
                }
            },
            failure: function() {
                console.log("Failed");
            }
        });
    }
    // FIN DE LAS FUNCIONES PARA LA BUSQUEDA
</script>

<!-- Comienza la funcion buscar -->
<div class="menuNav">
    <span class="menuText" style="left: 24px;" onclick="showForm('search');">BUSCAR</span>
    <div id="search" class="forms" style="width:304px;">
        <div style="margin: 10px 0 0 10px;">
            <span class="textos"> Origen:</span>
            <input type="text" size="30" id="searchOrigen" name="origen"/>
        </div>
        <div style="margin: 10px 0 0 10px;">
            <span class="textos">Destino:</span>
            <input type="text" size="30" id="searchDestino" name="destino"/>
        </div>
        <input style="margin: 10px 0 10px 220px;" type="button" value="Buscar" onclick="buscar();"/>                         
    </div>
</div>
<!-- div para mostrar los resultados de una busqueda -->
<div id="datos" name="datos" style="z-index:50;">
    <div id="ei-slider" class="ei-slider">          
        <ul id="carrouselItems" class="ei-slider-large" style="list-style:none;">                                                
        </ul>
        <ul id="carrouselThumbs" class="ei-slider-thumbs" style="list-style:none;">
            <li id="initThumb" class="ei-slider-element" style="max-width: 160px; width: 16.6667%; left: 0px;">Current</li>
        </ul>
    </div>
</div>
<!-- Fin de la funcion buscar -->
