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

<link type="text/css" href="<c:url value="/css/tripList/tripList.css"/>" rel="stylesheet"/>
<script type="text/javascript" src="<c:url value="/js/core/tripList.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/core/privates.js" />"></script>

<div id="viajes" name="viajes" style="float:right; width:55%;">
    <div id="tripList">
        <c:forEach var="trip" items="${userTrips}" varStatus="i">
            <article class="tripBox">
                <header class="cHeader">
                    <h2> Viaje ${i.count}</h2>
                    <nav>
                        <ul class="buttons">
                            <li><a class="linkButton comments" href="#comments${i.count}"> comentarios <b>(${fn:length(trip.mensajes)})</b>
                                    <div style="display:none;">
                                        <div id="comments${i.count}">
                                            <input type="button" class="reply" value="contestar" style="float:right; margin-right: 10px;" onclick="sendReply(${trip.viaje_id}, ${person.user_id})"/>
                                            <c:forEach var="msg" items="${trip.mensajes}">
                                                <div class="commentsColorBox"> 
                                                    <img style="clear:both; float:left;" width="100" height="80" src="/engine/images/perfil.jpg"/>
                                                    <span style="margin-left: 20px;"                                                          
                                                        <c:if test="${msg.from.user_id != person.user_id}">onclick="sendPrivate(${msg.from.user_id}, ${person.user_id})"</c:if>>
                                                        Mensaje de: <b <c:if test="${msg.from.user_id != person.user_id}">
                                                                style="cursor: pointer; text-decoration: underline;"</c:if>>
                                                            ${msg.from.nombre}</b> a las: <em>${msg.hora}</em></span>
                                                    <br style="margin-bottom: 10px;"/>
                                                    <span style="margin-left: 20px;">${msg.descripcion}</span>                                                    
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li><a class="linkButton" onclick="deleteTrip(${trip.viaje_id});">borrar</a></li>
                        </ul>
                    </nav>
                </header>
                <section class="seccion">
                    <div style="float:left; ">  
                        <div class="dataBox">
                            <div id="titulo">Origen:</div>
                            <div onclick="showAjaxBox('origen${i.count}', 'ajaxOrigen${i.count}');" 
                                 id="origen${i.count}" class="descripcion">${trip.origen}</div>
                            <input class="ajaxBox" id="ajaxOrigen${i.count}" type="text"
                                   value="${trip.origen}" size="30"
                                   onblur="makeUpdates(${trip.viaje_id}, 1, 'origen${i.count}', 'ajaxOrigen${i.count}');" />
                        </div>
                        <div class="dataBox">
                            <div id="titulo">Destino:</div>
                            <div onclick="showAjaxBox('destino${i.count}', 'ajaxDestino${i.count}');"
                                 id="destino${i.count}" class="descripcion">${trip.destino}</div>
                            <input class="ajaxBox" id="ajaxDestino${i.count}" type="text" 
                                   value="${trip.destino}" size="30"
                                   onblur="makeUpdates(${trip.viaje_id}, 2, 'destino${i.count}', 'ajaxDestino${i.count}');" />
                        </div>
                    </div>
                    <div style="float:left;">
                        <div class="dataBoxTime">
                            <div id="titulo">Hora de salida</div>
                            <div onclick="showAjaxBox('hsalida${i.count}', 'ajaxHsalida${i.count}');"
                                 id="hsalida${i.count}" class="descripcion">${trip.hora_salida}</div>
                            <input class="ajaxBox" id="ajaxHsalida${i.count}" type="text" 
                                   value="${trip.hora_salida}" size="20"
                                   onblur="makeUpdates(${trip.viaje_id}, 3, 'hsalida${i.count}', 'ajaxHsalida${i.count}');" />
                        </div>
                        <div class="dataBoxTime">
                            <div id="titulo">Hora de llegada:</div>
                            <div onclick="showAjaxBox('hllegada${i.count}', 'ajaxHllegada${i.count}');"
                                 id="hllegada${i.count}" class="descripcion">${trip.hora_llegada}</div>
                            <input class="ajaxBox" id="ajaxHllegada${i.count}" type="text"
                                   value="${trip.hora_llegada}" size="20"
                                   onblur="makeUpdates(${trip.viaje_id}, 4, 'hllegada${i.count}', 'ajaxHllegada${i.count}');" />
                        </div>
                    </div>
                    <div style="float:left;">                        
                        <div class="dataBoxDescription">
                            <div id="titulo">Descripcion: </div>
                            <div onclick="showAjaxBox('descripcion${i.count}', 'ajaxDescripcion${i.count}');"
                                 id="descripcion${i.count}" class="descripcion">${trip.descripcion}</div>
                            <input class="ajaxBox" id="ajaxDescripcion${i.count}" type="text" 
                                   value="${trip.descripcion}" size="42"
                                   onblur="makeUpdates(${trip.viaje_id}, 5, 'descripcion${i.count}', 'ajaxDescripcion${i.count}');" />
                        </div>
                    </div>
                </section>
            </article>
        </c:forEach>
    </div>
    <c:if test="${haveMoreTrips}">
        <div style="float:right; position:relative; margin-top: 15px; margin-right: 18px;">
            <c:set var="carry" value="${(countTrips%2 != 0)?1:0}"/>
            <c:forEach begin="1" end="${(countTrips / 2)+carry}" step="1" var="i">
                <a class="linkButton" href="#" onclick="nextTrips(${((i)*2) -2})">${i}</a>
            </c:forEach>
        </div>
    </c:if>
</div>