<%@ include file="/cabecalho.jsp" %>

<script type="text/javascript">

​

function verCarrinho(limpar,remover){ 

    //var url = "mostrarCarrinho?limpar="+limpar+"&remover="+remover; 

    //var options = "height=500,width=700,location=no,menubar=no,resizable=no,scrollbars=no,titlebar=no, status=no, toolbar=no"; 

    //    

    //window.open(url,"carrinho",options,true);    

​

    var url = "mostrarCarrinho?limpar="+limpar+"&remover="+remover; 

    $("#carrinho").load(url); 

    $("#carrinho").dialog({ 

        height:600,

        width:700,

        modal:true, 

        title:"Carrinho de Compras" 

        });

}

​

function verDetalhes(url){ 

    // Sem jQuery 

    //var catalogo = document.getElementById("catalogo").attributes; 

    //catalogo.getNamedItem("style").nodeValue="visibility: hidden; height: 0px;"; 

​

    // Com jQuery 

    $("#catalogo").hide(); 

    carregarDetalhes(url);

}

​

function verCatalogo(){ 

    // Sem jQuery 

    //var catalogo = document.getElementById("catalogo").attributes; 

    //catalogo.getNamedItem("style").nodeValue=""; 

    // 

    //var detalhes = document.getElementById("detalhes").attributes; 

    //detalhes.getNamedItem("style").nodeValue="visibility: hidden; height: 0px;"; 

​

    // Com jQuery 

    $("#catalogo").show(); 

    $("#detalhes").hide();  

}

​

function carregarDetalhes(url){ 

​

    // Sem jQuery 

    /* 

    var ajaxReq = new XMLHttpRequest();

    ajaxReq.onreadystatechange = function() {

        if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {

              var resp = ajaxReq.responseText;

              var detalhes = document.getElementById("detalhes");

              detalhes.innerHTML=resp;

              detalhes.attributes.getNamedItem("style").nodeValue="";

        }

    };

​

    ajaxReq.open("GET", url, true);

    ajaxReq.send();

    */

​

    // Com jQuery 

    $("#detalhes").load(url); 

    $("#detalhes").show(); 

}

​

function adicionarLivro(url){ 

​

    // Sem jQuery 

    /* 

    var ajaxReq = new XMLHttpRequest();

    ajaxReq.onreadystatechange = function() {

        if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {

              var resp = ajaxReq.responseText;

              var livroAdicionado = document.getElementById("livroAdicionado");

              livroAdicionado.innerHTML="Você adicionou o livro <em>"+ resp +"</em> ao seu carrinho de compras.";

        }

    };

​

    ajaxReq.open("GET", url, true);

    ajaxReq.send();

    verCatalogo();

    */

​

    // Com jQuery 

    $("#carrinhoVazioMsg").hide(); 

    $.get(url, function(dados){ 

        $("#livroAdicionado").html("Você adicionou um livro ao seu carrinho de compras.");

    });

    $('#carrinhoVazioMsg').hide();

    $('#carrinhoLinks').show();  

    verCatalogo();

    verCarrinho();

}

</script>

        <jsp:useBean id="livrariaBean" class="livraria.negocio.LivrariaBean" scope="page" >

            <jsp:setProperty name="livrariaBean" property="sistema" value="${sistemaLivraria}" />

        </jsp:useBean>

        <p><h3><font id="livroAdicionado" color="red" size="+2"> </font></h3></p>

        <div id="carrinhoLinks" style="display: none;">

        <c:url var="url" value="javascript:verCarrinho(0,0)">

        </c:url>

        <p>

            <a href="${url}">Ver carrinho de compras</a>

            <c:url var="url" value="/livros/comprar" />

            <a href="${url}">Finalizar compras</a></strong>

        </p>

        </div>

        <div id="carrinhoVazioMsg" style="display: none;">Seu carrinho de compras está vazio.</div>

        <c:choose> 

             <c:when test="${sessionScope.cart.numeroItens > 0}">

                <script type="text/javascript">

                    $('#carrinhoVazioMsg').hide();

                    $('#carrinhoLinks').show();

                </script>

             </c:when> 

             <c:otherwise>

                <script type="text/javascript">

                    $('#carrinhoVazioMsg').show();

                    $('#carrinhoLinks').hide();

                </script>

             </c:otherwise> 

        </c:choose> 

        <br>

        <br>

        <div id="carrinho">

        </div> 

        <div id="detalhes">

        </div>

        <div id="catalogo">

          <h3>Livros disponíveis para compra:</h3>

          <%

          // variável buscarValue mantem o termo de busca no formulário ou colocar uma string vazia.

          String buscarValue = request.getParameter("buscar");

          if (buscarValue == null) {

              buscarValue = "";

          }

          %>

          <form method="GET">

            <input type="hidden" name="Add" value="" />

            Busca: <input type="text" name="buscar" value="<%= buscarValue %>" />

            <input type="submit" value="Buscar" />

          </form>

          <table summary="layout">

             <c:forEach var="livro" begin="0" items="${requestScope.livros}">

             <tr>

                <c:set var="idLivro" value="${livro.idLivro}" />

                <td bgcolor="#ffffaa"> 

                   <c:url var="url" value="/livros/detalhesLivro" >

                      <c:param name="idLivro" value="${idLivro}"/>

                   </c:url>

                   <strong><a href="javascript:verDetalhes('${url}');"><strong>${livro.titulo}</strong></a>

                </td>  

                <td bgcolor="#ffffaa" rowspan=2>

                    <fmt:formatNumber value="${livro.preco}" type="currency"/> 

               </td> 

               <td bgcolor="#ffffaa" rowspan=2> 

                  <c:url var="url" value="/livros/catalogo" >

                     <c:param name="Add" value="${idLivro}"/>

                  </c:url>

                  <a href="javascript:adicionarLivro('${url}')"> Adicionar livro ao carrinho </a>

               </td>

             </tr> 

             <tr> 

               <td bgcolor="#ffffff"> 

                    <em>${livro.autores} </em>

               </td>

             </tr>

             </c:forEach>

          </table>

        </div>

​

<%@ include file="/rodape.jsp" %>