var colors = new Array (
	'#FFFFCC',	'#FFFF66',	'#FFCC66',	'#F2984C',	'#E1771E',	'#B47B10',	'#A9501B',	'#6F3C1B',	'#804000',	'#CC0000',	'#940F04',	'#660000',
	'#C3D9FF',	'#99C9FF',	'#66B5FF',	'#3D81EE',	'#0066CC',	'#6C82B5',	'#32527A',	'#2D6E89',	'#006699',	'#215670',	'#003366',	'#000033',
	'#CAF99B',	'#80FF00',	'#00FF80',	'#78B749',	'#2BA94F',	'#38B63C',	'#0D8F63',	'#2D8930',	'#1B703A',	'#11593C',	'#063E3F',	'#002E3F',
	'#FFBBE8',	'#E895CC',	'#FF6FCF',	'#C94093',	'#9D1961',	'#800040',	'#800080',	'#72179D',	'#6728B2',	'#6131BD',	'#341473',	'#400058',
	'#FFFFFF',	'#E6E6E6',	'#CCCCCC',	'#B3B3B3',	'#999999',	'#808080',	'#7F7F7F',	'#666666',	'#4C4C4C',	'#333333',	'#191919',	'#000000'
	);
/**
 * Draw panel
 */
function panel(title,content,width,height){
	var v_panel = '';
	v_panel+='<table border="0" width="'+width+'" height="'+height+'">';
	v_panel+='<tr>' +
			 '<td>' +
			 '<fieldset>' +
			 '<legend>'+title+'</legend>' +
			 content +
			 '</fieldset>' +
			 '</td>' +
			 '</tr>';
	v_panel+='</table>';
	return v_panel;
}
/**
 * Draw color square 
 */
function colorSquare(id,color,attr,w,h){
	var wid = w?w:30;
	var hig = h?h:25;
	if(color!=''){
	var sq ='<div id="'+id+'" style="background-color:'+color+';width:'+wid+'px;height:'+hig+'px;border-style:solid;border-width:1px;border-color:#000000;" '+attr+'></div>';
	}else{
	var sq ='<div id="'+id+'" style=width:'+wid+'px;height:'+hig+'px;border-style:solid;border-width:1px;border-color:#000000;" '+attr+'><img src="/images/nocolor_big.gif"></div>';
	}
	
	return sq;	
}
/**
 * Draw combobox
 */
function combobox(id,values){
	var cmb = '';
	cmb+='<select id="'+id+'">';
	for(i=0;i<values.length;i++){
		cmb+='<option value="'+values[i]+'">'+values[i];
	}
	cmb+='</select>';
	return cmb;
}
/**
 * Draw listbox
 */
function listbox(id,values){
	var cmb = '';
	cmb+='<select size="'+values.length+'" id="'+id+'">';
	for(i=0;i<values.length;i++){
		cmb+='<option value="'+values[i]+'">'+values[i];
	}
	cmb+='</select>';
	return cmb;
}
/**
 * Draw checkbox
 */
function checkbox(id,value,checked){
	var chk = '';
	chk+='<input id="'+id+'" type="checkbox" value="'+value+'" '+checked+'/>';
	return chk;
}
/**
 * Draw text field
 */
function text(id,value,attr){
	var text = '';
	text+='<input id="'+id+'" type="text" value="'+value+'" '+attr+'/>';
	return text;
}

function button(id,value,attr){
	var but = '';
	but+='<input id="'+id+'" type="button" value="'+value+'" '+attr+'/>';
	return but;
}
//DEPRICATED
function modalWindow(edit_id,content,button){
	var modal = '';
	modal+='<div class="modal" id="modal" width="10" height="10">';
	modal+='<div id="'+edit_id+'">'+content+'</div>';
	modal+=button?button:'';
	modal+='</div>';
	return modal;
}
/**
 * Set content for modal window
 */
function setModalContent(id,content){
	document.getElementById(id).innerHTML = content;	
}
/**
 * Set action button for modal window
 */
function setModalButtons(id,buttons){
	document.getElementById(id+'_buttons').innerHTML = buttons;	
}
/**
 * Draw component which select color from palete
 */
function selectColor(id,color,title){
	var col = '';
	var idb = id+'_palete';
	col += '<table border="1">';
	col+='<tr><td>';
	col+=title+':';
	col+='</td><td>';
	col+=text(idb+'_text',color,' onkeyup="changeColor(\''+id+'_color\',this.value)"');
	col+='</td><td>';
	col+=colorSquare(idb+'_color',color);
	col+='</td><td>';
	col+=button(id+'_button','edit...','onclick="createPalete(\''+idb+'\',\'edit_content\');"');
	col+='</td></tr>';
	col+='</table>';
	return col;
}
/**
 * Change color when value is changed
 */
function changeColor(id,color){
	if(color!=-1){
		document.getElementById(id).innerHTML = ' ';
		document.getElementById(id).style.backgroundColor = color;
		saveParam(id,colorToHEX(color));
	}else{
		document.getElementById(id).style.backgroundColor = '';
		document.getElementById(id).innerHTML='<img src="images/nocolor_big.gif">';
		saveParam(id,'');
	}
	
}
/**
 * Getting color from palete
 */
function getColor(id){
	
	return document.getElementById(id).style.backgroundColor!=''?document.getElementById(id).style.backgroundColor:'';
}
/**
 * Draw palete
 */
function colorer(setid){
	var palete = '';
	var counts = 0;
	palete+='<table border="1">';
	palete+='<tr>';
	palete+='<td colspan="'+11+'">';
	palete+=colorSquare(setid+'_res_color',getColor(setid+'_color'),'','480');
	palete+='</td><td><img border="0" id="idc_nocolor" onclick="setColor(\''+setid+'\',this.id);return false;" src="images/nocolor.gif"></td>';//!!!!!!!!!!!!!
	palete+='</tr>';
	for(i=0;i<5;i++){
		palete+='<tr>';
		for(j=0;j<12;j++){
			palete+='<td>';
			palete+=colorSquare('idc_'+counts,colors[counts],' style="cursor:pointer" onclick="setColor(\''+setid+'\',this.id);return false;"');
			counts++;
			palete+='</td>';
		}
		palete+='</tr>';
	}
	palete+='</table>';
	return palete;
}

function setColor(idc,num){
	var numc_arr = num.split('_');
	var color = numc_arr[1];
	if(color=='nocolor'){
		changeColor(idc+'_res_color',-1);
	}else{
		changeColor(idc+'_res_color',colors[color]);
	}
	
}
/**
 * Convert dec to hex
 */
function d2h(d){
	var res = d.toString(16);
	return res.length==1?'0'+res:res;
}
/**
 * Convert color from format rgb(xx,xx,xx) to #xxxxxx
 */
function colorToHEX(color){
	
	var d=10;
	if(color.substr(0,3)=='rgb'){
		var colors = color.substr(4,color.length-5).split(',');
		var d1 = d2h(Math.round(colors[0]));
		var d2 = d2h(Math.round(colors[1]));
		var d3 = d2h(Math.round(colors[2]));
		return '#'+d1+d2+d3;
	}
	else
	{
		return color;
	}
}
/**
 * Set selected color to component
 */
function setSelectedColor(idc){
	var color = getColor(idc+'_res_color');
	var txt = idc+'_text';
	changeColor(idc+'_color',color);
	document.getElementById(txt).value = colorToHEX(color);
	if(color==' '){
		saveParam(idc,'');
	}else{
		saveParam(idc,colorToHEX(color));
	}
	
}
/**
 * Create modal window 
 * wich color palete
 */
function createPalete(id,id_modal){
	var btn = '';
	var content='';
	btn +=button(id+'_ok','Set','class="navigation" onclick="setSelectedColor(\''+id+'\');ShowModalWindow(false);"');
	btn +=button(id+'_cancel','Cancel','class="navigation" onclick="ShowModalWindow(false);"');
	content 	= colorer(id);
	content 	+= btn;
	
	setModalContent(id_modal,content);
	//setModalButtons(id_modal,btn);
	ShowModalWindow(true,570);
	 
}