FAQ Всплывающая форма авторизации для vBulletin 4

<vb:if condition="$show['guest']">
    <script type="text/javascript" src="/clientscript/slideto.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var close;
            $('.login').click(function(){
                $('#nouser').slideTo({
                    transition:300,
                    top:'center',
                    left:'center',
                    inside:window
                });
                $('#background').height($(document).height());
            });                        
            $("#close").click(function(){
                $('#nouser').stop().slideTo({ 
                    transition:500,
                    top:-400
                    });
                    $('#background').fadeOut(500);
                close = false;
            });
        });
    </script>
    <div id="background"></div><!-- Затемнение при появлении всплывающего окошка -->
    <!-- Внутреннее содержимое всплывающего окошка -->
    <div id="nouser">    
        <ul class="nouser">
            <div id="close" title="Закрыть"></div>
            <a rel="help" href="faq.php{vb:raw session.sessionurl_q}"><div id="help" title="{vb:rawphrase help}"></div></a>
            <li><h1>Авторизация</h1></li>
            <li>
                <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
                <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
                    <fieldset id="logindetails" class="logindetails">
                        <div>
                            <div>
                        <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
                        <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
                        <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
                        <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
                            </div>
                        </div>
                    </fieldset>
                    <div id="remember" class="remember">
                        <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
                    </div>

                    <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                    <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                    <input type="hidden" name="do" value="login" />
                    <input type="hidden" name="vb_login_md5password" />
                    <input type="hidden" name="vb_login_md5password_utf" />
                </form>
                <script type="text/javascript">
                YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
                YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
                vB_XHTML_Ready.subscribe(function()
                {
                //
                    YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
                    YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
                    YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
                    YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
                });
                
                function navbar_username_focus(e)
                {
                //
                    var textbox = YAHOO.util.Event.getTarget(e);
                    if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
                    {
                    //
                        textbox.value='';
                        textbox.style.color='{vb:stylevar input_color}';
                    }
                }

                function navbar_username_blur(e)
                {
                //
                    var textbox = YAHOO.util.Event.getTarget(e);
                    if (textbox.value == '')
                    {
                    //
                        textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
                        textbox.style.color='{vb:stylevar shade_color}';
                    }
                }
                
                function navbar_password_hint(e)
                {
                //
                    var textbox = YAHOO.util.Event.getTarget(e);
                    
                    YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
                    YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
                    YAHOO.util.Dom.get('navbar_password').focus();
                }

                function navbar_password(e)
                {
                //
                    var textbox = YAHOO.util.Event.getTarget(e);
                    
                    if (textbox.value == '')
                    {
                        YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
                        YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
                    }
                }
                </script>
            </li>
            <vb:if condition="$vboptions['enablefacebookconnect']">
                {vb:raw facebook_header}
            </vb:if>
        </ul>
    </div>
    <!--/ Внутреннее содержимое всплывающего окошка -->
</vb:if>

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
    <vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
    <div id="toplinks" class="toplinks">
        <vb:if condition="$show['member']">
            <ul class="isuser">
                <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
                <vb:if condition="$show['registerbutton']">
                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
                </vb:if>
                <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
                <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
                <vb:if condition="$notifications_total">
                <li class="popupmenu notifications" id="notifications">
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
                    <ul class="popupbody popuphover">
                        {vb:raw notifications_menubits}
                    </ul>
                </li>
                <vb:else />
                <li class="popupmenu nonotifications" id="nonotifications">
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
                    <ul class="popupbody popuphover">
                        <li>{vb:rawphrase no_new_messages}</li>
                        <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
                    </ul>
                </li>
                </vb:if>
                <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
                <vb:if condition="$vboptions['enablefacebookconnect']">
                    {vb:raw facebook_header}
                </vb:if>
            </ul>
            {vb:raw template_hook.header_userinfo}
            <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
            
        <vb:else />
            <!-- Оформите кнопки Войти и Регистрация, чтобы они соответствовали вашему стилю -->
            <div class="login">Войти</div>
            <vb:if condition="$show['registerbutton']">
                <a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a>
            </vb:if>
            <!-- /Оформите кнопки Войти и Регистрация, чтобы они соответствовали вашему стилю-->
        </vb:if>
    </div>
    <div class="ad_global_header">
        {vb:raw ad_location.global_header1}
        {vb:raw ad_location.global_header2}
    </div>
    <hr />
</div>