
<%@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>
            <script type="text/javascript" src="fat.js"></script>
            <link type="text/css" rel="stylesheet" href="styles.css"/>
            <script type="text/javascript">
                var asyncRequest;
                function getContent(){
                    clearContent();
                    var jsfState=getJSFState();
                    var zip=document.getElementById("forma:zip").value;
                    if(zip.length!=5) return;
                    init();
                    var url=window.document.forms[0].action;
                    asyncRequest.onreadystatechange=stateChange;
                    asyncRequest.open('POST', url+"?ajax=true&zip="+zip+
                        "&javax.faces.ViewState="+jsfState, true);
                    asyncRequest.send(null);
                }
                function init(){
                    if(window.XMLHttpRequest) //za mozillu
                        asyncRequest=new XMLHttpRequest();
                    else if(window.ActiveXObject) //starije verzije explorera
                        asyncRequest=new ActiveXObject("Microsoft.XMLHTTP");   
                }      

    
                function getJSFState() {// ako se view cuva na klijentu treba ga proslediti
                    var state = window.document
                    .getElementsByName("javax.faces.ViewState");
                    var value = null;

                    if(null != state && 0 < state.length) {
                        value = state[0].value;
                        var encodedValue = encodeURI(value);
                        var re = new RegExp("\\+", "g");
                        return encodedValue.replace(re, "\%2B");
                    }
                }
    
                function stateChange(){
                    if(asyncRequest.readyState==4 && asyncRequest.status==200){
                        clearContent();
                        if(asyncRequest.responseText!="okay"){
                            var div=document.getElementById("output");
                         
                            div.innerHTML= 
                                "<img src='images/cancel_48.png' alt='slika neuspeh' \n\
                                    height='20px' width='20px'/>"+asyncRequest.responseText;
                        
                        }
                        else {
                            var div=document.getElementById("output");
                            div.innerHTML=
                                "<img src='images/accepted_48.png' alt='slika uspeh' \n\
                                    height='20px' width='20px'/>";
                        }
                        Fat.fade_element("output");
                    }
        
                }
                
                function clearContent(){
                    var div=document.getElementById("output");
                   
                    div.innerHTML="";   
                    document.getElementById("forma:grad").value="";
                    document.getElementById("forma:drzava").value="";
                
                }
        
                function getContent2(){
                    clearContent();
                    var zip=document.getElementById("forma:zip").value;
                    
                    init();
                    var url="AjaxServlet3?input="+zip;
                    asyncRequest.onreadystatechange=stateChange2;
                    asyncRequest.open('GET', url,true);
                    asyncRequest.send(null);
                    
                
                }         
                function stateChange2(){ //rezultat je vracen prema json notaciji
                    if(asyncRequest.readyState==4 && asyncRequest.status==200){
                        var grad=document.getElementById("forma:grad");
                        var drzava= document.getElementById("forma:drzava");
                        var resp=asyncRequest.responseText;
                        var resp2=resp.substring(0, resp.length-7);
                        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>
            
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title><h:outputText value="#{msgs.title}"/></title>
        </head>
        <body>
            <div class="container">
                <h:form id="forma">
                    <div class="banner"> 
                        <h:outputText value="#{msgs.headerEx3}"
                                      styleClass="bannerText"/>
                    </div>
                    <hr/>
                    <h:outputText value="#{msgs.informationPrompt}"
                                  styleClass="heading"  />
                    <table>
                        <tbody>
                            <tr>
                                <td> <h:outputText value="#{msgs.ex2Zip}"/> </td>
                                <td><h:inputText id="zip" size="5" maxlength="5" 
                                                     onkeyup="getContent()"
                                                     onblur="getContent2()"
                                                     value="#{zipBean.zip}">
                                        <f:validator validatorId="zipValidator"/>
                                    </h:inputText>
                                </td>
                                <td><div id="output" class="divError"></div></td>
                            </tr>
                            <tr>
                                <td> <h:outputText value="#{msgs.ex2City}"/> </td>
                                <td><h:inputText id="grad"/></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td> <h:outputText value="#{msgs.ex2Country}"/> </td>
                                <td><h:inputText id="drzava"/></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <p>
                        <h:commandButton value="#{msgs.button3Ex1}" action="nazad" 
                                         immediate="true"/>
                    </p>
                </h:form>
                <div class="footer">&copy;2008 Šerić Ivan</div>
            </div>
        </body>
    </html>
</f:view>