<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="ClientEvents._Default" %>

<%@ Register Assembly="RadDock.Net2" Namespace="Telerik.WebControls" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
</head>
<body>

  <script type="text/javascript">
  //<!--
  function ClientEvent (dockObj, eventArgs)
  {
      Log(eventArgs.eventName + " event for " + dockObj.id);        
      Log(dockObj.TitleBar.innerText);    
  }  

  function GetInfo(dockObj, command)
  {

  }   
  
  function GetInfo(dockObj, command)
  {
      manager = <%= RadDockingManager1.ClientID %>; 
      Log("Zones:"); 
      var zones = manager.DockingZones; 
      for(index in zones)
      {
        Log(zones[index].id); 
      }    
      
      Log("Dockable Objects:"); 
      var objects = manager.DockableObjects; 
      for(index in objects)
      {
        Log(objects[index].id); 
      }    
      
      Log("Docked Objects for zoneTop:"); 
      var topZone = <%= zoneTop.ClientID %>; 
      var topObjects = topZone.GetDockedObjects(); 

      for(index in topObjects)
      {
        var topObject = topObjects[index]; 
        var position = topZone.GetPosition(topObject); 
        Log(topObject.id + " is at position " + position); 
      }    
      
      var rdoTop = <%= rdoTop.ClientID %>;
      topZone.SetAtPosition(rdoTop, 0);       
      
      var childNodes = rdoTop.childNodes; 
      for (var i = 0; i < childNodes.length; i++) 
      {
        Log(rdoTop.childNodes[i].innerHTML); 
      }

  }
  
  function Log(message)
  {      
    var taEvents = document.getElementById("taEvents");
      
    taEvents.value += message + "\n";
    taEvents.scrollTop = taEvents.scrollHeight;
  }
  
  //-->        
  </script>

  <form id="form1" runat="server">
    <cc1:RadDockingManager ID="RadDockingManager1" runat="server" Skin="Custom" />
    <table width="500px">
      <tr>
        <td colspan="2" style="width: 100%; height: 75px">
          <cc1:RadDockingZone ID="zoneTop" runat="server" Width="100%" Height="100%">
            <cc1:RadDockableObject ID="rdoTop" runat="server" Text="Top" OnClientDock="ClientEvent"
              OnClientDragEnd="ClientEvent" OnClientDragStart="ClientEvent" OnClientDrop="ClientEvent"
              OnClientUnDock="ClientEvent" OnClientDrag="ClientEvent" OnClientDockStateChange="ClientEvent"
              Width="400px">
              <Commands>
                <cc1:RadDockableObjectCommand Enabled="False" Name="Expand" ToolTip="Expand" />
                <cc1:RadDockableObjectCommand Name="Collapse" ToolTip="Collapse" />
              </Commands>
              <ContentTemplate>
                <textarea id="taEvents" cols="60" rows="5" style="height: 95%"></textarea>
              </ContentTemplate>
            </cc1:RadDockableObject>
          </cc1:RadDockingZone>
        </td>
      </tr>
      <tr>
        <td style="width: 50%; height: 75px">
          <cc1:RadDockingZone ID="zoneLeft" runat="server" Width="100%" Height="100%">
            <cc1:RadDockableObject ID="rdoLeft" runat="server" Text="Left" OnClientDock="ClientEvent"
              OnClientDragEnd="ClientEvent" OnClientDragStart="ClientEvent" OnClientDrop="ClientEvent"
              OnClientUnDock="ClientEvent" OnClientDrag="ClientEvent" OnClientDockStateChange="ClientEvent">
              <Commands>
                <cc1:RadDockableObjectCommand Enabled="False" Name="Expand" ToolTip="Expand" />
                <cc1:RadDockableObjectCommand Name="Collapse" ToolTip="Collapse" />
                <cc1:RadDockableObjectCommand Image="info.gif" Name="Info" OnClientCommand="GetInfo"
                  ToolTip="Get Information" />
              </Commands>
              <ContentTemplate>
                &nbsp;
              </ContentTemplate>
            </cc1:RadDockableObject>
          </cc1:RadDockingZone>
        </td>
        <td style="width: 50%; height: 75px">
          <cc1:RadDockingZone ID="zoneRight" runat="server" Width="100%" Height="100%">
          </cc1:RadDockingZone>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="width: 100%; height: 75px">
          <cc1:RadDockingZone ID="zoneBottom" runat="server" Width="100%" Height="100%">
          </cc1:RadDockingZone>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>
