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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 id="Head1" runat="server">
	<style type="text/css">
		.reTool .Emoticons, .reTool .Emoticons2
		{
			background-image: url(icons/1.gif);
		}
		.reTool .DynamicSplitButton
		{
			background-image: url(icons/InsertSnippet.gif);
		}
		.Emoticons { border: 1px solid red;width:30px; }
	</style>
</head>
<body>
	<form id="form1" runat="server">
	<asp:ScriptManager ID="ScriptManager1" runat="server" />
	<telerik:RadEditor runat="server" 
	    ContentAreaMode="Div" 
	    ID="RadEditor1" Height="200px" ToolsFile="~/EmoticonsToolsFile.xml"
		OnClientCommandExecuting="OnClientCommandExecuting">
		<Content>
               
		</Content>
	</telerik:RadEditor>



	<script type="text/javascript">

	    function OnClientCommandExecuting(editor, args) {
	        var name = args.get_name(); 
	        var val = args.get_value(); 


	        if (name == "Emoticons") {
	            var tool = args.get_tool();
	            var span = tool.get_element().getElementsByTagName("SPAN")[0];
	            span.style.backgroundImage = "url(" + val + ")";

                //Telerik Test
                alert(editor.getToolByName("Emoticons"));
	            editor.getToolByName("Emoticons").get_element().className = "Emoticons";



	            editor.pasteHtml("<img src='" + val + "'>");

	            args.set_cancel(true);
	        }
	    }
 	</script>

	</form>
</body>
</html>

