<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" i18n:domain="tinymce">
<head>
	<title i18n:translate="advanced_dlg_colorpicker_title"></title>
	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
	<script type="text/javascript" src="../../utils/mctabs.js"></script>
	<script type="text/javascript" src="js/color_picker.js"></script>
    <link rel="stylesheet" type="text/css" href="css/color_picker.css" />

</head>
<body id="colorpicker">
	<div class="dialog-wrapper" id="content">
		<form onsubmit="insertAction();return false" action="#">
			<ul class="formTabs"><li id="picker_tab" class="formTab firstFormTab"><a href="javascript:mcTabs.displayTab('picker_tab','picker_panel');" onmousedown="return false;" class="selected"><span i18n:translate="advanced_dlg_colorpicker_picker_tab"></span></a></li><li id="rgb_tab" class="formTab"><a href="javascript:;" onclick="generateWebColors();mcTabs.displayTab('rgb_tab','rgb_panel');" onmousedown="return false;"><span i18n:translate="advanced_dlg_colorpicker_palette_tab"></span></a></li><li id="named_tab" class="formTab lastFormTab"><a  href="javascript:;" onclick="generateNamedColors();javascript:mcTabs.displayTab('named_tab','named_panel');" onmousedown="return false;"><span i18n:translate="advanced_dlg_colorpicker_named_tab"></span></a></li></ul>

			<fieldset id="picker_panel" class="formPanel">
				<div class="field">
					<label for="picker" i18n:translate="advanced_dlg_colorpicker_picker_title"></label>
					<div class="widget" id="picker">
						<img id="colors" class="input-border" src="img/colorpicker.jpg" onclick="computeColor(event)" onmousedown="isMouseDown = true;return false;" onmouseup="isMouseDown = false;" onmousemove="doComputeColor = isMouseDown ? isMouseOver : false; if doComputeColor computeColor(event); return false;" onmouseover="isMouseOver=true;" onmouseout="isMouseOver=false;" alt="" />

						<div id="light" class="input-border">
							<!-- Will be filled with divs -->
						</div>
					</div>
				</div>
			</fieldset>

			<fieldset id="rgb_panel" class="formPanel">
				<div class="field">
					<label for="webcolors" i18n:translate="advanced_dlg_colorpicker_palette_title"></label>
					<div class="widget" id="webcolors">
						<!-- Gets filled with web safe colors-->
					</div>
				</div>
			</fieldset>

			<fieldset id="named_panel" class="formPanel" >
				<div class="field">
					<label for="namedcolors" i18n:translate="advanced_dlg_colorpicker_named_title"></label>
					<div class="formHelp" id="colornamecontainer">
						<span i18n:translate="advanced_dlg_colorpicker_name"></span> <span id="colorname"></span>
					</div>
					<div id="namedcolors">
						<!-- Gets filled with named colors-->
					</div>
				</div>
			</fieldset>

			<div class="field">
				<label for="color" i18n:translate="advanced_dlg_colorpicker_color"></label>
				<div class="widget">
					<input id="color" type="text" size="8" maxlength="8" />
					<input id="preview" type="text" size="8" maxlength="8" />
					<!--div id="preview" style="float: left" class="input-border">test</div-->
				</div>
			</div>

			<div class="mceActionPanel formControls">
				<span class="actionButtons">
					<input type="submit" class="context" id="insert" name="insert" i18n:attributes="value common_apply" />
				</span>
			</div>
		</form>
	</div>
</body>
</html>
