<krpano>

    <plugin name="gyro" devices="html5"
            url="gyro2.js"
            keep="true"
            enabled="true"
            onavailable="gyro_available_info();"
            onunavailable="gyro_not_available_info();"
            softstart="1"
    />

    <action name="gyro_available_info" autorun="onstart">
        set(layer[infotext].html, 'Gyroscope available, press the gyro button...');
    </action>

    <action name="gyro_not_available_info" xautorun.flash="onstart">
        set(layer[infotext].html, 'No gyroscope available...');
    </action>


    <view hlookat="0" vlookat="0" fovmin="60" fov="100" fovmax="150" />

    <!-- the pano image -->
    <image>
        <sphere url="pano.jpg" />
    </image>


    <layer name="bottombar" type="container" bgcolor="0x000000" bgalpha="0" align="leftbottom" width="100%" height="40">

        <layer name="infotext" type="text"
               background="false" border="false"
               enabled="false"
               html=""
               css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:14px; font-weight:bold;"
               align="leftbottom" x="10" y="20" height="100%"
               zorder="99999"
        />

        <layer name="gyrobutton" url="gyroicon.png" scale="0.5" align="right" x="10" y="-30" visible="false"
               onclick="switch(plugin[gyro].enabled);"
        />

    </layer>

</krpano>
