<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<link type='text/css' href='<%=request.getContextPath()%>/css/general/changePassword.css' rel='stylesheet'
      media='screen'/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/main/changePassword.js" ></script>
<style type="text/css">

   .networks {
       float: left;
       width: 48px;
   }

   .users {
        float: left;
        width: 48px;
    }

   #adminImg {
        float: right;
        width: 256px;
        height: 256px;
        margin-right: 100px;
        margin-top: 80px;
    }

   #welcome {
        float: left;
        font-size: 24px;
        font-style: ITALIC;
         margin-left: 50px;
        height: 50px;
        width: 450px;

   }
   #leftAdmin {
        margin-top: 100px;
        width: 450px;
        float: left;
        margin-left: 270px;
        border: #999999 solid 1px;
        height: 250px;
   }

   #leftAdmin a {
         text-decoration: none;
         color: #212121;
     }
     #leftAdmin img {
            border: none;
     }

</style>
<script type="text/javascript" >
    $(document).ready(function() {
           $("#changingPassword").hide();

    });
</script>

   <div id="grayBox"></div>
<div id="changeProfile">
        <div id="close">

            <a href="#" class="closeWindow">
                <img src="<%=request.getContextPath()%>/images/close/close.png" width="24" height="24"/>
            </a>
        </div>

        <h3> Editing Profile </h3>
        <div id="changingOthers">

                <div class="label">
                    Username:<span id="validtoChangeUsername"></span>
                    <input type="text" value="<s:property value="#session.user.username" />" class="toChangeUsername"/>

                </div>
                <input type ="hidden" value="<s:property value="#session.user.username" />" name="toChangeUsernameHidden"/>


                <div class="label">
                    Email:<span id="validtoChangeEmail"></span>
                    <input type="text" value="<s:property value="#session.user.email" />" class="toChangeEmail"/>

                </div>
                <input type ="hidden" value="<s:property value="#session.user.email" />" name="toChangeEmailHidden"/>


                <p id="toChangePassword">Change password</p>
                      <input type ="hidden" name="isNormalOthers" value="0"/>

                <div id="savingProfile">
                    <input type ="button" value="Save" id="saveNewProfile"/>
                    <input type="button" value="Cancel" id="cancelProfile" />
                </div>
        </div>

        <div id="changingPassword">
              <div class="label">
                  Old Password:
                  <input  type="password" name="changeOldPassword" id="changeOldPassword" value="" />
                  <span id="validOldPassword1"></span>
              </div>
              <div class="label">
                  New password:
                  <input  type="password" name="createNewPassword" id="createNewPassword" value="" />
                  <span id="validNewPassword"></span>
              </div>

               <div class="label">
                   Confirm New password:
                   <input  type="password" name="confirmNewPassword" id="confirmNewPassword" value="" />
                   <span id="validCnfPassword1"></span>
               </div>
               <p id="toChangeOthers">Change Username and Email</p>
               <input type ="hidden" name="isNormalPassword" value="false"/>

                <div id="savingPassword">
                    <input type ="button" value="Save" id="saveNewPassword"/>
                    <input type="button" value="Cancel" id="cancelPassword" />
                </div>
        </div>

</div>

<div id="leftAdmin">

    <p id="welcome">WELCOME!  <s:property value="#session.user.username" /> </p>

    <div style="width: 64px;display: block;float: left; margin-left: 100px;margin-right: 100px ;" >

       <a href ="adminUsers.action" class="users">
           <img src="<%=request.getContextPath()%>/images/users/users.png" width="64" height="64" title="Users" />
           Users
       </a>

    </div>

    <div style="width: 64px;display: block;float: left;" >

        <a href ="adminNetworks.action" class="networks">
            <img src="<%=request.getContextPath()%>/images/networks/network.png" width="64" height="64" style="float:left;margin-left: 10px;" title="Networks"/>
            Networks
        </a>
    </div>
</div>
