<!--This will be your control template -->

<div data-ui="play-button-anchor" class="play-button-anchor">
    <!--
    NEW
        <div data-ui="toggle-button" data-template="default/toggle-button_with_bg_pic"
         class="icon-only no-frame play"></div>
    OLD
        <div data-ui="button" data-label="test"></div>
    -->
</div>
<div data-ui="pause-button-anchor" class="pause-button-anchor">
<!--
     <div data-ui="toggle-button" data-template="default/toggle-button_with_bg_pic"
         class="icon-only no-frame pause"></div>
 -->
</div>

<div class="spacer"></div>

<div data-ui="zoom-out-button-anchor" class="zoom-out-button-anchor">
<!--
   <div data-ui="button" data-name="zoom-out-button" data-template="default/button_with_bg_pic"
         class="ctrl button zoom-out icon-only no-frame" tabindex="0"></div>
-->
</div>
<div data-ui="zoom-in-button-anchor" class="zoom-inbutton-anchor">
<!--
    <div data-ui="button" data-name="zoom-in-button" data-template="default/button_with_bg_pic"
         class="ctrl button zoom-in icon-only no-frame" tabindex="0"></div>
-->
</div>
<div data-ui="point-in-time-area" class="point-in-time-area">
    <!--
    <div data-ui="popup-menu" data-name="point-in-time-popup" data-content-template="default/trend-zoom/zoom-stages-popup"></div>

    <div data-ui="popup-menu" data-name="point-in-time-popup"
         data-content-template="default/trend-zoom/point-in-time-popup"></div>
    <div data-ui="button" data-name="zoom-stages-button" data-template="default/button_with_bg_pic"
         class="ctrl button icon-only no-frame point-in-time"
         tabindex="0" data-action="popup-menu:.point-in-time-popup:open">
    </div>
    -->
</div>
<div data-ui="zoom-stages-area" class="zoom-stages-area">
    <div data-ui="popup-menu" data-name="zoom-stages-popup" data-content-template="default/trend-zoom/zoom-stages-popup"
         class="zoom-stages-popup ctrl popup-menu hidden"></div>
    <!--
    <div data-ui="popup-menu" data-name="zoom-stages-popup" class="zoom-stages-popup"
         data-content-template="default/trend-zoom/zoom-stages-popup"></div>
    <div data-ui="button" data-name="zoom-stages-button" data-label="[2h]"
         class="ctrl button zoom-stage no-frame"
         tabindex="0" data-action="popup-menu:.zoom-stages-popup:open">
    </div>
    -->
</div>
<!--
<div data-ui="zoom-reset-button-anchor" class="zoom-reset-button-anchor"></div>
-->






<!--
<div data-ui="_play-button-anchor" class="play-button-anchor">
    <div data-ui="toggle-button" data-template="default/toggle-button_with_bg_pic"
         class="icon-only no-frame play"></div>
</div>
<div data-ui="_pause-button-anchor" class="pause-button-anchor">
    <div data-ui="toggle-button" data-template="default/toggle-button_with_bg_pic"
         class="icon-only no-frame pause"></div>
</div>

<div data-ui="_zoom-out-button-anchor" class="zoom-out-button-anchor">
    <div data-ui="button" data-name="zoom-out-button" data-template="default/button_with_bg_pic"
         class="ctrl button zoom-out icon-only no-frame" tabindex="0"></div>
</div>

<div data-ui="_zoom-in-button-anchor" class="zoom-in-button-anchor">
    <div data-ui="button" data-name="zoom-in-button" data-template="default/button_with_bg_pic"
         class="ctrl button zoom-in icon-only no-frame" tabindex="0"></div>
</div>

<div data-ui="_point-in-time-area" class="point-in-time-area">
    <div data-ui="popup-menu" data-name="point-in-time-popup"
         data-content-template="default/trend-zoom/point-in-time-popup"></div>
    <div data-ui="button" data-name="zoom-stages-button" data-template="default/button_with_bg_pic"
         class="ctrl button icon-only no-frame point-in-time"
         tabindex="0" data-action="popup-menu:.point-in-time-popup:open">
    </div>
</div>


<div data-ui="_zoom-stages-area" class="zoom-stages-area">
    <div data-ui="popup-menu" data-name="zoom-stages-popup" class="zoom-stages-popup"
         data-content-template="default/trend-zoom/zoom-stages-popup"></div>
    <div data-ui="button" data-name="zoom-stages-button" data-label="[2h]"
         class="ctrl button zoom-stage no-frame"
         tabindex="0" data-action="popup-menu:.zoom-stages-popup:open">
    </div>
</div>
-->