The value of each setting is a set of ',' separated fields, some of which have a subvalue after a ':'.
The fields are font, size, fore, back, italics, notitalics, bold, notbold, eolfilled, noteolfilled, underlined, notunderlined, and case. The font field has a subvalue which is the name of the font, the fore and back have colour subvalues, the size field has a numeric size subvalue, the case field has a subvalue of 'm', 'u', or 'l' for mixed, upper or lower case, and the bold, italics and eolfilled fields have no subvalue. The value "fore:#FF0000,font:Courier,size:14" represents 14 point, red Courier text.

// Get current focus item handle
metadb = fb.GetFocusItem();
// Applying RunContextCommand to this handle
fb.RunContextCommandWithMetadb(metadb);

function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
	

var g_drag = 0;
var bool;
var g_metadb;
var imgname;
var rating;
var nrating;
var lrating;
var img;
var hofset=20;
var imgw=20;
var g_tfo = fb.TitleFormat("%rating%");

on_item_focus_change();

function on_paint(gr){
	//	var info = g_metadb.GetFileInfo();
	if (g_metadb) {
		for (i = 1; i < 6; i++) {
			img = gdi.image(fb.FoobarPath + "Images\\" 
			+ ((i > (g_drag ? lrating : rating)) ? "NoStar" : "Star" +  (g_drag ?  "-hover" : "")) + ".png");
//			+ ((i > (g_drag ? lrating : rating)) ? "No" : "") +"Star"   + (g_drag ? ((rating != lrating) ? "-hover" : "") : "") + ".png");
//				+ ((i > (g_drag ? lrating : rating)) ? "No" : (g_drag ? ((rating != lrating) ? "Red" : "") : "")) +"Star.png");
//				+ (g_drag ? ((rating != lrating) ? "Blue" : "") : "") +  ((i > (g_drag ? lrating : rating)) ? "No" :  "") +"Star.png");
			gr.DrawImage(img, hofset+imgw*(i-1), 4, 20, 16, 0, 0, 20, 16);
		}
	}
}

function on_mouse_wheel(delta){}


function on_mouse_lbtn_up(x,y){
//	fb.trace("button up");
	if (lrating !=rating) {if (g_metadb) {
		bool = fb.RunContextCommandWithMetadb("Rating/"+((lrating==0) ? "<not set>" : lrating),g_metadb);
		}}
}

function on_mouse_move(x, y) {
	if (g_metadb) {
		g_drag = 1;
		nrating = Math.ceil((x-hofset)/imgw);
		if (nrating > 5) nrating = 5;
		if (nrating != lrating) {
			lrating = nrating;
			window.Repaint();
			}
		}
}
function on_mouse_leave() {
	on_metadb_changed()
}

function on_item_focus_change() {
//	fb.trace("itm focus changed");
	if (g_metadb) {window.UnwatchMetadb();}
	g_metadb = fb.GetFocusItem();
	if (g_metadb) {
		on_metadb_changed();
		window.WatchMetadb(g_metadb);
	}
	
}
function on_metadb_changed() {
		g_drag = 0;
//		fb.trace("changed");
		rating = g_tfo.EvalWithMetadb(g_metadb);
		if (rating == "?") {rating = 0;}
		lrating = rating;
		window.Repaint();
	}
	
function on_playback_new_track(metadb) {on_item_focus_change();}
//EOF

• you need the playback statistics standard component, with "Rating"as an entry in your context menu
• you need to place "Star.png", "NoStar.png" and "Star-hover.png" in your foobar/Images directory. Sample:

function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
var g_drag = 0;
var imgname;
var img;
function on_init(bool) {
	imgname =bool  ?   "sac.png" : "playing.png";
	img = gdi.image(fb.FoobarPath + "Images\\" + imgname);
	window.Repaint();
};

on_init(fb.StopAfterCurrent);

function on_paint(gr){

	gr.DrawImage(img, 0, 4, 20, 16, 0, 0, 20, 16);
}

function on_mouse_move(x, y) {

	if (g_drag==0) {
		
		on_init(!fb.StopAfterCurrent);
		g_drag = 1;
		}

}
function on_mouse_leave() {
	if (g_drag==1) {
		
		on_init(fb.StopAfterCurrent);
		g_drag = 0;
		}
}
function on_mouse_lbtn_up(x,y){
	
	fb.StopAfterCurrent = !fb.StopAfterCurrent;
	window.Repaint();

//	g_drag = 0;
}


function on_playlist_stop_after_current_changed(state) {on_init(fb.StopAfterCurrent);}

//EOF

function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
var PlaybackOrder = {
	Default: 0,
	RepeatPlaylist: 1,
	RepeatTrack: 2,
	Random: 3,
	ShuffleTracks: 4,
	ShuffleAlbums: 5,
	ShuffleFolders: 6
}


var PlaybackOrderText = new Array(
	"Default", // = 0
	"Repeat (Playlist)",
	"Repeat (Track)",
	"Random",
	"Shuffle (tracks)",
	"Shuffle (albums)",
	"Shuffle (folders)") ;
	
var g_font = gdi.Font("Arial", 11, 1);
var g_drag = 0;
var txt = "";
var bool;
function on_init() {
	on_playback_order_changed(fb.PlaybackOrder);
};

on_init();
function on_paint(gr){
	gr.SetTextRenderingHint(0);
	gr.SetSmoothingMode(2);
//	gr.FillGradRect(  3, 3,    0, window.Height-3, 90, RGB(240,240,240), RGB(100,230,100));
	gr.DrawRect(15, 1, window.Width-36, 20, 1, RGB(64,64,64));
	gr.FillGradRect(16, 2, window.Width-38, 18, 70, RGB(240,240,240), RGB(190,190,190));
	gr.DrawString(txt, g_font, RGB(124,128,164), 5, 0, window.Width-15, 22, 0x11005000);

}

function on_mouse_wheel(delta){
	if(delta>0) {if (fb.PlaybackOrder==6) fb.PlaybackOrder=0;
	else fb.PlaybackOrder= fb.PlaybackOrder+1;}
		
	else
		{if (fb.PlaybackOrder==0) fb.PlaybackOrder=6;
	else fb.PlaybackOrder= fb.PlaybackOrder-1;}
}
function on_mouse_lbtn_up(x,y){
	
	if (fb.PlaybackOrder==0) fb.PlaybackOrder=4;
	else fb.PlaybackOrder= 0;
		
//	fb.trace("order="+fb.PlaybackOrder)
		
	g_drag = 0;
}
function on_playback_order_changed(new_order_index) {
	txt = PlaybackOrderText[fb.PlaybackOrder];

	window.Repaint();
}
//EOF

@NEMO: could you please change your seekbar/volume config so that it use the window.Width/Height of the wsh panel

function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
var g_font = gdi.Font("Tahoma", 12, 0);
var g_drag = 0;
var ww;
var hofset = 10;
var wh = 12;
var vofset;
var grad;

function on_paint(gr){
	vofset = (window.Height-wh)/2;
	grad = Math.pow((100+fb.Volume)/100,2);
	ww = 5*Math.floor((window.Width - 2*hofset)/5);
	var i = 0;
	while (i < ww) {
		var col = (grad<=0)  ? RGB(168,168,168) : (i<=grad*ww) ? RGB(32+128*i/ww,164*(1-i/ww),32*(1-i/ww)) :  RGB(168,168,168);
		gr.FillSolidRect(hofset+1+i,vofset,4,wh, col);
		i = i +5;	
	}
	gr.DrawRect(hofset,vofset, i, wh, 1.0, RGB(192,192,192));
}
function on_mouse_lbtn_down(x,y){
	g_drag = 1;
}
function on_mouse_lbtn_up(x,y){
	on_mouse_move(x,y);
	g_drag = 0;
}
function on_mouse_move(x,y){
	if(g_drag){
		var v = (x-hofset)/ww;
		v = (v<0) ? 0 : (v<1) ? v : 1;
		v = 100 * (Math.pow(v,1/2) - 1);
		fb.Volume = v;
	}	
}
function on_mouse_wheel(delta){
	if(delta>0)
		fb.VolumeUp();
	else
		fb.VolumeDown();
}
function on_volume_change(val){
	window.Repaint();
}
function on_playback_time(time){
window.Repaint();
}
//EOF

function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
var g_font = gdi.Font("Tahoma", 12, 0);
var g_drag = 0;
var hofset = 10;
var wh = 13;
var vofset;
var length;
var grad;


function on_paint(gr){
	vofset = (window.Height-wh)/2;
	ww = 5*Math.floor((window.Width - 2*hofset)/5);
//	fb.trace("ww="+ww);
	length = fb.PlaybackLength;
	grad = 0;
	if (length > 0) {
		grad = fb.PlaybackTime/fb.PlaybackLength;}
	
	var i = 0;
	while (i < ww) {
		
		var col = (grad<=0)  ? RGB(168,168,168) : (i<=grad*ww) ? RGB(0,32+48*(1-i/ww),96+64*(1-i/ww)) :  RGB(128+48*(1-i/ww),128+48*(1-i/ww),128+48*(1-i/ww));
		gr.FillSolidRect(hofset+1+i,vofset,4,wh, col);
		i = i +5;	
	}
	gr.DrawRect(hofset,vofset, i, wh, 1.0, RGB(192,192,192));
}
function on_mouse_lbtn_down(x,y){
	g_drag = 1;
}
function on_mouse_lbtn_up(x,y){
	on_mouse_move(x,y);
	g_drag = 0;
}
function on_mouse_move(x,y){
	if(g_drag){
		var v = (x-hofset)/ww;
		v = (v<0) ? 0 : (v<1) ? v : 1;
		fb.PlaybackTime = fb.PlaybackLength * v;

			
			
	}
	
}
function on_mouse_wheel(delta){
	if(delta>0)
		fb.PlaybackTime = fb.PlaybackTime + delta;
	else
		fb.PlaybackTime = fb.PlaybackTime + delta;
}
function on_playback_new_track(info){
	window.Repaint();
}
function on_playback_stop(){
	window.Repaint();
}
function on_playback_seek(time){
	window.Repaint();
}
function on_playback_time(time){
window.Repaint();
}

I now considering to include that feature in the next version.
However, I think l should restrict it to watch only one metadb handle at a time.

• Previous editor properties will not transfer to this version, so make a backup of your editor properties, and edit them again in the Preferences->Display->WSH Panel Mod.
• Some important notes is added, please check Callbacks.txt for details.

yeah I know  but especially for the seekbar it would be nice if it use the window.width (for resizing etc...)

but thanks for the answer ^^

on_size=function() {
  ww=window.Width;
}