<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Controls.Integration.DragDropTab.DefaultCS" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script  type="text/javascript">
    //calculate the time before calling the function in window.onload
    beforeload = (new Date()).getTime();
    function pageloadingtime()
            {
             
                    //calculate the current time in afterload 
                    afterload = (new Date()).getTime();
                    // now use the beforeload and afterload to calculate the seconds
                    secondes = (afterload-beforeload)/1000;
                    //alert the loading time
                    alert('You Page Load took  ' + secondes + ' seconde(s).');
                   
                    
            }
       function pageLoad()
		    {
		        pageloadingtime();
		    }
    
    </script>
</head>
<body class="BODY">
	<form id="mainForm" style="width: 100%" method="post" runat="server">
		
		<asp:ScriptManager ID="ScriptManager" runat="server" />
		<telerik:RadCodeBlock ID="CodeBlock1" runat="server">

			<script type="text/javascript">
			   
                /*<![CDATA[*/
                var dragging = false;

                function GetRealParent(target)
                {
	                var parentNode = target;
	                while (parentNode != null)
	                {
		                if (parentNode.id)
		                {
			                if (-1 !=parentNode.id.indexOf("Page1"))
			                {
				                return "Page1";
			                }
			                else if (-1 !=parentNode.id.indexOf("Page2"))
			                {
				                return "Page2";
			                }
			                else if (-1 !=parentNode.id.indexOf("Page3"))
			                {
				                return "Page3";
			                }
		                }
		                parentNode = parentNode.parentNode;
	                }
	                return null;
                }

                function tabMouseOver(sender, eventArgs)
                {
	                if (dragging)
		                eventArgs.get_tab().select();
                }

                function onNodeDragStart()
                {
	                dragging = true;
                }
                	
                function onNodeDropping(sender, args)
                {
	                dragging = false;
	                var dropTarget = GetRealParent(args.get_htmlElement());
                	
	                if 	(dropTarget != null)
	                {
		                var ajaxArgs = args.get_sourceNode().get_text();
		                var dest = args.get_destNode();
                		
		                if (dest)
		                {
			                ajaxArgs += '!' + dest.get_text();
		                }
                		
		                args.set_htmlElement(dropTarget);
                		
		                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(dropTarget + "?" + ajaxArgs);
	                }
	                args.set_cancel(true);
                }
                /*]]>*/
			</script>

		</telerik:RadCodeBlock>
		<div class="topFrame">
			<div class="bottomFrame">
				<h3 class="files">
					My Files</h3>
				<div class="innerFrame">
					<table class="skeleton">
						<tr>
							<td class="leftColumn">
								<h4>
									Drag an Item over a Tab:</h4>
								<telerik:RadTreeView ID="RadTreeView1" Width="240" Height="400" EnableDragAndDrop="True"
									OnClientNodeDragStart="onNodeDragStart" OnClientNodeDropping="onNodeDropping"
									runat="server" Skin="Vista">
								</telerik:RadTreeView>
							</td>
							<td class="rightColumn">
								<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Height="27px" Width="465px" SelectedIndex="0"
									OnClientMouseOver="tabMouseOver" Skin="Vista" MultiPageID="multiPageContent">
									<Tabs>
										<telerik:RadTab Text="Outlook"></telerik:RadTab>
										<telerik:RadTab Text="Source Safe"></telerik:RadTab>
										<telerik:RadTab Text="Explorer"></telerik:RadTab>
									</Tabs>
								</telerik:RadTabStrip>
								<telerik:RadMultiPage ID="multiPageContent" runat="server" Width="465px" SelectedIndex="0"
									CssClass="PageViewCss">
									<telerik:RadPageView ID="Page1" runat="server">
										<div class="dragInstructions">
											<p>
												Drag a treeview item over the tabs.</p>
											<p>
												Drop items inside this area to attach them to the email.</p>
										</div>
										<table cellspacing="0" cellpadding="0" border="0">
											<tr>
												<td>
													To:</td>
												<td>
													<asp:TextBox ID="TextBoxTo" runat="server"></asp:TextBox></td>
												<td style="width: 30px" rowspan="3">
													&nbsp;</td>
												<td rowspan="3">
													<asp:Button ID="SendEmail" OnClick="SendEmail_Click" runat="server" CssClass="button"
														Text="Send "></asp:Button></td>
											</tr>
											<tr>
												<td>
													Cc:</td>
												<td>
													<asp:TextBox ID="TextBoxCc" runat="server"></asp:TextBox></td>
											</tr>
											<tr>
												<td>
													Subject:&nbsp;</td>
												<td>
													<asp:TextBox ID="TextBoxSubject" runat="server"></asp:TextBox></td>
											</tr>
										</table>
										<br />
										<br />
										<b>Attachments:</b><br />
										<div style="overflow: auto; width: 300px; height: 104px">
											<asp:Label ID="Attachments" runat="server"></asp:Label></div>
									</telerik:RadPageView>
									<telerik:RadPageView ID="Page2" runat="server">
										<div class="dragInstructions">
											<p>
												Drag a treeview item over the tabs.</p>
											<p>
												Drop items inside this area to attach them to the email.</p>
										</div>
										<telerik:RadTreeView ID="RadTreeView2" runat="server" Skin="Default2006">
										</telerik:RadTreeView>
									</telerik:RadPageView>
									<telerik:RadPageView ID="Page3" runat="server">
										<div class="dragInstructions">
											<p>
												Drag a treeview item over the tabs.</p>
											<p>
												Drop items inside this area to attach them to the email.</p>
										</div>
										<div style="overflow: auto; height: 212px">
											<asp:DataGrid ID="DataGrid1" runat="server" Width="300px" BorderStyle="None" BackColor="White"
												CellPadding="3">
												<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#669999"></SelectedItemStyle>
												<ItemStyle ForeColor="#000066"></ItemStyle>
												<HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#abc3ce"></HeaderStyle>
												<FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
												<PagerStyle HorizontalAlign="Left" ForeColor="#000066" BackColor="White" Mode="NumericPages">
												</PagerStyle>
											</asp:DataGrid></div>
									</telerik:RadPageView>
								</telerik:RadMultiPage>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		
		<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
			<AjaxSettings>
				<telerik:AjaxSetting AjaxControlID="SendEmail">
					<UpdatedControls>
						<telerik:AjaxUpdatedControl ControlID="multiPageContent" LoadingPanelID="LoadingPanel1" />
					</UpdatedControls>
				</telerik:AjaxSetting>
				<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
					<UpdatedControls>
						<telerik:AjaxUpdatedControl ControlID="multiPageContent" LoadingPanelID="LoadingPanel1" />
						<telerik:AjaxUpdatedControl ControlID="multiPageContent" LoadingPanelID="LoadingPanel1" />
					</UpdatedControls>
				</telerik:AjaxSetting>
			</AjaxSettings>
		</telerik:RadAjaxManager>
		<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Transparency="30"
			BackColor="#E0E0E0">
			<asp:Image Style="margin-top: 10px" ID="Image1" runat="server" AlternateText="Loading..."
				BorderWidth="0px" ImageUrl="~/Images/loading.gif">
			</asp:Image>
		</telerik:RadAjaxLoadingPanel>
	</form>
</body>
</html>
