<%@ 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" rel="stylesheet" href="<c:url value='/css/qtip/jquery.qtip.min.css'/>" />
<script type="text/javascript" src="<c:url value='/js/qtip/jquery.qtip.min.js'/>" ></script>

<script type="text/javascript" src="<c:url value='/js/core/profile.js'/>" ></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#profileEdit').qtip({
            content: 'Si necesitas volver a editar estos datos haz clic en el lápiz.',
            position: {
                my: 'left center', 
                at: 'right center'
            },
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                tip: true,
                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
            }
        });
        
        $('#profileWarning').qtip({
            content: 'Este nombre será el que verán los usuarios en las conversaciones y cuando busquen tus viajes, <b style="color:red;"><p>¡Es necesario que lo completes!</b></p>',
            position: {
                my: 'left center', 
                at: 'right center'
            },
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                tip: true,
                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
            }
        });
    });
</script>

<style type="text/css">
    .profileInput{
        margin: 4px;
        padding:4px;
        width: 200px;        
    }
</style>

<!-- Inicio del perfil -->
<div style="float:left; width: 44%; height: 80%;">
    <article class="tripBox">
        <header class="cHeader">
            <h2> Perfil </h2>
            <nav>
                <ul class="buttons">
                    <li><a class="linkButton"> <b> Cambiar imagen </b> </a></li>               
                </ul>
            </nav>
        </header>
        <section class="seccion">
            <div style="float:left; ">  
                <div class="dataBox" style="width:536px;">
                    <img style="clear:both; float:left; padding-right: 15px;" width="120" height="100" src="/engine/images/perfil.jpg"/>
                    Login:
                    <input disabled id="profileLogin" class="profileInput" style="margin-bottom: 15px;" value="${person.login}" /> <br/>

                    Email:
                    <input disabled id="profileEmail" class="profileInput" value="${person.email}" /> <br/><br/><br/>

                    <div style="clear:both; position:relative; top: 10px;">
                        Nombre:                         
                        <input <c:if test="${!empty person.nombre && person.nombre != null}">disabled</c:if>
                        id="profileNombre" onblur="profileChanges('profileNombre', 1)" class="profileInput" style="position:relative; left: 8px;" value="${person.nombre}" />

                        <c:if test="${empty person.nombre || person.nombre == null}">
                            <img id="profileWarning" style="position:relative; left:10px; top: 10px;" width="30" src="/engine/images/warning.gif"/>
                        </c:if>
                        <c:if test="${!empty person.nombre && person.nombre != null}">
                            <img id="profileEdit" onclick="edit();" style="position:relative; left:10px; top: 10px; cursor:pointer;" width="30" src="/engine/images/edit.png"/>
                        </c:if>
                        <br/>

                        Apellidos:
                        <input <c:if test="${!empty person.apellido1 && person.apellido1 != null}">disabled</c:if> 
                        onblur="profileChanges('profileApe1', 2)" id="profileApe1" class="profileInput" value="${person.apellido1}"/>
                        <input <c:if test="${!empty person.apellido2 && person.apellido2 != null}">disabled</c:if> 
                        onblur="profileChanges('profileApe2', 3)" id="profileApe2" class="profileInput" value="${person.apellido2}"/>
                    </div>
                </div>
            </div>
        </section>
    </article>
</div>
<!-- Fin del perfil -->