{script}
{literal}

$(function(){
    $("#change_password_button").click(
        function() {
            document.getElementById("change-password-div").style.display = "block";
            document.getElementById("change-password-button").style.display = "none";
            document.getElementById("editForm").style.display = "none";
            window.owForms['change-user-password'].resetForm();
            window.owForms['change-user-password'].removeErrors();
        }
    );
});

$(function(){
    $("#cancel_change_password").click(
        function() {
            document.getElementById("change-password-div").style.display = "none";
            document.getElementById("change-password-button").style.display = "block";
            document.getElementById("editForm").style.display = "block";
            window.owForms['change-user-password'].resetForm();
            window.owForms['change-user-password'].removeErrors();
        }
    );
});
{/literal}
{/script}

<div id="change-password-button" style="float: left;">
    {decorator name="button" id="change_password_button" langLabel='base+change_password'}
</div>
<div id="change-password-div" class="owm_full_page_form owm_edit_profile ow_superwide ow_automargin"  style="display:none;left: 0px;right: 0px;position: absolute;margin-top: 42px;">
    {form name="change-user-password" }
        <div class="owm_field_container owm_std_margin_bottom">
            <div class="owm_form_label owm_small_margin_bottom">{label name='oldPassword'}<span class="owm_required_star"></span></div>
            <div class="owm_field_wrap owm_select_wrap">{input name='oldPassword'}</div>
            <div class="owm_error_txt">{error name='oldPassword'}</div>
        </div>
        <div class="owm_field_container owm_std_margin_bottom">
            <div class="owm_form_label owm_small_margin_bottom">{label name='password'}<span class="owm_required_star"></span></div>
            <div class="owm_field_wrap owm_select_wrap">{input name='password'}</div>
            <div class="owm_error_txt">{error name='password'}</div>
        </div>
        <div class="owm_field_container owm_std_margin_bottom">
            <div class="owm_form_label owm_small_margin_bottom">{label name='repeatPassword'}<span class="owm_required_star"></span></div>
            <div class="owm_field_wrap owm_select_wrap">{input name='repeatPassword'}</div>
            <div class="owm_error_txt">{error name='repeatPassword'}</div>
        </div>
        <div class="owm_btn_wide owm_std_margin_top">
            {submit name="change"}
        </div>
    {/form}

    <div class="owm_btn_wide owm_std_margin_top">
        {decorator name="button" id="cancel_change_password" langLabel='base+back' onClick="cancelChangePassword"}
    </div>
</div>


{if isset($showChangePasswordFirst)}
{script}
{literal}
document.getElementById("change-password-div").style.display = "block";
document.getElementById("change-password-button").style.display = "none";
document.getElementById("editForm").style.display = "none";
window.owForms['change-user-password'].resetForm();
window.owForms['change-user-password'].removeErrors();
{/literal}
{/script}

{/if}