<<apex:page Controller="TestWeather" tabStyle="Country__c">
    <style>
        .inputStyle{
        width:200px;
        height:20px;
        margin:10px;
    </style>
    <apex:stylesheet value="{!$Resource.BootStrap}"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <apex:form >
        <apex:pageBlock >
            <apex:messages />
            <div style = "float:right; color:red; Display:none" id="madatoryMarker"><b>* All the fields are mandatory</b></div>
            <div><b>Hi {!$User.firstName},  Which data of city you have ?.</b> </div>
            <div style="margin:10px">
                <b>Name </b> <apex:inputcheckbox style="margin-right:50px" id="nameMarker" />
                <b >Co-Ordinates </b><apex:inputcheckbox style="margin-right:50px" id="cordMarker"/>
                <b >ID </b><apex:inputcheckbox id="IDMarker" />
            </div>
            <div style="display:block" id = "nameAndCountryDiv">
                <b style="Margin-right:25px">Name: </b> <apex:inputtext styleClass="inputStyle" style="Margin-right:100px"/>
                <b style="Margin-right:25px">Country: </b> <apex:inputtext styleClass="inputStyle"/>
            </div>
            <div style="display:none" id = "co-ordinatesDiv">
                <b style="Margin-right:6px">Lattitude: </b> <apex:inputtext styleClass="inputStyle" style="Margin-right:100px"/>
                <b style="Margin-right:15px">Longitude: </b> <apex:inputtext styleClass="inputStyle"/>
            </div>
            <div style="display:none" id = "IdDiv">
                <b style="Margin-right:20px">City id: </b> <apex:inputtext styleClass="inputStyle"/>
            </div>
            <br/>
        </apex:pageBlock>
        
        
        <apex:pageBlock title="{!cityName} city's weather" id="outputPageblock" rendered="{!toggleDecider}">
            <apex:pageBlockSection title="Location details" collapsible="false">
                <apex:outputText label="City name :">{!cityName}</apex:outputText>
                <apex:outputText label="City country :">{!cityCountry}</apex:outputText>
                <apex:outputText label="City ID :">{!cityIDFromServer}</apex:outputText>
                <apex:outputText label="City co-ordinates(Lon,Lat) :">{!lon_Co_ord},{!lat_Co_ord}</apex:outputText>
            </apex:pageBlockSection>
            <apex:repeat value="{!weatherDataList}" var="wb">
                <apex:pageBlockSection title=" Weather at {!wb.weather_forcast_date}">
                    <apex:outputText label="Tempreture :">{!wb.temp_at_forcasted_time}</apex:outputText>
                    <apex:outputText label="Max Tempreture :">{!wb.max_temp_at_forcasted_time}</apex:outputText>
                    <apex:outputText label="Min Tempreture :">{!wb.min_temp_at_forcasted_time}</apex:outputText>
                    <apex:outputText label="Humidity(%) :">{!wb.humidity_in_percent}</apex:outputText>
                    <apex:outputText label="Atmosphric pressure :">{!wb.pressure_at_ground_level_hpa}</apex:outputText>
                    <apex:outputText label="Rain(mm) :">{!wb.rain_volume_in_last_3h}</apex:outputText>
                    <apex:outputText label="Weather Condition id :">{!wb.weather_condition_id}</apex:outputText>
                    <apex:outputText label="Weather condition :">{!wb.weather_condition_type}</apex:outputText>
                    <apex:outputText label="Weather Condition icon :">
                        <apex:image id="weatherIcon" value="{!wb.weather_condition_icon}"/>
                    </apex:outputText>
                    <apex:outputText label="Weather condition description :">{!wb.weather_condition_description}</apex:outputText>
                    <apex:outputText label="Wind speed :">{!wb.wind_speed}</apex:outputText>
                    <apex:outputText label="Wind direction :">{!wb.wind_direction}</apex:outputText>
                </apex:pageBlockSection>
            </apex:repeat>
            
        </apex:pageBlock>
    </apex:form>
    <script type="text/javascript">
        
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
        
        $('[id$=nameMarker]').click(function(){
            alert('InputText clicked');
            
        });
    });  
    </script>
    
</apex:page>>