<div class='dialog-inner' style='height: 100%;'>
    <div class ="ui-layout-north">
        <div class ="basic-properties">
            <label class='resource-dialog-label'>name</label>
            <input class='resource-dialog-input name ui-widget-content ui-corner-all'/>
            <div class = 'split'></div>
            <div class = "tagWraper" style = 'display: inline-block;'>
                <label class = 'tagLabel'>tags</label>
                <button class = 'editTag'></button>
                <div class = 'tagSelector'></div>
            </div>
            <div class = 'split'></div>
            <label class='resource-dialog-label'>parent</label>
            <div class='select-parent'></div>
            <button class ="edit-parent resource-dialog-label">edit</button>
            <div class = 'split'></div>
            <button class ='dialogButton object-behavior'>object_behavior</button>
            <div class = 'split'></div>
            <label class = 'btn-objects-label' for = 'btn-objects'></label>
            <input class = 'buttonSwitch' type = 'checkbox' id = 'btn-objects' />
            <!--            <label class='resource-dialog-label' for = 'resource-solid'>solid</label>
<input id = 'resource-solid' type = 'checkbox' name = 'resource-solid'/>-->
            <!--<label for = 'use-physics' class ='resource-dialog-label'>use_physics</label>
            <input type = 'checkbox' id ='use-physics' name ="use-physics"/>
            <button class ='dialogButton physic-property'>physics_property</button>-->
            <br/>
        </div>
    </div>
    <div class ="ui-layout-center tabs">
        <ul>
            <li><a href ="#sprite" class ="resource-dialog-label">sprite</a></li>
            <li><a href ="#events" class ="resource-dialog-label">events</a></li>
        </ul>
        <div id ="sprite" class ="object-sprite-property">
            <div class ="ui-layout-west sprites"></div>
            <div class='ui-layout-center edit-area'>
                <div class ="ui-layout-west left-toolbar">
                    <button class ='resource-dialog-label delete-sprite'>delete_</button>
                    <button class ='resource-dialog-label fill-with-color'>fill_with_color</button>
                    <button class ="resource-dialog-label mirror">mirror</button>
                    <button class ='resource-dialog-label origin'>origin</button>
                    <button class ='resource-dialog-label image-point'>image_point</button>
                    <button class ='resource-dialog-label collision-shape'>edit_impact_area</button>
                    <button class ='resource-dialog-label text'>text</button>
                    <button class ='resource-dialog-label skeleton'>skeleton</button>
                </div>
                <div class ="ui-layout-north top-toolbar">                    
                    <div class ='fill-with-image'></div>
                    <button class ='resource-dialog-label keyframe-animation'>keyframe_animation</button>
                    <div class ='split'></div>
                    <button class ='resource-dialog-label zoom-in'>zoomin</button>
                    <button class ='resource-dialog-label zoom-out'>zoomout</button>
                    <button class ='resource-dialog-label zoom-2-1'>zoomo</button>
                    <div class ='split'></div>
                    <button class ="resource-dialog-label undo">undo</button>
                    <button class ="resource-dialog-label redo">redo</button>
                    <div class ='split'></div>
                    <label class=''>W(px)</label>
                    <input class ='ui-widget-content ui-corner-all width'/>
                    <button class = 'is-equal-scale'></button>
                    <label class=''>H(px)</label>
                    <input class ='ui-widget-content ui-corner-all height'/>
                    <label class='resource-dialog-label'>opacity</label>
                    <input class ='ui-widget-content ui-corner-all opacity'/>
                    <div class ='split'></div>
                    <button class ='resource-dialog-label more'>more</button>
                </div>
                <div class ='ui-layout-center inner-edit-area'>
                    <div class ="origin-more-toolbar">
                        <div class ='origin-toolbar'>
                            <label class=''>X(px)</label>
                            <input class ='ui-widget-content ui-corner-all origin-x'/>
                            <label class=''>Y(px)</label>
                            <input class ='ui-widget-content ui-corner-all origin-y'/>
                            <button class ='resource-dialog-label origin-to-center'>center</button>
                        </div>
                        <div class ='fill-with-color-toolbar'>
                            <input class='resource-dialog-input color select-solid-color ui-widget-content ui-corner-all'/>
                        </div>
                        <div class ='more-toolbar'>
                            <label class = 'resource-dialog-label'>stroke</label>
                            <label>:</label>
                            <input class='stroke-px ui-widget-content ui-corner-all'/>
                            <input class='stroke-color ui-widget-content ui-corner-all' />
                            <label class = 'resource-dialog-label'>radius</label>
                            <label>:</label>
                            <input class='radius ui-widget-content ui-corner-all'/>
                            <label class='resource-dialog-label'>hsp</label>
                            <label>(px)</label>
                            <input class='background-hspeed ui-widget-content ui-corner-all'/>
                            <label class='resource-dialog-label'>vsp</label>
                            <label>(px)</label>
                            <input class='background-vspeed ui-widget-content ui-corner-all'/>
                            <label for = 'repeat-x' class ='resource-dialog-label'>repeat_x</label>
                            <input type = 'checkbox' id = 'repeat-x' name = 'repeat-x'/>
                            <label for = 'repeat-y' class ='resource-dialog-label'>repeat_y</label>
                            <input type = 'checkbox' id = 'repeat-y' name = 'repeat-y'/>
                        </div>
                    </div>
                    <div class ='text-toolbar'>
                    </div>
                    <div class ='preview-parent'>
                        <div class ='show-preview'></div>
                        <div class ='preview-text'>
                            <textarea></textarea>
                            <div class ='cover'></div>
                        </div>
                        <div class ='cross-hair'></div>
                    </div>
                </div>
            </div>
        </div>
        <div id ="events" class ="object-events"></div>
    </div>