<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>

<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/forTab.js"></script>
<link type='text/css' href='<%=request.getContextPath()%>/css/operator/profile.css' rel='stylesheet'
      media='screen'/>

<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>
<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/devices.js"></script>
<style type="text/css">

    #deviceInfo{
        margin-right: 0px;
        margin-top: 0px;
        float: right;
    }

    #networks{
        margin-top: 50px;
    }
    .profile{
        margin-right: 15px;
        width: 32px;
        height: 32px;
        float: right;
    }

    #deviceInfo{
        padding-right: 50px !important;
    }


    #changePassword {
        background-color: #aaaaaa;
        margin-top: -80px !important;
        margin-left: 200px;
        border: #555555 solid 3px;
        display: none;
        position: fixed;
        width: 400px;
        height:400px;
        z-index: 100;
    }

    #oldPassword,#fakeOldPassword, #fakepassword, #password, #confirmPassword, #fakeCnfPassword {
        margin-left: 100px;
        margin-bottom: 10px;
        width: 200px;
        height: 30px;
        text-align: center;
        font-style: italic;
        color: #555555 !important;
    }

    #validOldPassword,#validCnfPassword,#validPassword{
        margin-left: 100px;
        font-size: 15px;
        color: red;
        margin-top: 0px;

    }

     h3 {
        margin-top: 30px !important;
        margin-left: 50px !important;
        font-style: italic;
        font-size: 18px;
        margin-bottom: 40px;
    }

     #changeProfile {
        background-color: #aaaaaa;
        margin-top: -80px;
        margin-left: 200px;
        border: #555555 solid 3px;
        display: none;
        position: absolute;
        width: 400px;
        height: 400px;
        z-index: 100;
    }

    #deviceInfo{
        margin-top:0px !important;
    }
    #buttonToChange{
        margin-top:20px;
        margin-left:150px;
    }

</style>

<script type="text/javascript ">

    function pwdOldFocus() {
        $('#fakeOldPassword').hide();
        $('#oldPassword').show();
        $('#oldPassword').focus();
    }

    function pwdOldBlur() {
        if ($('#oldPassword').attr('value') == '') {
            $('#oldPassword').hide();
            $('#fakeOldPassword').show();
            $("#validOldPassword").html("");
            $("#buttonToChange").attr({disabled:true});
        }
        else{
            var oldPassword=$('#oldPassword').val();
            $.ajax({
                    url:'checkOldPassword.action',
                    data:"oldPassword="+oldPassword,
                    type:'POST',
                    dataType:'json' ,
                        success:function(data){
                              if(data.result==""){
                                     var ok="<img src='images/ok/ok.png' width='16' height='16' class='ok'/>"  ;
                                     $("#validOldPassword").html(ok);
                                     if($("#changePassword").find(".ok").length==3){
                                                $("#buttonToChange").attr({disabled:false});
                                     }else{
                                               $("#buttonToChange").attr({disabled:true});
                                     }
                              } else{
                                     $("#validOldPassword").html("");
                                     $("#validOldPassword").text(data.result);
                                     $("input[name='isNormal']").val(false);
                              }
                        }
            });
        }
    }

    function pwdNewFocus() {
        $('#fakepassword').hide();
        $('#password').show();
        $('#password').focus();
    }

    function pwdNewBlur() {
        if ($('#password').attr('value') == '') {
            $('#password').hide();
            $('#fakepassword').show();
            $("#validPassword").html("");
              $("#buttonToChange").attr({disabled:true});
        }
        else{
            if ($('#password').val().length>=5) {
                var password=$('#password').val();
                 $.ajax({
                                      url:'checkPassword.action',
                                      data:"password="+password,
                                      type:'POST',
                                      dataType:'json' ,
                                           success:function(data){
                                                     var oldPassword=$('#oldPassword').val();
                                                    if(password!=oldPassword){
                                                        var ok="<img src='images/ok/ok.png' width='16' height='16' class='ok'/>"  ;
                                                        $("#validPassword").html(ok);
                                                        if($('#confirmPassword').val().length>0){
                                                             if($('#password').val()==$('#confirmPassword').val()){
                                                                    var ok="<img src='images/ok/ok.png' width='16' height='16' class='ok'/>"  ;
                                                                     $("#validCnfPassword").html(ok);
                                                             } else{

                                                                $("#validCnfPassword").html("");
                                                                 $("#validCnfPassword").text("Doesn't matches with password");
                                                                $("input[name='isNormal']").val(false);
                                                             }
                                                        }
                                                        if($("#changePassword").find(".ok").length==3){
                                                            $("#buttonToChange").attr({disabled:false});
                                                        } else{
                                                              $("#buttonToChange").attr({disabled:true});
                                                         }
                                                    }else{
                                                            $("#validPassword").html("");
                                                            $("#validPassword").text("It's the same with old password!");
                                                            $("input[name='isNormal']").val(false);
                                                    }
                                           }
                 });
            } else {
                $("#validPassword").html("");
                $("#validPassword").text("Must include more than 5!");
                $("input[name='isNormal']").val(false);
            }
        }
    }

    function cnfPwdFocus() {
        $('#fakeCnfPassword').hide();
        $('#confirmPassword').show();
        $('#confirmPassword').focus();
    }

    function cnfPwdBlur() {
        if ($('#confirmPassword').attr('value') == '') {
            $('#confirmPassword').hide();
            $('#fakeCnfPassword').show();
            $("#validCnfPassword").html("");
              $("#buttonToChange").attr({disabled:true});
        }else{
            if($('#password').val()==$('#confirmPassword').val()){
                var ok="<img src='images/ok/ok.png' width='16' height='16' class='ok'/>"  ;
                $("#validCnfPassword").html(ok);
                if($("#changePassword").find(".ok").length==3){
                    $("#buttonToChange").attr({disabled:false});
                }else{
                    $("#buttonToChange").attr({disabled:true});
                 }
            } else{
                $("#validCnfPassword").html("");
                $("#validCnfPassword").text("Doesn't matches with password");
                $("input[name='isNormal']").val(false);
            }
        }
    }
    $(document).ready(function(){

        var email;
             $("input[name='searchUser']").focus(function() {
                 email = $(this).val();
                 if (email == "Subscriber ID") {
                     $(this).val("");
                 }

             });
             $("input[name='searchUser']").blur(function() {
                 if ($(this).val() == "") {
                     $(this).val("Subscriber ID");
                 }}) ;

           $("#changingPassword").hide();
               $("#changePassword").hide();
          var isFirst=$("input[name='isFirst']").val();
              if(isFirst==1){
                  var hh=$('body').height();
                  $('#grayBox').css({ opacity: 0.7, 'width':"100%",'height':"930px"});
                  $("#changePassword").show();
              }
              var obj=$(".sub");
              $.ajax({
                        url:'viewNetworks.action',
                        type:'POST',
                             success:function(result){
                                 $("#allNetworks").attr("src",'images/content/network_storage.png')  ;
                                 $(".sub").html(result);
                                 var deviceInfoHeight=$("#deviceInfo").height()+$("#usLogout").height()+parseFloat($("#usLogout").css("margin-top").split("p")[0])+parseFloat($("#usLogout").css("margin-bottom").split("p")[0]);
                                 var networkHeightInt=parseFloat($("#networks").css("height").split("p")[0]);
                                 var kk=deviceInfoHeight>networkHeightInt?deviceInfoHeight:networkHeightInt
                                 var contentHeightInt=parseFloat($("#content").css("height").split("p")[0]);
                                 $("#content").css("height",contentHeightInt>kk?contentHeightInt:kk) ;
                                 contentHeightInt=parseFloat($("#content").css("height").split("p")[0]);
                             }
              });
              var firstNetwork= $(".sub").html();
              $("#buttonToChange").click(function(){
              $("#waiting").show();
              var newPassword=$("#password").val();
                   $.ajax({
                        url:'toChangePasswordFirst.action',
                        data:'newPassword='+newPassword,
                        type:'POST',
                        dataType:'json' ,
                             success:function(data){
                                 alert(data.result);
                                  $("#changePassword").hide("slow");
                                  $('#grayBox').css("width", "0px");
                                  $('#grayBox').css("height", "0px");
                                  $("#waiting").hide();
                             }
                        });
              });

       $("#searchUser").click(function(){
            var  id=$("input[name='searchUser']").val();
           if(id!="Subscriber ID"){
               var networkId=$(".selecting").parent().find("input[name='networkId']").val();
               $.ajax({
                      url: "searchDevicesBySubscriber.action",
                      data: {
                             subscriberId: id,
                             networkId:networkId
                      },
                      type:"post",
                           success:function(data) {
                                   $("#deviceInfo").html(data);
                                   return false;
                           }
               });
           } else{
               alert("Please insert the subscriber id!");
           }
       });
    });
</script>
   <input type ="hidden" name="isFirst" value="<s:if test="%{#session.user.uniqueCode==null}">0</s:if><s:else>1</s:else>" />
   <div id="grayBox"></div>
    <div id="waiting"></div>
    <div id="changePassword" >
        <h3>Please, change your password ! </h3>
        <input style="color: #ccc" type="text" name="fakeOldPassword" id="fakeOldPassword" value="Old Password" onfocus="pwdOldFocus()"/>
           <span id="validOldPassword"></span>
        <input style="display: none" type="password" name="oldPassword" id="oldPassword" value="" onblur="pwdOldBlur()"/>

        <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="New Password" onfocus="pwdNewFocus()"/>
           <span id="validPassword"></span>
        <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdNewBlur()"/>

        <input style="color: #ccc" type="text" name="fakeCnfPassword" id="fakeCnfPassword" value="Confirm New Password"  onfocus="cnfPwdFocus()"/>
              <span id="validCnfPassword"></span>
        <input style="display: none" type="password" name="confirmPassword" id="confirmPassword" value=""  onblur="cnfPwdBlur()"/>

        <input type ="hidden" name="isNormal" value="false"/>
        <input type ="button" value="Save" id="buttonToChange" disabled="disabled"/>
    </div>

    <div id="changeProfile">
        <input type="text" value="<s:property value="#session.user.username" />" class="userName"/>
        <input type="text" value="<s:property value="#session.user.email" />" class="email"/>
        <input type="password" value="<s:property value="#session.user.password" />" class="password"/>
    </div>

    <div id="usLogout">

        <a href ="logout.action" class="logout">
           <img src="<%=request.getContextPath()%>/images/logout/logout.png" width="32" height="32" title="Logout" style="border: none;"/>
        </a>
        <a href ="profileViewOperator.action" class="editProfile">
           <img src="<%=request.getContextPath()%>/images/editProfile/editProfile.png" width="32" height="32" title="Edit Profile" style="border: none;"/>
        </a>
        <a href="#" id="searchUser" style="height: 23px;float: right;margin-right: 10px;" ><img src="<%=request.getContextPath()%>/images/find/search.png" height="23"/></a>     <input type="text" name="searchUser" value="Subscriber ID" style="margin-top: 0px;margin-bottom:0px;height: 16px;width: 150px;float: right;"/>
        <div style="float: right;margin-right: 10px;line-height:16px;">
            <s:property value="#session.user.username" />
        </div>
    </div>
    <div id="adminContext">
                 <div id="networks">
                     <ul id="ulNetworks">
                         <li class="network">
                              <img src="<%=request.getContextPath()%>/images/content/network.png" width="16" height="16" id="allNetworks"/> <s:text name="label.network"/>
                         </li>
                         <ul class="sub">
                         </ul>
                     </ul>
                    <input type="hidden" name="selectedDevice" />
                </div>
                <div id="deviceInfo" >
               </div>
    </div>
    <input type ="hidden" name="forOld" value="<s:property value="#session.user.password" />"  />
