<!--%load_js_plugin("ui")-->
<!--%load_js_plugin("ui.colorpicker")-->
<!--%import("js/ui.hotkey.js",optimized=false)-->
<!--%import("js/ui.toolbar.js",optimized=false)-->
<!--%import("js/faceoff.js",optimized=false)-->
<!--%import("js/layout_image_list.js",optimized=false)-->
<!--%import("css/faceoff_menu.css",optimized=false)-->
<!--%import("js/layout_admin.js",optimized=false)-->
<!--%import("filter/reset_layout_code.xml")-->

<div id="toolbar">

    <form id="fo_layout" action="{getUrl('')}" method="post" enctype="multipart/form-data" target="hidden_iframe">
    <input type="hidden" name="layout_srl" id="layout_srl" value="{$layout_info->layout_srl}" />
    <div class="widgetMenu buttons">
        <ul class="widgetMenuList">
            <li><button type="button"><span>File</span></button>
                <ul class="noneToolBar">
                    <li class="menu" tb:type="radio" tb:arg=""><button type="button" onclick="FaceOff.saveLayoutConfig()">{$lang->layout_manager[1]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg=""><button type="button" onclick="document.location.href=request_uri.setQuery('mid',current_mid)">{$lang->layout_manager[2]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg=""><button type="button" onclick="doResetLayoutCode('{$layout_srl}');return false">{$lang->layout_manager[51]}</button></li>
                </ul>

            </li>
            <li><button type="button"><span>{$lang->layout_manager[3]}</span></button>
                <ul>
                    <li class="menu" tb:type="radio" tb:arg="t,fixed"><button type="button">{$lang->layout_manager[6]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="t,liquid"><button type="button">{$lang->layout_manager[7]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="t,hybrid"><button type="button">{$lang->layout_manager[8]}</button></li>
                </ul>
            </li>
            <li><button type="button"><span>{$lang->layout_manager[4]}</span></button>
                <ul>
                    <li class="menu" tb:type="radio" tb:arg="c,c"><button type="button">{$lang->layout_manager[9]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="c,ce"><button type="button">{$lang->layout_manager[10]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="c,ec"><button type="button">{$lang->layout_manager[11]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="c,cee"><button type="button">{$lang->layout_manager[12]}</button></li>
                    <li class="menu" class="menu" tb:type="radio" tb:arg="c,ece"><button type="button">{$lang->layout_manager[13]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="c,eec"><button type="button">{$lang->layout_manager[14]}</button></li>
                </ul>
            </li>
            <li><button type="button"><span>{$lang->layout_manager[5]}</span></button>
                <ul>
                    <li class="menu" tb:type="radio" tb:arg="a,aLeft"><button type="button">{$lang->layout_manager[15]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="a,aCenter"><button type="button">{$lang->layout_manager[16]}</button></li>
                    <li class="menu" tb:type="radio" tb:arg="a,aRight"><button type="button">{$lang->layout_manager[17]}</button></li>
                </ul>
            </li>
        </ul>

        <fieldset class="hideOption">
            <label for="useHeader"><input type="checkbox" id="useHeader" /> Header</label>
            <label for="useFooter"><input type="checkbox" id="useFooter" /> Footer</label>
        </fieldset>
    </div>

    <!-- smartmenu start -->
    <ul id="smartmenu">
        <li id="for-all" style="display:block">
            <dl>
                <dt style="display:none">{$lang->layout_manager[18]}</dt>
                <dd>
                    <button type="button" onclick="FaceOff.showPreference(event,'html>body')">{$lang->layout_manager[18]}</button> >
                    <button type="button" onclick="FaceOff.showPreference(event,'#container')">{$lang->layout_manager[19]}</button> 
                </dd>
            </dl>
        </li>
        <li id="for-extension">
            <dl>
                <dt style="display:none">{$lang->layout_manager[18]}</dt>
                <dd>
                    <button type="button" onclick="FaceOff.showPreference(event,'html>body')">{$lang->layout_manager[18]}</button> >
                    <button type="button" onclick="FaceOff.showPreference(event,'#container')">{$lang->layout_manager[19]}</button> >
                </dd>
                <dt>Extension</dt>
                <dd>
                    <button type="button" onclick="FaceOff.popupAddWidget()">{$lang->layout_manager[20]}</button>
                    <button type="button" onclick="FaceOff.popupAddContent()">{$lang->layout_manager[21]}</button>
                    <button type="button" onclick="FaceOff.showPreference()">{$lang->layout_manager[22]}</button>
                </dd>
            </dl>
        </li>
        <li id="for-widget">
            <dl>
                <dt style="display:none">{$lang->layout_manager[18]}</dt>
                <dd>
                    <button type="button" onclick="FaceOff.showPreference(event,'html>body')">{$lang->layout_manager[18]}</button> >
                    <button type="button" onclick="FaceOff.showPreference(event,'#container')">{$lang->layout_manager[19]}</button> >
                </dd>

                <dt>Widget &gt; </dt>
                <dd>
                    <button type="button" onclick="FaceOff.popupAddWidgetStyle()">{$lang->layout_manager[23]}</button>
                    <button type="button" onclick="FaceOff.showPreference()">{$lang->layout_manager[22]}</button>
                    <button type="button" onclick="FaceOff.popupAddWidget()">{$lang->layout_manager[24]}</button>
                    <button type="button" onclick="FaceOff.deleteWidget()">{$lang->layout_manager[25]}</button>
                </dd>
            </dl>
        <li id="for-block">
            <dl>
                <dt style="display:none">{$lang->layout_manager[18]}</dt>
                <dd>
                    <button type="button" onclick="FaceOff.showPreference(event,'html>body')">{$lang->layout_manager[18]}</button> >
                    <button type="button" onclick="FaceOff.showPreference(event,'#container')">{$lang->layout_manager[19]}</button> >
                </dd>

                <dt>Block</dt>
                <dd>
                    <button type="button" onclick="FaceOff.showPreference()">{$lang->layout_manager[22]}</button>
                </dd>
            </dl>
        </li>
    </ul>
    <!-- smartmenu end -->

    <!-- preview start -->
    <div id="demoXe" class="demoFixed">
        <div id="demoContainer" class="demoC">
            <div id="demoHeader">
            </div>
            <div id="demoBody">
                <div id="demoContent">
                </div>
                <div class="demoExtension demoE1">
                </div>
                <div class="demoExtension demoE2">
                </div>
            </div>
            <div id="demoFooter">
            </div>
        </div>
    </div>
    <!-- preview end -->

    </form>

</div>

<div id="propertyDialog">
    <form>
        <fieldset name="float" style="display:none">
            <legend>{$lang->layout_manager[26]}</legend>
            <div class="visible-more">
                <label for="background-color">{$lang->layout_manager[26]} : </label>
                <select id="float">
                    <option value=''>{$lang->layout_manager[27]}</option>
                    <option value='left'>{$lang->layout_manager[28]}</option>
                    <option value='right'>{$lang->layout_manager[29]}</option>
                </select>
            </div>
        </fieldset>
        <fieldset name="width" style="display:none">
            <legend>{$lang->layout_manager[30]}</legend>
            <div class="visible-more">
                <label for="width">{$lang->layout_manager[30]} : </label>
                <input type="text" id="width" size="5" />
            </div>
        </fieldset>
        <!--
        <fieldset name="height" style="display:none">
            <legend>{$lang->layout_manager[31]}</legend>
            <div class="visible-more">
                <label for="background-color">{$lang->layout_manager[31]} : </label>
                <input type="text" id="height" size="5" />
            </div>
        </fieldset>
        -->
        <fieldset name="margin">
            <legend>{$lang->layout_manager[32]}</legend>
            <input type="text" id="margin" size="15" class="inputall" title="margin+px">
            <button type="button" class="morelink"><span>+</span></button>
            <div class="more">
                <div>
                    <label for="margin-top">{$lang->layout_manager[34]} : </label>
                    <input type="text" id="margin-top" size="3">
                </div>
                <div>
                    <label for="margin-left">{$lang->layout_manager[35]} : </label>
                    <input type="text" id="margin-left" size="3">
                </div>
                <div>
                    <label for="margin-right">{$lang->layout_manager[36]} : </label>
                    <input type="text" id="margin-right" size="3">
                </div>
                <div>
                    <label for="margin-bottom">{$lang->layout_manager[37]} : </label>
                    <input type="text" id="margin-bottom" size="3">
                </div>
            </div>
        </fieldset>
        <fieldset name="padding">
            <legend>{$lang->layout_manager[33]}</legend>
            <input type="text" id="padding" size="15" class="inputall" title="padding+px">
            <button type="button" class="morelink"><span>+</span></button>
            <div class="more">
                <div>
                    <label for="padding-top">{$lang->layout_manager[34]} : </label>
                    <input type="text" id="padding-top" size="3">
                </div>

                <div>
                    <label for="padding-left">{$lang->layout_manager[35]} : </label>
                    <input type="text" id="padding-left" size="3">
                </div>

                <div>
                    <label for="padding-right">{$lang->layout_manager[36]} : </label>
                    <input type="text" id="padding-right" size="3">
                </div>

                <div>
                    <label for="padding-bottom">{$lang->layout_manager[37]} : </label>
                    <input type="text" id="padding-bottom" size="3">
                </div>
            </div>
        </fieldset>
        <fieldset name="border">
            <legend>{$lang->layout_manager[38]}</legend>
            <span class="inputall">
                <input type="text" id="border-width" size="3" title="border-width+px" />
                <input type="text" id="border-color" size="7" class="color-indicator" title="border-color" />
                <select id="border-style" title="border-style">
                    <option value="none">{$lang->layout_manager[39]}</option>
                    <option value="hidden">hidden</option>
                    <option value="dotted">dotted</option>
                    <option value="dashed">dashed</option>
                    <option value="solid">solid</option>
                    <option value="double">double</option>
                    <option value="groove">groove</option>
                    <option value="ridge">ridge</option>
                    <option value="inset">inset</option>
                    <option value="inset">outset</option>
                </select>
            </span>
            <button type="button" class="morelink"><span>+</span></button>
            <div class="more">
                <div>
                    <label for="border-top-width">{$lang->layout_manager[34]} : </label>
                    <input type="text" id="border-top-width" size="3" title="border-width+px" />
                    <input type="text" id="border-top-color" size="7" class="color-indicator" title="border-color" />
                    <select id="border-top-style" title="border-style">
                        <option value="none">{$lang->layout_manager[39]}</option>
                        <option value="hidden">hidden</option>
                        <option value="dotted">dotted</option>
                        <option value="dashed">dashed</option>
                        <option value="solid">solid</option>
                        <option value="double">double</option>
                        <option value="groove">groove</option>
                        <option value="ridge">ridge</option>
                        <option value="inset">inset</option>
                        <option value="inset">outset</option>
                    </select>
                </div>
                <div>
                    <label for="border-right-width">{$lang->layout_manager[36]} : </label>
                    <input type="text" id="border-right-width" size="3" title="border-width+px" />
                    <input type="text" id="border-right-color" size="7" class="color-indicator" title="border-color" />
                    <select id="border-right-style" title="border-style">
                        <option value="none">{$lang->layout_manager[39]}</option>
                        <option value="hidden">hidden</option>
                        <option value="dotted">dotted</option>
                        <option value="dashed">dashed</option>
                        <option value="solid">solid</option>
                        <option value="double">double</option>
                        <option value="groove">groove</option>
                        <option value="ridge">ridge</option>
                        <option value="inset">inset</option>
                        <option value="inset">outset</option>
                    </select>
                </div>
                <div>
                    <label for="border-bottom-width">{$lang->layout_manager[37]} : </label>
                    <input type="text" id="border-bottom-width" size="3" title="border-width+px" />
                    <input type="text" id="border-bottom-color" size="7" class="color-indicator" title="border-color" />
                    <select id="border-bottom-style" title="border-style">
                        <option value="none">{$lang->layout_manager[39]}</option>
                        <option value="hidden">hidden</option>
                        <option value="dotted">dotted</option>
                        <option value="dashed">dashed</option>
                        <option value="solid">solid</option>
                        <option value="double">double</option>
                        <option value="groove">groove</option>
                        <option value="ridge">ridge</option>
                        <option value="inset">inset</option>
                        <option value="inset">outset</option>
                    </select>
                </div>
                <div>
                    <label for="border-left-width">{$lang->layout_manager[35]} : </label>
                    <input type="text" id="border-left-width" size="3" title="border-width+px" />
                    <input type="text" id="border-left-color" size="7" class="color-indicator" title="border-color" />
                    <select id="border-left-style" title="border-style">
                        <option value="none">{$lang->layout_manager[39]}</option>
                        <option value="hidden">hidden</option>
                        <option value="dotted">dotted</option>
                        <option value="dashed">dashed</option>
                        <option value="solid">solid</option>
                        <option value="double">double</option>
                        <option value="groove">groove</option>
                        <option value="ridge">ridge</option>
                        <option value="inset">inset</option>
                        <option value="inset">outset</option>
                    </select>
                </div>
            </div>
        </fieldset>
        <fieldset name="background">
            <legend>{$lang->layout_manager[40]}</legend>
            <div class="visible-more">
                <div>
                    <label for="background-color">{$lang->layout_manager[41]} : </label>
                    <input type="text" id="background-color" size="7" class="color-indicator" />
                </div>
                <div>
                    <label for="background-image">{$lang->layout_manager[42]} :</label>
                    <input type="text" id="background-image" size="14" /><button type="button" onclick="popupLayoutImageList({$layout_info->layout_srl})">{$lang->layout_manager[43]}</button>
                </div>
                <div>
                    <label for="background-repeat">{$lang->layout_manager[44]} : </label>
                    <select id="background-repeat">
                        <option value="repeat">{$lang->layout_manager[45]}</option>
                        <option value="no-repeat">{$lang->layout_manager[46]}</option>
                        <option value="repeat-x">{$lang->layout_manager[47]}</option>
                        <option value="repeat-y">{$lang->layout_manager[48]}</option>
                    </select>
                </div>
            </div>
        </fieldset>
        <fieldset name="font">
            <legend>{$lang->layout_manager[52]}</legend>
            <div class="visible-more">
                <div>
                    <label for="font-family">{$lang->layout_manager[53]} :</label>
                    <input type="text" id="font-family" size="14" />
                </div>
                <div>
                    <label for="color">{$lang->layout_manager[54]} : </label>
                    <input type="text" id="color" size="7" class="color-indicator" />
                </div>
            </div>
        </fieldset>
        <div class="buttonArea">
            <button type="submit">{$lang->layout_manager[49]}</button>
            <button type="reset">{$lang->layout_manager[50]}</button>
        </div>
    </form>
</div>