<%@ Page Language="vb" AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <span class="title">Horizontal Scroll:</span>
        <div class="rotatatorLeftRightBack">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotatorHorizontal" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                                Height="60px" Width="250px" ItemHeight="60px" ItemWidth="250px" RotatorType="FromCode"
                                ScrollDirection="Left" CssClass="floatRotator" OnClientLoad="horizontalRotator_load">
                <ItemTemplate>
                    <div class="itemTemplate">
                    <%# XPath("Title") %>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <ul id="navigationHorizontal" class="commandsWrapper">
                <li>
                    <a href="#" onclick="stopRotator(this, 'horizontalRotator'); return false;"
                       class="stopSelected" title="Stop">
                        <span>Stop</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="startRotator(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                       class="start" title="Start">
                        <span>Start</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
                       class="left" title="Left">
                        <span>Up</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'horizontalRotator', Telerik.Web.UI.RotatorScrollDirection.Right); return false;"
                       class="right" title="Right">
                        <span>Down</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-container size-narrow">
        <span class="title">Vertical Scroll:</span>
        <div class="rotatatorUpDownBack">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotatorVertical" runat="server" Skin="Silk" DataSourceID="xmlDataSource1"
                                RotatorType="FromCode" Height="40px" Width="250px" ItemHeight="40px" ItemWidth="250px"
                                ScrollDirection="Up" CssClass="floatRotator" OnClientLoad="verticalRotator_load">
                <ItemTemplate>
                    <div class="itemTemplate">
                    <%# XPath("Title") %>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
            <ul id="navigationVertical" class="commandsWrapper">
                <li>
                    <a href="#" onclick="stopRotator(this, 'verticalRotator'); return false;"
                       class="stopSelected" title="stop">
                        <span>stop</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="startRotator(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                       class="start" title="start">
                        <span>start</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Down); return false;"
                       class="down" title="down">
                        <span>down</span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showNextItem(this, 'verticalRotator', Telerik.Web.UI.RotatorScrollDirection.Up); return false;"
                       class="up" title="up">
                        <span>up</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="news.xml"></asp:XmlDataSource>
    </form>
</body>
</html>