search_box_dropdown

<macro name="search_box_dropdown" requires="node">

    <n.put_in_head.>

        <style type="text/css">

            #search-box-dropdown {

                text-align:left;

                position:absolute;

                display:none;

                z-index:1000;

                overflow:hidden;

            }

        </style>

        <script type="text/javascript">

            $(document).ready(function() {

                var $sdd = $('#search-box-dropdown');

                var $sb = $('#search-input');

                var $form = $sb.parent();

                var timeout;

                $(document).click(function(o){

                    var $target = $(o.target);

                    if ($target.parents().hasClass('search-box-dropdown')) {

                        clearTimeout(timeout);

                        $sb.focus();

                    }

                });

                $sb.focusin(function(e) {

                    $sdd.css('left', $sb.position().left - 5);

                    $sdd.width($sb.outerWidth() + 10);

                    $sdd.show();

                });

                $sb.focusout(function() {

                    timeout = setTimeout(function() {

                        $sdd.hide();

                    },250);

                });

                <n.if.not.is_root>

                <then>

                $('input[type=radio]', $sdd).change(function() {

                    var nodeId = $(this).val();

                    $('input[name="node"]', $form).val(nodeId);

                });

                $('input[name="node"]', $form).val(<n.root_node.id/>);

                </then>

                </n.if.not.is_root>

            });

        </script>

    </n.put_in_head.>

    <div id="search-box-dropdown" class="search-box-dropdown light-bg-color drop-shadow border1 medium-border-color rounded-bottom">

        <n.if.not.is_root>

            <then>

                <div style="margin:.5em .5em 0 .5em">

                    <b><t>Search</t></b><br/>

                    <input id="search-root-node" type="radio" name="n" value="[n.root_node.id/]" checked="true"/>

                    <label for="search-root-node"><t>everywhere</t></label><br/>

 

                    <input id="search-this-node" type="radio" name="n" value="[n.id/]"/>

                    <label for="search-this-node">

                        <n.if.is_post>

                            <then><t>only in this topic</t></then>

                            <else><t>in <t.location.subject/></t></else>

                        </n.if.is_post>

                    </label>

                </div>

            </then>

        </n.if.not.is_root>

        <div style="margin:.5em;line-height:2em">

            <input class="toolbar action-button float-right" type="submit" value="[t]Search[/t]"/>

            <a href="[n.advanced_search_path/]" rel="nofollow" style="font-size:80%"><t>Advanced Search</t></a>

        </div>

    </div>

</macro>