{extends file=$element.methods->getTemplatePath('general')}

{block name=input append}
	{strip2}
	<div class="inputPassword">
		<input type="password"
			class="inputElement{if $element.style.CSSClass} {$element.style.CSSClass}{/if} {$element.style.extraCSSClass}"

			id="{$element.id}"
			name="{$element.name}"
			value="{$element.value}"

			{if $element.disabled}
				disabled="disabled"
			{/if}

			{if $element['browserAutocomplete']}
				autocomplete="{$element['browserAutocomplete']}"
			{/if}

			style="	{if $element.style.height} height:{$element.style.height}px;{/if}
					{if $element.style.width} width:{$element.style.width}px;{/if}"
		/>

		{if $element['style']['autoEvaluate']|default:''}
			<div class="passwordStrength">
				<div class="progress"></div>
			</div>
		{/if}
	</div>

	{/strip2}
{/block}

<script type="text/javascript">
	{block name=script append}
		{if $element['style']['autoEvaluate']|default:''}
			MVC.scheduleOnLoad(function() {
				// highlight password strength
				var handler = function(evt) {
					evt.element().up('td').down('div.passwordStrength >div.progress').setStyle({
						width: Math.round(
							Math.min(100,
								$F(evt.element()).determinePasswordStrength({$element.style.randomPasswordStyle|json_encode})*150
							)
						)+'%'
					});
				};
				$('{$element.id}').observe('keyup', handler);
				$('{$element.id}').observe('change', handler);
				$('{$element.id}').observe('blur', handler);

				$('{$element.id}').up('td').down('div.passwordStrength').setStyle({
					width: $('{$element.id}').getWidth()+'px'
				});
				$('{$element.id}').up('td').down('div.passwordStrength >div.progress').setStyle({
					backgroundSize: $('{$element.id}').getWidth()+'px 3px'

				});
			});
		{/if}
	{/block}
</script>
