# // Lets add some encapsulation as this is designed as a generic mechanism for others to add their own dynamic styles if they want!
(function(){
	var obj = { 
		restore: anycolor_restore, persist: anycolor_persist, record_col: anycolor_record_col,
		static_styling: anycolor_static_styling, dynamic_styling: anycolor_dynamic_styling,
		config: plain_config
	};
	
	obj.wide_only = true;
	obj.cur_col_hsl = rgb2hsl(txt2col('#0091fb'));

	function anycolor_record_col(col) 
	{
		debugger	
		obj.cur_col_hsl=col;
	}

	function anycolor_persist()
	{
	}
	
	function anycolor_restore()
	{
	}
	
	function anycolor_static_styling(cs){
		var txt = '';
		
		col = obj.cur_col_hsl;

		cs.bg_center = hsl_init(0,0,1);
		cs.bg_outer = col;
		cs.msghdr_reading = hsl_init(col[hsl_h],col[hsl_s]+0.25,0.92);
		cs.msghdr_compose = hsl_init(col[hsl_h],col[hsl_s]+0.25,0.91);
		cs.appmenu_dark = hsl_modulate(col,0,-0.2,-0.1);
		cs.ac_sel = hsl_modulate(col,0,+0.1,+0.7);
		cs.ac_bg = hsl_modulate(col,0,+0.1,+0.9);
		cs.ac_panel = hsl_modulate(col,0,+0.1,+0.7);
		cs.border = hsl_modulate(col,0,-0.6,+0.2);	cs.border[hsl_l]=Math.max(cs.border[hsl_l],0.5);
		
		cs.page_background_css = 'background: radial-gradient(ellipse at 35% 30%, '+hsl_out(cs.bg_center)+', '+hsl_out(cs.bg_outer)+' 125%) fixed;';
		cs.border_color_css = hsl_out(cs.border);

		txt += '#app_menu div { background: '+hsl_out(cs.appmenu_dark)+';}';
		txt += '#msg_headers, .msg_headers { background: '+hsl_out(cs.msghdr_reading)+';}';
		txt += '.compose { background: '+hsl_out(cs.msghdr_compose)+';}';	
		txt += '#ac { background: '+hsl_out(cs.ac_bg)+';}' 
		txt += '#ac span.sel{  background:'+hsl_out(cs.ac_sel)+';}';
		txt += '.contacts_picker, .contacts_picker_edge{  background:'+hsl_out(cs.ac_panel)+';}';
		
//		txt += extra_msg_padding();

		return txt;
	}
	
	function anycolor_dynamic_styling(cs, opt)
	{
		var col = obj.cur_col_hsl;
				
		safe_html_assign('custom_hsl_h', dp(col[hsl_h],3));
		safe_html_assign('custom_hsl_s', dp(col[hsl_s],3));
		safe_html_assign('custom_hsl_b', dp(col[hsl_b],3));
		safe_html_assign('custom_rgb', hsl_out(col));	
		safe_html_assign('modern_colours', modern_colours_populate(cs));

		var palette = sw.palette;
		if(palette){
			palette.set_color(col, opt.bypass)
			palette.render();
		}
	}

	function plain_config()
	{
		return '||html_begin()||
	<div style="float:left;">
		<div onclick="pick_col(`#ff9000`)" class="pick_swatch" style="background:#ff9000;"></div>
		<div onclick="pick_col(`#157a08`)" class="pick_swatch" style="background:#157a08;"></div>	
		<div onclick="pick_col(`#0091fb`)" class="pick_swatch" style="background:#0091fb;"></div>
		<div onclick="pick_col(`#fb00f8`)" class="pick_swatch" style="background:#fb00f8;"></div>
		<div onclick="pick_col(`#fb0008`)" class="pick_swatch" style="background:#fb0008;"></div>
		<br>
		<div onclick="pick_col(`#a78558`)" class="pick_swatch" style="background:#a78558;"></div>
		<div onclick="pick_col(`#31552d`)" class="pick_swatch" style="background:#31552d;"></div>
		<div onclick="pick_col(`#5784a4`)" class="pick_swatch" style="background:#5784a4;"></div>
		<div onclick="pick_col(`#a457a3`)" class="pick_swatch" style="background:#a457a3;"></div>
		<div onclick="pick_col(`#a45759`)" class="pick_swatch" style="background:#a45759;"></div>
	</div>
	<div>
		<canvas id="palette_pane2" class="color-palette" width="200" height="40" style="margin-left:16px;"></canvas>
		<canvas id="palette_pane1" class="color-palette" width="200" height="40" style="margin-left:16px;"></canvas>
	</div>
		||html_end()||';
	}

		
	newlook_register('anycolor', 'select any colour', obj, {alt:false});
})();
