// JavaScript Document

	function setBorderStyle(obj, size, style, color){
		if (obj != null){
			obj.style.border = size;
			obj.style.borderColor = color;
			obj.style.borderStyle = style;
		}
	}
	
	function GetElement(e){
		if (document.getElementById){ // IE6+, N6+	
			return document.getElementById(e);
		}else if (document.all){
			return document.all(e);
		}
	}	

	function _replace(string,text,by) {
	 // Replaces text with by in string
	  var strLength = string.length, txtLength = text.length;
	  if ((strLength == 0) || (txtLength == 0)) return string;

	  var i = string.indexOf(text);
	  if ((!i) && (text != string.substring(0,txtLength))) return string;
	  if (i == -1) return string;

	  var newstr = string.substring(0,i) + by;

	  if (i+txtLength < strLength) newstr += _replace(string.substring(i+txtLength,strLength),text,by);
	  return newstr;
	}
	
	
	function storeCaret(obj){
		if (obj.createTextRange ){
			obj.savedCaret = document.selection.createRange().duplicate();
		}
	}

  	function insertAtCaret(obj, val){
		if ( obj.createTextRange && obj.savedCaret ) { // IE only
			var caretPos = obj.savedCaret;
			var newval = _replace(val, "{0}", caretPos.text);
			caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?  newval + ' ' : newval;
			//deselect
			document.selection.empty();
		}else if( obj.selectionStart ){ // Gecko -  Mozilla, Firefox, Camino, ...		
			var newval = _replace(val, "{0}", obj.value.substring(obj.selectionStart, obj.selectionEnd) );
			var text = obj.value.substring(0,obj.selectionStart) + newval + obj.value.substring(obj.selectionEnd ,obj.value.length);
			var newpos = obj.selectionStart + newval.length;
			obj.value = text;
			obj.setSelectionRange(newpos, newpos);		
				
		}else{// nepodprti browserji
			var newval = _replace(val, "{0}", "");
			obj.value += newval;
		}
		obj.focus();
	}
		
	function RTEdit(pName, pInputName, pWidth, pHeight, pCSSName){
		this.isCapableBrowser = false;
		this.EditorWindowId = null;
		this.IFrame = null;
		this.textBox = null;
		this.DesignModeElement = null;
		this.Name = pName;
		this.inputName =  pInputName;
		this.Width = pWidth;
		this.Height = pHeight;
		this.CSSName = pCSSName;
		
		this.pictureDir = "/images";
	
		this.detectBrowser = function (){
			var agt=navigator.userAgent.toLowerCase();
			var is_major = parseInt(navigator.appVersion);
			var is_minor = parseFloat(navigator.appVersion);
			// IE
			var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
			var is_ie3    = (is_ie && (is_major < 4));
			var is_ie4    = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
			var is_ie4up  = (is_ie && (is_major >= 4));
			var is_ie5    = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
			var is_ie5_5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
			var is_ie5up  = (is_ie && !is_ie3 && !is_ie4);
			var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
			var is_ie6    = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
			var is_ie6up  = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);	
		
			// Gecko - N6, Mozilla, Firebird, Camino, ...
			var is_gecko = (agt.indexOf('gecko') != -1);
			var is_gecko_13up = false;
			if (is_gecko){
				if ( ( a = agt.indexOf('rv:') )!= -1 ){
					a += 3; i=0;
					b = "";
					while(agt.charAt(a) != ')' && i < 4) {
						b += agt.charAt(a++);
						i++;
					}
					is_gecko_13up = parseFloat(b) >= 1.3;
				}
			}
			
			this.isCapableBrowser = is_gecko_13up || is_ie5_5up;
			
			return this.isCapableBrowser;
			
		}
		
		this.enableDesignMode = function(){
			if( this.IFrame ) {
				  if (this.IFrame.contentDocument){  
					// Gecko
					this.DesignModeElement = this.IFrame.contentDocument;
					this.DesignModeElement.designMode = "On";    
				  } else {
					// IE
					this.DesignModeElement = this.IFrame.contentWindow.document;
					this.DesignModeElement.designMode = "On";   
					this.DesignModeElement = this.IFrame.contentWindow.document;
				  }  			
			}
		}
		
		this.doCommand = function (aCommandName, aArg){
			//alert(aCommandName +", "+ aArg);
			if (this.isCapableBrowser){
				this.doHtmlCommand(aCommandName, aArg);
			}else{
				this.doTextCommand(aCommandName, aArg);
			}
		}
		
		this.doHtmlCommand = function (aCommandName, aArg){
			if (document.all && aCommandName.toLowerCase() == "hilitecolor") aCommandName = "backcolor";
				
			GetElement(this.EditorWindowId).contentWindow.focus();
		  	if (this.DesignModeElement ){
     			this.DesignModeElement.execCommand(aCommandName, false, aArg);
  			}
			GetElement(this.EditorWindowId).contentWindow.focus();		
		}
		
		this.doTextCommand = function (aCommandName, aArg){
			if (this.textBox == null || aCommandName == null) return;
			
			var command = aCommandName.toLowerCase();
			
			switch(command){
				case "bold":
					insertAtCaret(this.textBox, "[b]{0}[/b]");
					break;
				case "italic":
					insertAtCaret(this.textBox, "[i]{0}[/i]");
					break;
				case "underline":
					insertAtCaret(this.textBox, "[u]{0}[/u]");
					break;
				case "justifyleft":
					insertAtCaret(this.textBox, "\n[left]{0}[/left]\n");
					break;
				case "justifycenter":
					insertAtCaret(this.textBox, "\n[center]{0}[/center]\n");
					break;
				case "justifyright":
					insertAtCaret(this.textBox, "\n[right]{0}[/right]\n");
					break;
				case "justifyfull":
					insertAtCaret(this.textBox, "\n[justify]{0}[/justify]\n");
					break;
				case "insertorderedlist":
					insertAtCaret(this.textBox, "\n[ol]\n\t[li]{0}[/li]\n[/ol]\n");
					break;
				case "insertunorderedlist":
					insertAtCaret(this.textBox, "\n[ul]\n\t[li]{0}[/li]\n[/ul]\n");
					break;
				case "indent":
					insertAtCaret(this.textBox, "\n[indent]{0}[/indent]\n");
					break;
				case "outdent":
					insertAtCaret(this.textBox, "\n[outdent]{0}[/outdent]\n");
					break;
				case "fontname":
					insertAtCaret(this.textBox, "[font="+ aArg +"]{0}[/font]");
					break;		
				case "fontsize":
					insertAtCaret(this.textBox, "[fontsize="+ aArg +"]{0}[/fontsize]");
					break;	
				case "forecolor":
					insertAtCaret(this.textBox, "[fontcolor="+ aArg +"]{0}[/fontcolor]");
					break;	
				case "backcolor":
					insertAtCaret(this.textBox, "[fontbgcol="+ aArg +"]{0}[/fontbgcol]");
					break;						
				case "createlink":
					insertAtCaret(this.textBox, "[url="+ aArg +"]{0}[/url]");
					break;	
				case "insertimage":
					insertAtCaret(this.textBox, "[img]"+ aArg +"[/img]");
					break;						
															
					


			/*
				delete
				formatblock
				heading
				inserthorizontalrule
				paste
				redo
				strikethrough
				subscript
				superscript
				undo																																																										
			*/
			
			}
		
		
		}
		
		this.getValue = function (){
		  	var text = "";
		  	
			if (this.isCapableBrowser){
		  		text = this.DesignModeElement.body.innerHTML; 
			}else if(this.textBox != null){
				text = this.textBox.value;
			}
		  	
			return text;     
		}
		
		this.setValue = function (value){
		  	if (this.isCapableBrowser){
				this.DesignModeElement.body.innerHTML = value; 
		  		GetElement(this.EditorWindowId).contentWindow.focus();
			}else if(this.textBox != null){
				this.textBox.value = text;
			}
		}
		
		this.resetValue = function (value){
		  this.setValue( this.value );
		}
		
		this.updateValue = function(){
			if (this.isCapableBrowser){
				this.formElement.value = this.getValue();
			}
		}
		
		this.setFont = function(obj){
			if (obj.options.selectedIndex > 0){
				this.doCommand('fontname', obj.options[obj.options.selectedIndex].value);
			}
			obj.options.selectedIndex = 0;
		}
		
		this.setFontSize = function(obj){
			if (obj.options.selectedIndex > 0){
				this.doCommand('fontsize', obj.options[obj.options.selectedIndex].value);
			}
			obj.options.selectedIndex = 0;		
		}
		
		this.addPicture = function (src){
			if (src==null) src = prompt("Vpisite celo pot do slike, ki jo zelite vstaviti!", "http://");
			if (src != null  && src.length > 0){
				this.doCommand('insertimage', src);
			}		
		}	
	
		this.addLink = function(){
			var href = prompt("Vpisite naslov!", "http://");
			if (href.length > 0){
				this.doCommand('createlink', href);
			}
		}	
	
		// inicializira design mode - potrebno da je mogoce editirati
		this.Enable = function(){
			if (this.isCapableBrowser){
				this.enableDesignMode();
				if (this.IFrame.contentDocument) // gecko only!
					this.doCommand("useCSS", false);
				this.doCommand("fontname", "Arial, Helvetica, sans-serif");
			}
		}
		
		this.initFrame = function(){

			frameHtml =  '<html>';
			frameHtml += '<head>';
			frameHtml += '  <style>';
			frameHtml += '	body {';
			frameHtml += '	background-color:white;';
			frameHtml += '	font-family: Arial, Helvetica, sans-serif;';
			frameHtml += '	font-size: 11pt;';
			frameHtml += '	margin-left: 3px;';
			frameHtml += '	margin-top: 3px;';
			frameHtml += '	margin-right: 3px;';
			frameHtml += '	margin-bottom: 3px;';
			frameHtml += '	}';
			frameHtml += '  </style>';
			frameHtml += '<body>';
			frameHtml += '<p>';
			frameHtml += this.value;
			frameHtml += '</p>';
			frameHtml += '</body>';
			frameHtml += '</html>';
			
			if (document.all) {
				obj = this.IFrame.contentWindow.document;
			} else{
				obj = this.IFrame.contentDocument;
			}
			
			if (obj != null){
				obj.open();
				obj.write(frameHtml);
				obj.close();
			}
		}
		
		this.initTextarea = function(){
			return this.value;
		}
		
		
		
		this.DrawBox = function(){
			// Najprej preverimo ce je browser podpira editable iframe
	
			this.EditorWindowId = this.Name + '_editorWindow';
			
			
			if ( this.detectBrowser() ){
				// je kompatibilni browser
	
				// izpiši html kodo
				document.write('<iframe border="0" frameborder="0"' );
				document.write('id="'+ this.EditorWindowId +'" ');
				if (this.Width != null && this.Width > 0) document.write('width="'+ this.Width +'" ');
				if (this.Height != null && this.Height > 0) document.write('height="'+ this.Height +'" ');
				if (this.CSSName != null ) document.write('class="'+ this.CSSName +'" ');
				document.write('></iframe>');
				
				this.IFrame = GetElement(this.EditorWindowId);
				// vpiše html kodo v iframe
				this.initFrame();
				
				document.write('<input id="'+ this.inputName +'" type="hidden" name="'+ this.inputName +'" value="">');
				this.formElement = GetElement(this.inputName);
				
				
			}else{
				// ni kompatibilni browser -> uporabi input tag
				document.write('<textarea name="'+ this.inputName +'" id="'+ this.EditorWindowId +'"');
				document.write(' style="width:'+ this.Width +'px; height:'+ this.Height +'px;" ');
				if ( this.CSSName != "") document.write('class="'+ this.CSSName +'" ');
				document.write(' onClick="storeCaret(this);" onDblClick="storeCaret(this);" onKeyUp="storeCaret(this);" ');
				document.write('>'+ this.initTextarea() +'</textarea>');
				
				this.textBox = GetElement(this.EditorWindowId);
				
			}
		
		}
	
		this.Draw = function(){

			document.writeln('  <table border="0" cellpadding="0" class="rteBox">  ');
			document.writeln('	<tr>  ');
			document.writeln('	  <td valign="middle"><select name="font" onChange="javascript:'+ this.Name +'.setFont(this);">  ');
			document.writeln('		<option value="">-- izberi font --</option>  ');
			document.writeln('		<option value="Arial">Arial</option>  ');
			document.writeln('		<option value="Courier New">Courier New</option>  ');
			document.writeln('		<option value="Times New Roman">Times New Roman</option>  ');
			document.writeln('		<option value="Verdana">Verdana</option>  ');
			document.writeln('	  </select>  ');
			document.writeln('		<select name="select2" onChange="javascript:'+ this.Name +'.setFontSize(this);">  ');
			document.writeln('		  <option>-- izberi velikost --</option>  ');
			document.writeln('		  <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>  ');
			document.writeln('		</select>  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/larger_button.gif" width="22" height="21" align="absmiddle" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'undo\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/smaller_button.gif" width="22" height="21" align="absmiddle" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'redo\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'"> </td>  ');
			document.writeln('	</tr>  ');
			document.writeln('	<tr>  ');
			document.writeln('	  <td>  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/bold_button.gif" title="Bold" alt="Bold" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'bold\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/italic_button.gif" title="Italic" alt="Italic" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'italic\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/underline_button.gif" title="Undeline" alt="Undeline" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'underline\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/separator.gif">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/align_left_button.gif"  title="Align left" alt="Align left" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'justifyleft\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/align_center_button.gif" title="Align center" alt="Align center" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'justifycenter\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/align_right_button.gif" title="Align right" alt="Align right" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'justifyright\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/justify_button.gif" title="Align both" alt="Align both" width="22" height="21" class="toolboxButton"  onClick="javascript:'+ this.Name +'.doCommand(\'justifyfull\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/separator.gif">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/bulet_button.gif" title="Unordered list" alt="Unordered list" width="22" height="21" class="toolboxButton"  onClick="javascript:'+ this.Name +'.doCommand(\'insertunorderedlist\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/numbers_button.gif" title="Ordered list" alt="Ordered list" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'insertorderedlist\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/separator.gif">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/outdent_button.gif" title="Indent" alt="Indent" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'indent\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/indent_button.gif" title="Outdent" alt="Outdent" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.doCommand(\'outdent\');" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/separator.gif">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/color_button.gif" id="color_button" title="Font color" alt="Font color" width="22" height="21" class="toolboxButton" onClick="'+ this.Name +'.tColor.Togle();" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/bgcolor_button.gif" id="bgcolor_button" title="Font background color" alt="Font background color" width="22" height="21" class="toolboxButton" onClick="'+ this.Name +'.tBgColor.Togle();" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/separator.gif">  ');
			document.writeln('	  <img src="'+ this.pictureDir +'/hyperlink_button.gif" title="Hyperlink" alt="Hyperlink" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.addLink();" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			//document.writeln('	  <img src="'+ this.pictureDir +'/picture_button.gif" title="Insert picture" alt="Insert picture" width="22" height="21" class="toolboxButton" onClick="javascript:'+ this.Name +'.addPicture();" onMouseOver="this.className=\'toolboxButton_mo\'" onMouseOut="this.className=\'toolboxButton\'" onMouseDown="this.className=\'toolboxButton_md\'" onMouseUp="this.className=\'toolboxButton_mo\'">  ');
			document.writeln('	  </td>  ');
			document.writeln('	</tr>  ');
			document.writeln('	<tr>  ');
			document.writeln('	  <td>  ');
			this.DrawBox();
			document.writeln('	</td></tr>  ');
			document.writeln('  </table>  ');
			
			// inicializiraj color box-e
			this.tColor = new ColorBox("tColor", this.Name, "forecolor");
			this.tColor.pictureDir = this.pictureDir;
			this.tColor.layer_id = "color_box";
			this.tColor.Draw();
			this.tColor.getBoxPosition("color_button");	
			this.tColor.Hide();
	  	
			this.tBgColor = new ColorBox("tBgColor", this.Name, "hilitecolor");
			this.tBgColor.pictureDir = this.pictureDir;
			this.tBgColor.layer_id = "bgcolor_box";
			this.tBgColor.Draw();
			this.tBgColor.getBoxPosition("bgcolor_button");		
			this.tBgColor.Hide();
			
			this.Enable();
		}
	}
	
	function ColorBox(pName, pRTEName, pCmd){
		this.selectedColor = "#000000";
		this.layer_id;
		this.box_x = 0;
		this.box_y = 0;
		this.visible = false;
		this.name = pName;
		this.cmd = pCmd;
		this.RTEName = pRTEName;
	 	this.pictureDir = "/images";
		
		this.DrawCell = function (color){
			document.write('<td bgcolor="#'+ color +'" style="border-width:1px; border-style:solid; border-color:#'+color+';" ');
			document.write(' onMouseOver="setBorderStyle(this,\'1px\',\'solid\',\'#FFFFFF\'); '+ this.RTEName +'.'+this.name+'.SelectColor(this.bgColor);" onMouseOut="setBorderStyle(this,\'1px\',\'solid\',\'#'+color+'\');">');
			document.write('<img src="'+ this.pictureDir +'/singlepix.gif" width="8" height="8" onClick="'+ this.RTEName +'.doCommand(\''+ this.cmd +'\', '+ this.RTEName +'.'+this.name+'.selectedColor); '+ this.RTEName +'.'+this.name+'.Hide();"></td>');
		}
		
		
		this.Draw = function (){
			var hh = new Array("00","33", "66", "99", "CC", "FF");
			var st = new Array("FF0000","00FF00", "0000FF", "FFFF00", "00FFFF", "FF00FF");
			var r,g,b;
			
			document.writeln(' <span id="'+ this.layer_id +'" style="position:absolute; visibility:hidden; left: 35px; top: 226px;">  ');
			document.writeln('  <table border="0" cellpadding="2" bgcolor="#E0E0E0">  ');
			document.writeln('	<tr>  ');
			document.writeln('	  <td><table cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#00FF99" id="'+ this.name+'_color" class="colorBox"><img src="'+ this.pictureDir +'/singlepix.gif" width="50" height="25"></td>  ');
			document.writeln('	  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="'+ this.name+'_color_text" class="colorBoxText">#FFFFFF</span></td>  ');
			document.writeln('	  </tr></table>  ');
			document.writeln('	  </td>  ');
			document.writeln('	</tr>  ');
			document.writeln('	<tr>  ');
			document.writeln('	  <td>  ');
			
			
			document.writeln('<table cellpadding="0" cellspacing="1" border="0" class="colorBox" bgcolor="#000000">');
			for(b=0; b<6 ; b++){
				document.write('<tr>');
				this.DrawCell( "000000" );
				this.DrawCell( hh[b] + hh[b] + hh[b] );
				this.DrawCell( "000000" );
				for(r=0; r<3 ; r++){	
					for(g=0 ; g < 6 ; g++){
						this.DrawCell( hh[r] + hh[g] + hh[b] );
					}
				}
				document.writeln('</tr>');
			}
			for(b=0; b<6 ; b++){
				document.writeln('<tr>');
				this.DrawCell( "000000" );
				this.DrawCell( st[b] );
				this.DrawCell( "000000" );			
				for(r=3; r<6 ; r++){	
					for(g=0 ; g < 6 ; g++){
						this.DrawCell( hh[r] + hh[g] + hh[b] );
					}
				}
				document.writeln('</tr>');
			}		
			document.writeln('</table>');
			

			document.writeln('		</td>  ');
			document.writeln('	</tr>  ');
			document.writeln('  </table></span>  ');
			
		}
		
		this.SelectColor = function (color){
			a = GetElement( this.name + "_color_text");
			a.innerHTML = color.toUpperCase();
			
			a = GetElement( this.name + "_color");
			a.bgColor = color;
			
			this.selectedColor = color;
		}
		
		this.getBoxPosition = function(name){
			obj = GetElement(name);
			x = 0;
			y = 0;
			if (obj != null){
				y += obj.offsetHeight;
				while (obj.offsetParent != null){
					x += obj.offsetLeft;
					y += obj.offsetTop;
					obj = obj.offsetParent;
				}
				if (document.all){
					x+=10;
					y+=15;
				} 
				
				this.box_x = x;
				this.box_y = y;
			}
		}
		
		this.Hide = function (){
			obj = GetElement(this.layer_id);
			if (obj != null){
				obj.style.visibility = "hidden";
				this.visible = false;
			}
		}
		
		this.Show = function (){
			obj = GetElement(this.layer_id);
			if (obj != null){
				obj.style.left = this.box_x + "px";
				obj.style.top = this.box_y + "px";
				obj.style.visibility = "visible";
				this.visible = true;
				//alert("x="+ this.box_x +" y="+ this.box_y);
			}
		}
		
		this.Togle = function(){
			if (this.visible){
				this.Hide();
			}else{
				this.Show();
			}
		}
		
		
	}