<%-- 
    Document   : primerZip
    Created on : Sep 23, 2008, 11:40:49 AM
    Author     : Ivan
--%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="styles.css"/>
            <script type="text/javascript" src="fat.js"></script>
            <script type="text/javascript" src="prototype.js"></script>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title><h:outputText value="#{msgs.title}"/></title>
            <script type="text/javascript">
                //definisemo uzorak jer hocemo da se ajax servlet pozove samo ako je 5 brojeva u input polju
                var uzorakZip=/\d\d\d\d\d/;
              //  var asyncRequest;
                function getContent(){
                    clearContent();
                    var zip=document.getElementById("forma:zip").value;
                    var sadrzi=zip.search(uzorakZip);
                    if( sadrzi==-1 ) 
                        document.getElementById("output").innerHTML=
                        "Niste uneli pravilan zip code.Unesite 5 cifara!";
                    else{
                          
                        new Ajax.Request("zip.ajax",
                        {      method: "get",
                           parameters: "zip=" + zip,
                           onComplete: stateChange
                        });

                    }
                
                }
                
      
                                
                function clearContent(){
                    
                    document.getElementById("output").innerHTML="";    
                    document.getElementById("forma:grad").value="";
                    document.getElementById("forma:drzava").value="";
                
                }
                
                function stateChange(asyncRequest){ //rezultat je vracen prema json notaciji
                         
                        var grad=document.getElementById("forma:grad");
                        var drzava= document.getElementById("forma:drzava");
                        var resp=asyncRequest.responseText;
                        var resp2=resp.substring(0,resp.length-7);
                       // grad.value=resp2;
                        
                      var jsonGradDrzava=eval('('+resp2+')'); //fja eval od json stringa pravi objekat sa ogovarajucim property-ma
                       
                       grad.value=jsonGradDrzava.city;
                      drzava.value=jsonGradDrzava.state;
                      Fat.fade_element("forma:grad",60,4000,"#dfeeff","#ffffff");
                        Fat.fade_element("forma:drzava",60,4000,"#dfeeff","#ffffff");
            
             //       }
                }
            </script>
        </head>
        <body>
            <div class="container">
            <h:form id="forma">
            
                <div class="banner">  
                    <h:outputText value="#{msgs.headerEx2}"
                                  styleClass="bannerText"/>
                </div>
                <hr/>
                <h:outputText value="#{msgs.informationPrompt}"
                              styleClass="heading"  />
                <h:panelGrid columns="3">
                    <h:outputText value="#{msgs.ex2Zip}"/>
                    <h:inputText id="zip" size="5" maxlength="5" onblur="getContent()"/> <!--kad se izadje iz fokusa zove se AjaxServlet-->
                    <div id="output" class="divError"></div>
                        
                        <h:outputText value="#{msgs.ex2City}"/> 
                        <h:inputText id="grad"/>
                        <div></div>
                        
                        <h:outputText value="#{msgs.ex2Country}"/>
                        <h:inputText id="drzava"/>
                        <div></div>
                        
                    </h:panelGrid>
                    <p><h:commandButton value="#{msgs.button1Ex2}" action="nazad"/></p>
                </h:form>
                <div class="footer">&copy;2008 Šerić Ivan</div>
            </div>
        </body>
    </html>
</f:view>