<div class ="dialog-inner" style ="height: 100%;">
    <div class ="ui-layout-north">
        <div class ="keyframe-type"></div>
    </div>
    <div class ="ui-layout-center">
        <div class ="largeImage" style ="height: 100%">
            <div class ="ui-layout-west"></div>
            <div class ="ui-layout-center">
                <div class ="display-image"></div>
                <div class ="preview-parent">
                    <div class ="show-preview"></div>
                </div>
            </div>
        </div>
        <div class ="multiImages" style ="height: 100%">
            <div class ="ui-layout-south">
                <div class ="frames"></div>
               <!-- <div class ="add-frame"></div>-->
                <div class ="frame-options">
                    <label class ="resource-dialog-label">loop</label>
                    <label>:</label>
                    <div class ="loop"></div>
                    <button class = 'add-frame'>add</button>
                    <button class ="copy-frame">copy</button>
                    <button class = "reverse-frame">reverse</button>
                    <button class ="delete-frame">copy</button>
                    <button class ="play-frame">play</button>
                    <button class = 'stop-frame'>stop</button>
                </div>
            </div>
            <fieldset class ="ui-layout-center">
                <legend class ="resource-dialog-label">preview</legend>
                <div class ="preview-parent">
                    <div class ="show-preview"></div>
                </div>
            </fieldset>
        </div>
    </div>
</div>