<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Dialogs" TagPrefix="dialogs" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<dialogs:UserControlResources id="dialogResources" runat="server" />

<script type="text/javascript">
Type.registerNamespace("Telerik.Web.UI.Widgets");

Telerik.Web.UI.Widgets.CodeFormatter = function(element)
{
	Telerik.Web.UI.Widgets.CodeFormatter.initializeBase(this, [element]);
	this._confirmButton = null;
	this._cancelButton = null;
	this._previewButton = null;
	this._dirtyCode = null;
	this._maxSnippetWidth = null;
	this._language = null;
	this._maxSnippetHeight = null;
	this._showLineNumbers = null;
	this._previewArea = null;
	this._clientParameters = null;
}

Telerik.Web.UI.Widgets.CodeFormatter.prototype = {
	initialize : function() 
	{
		Telerik.Web.UI.Widgets.CodeFormatter.callBaseMethod(this, 'initialize');
		this._initializeChildren();
	},
	
	//Called also when a dilog is cached
	clientInit : function(clientParameters)
	{
		this._clientParameters = clientParameters;
		this.set_dirtyCode(this._clientParameters.dirtyCode);
		this._previewArea.innerHTML = "";
	},
	
	_initializeChildren : function()
	{
		this._confirmButton = $get("confirm");
		this._confirmButton.title = localization["OK"];
		
		this._cancelButton = $get("cancel");
		this._cancelButton.title = localization["Cancel"];
		
		this._previewButton = $get("preview");
		this._previewButton.title = localization["Preview"];
		
		this._dirtyCode = $get("dirtyCode");
		this._maxSnippetWidth = $get("maxSnippetWidth");
		this._language = $get("language");
		this._maxSnippetHeight = $get("maxSnippetHeight");
		this._showLineNumbers = $get("showLineNumbers");
		this._previewArea = $get("previewArea");			

		$addHandlers(this._confirmButton, {"click" : this._confirmClickHandler}, this);
		$addHandlers(this._cancelButton, {"click" : this._cancelClickHandler}, this);
		$addHandlers(this._previewButton, {"click" : this._previewClickHandler}, this);
	},

	_preview : function()
	{
		this._previewArea.innerHTML = this.getFormattedCode();
	},

    /* Dom event handlers */
	_confirmClickHandler : function(e)
	{
		if (this._dirtyCode.value.trim() != "")
		{
			this._preview();

			var eventArgs = new Sys.EventArgs();
			eventArgs._code = this._previewArea.innerHTML;
			eventArgs._width = this.get_maxSnippetWidth();
			eventArgs._height = this._getWrapperHeight();

			eventArgs.get_code = function(){return this._code;};
			eventArgs.set_code = function(value){this._code = value;};
			eventArgs.get_width = function(){return this._width;};
			eventArgs.get_height = function(){return this._height;};
            eventArgs.set_code(String.format("<div style='overflow:auto;background-color:white;" + 
				"border:solid 1px #7f9db9;width:{0};height:{1};line-height: 100% !important;" +
				"font-family: Courier New;font-size: 11px;'>{2}</div>",
				eventArgs.get_width(), eventArgs.get_height(), eventArgs.get_code()));

		    Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close(eventArgs);
		}
	},
	
	_getWrapperHeight : function()
	{
		var heightOffset = 20;
		var codeTable = this._previewArea.getElementsByTagName('table')[0];
		var height = codeTable.offsetHeight + heightOffset;
		
		var maxHeight = this.get_maxSnippetHeight();
		return (height > maxHeight) ? maxHeight : height;
	},
	
	_cancelClickHandler : function(e)
	{
	    Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().close();
	},
	
	_previewClickHandler : function(e)
	{
		this._preview();
	},

    /* End Dom event handlers */

    /* Public API */
	/* Properties */
	get_dirtyCode : function()
	{
		return this._dirtyCode.value;
	},

	set_dirtyCode : function(dirtyCode)
	{
		this._dirtyCode.value = dirtyCode;
	},

	get_maxSnippetWidth : function()
	{
		return this._maxSnippetWidth.value;
	},
	
	set_maxSnippetWidth : function(value)
	{
		this._maxSnippetWidth.value = value;
	},

	get_maxSnippetHeight : function()
	{
		return this._maxSnippetHeight.value;
	},
	
	set_maxSnippetHeight : function(value)
	{
		this._maxSnippetHeight.value = value;
	},

	get_selectedLanguage : function()
	{
		return this._language.options[this._language.selectedIndex].value;
	},
	
	set_selectedLanguage : function(value)
	{
		this._language.selectedIndex = -1;
		for (var i=0; i<this._language.options.length; i++)
		{
			var option = this._language.options[i];
			if (option.value == value)
			{
				option.selected = true;
			}
		}
	},

	get_showLineNumbers : function()
	{
		return this._showLineNumbers.checked;
	},
	
	set_showLineNumbers : function(show)
	{
		this._showLineNumbers.checked = value;
	},
	/* End Properties */


	/* Methods */	
	getFormattedCode : function()
	{
		return Telerik.Web.UI.Widgets.SyntaxHighlighter.highlight(this.get_dirtyCode(), this.get_selectedLanguage(), this.get_showLineNumbers());
	},
	
	/* End Methods*/

    /* End Public API */
	
	dispose : function() 
	{
		$clearHandlers(this._confirmButton);
		$clearHandlers(this._cancelButton);
		$clearHandlers(this._previewButton);
		this._confirmButton = null;
		this._cancelButton = null;
		this._previewButton = null;
		this._dirtyCode = null;
		this._maxSnippetWidth = null;
		this._language = null;
		this._maxSnippetHeight = null;
		this._showLineNumbers = null;
		this._previewArea = null;
		this._clientParameters = null;
		Telerik.Web.UI.Widgets.CodeFormatter.callBaseMethod(this, 'dispose');
	}
}

Telerik.Web.UI.Widgets.CodeFormatter.registerClass('Telerik.Web.UI.Widgets.CodeFormatter', Telerik.Web.UI.RadWebControl);
</script>
<table cellpadding="0" cellspacing="0" class="rade_dialog FormatCodeBlock" style="width: 720px; height: 560px; border: solid 1px #ccc;">
	<tr>
		<td style="padding: 4px; padding-top: 0;">
			<fieldset style="width: 692px;">
				<legend><script type="text/javascript">document.write(localization["PasteSourceCode"]);</script></legend>
				<table cellpadidng="0" cellspacing="0">
					<tr>
						<td style="padding: 0 0 2px 0">
							<textarea cols="10" rows="10" style="width: 686px;" id="dirtyCode"></textarea>
						</td>
					</tr>
				</table>			
			</fieldset>
			<fieldset style="width: 692px;">
				<legend>Options</legend>
				<ul>
					<li style="float: left;">
					    <label for="maxSnippetWidth"><span style="width: 193px; display: block; float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-top: 4px;">
					    <script type="text/javascript">document.write(localization["MaxSnippetWidth"]);</script></span>
					        <input type="text" id="maxSnippetWidth" style="width: 40px;" /> px / %
					    </label>
					</li>
					<li>
						<label for="language" style="">
						    <span style="width: 200px; display: block; float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-top: 4px; margin-left: 38px;">
			    			    <script type="text/javascript">document.write(localization["SelectLanguage"]);</script>
			    			  </span>
							<select id="language" style="width: 170px;">
								<option value="Xml" selected="selected"><script type="text/javascript">document.write(localization["LanguageXml"]);</script></option>
								<option value="JScript"><script type="text/javascript">document.write(localization["LanguageJavascript"]);</script></option>
								<option value="CSS"><script type="text/javascript">document.write(localization["LanguageCss"]);</script></option>
								<option value="CSharp"><script type="text/javascript">document.write(localization["LanguageCS"]);</script></option>
								<option value="Vb"><script type="text/javascript">document.write(localization["LanguageVB"]);</script></option>
								<option value="Php"><script type="text/javascript">document.write(localization["LanguagePhp"]);</script></option>
								<option value="Sql"><script type="text/javascript">document.write(localization["LanguageSQL"]);</script></option>
								<option value="Delphi"><script type="text/javascript">document.write(localization["LanguageDelphi"]);</script></option>
								<option value="Python"><script type="text/javascript">document.write(localization["LanguagePython"]);</script></option>
							</select>
						</label>
					</li>
					<li style="font-size: 6px; line-height: 6px; clear: both;">&nbsp;</li>
					<li style="float: left;">
					    <label for="maxSnippetHeight"><span style="width: 193px; display: block; float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-top: 4px; padding-bottom: 8px;">
					        <script type="text/javascript">document.write(localization["MaxSnippetHeight"]);</script></span>
					        <input type="text" id="maxSnippetHeight" style="width: 40px;" /> px / %
					    </label>
					</li>
					<li>
					    <label for="showLineNumbers" style="margin-left: 36px;">
					        <input type="checkbox" id="showLineNumbers" style="border: 0;" />
					        <script type="text/javascript">document.write(localization["DisplayLineNumbers"]);</script>
					    </label>
					</li>
				</ul>
			</fieldset>
			<fieldset style="width: 692px;">
				<legend>
					<script type="text/javascript">
					document.write(localization["Preview"]);
					</script>
				</legend>
				<table width="100%" cellpadding="0" cellspacing="0">
					<tr>
						<td class="rade_bottomcell">
							<button type="button" id="preview" style="width: 100px;">
								<script type="text/javascript">
								setInnerHtml("preview", localization["Preview"]);
								</script>
							</button>
						</td>
					</tr>
					<tr>
						<td style="padding: 0 0 2px 0">
							<div class="FormattedCodePreview" id="previewArea" style="width: 690px"><!-- / --></div>
						</td>
					</tr>
				</table>
			</fieldset>
		</td>
	</tr>
	<tr>
		<td class="rade_bottomcell">
			<button type="button" id="confirm" style="width: 100px; margin-right: 8px;">
				<script type="text/javascript">
				setInnerHtml("confirm", localization["OK"]);
				</script>
			</button>
			<button type="button" id="cancel" style="width: 100px;">
				<script type="text/javascript">
				setInnerHtml("cancel", localization["Cancel"]);
				</script>
			</button>
		</td>
	</tr>
</table>