<? global $vis_language;
$security_password = ($security_password_details != -1) ? $security_password_details[0]['content'] : 50;?>
<script>
	$(document).ready(function(){
		function change_password_strength(strengthPercentage, is_valid){
			$("#password_strength_per").val(strengthPercentage);
			var show_password_result;
				if(strengthPercentage>=0 && strengthPercentage<50){show_password_result='<span class="label vh-yellow-bg"> <?=$vis_language['TXTWEAK'];?> </span>';}
				else if(strengthPercentage>=50 && strengthPercentage<70){show_password_result='<span class="label vh-green-bg"> <?=$vis_language['TXTMEDIUM'];?> </span>';}
				else if(strengthPercentage>=70 && strengthPercentage<90){show_password_result='<span class="label vh-orange-bg"> <?=$vis_language['TXTSTRONG'];?> </span>';}
				else if(strengthPercentage>=90 && strengthPercentage<=100){show_password_result='<span class="label vh-red-bg"> <?=$vis_language['TXTVERYSTRONG'];?> </span>';}
				if(is_valid=='not_allowed') $('#password_strenght_id').html('<? echo $vis_language['TXTPASSWORDSRENGTH']."&nbsp;&nbsp;"; ?> '+show_password_result+ '&nbsp;&nbsp; <?=$vis_language['TXTNOTALLOWED']?>');
				else if(is_valid=='allowed') $('#password_strenght_id').html('<? echo $vis_language['TXTPASSWORDSRENGTH']."&nbsp;&nbsp;"; ?> '+show_password_result+ '&nbsp;&nbsp; <?=$vis_language['TXTALLOWED']?>');
				return true;	
		}
		
		$('#vis_new_password').pStrength({
			'changeBackground'          : false,
			'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
				if(passwordStrength!=0){change_password_strength(strengthPercentage,'not_allowed');}
			},
			'passwordValidFrom': <?=$security_password;?>,
			'onValidatePassword': function(strengthPercentage) {
				change_password_strength(strengthPercentage,'allowed');
			}
		});
	});
</script>
<form method="post" name="vis_staff_password_form" id="vis_staff_password_form" class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label"><?= $vis_language['TXTOLDPASSWORD']; ?></label>
		<div class="col-sm-10">
			<input class="form-control input-sm" type="password" name="vis_old_password" id="vis_old_password" autocomplete="off">
		</div>	
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label"><?= $vis_language['TXTNEWPASSWORD']; ?></label>
		<div class="col-sm-10">
			<input class="form-control input-sm" type="password" name="vis_new_password" id="vis_new_password" autocomplete="off" data-display="password_strenght_id">
		</div>	
	</div>
	<div class="form-group">
	   <label class="col-sm-2 control-label"></label>
	   <div class="col-sm-2">
		  <label class="checkbox-inline i-checks">
		  <input type="checkbox" name="vis_show_pass" value="1" id="vis_show_pass" onclick="toggleType();"><i></i> <? echo $vis_language['MSGSHOWPASSWORD']; ?>
		  </label>
	   </div>
	   <div class="col-sm-8">
			<input type="hidden" name="password_strength_per" id="password_strength_per" value='0'>
		  <div id="password_strenght_id" class="checkbox-inline"></div>
	   </div>
	</div>
	</div>     
	<div class="line b-b line-lg pull-in"></div>
	<br/>
	<div class="form-group">
		<div class="col-sm-4 col-sm-offset-2">
		<button type="button" class="btn btn-primary" onclick="$('#vis_workpanel_div').visExecution('submit_form',{'vis_module':'home', 'vis_operation':'update_staff_password', 'vis_form':'vis_staff_password_form'})"><? echo $vis_language['TXTUPDATE']; ?></button>
		</div>	
	</div>	
</form>
<script>
function toggleType() {
    var obj = document.getElementById('vis_old_password');
    if (obj.type == 'text') {
        obj.type = 'password';
    } else {
        obj.type = 'text';
    }
	var obj1 = document.getElementById('vis_new_password');
	  if (obj1.type == 'text') {
        obj1.type = 'password';
    } else {
        obj1.type = 'text';
    }
}

/*  disable scacebar         */
	$(function() {
         var txt = $("input#vis_new_password");
         var func = function() {
             txt.val(txt.val().replace(/\s/g, ''));
    }
    txt.keyup(func).blur(func);
});
</script>