<div class="html_editor" data-bind="css: {'inactive': inactive()}">
	<div class="toolbar">
		
		<a href="javascript:void(0);" class="item bold" data-bind="click: function () { oCrea.bold(); return false; }">
			<span class="icon" data-i18n="HTMLEDITOR/BOLD" data-bind="i18n: 'title'"></span>
		</a>

		<a href="javascript:void(0);" class="item italic" data-bind="click: function () { oCrea.italic();  return false; }">
			<span class="icon" data-i18n="HTMLEDITOR/ITALIC" data-bind="i18n: 'title'"></span>
		</a>

		<a href="javascript:void(0);" class="item underline" data-bind="click: function () { oCrea.underline(); return false; }">
			<span class="icon" data-i18n="HTMLEDITOR/UNDERLINE" data-bind="i18n: 'title'"></span>
		</a>

		<!--<a href="#" class="item hline" data-bind="click: function () { oCrea.horizontalLine(); }">
			<span class="icon" data-i18n="HTMLEDITOR/HORIZONTAL_LINE" data-bind="i18n: 'title'"></span>
		</a>-->

		<span class="separator"></span>
		
		<div class="item select font">
			<select class="input" data-bind="value: selectedFont, options: aFonts"></select>
		</div>
		
		<div class="item select font_size">
			<select class="input" data-bind="value: selectedSize, options: aSizes"></select>
		</div>
		
		<a href="javascript:void(0);" class="item color" data-bind="click: textColor, css: {'expand': visibleFontColorPopup}">
			<span class="icon" data-i18n="HTMLEDITOR/TEXT_COLOR" data-bind="i18n: 'title'"></span>
			<span class="dropdown color">
				<span class="dropdown_helper">
					<span class="dropdown_content">
						<!-- ko template: { name: 'Common_ColorPickerViewModel', data: oFontColorPicker } --><!-- /ko -->
						<!-- ko template: { name: 'Common_ColorPickerViewModel', data: oBackColorPicker } --><!-- /ko -->
					</span>
				</span>
			</span>
		</a>
		
		<span class="separator"></span>
		
		<!--<a href="javascript:void(0);" class="item aleft" data-bind="click: function () { oCrea.alignLeft(); }">
			<span class="icon" data-i18n="HTMLEDITOR/ALIGN_LEFT" data-bind="i18n: 'title'"></span>
		</a>

		<a href="javascript:void(0);" class="item acenter" data-bind="click: function () { oCrea.center(); }">
			<span class="icon" data-i18n="HTMLEDITOR/CENTER" data-bind="i18n: 'title'"></span>
		</a>

		<a href="javascript:void(0);" class="item aright" data-bind="click: function () { oCrea.alignRight(); }">
			<span class="icon" data-i18n="HTMLEDITOR/ALIGN_RIGHT" data-bind="i18n: 'title'"></span>
		</a>

		<a href="javascript:void(0);" class="item ajustify" data-bind="click: function () { oCrea.justify(); }">
			<span class="icon" data-i18n="HTMLEDITOR/JUSTIFY" data-bind="i18n: 'title'"></span>
		</a>
		<span class="separator"></span>
		-->
		
		
		<a href="javascript:void(0);" class="item slist" data-bind="click: function () { oCrea.numbering(); }">
			<span class="icon" data-i18n="HTMLEDITOR/NUMBERING" data-bind="i18n: 'title'"></span>
		</a>
		
		<a href="javascript:void(0);" class="item uslist" data-bind="click: function () { oCrea.bullets(); }">
			<span class="icon" data-i18n="HTMLEDITOR/BULLETS" data-bind="i18n: 'title'"></span>
		</a>
		
		<span class="separator"></span>

		<a href="javascript:void(0);" class="item link" data-bind="click: insertLink, css: {'expand': visibleInsertLinkPopup}">
			<span class="icon" data-i18n="HTMLEDITOR/INSERT_LINK" data-bind="i18n: 'title'" title="Insert Link"></span>
			
			<span class="dropdown">
				<span class="dropdown_helper">
					<span class="dropdown_content">
						<span data-i18n="HTMLEDITOR/TITLE_URL" data-bind="i18n: 'text'"></span>:
						<input class="input" type="text" data-bind="value: linkForInsert, 
							   hasfocus: linkFocused, onFocusMoveCaretToEnd: true, 
							   onEnter: insertLinkFromPopup" />
						
						<span class="button" data-bind="click: insertLinkFromPopup, i18n: 'text'" 
							  data-i18n="HTMLEDITOR/BUTTON_INSERT"></span>
						<span class="button" data-bind="click: closeInsertLinkPopup, i18n: 'text'" 
							  data-i18n="HTMLEDITOR/BUTTON_CANCEL"></span>
					</span>
				</span>
			</span>
		</a>
		
		<a href="javascript:void(0);" class="item image" data-bind="click: insertImage, 
				visible: allowInsertImage, css: {'expand': visibleInsertImagePopup}">
			<span class="icon" data-i18n="HTMLEDITOR/INSERT_IMAGE" data-bind="i18n: 'title'"></span>

			<span class="dropdown">
				<span class="dropdown_helper">
					<span class="dropdown_content">
						<span data-i18n="HTMLEDITOR/UPLOAD_SELECT_IMAGE" data-bind="i18n: 'text'"></span>:
						<br />
						<span class="button" data-bind="initDom: imageUploaderButton, i18n: 'text'" 
							  data-i18n="HTMLEDITOR/UPLOAD_BUTTON_CHOOSE_IMAGE"></span>
						<br />
						<span data-i18n="HTMLEDITOR/UPLOAD_ENTER_IMAGE_URL" data-bind="i18n: 'text'"></span>:
						<br />
						<input class="input" type="text" data-bind="value: imagePathFromWeb" 
							   style="width: 200px;" />
						<span class="button" data-bind="click: insertWebImageFromPopup, i18n: 'text'" 
							  data-i18n="HTMLEDITOR/BUTTON_INSERT"></span>
						<span class="button" data-bind="click: closeInsertImagePopup, i18n: 'text'" 
							  data-i18n="HTMLEDITOR/BUTTON_CANCEL"></span>
					</span>
				</span>
			</span>
		</a>
		
		<a href="javascript:void(0);" class="item clear" data-bind="click: function () { oCrea.removeFormat(); }">
			<span class="icon" data-i18n="HTMLEDITOR/REMOVE_FORMAT" data-bind="i18n: 'title'"></span>
		</a>
	</div>
	
	<div class="workarea" data-bind="attr: {'id': creaId}">
	</div>
	
	<div class="inline_popup" data-bind="visible: visibleLinkPopup, 
			style: {'top': linkPopupTop() + 'px', 'left': linkPopupLeft() + 'px'}">
		<a target="_blank" data-bind="text: linkHref, attr: {'href': linkHref}"></a>
		<span class="button" data-i18n="HTMLEDITOR/URL_BUTTON_CHANGE" data-bind="i18n: 'text', click: showChangeLink"></span>
		<span class="button" data-i18n="HTMLEDITOR/URL_BUTTON_REMOVE" data-bind="i18n: 'text', click: function () { oCrea.removeCurrentLink(); }"></span>
	</div>
	<div class="inline_popup" data-bind="visible: visibleLinkHref, 
			style: {'top': linkPopupTop() + 'px', 'left': linkPopupLeft() + 'px'}">
		<input type="text" data-bind="value: linkHref" />
		<span class="button" data-i18n="HTMLEDITOR/URL_BUTTON_OK" data-bind="i18n: 'text', click: changeLink"></span>
		<span class="button" data-i18n="HTMLEDITOR/URL_BUTTON_CANCEL" data-bind="i18n: 'text', click: hideChangeLink"></span>
	</div>
	
</div>
