<control-inst xsi:type="sai:naviBarType" xmlns="http://www.sonyericsson.com/sui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sonyericsson.com/sui \MC_SwModules_005\cah1623241_sui_toolkit\doc\sui.xsd">
  <visuals>
    <visual id="highlight" tag="highlight"> <!-- defines the highlight visual -->
      <visual-inst xsi:type="MCFSuiImageVisualType" scale-mode="fit">
        <data data-type="filename">\resource\apps\sai\naviitemhighlight.png</data>
      </visual-inst>
    </visual>
    <visual id="highlight-landscape" tag="highlight"> <!-- defines the highlight visual -->
      <visual-inst xsi:type="MCFSuiImageVisualType" scale-mode="fit">
        <data data-type="filename">\resource\apps\sai\naviitemhighlight.png</data>
      </visual-inst>
    </visual>
  </visuals>
  <navi-bar-item>
    <control-inst xsi:type="sai:naviBarItemType">
      <!-- DO NOT SPECIFY BACKGROUND HERE OR WE CANNOT SUPPORT INSERTING FOCUS LAYER
           BETWEEN VISUALS AND THE BACKGROUND -->
      <visuals>
        <visual id="image" tag="sai:naviItemPart">
          <visual-inst xsi:type="MCFSuiImageVisualType" scale-mode="cover">
            <data data-type="provider">navi-bar-item-model#image</data>
          </visual-inst>
        </visual>
        <visual id="overlayImage" tag="sai:naviItemPart">
          <visual-inst xsi:type="imageVisualType" scale-mode="fit">
            <data data-type="provider">navi-bar-item-model#overlay-image</data>
          </visual-inst>
        </visual>
        <visual id="focusedFilter" tag="sai:naviItemPart">
          <visual-inst xsi:type="imageVisualType" clip="true" scale-mode="fit">
            <data data-type="filename">z:\resource\apps\sai\sb_vb_shadow_portrait_icn.png</data>
          </visual-inst>
        </visual>
        <visual id="unfocusedFilter" tag="sai:naviItemPart">
          <visual-inst xsi:type="imageVisualType" clip="true" scale-mode="fit">
            <data data-type="filename">z:\resource\apps\sai\sb_vb_screen_portrait_icn.png</data>
          </visual-inst>
        </visual>
      </visuals>
      <layouts>
        <layout id="layout_focused">
          <layout-mgr xsi:type="gridLayoutMgr" fixed-rows="1" fixed-columns="1">
            <layout-item xsi:type="gridLayoutMgrItemType" min-width="0" min-height="0">
              <layout-mgr xsi:type="fixedLayoutMgr">
                <layout-item xsi:type="fixedLayoutItemType" x="0" y="0" width="72" height="61">
                  <visual-link visual-id="image"/>
                </layout-item>
                <layout-item xsi:type="fixedLayoutItemType" x="0" y="0" width="72" height="61">
                  <visual-link visual-id="overlayImage"/>
                </layout-item>
                <layout-item xsi:type="fixedLayoutItemType" x="0" y="0" width="72" height="61">
                  <visual-link visual-id="focusedFilter"/>
                </layout-item>
              </layout-mgr>
            </layout-item>
          </layout-mgr>
        </layout>
        <layout id="layout_unfocused">
          <layout-mgr xsi:type="gridLayoutMgr" fixed-rows="1" fixed-columns="1">
            <layout-item xsi:type="gridLayoutMgrItemType" min-width="0" min-height="0">
              <layout-mgr xsi:type="fixedLayoutMgr">
                <layout-item xsi:type="fixedLayoutItemType" x="0" y="0" width="72" height="61">
                  <visual-link visual-id="image"/>
                </layout-item>
                <layout-item xsi:type="fixedLayoutItemType" x="0" y="0" width="72" height="61">
                  <visual-link visual-id="overlayImage"/>
                </layout-item>
                <layout-item xsi:type="fixedLayoutItemType" x="0" y="0" width="72" height="61">
                  <visual-link visual-id="unfocusedFilter"/>
                </layout-item>
              </layout-mgr>
            </layout-item>
          </layout-mgr>
        </layout>
      </layouts>
<!--
      <sai:naviItemBg>
        <control-inst xsi:type="sai:naviBarItemBgType">
          <background opacity="0.9">
            <data data-type="filename">\resource\apps\sai\naviitembg.png</data>
          </background>
          <layouts>
            <layout id="layout_focused">
              <layout-mgr xsi:type="gridLayoutMgr" fixed-rows="1" fixed-columns="1"/>
            </layout>
            <layout id="layout_unfocused">
              <layout-mgr xsi:type="gridLayoutMgr" fixed-rows="1" fixed-columns="1"/>
            </layout>
          </layouts>
        </control-inst>
      </sai:naviItemBg>
  -->
    </control-inst>
  </navi-bar-item>
  <transitions duration="500">
    <transition-event>
      <event-filter>
        <filter attribute="event_type" value="on_size_change"/>
      </event-filter>
      <tag-filter>
        <filter value="sai:naviItemPart"/>
        <filter value="sai:naviItem" operation="or"/>
      </tag-filter>
      <transition>
        <transition-effect xsi:type="resizeEffectType"/>
      </transition>
    </transition-event>
    <transition-event>
      <event-filter>
        <filter attribute="event_type" value="on_position_change"/>
      </event-filter>
      <tag-filter>
        <filter value="sai:naviItemPart"/>
        <filter value="sai:naviItem" operation="or"/>
        <filter value="highlight" operation="or"/>
      </tag-filter>
      <transition>
        <transition-effect xsi:type="moveEffectType"/>
      </transition>
    </transition-event>
  </transitions>
</control-inst>
