/* ol.pngknob.js - a javascript to load a png stitched knob image
v2.0

http://www.olilarkin.co.uk	

*/


// Initialisation ----------------------------
//-------------------------------------------
inlets = 1;
outlets = 1;

autowatch = 0;

mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;

var imagefile = ""; // path of image or filename
var imagefile2 = ""; // path of image or filename
var img = new Image(); // create a new Image
var img2 = new Image(); // create a new Image
var yoffset = 0; // the y offset for the current frame
var brgb = [1.,1.,1.,0.];
var frgb = [0.,0.,0.,1.];
var pos = 0; // 0-127 for position of slider
var last_x = 0;
var last_y = 0;
var vmin = 0.;
var vmax = 1.;
var vreset = 0.;
var readout = 0;
var dp = 2;
var type = 0; //0 = int, 1 = float
var dispval = vreset;
var val = vreset; // the value that is input/output/displayed
var font = "Arial";
var fontsize = 10;
var width, height;
var topY = 0.0;
var bottomY = 0.0;
var sliderHalf = 10.0;
var drawPos = 70.0;
var knobOffset = 3.0;
var colorWidth;
var colorHeight;
var sliderOffset = 0;

declareattribute("brgb", null, "setbrgb", 1); 
declareattribute("frgb", null, "setfrgb", 1); 
declareattribute("readout", null, "setreadout", 1);
declareattribute("type", null, "settype", 1);
declareattribute("font",null,"setfont",1);
declareattribute("fontsize",null,"setfontsize",1);
declareattribute("vreset",null,null,1);
declareattribute("vmin",null,null,1);
declareattribute("vmax",null,null,1);

loadImages(jsarguments[1], jsarguments[2]); 

set(vreset);


function drawColor()  // use the value of the slider to set the bg color
{
		

}
function paint()
{	
	if (type) //if float
	{
		dispval = val.toFixed(dp); 
	}
	else // if int
	{
		dispval = val.toFixed(0); 
		if (val > -0.5 && val < 0.) dispval = 0.; // avoid -0
	}	

	var str = "" + dispval + "";
	var calc;
	with(mgraphics)
	{
		save();
		set_source_rgba(brgb);	
		rectangle(0, 0, width, height);
		fill();
		restore();
		
		save();
		var ratio = (val - vmin) / (vmax - vmin);
		if (ratio < 0.05) {
			set_source_rgba([.5,.5,.5,1.0]);
		}
		else if (ratio < 0.6) {
			calc = ((ratio / 0.6) *.3) + 0.5;  // up to 0.8
			set_source_rgba([0.5, calc, 0.5, 1.0]);
		}
		else if (ratio < 0.8) {
				calc = (((ratio - 0.6) / 0.2) * .3) + 0.5;
				set_source_rgba([calc, 0.8, 0.5, 1.0]);
			}
		else if (ratio < 0.9) {
				calc = (((ratio - 0.8) / 0.1) * .3);
				set_source_rgba([0.8, 0.8 - calc, 0.5 - calc,1.0]);
			}
/*
		else if (ratio < 0.85) {
				calc = (((ratio - 0.6) / 0.25) * .3);
				set_source_rgba([0.5 + calc, 0.8 - calc, 0.5 - calc,1.0]);
			}
*/
		else {
			calc = (((ratio - 0.9) / 0.1) * .3);
			set_source_rgba([0.8, 0.5-calc, 0.2 ,1.0]);
		}

		rectangle(0, 0, colorWidth, colorHeight);
		fill();
		restore();
		
		save();
		translate(sliderOffset,0);
		image_surface_draw(img);	
		restore();
		save();	
		translate(knobOffset + sliderOffset, drawPos - sliderHalf);
		image_surface_draw(img2);
		restore();
		
		if(readout)
		{
			select_font_face(font);
			set_font_size(fontsize);
			set_source_rgba(frgb);			
			move_to((img.size[0]/2) - text_measure(str)[0] / 2 ,img.size[1]+text_measure(str)[1]);
			text_path(str);
			fill();
		}


	}		

}

function loadImages(s, s2)
{
	imagefile = s;
	img.freepeer();
	img = new Image(s);
	
	imagefile2 = s2;
	img2.freepeer();
	img2 = new Image(s2);
	sliderHalf = img2.size[1] / 2.0;
	topY = sliderHalf;   // Top Max
	bottomY = img.size[1] - sliderHalf;  // Bottom Max
	drawPos = bottomY;
	knobOffset = (img.size[0] - img2.size[0]) / 2.0;
	colorWidth = img.size[0] + 4;
	colorHeight = img.size[1];
	onresize();
}

function msg_float(v)
{
	val = Math.min(Math.max(vmin,v),vmax);

	var ratio = (val - vmin) / (vmax - vmin);
	drawPos = bottomY - ((bottomY - topY) * ratio);
	
	notifyclients();
	bang();
}

function set(v)
{
	val = Math.min(Math.max(vmin,v),vmax);
	notifyclients();
	mgraphics.redraw();
}

function bang()
{
	mgraphics.redraw();
	outlet(0,val);
}

function notifydeleted()
{
	img.freepeer();
}
notifydeleted.setlocal = 1;

function setbrgb(r,g,b,a) 
{
	brgb = [r,g,b,a];
	mgraphics.redraw();
}

function setfrgb(r,g,b,a) 
{
	frgb = [r,g,b,a];
	mgraphics.redraw();
}

function settype(v)
{
	type = v;
	mgraphics.redraw();
}

function setreadout(v)
{
	readout = v;
	onresize();
}

function setfontsize(v)
{
	if(v > 5)
	{
		fontsize = v;
	}
	else fontsize = 5;
		
	onresize();
}

function setfont(v)
{
	font = v;
	onresize();
}

function setdp(v)
{
	dp = v;
	mgraphics.redraw();
}

function ondrag(x,y,but,cmd,shift,capslock,option,ctrl)
{

	drawPos = y;
	if (drawPos > bottomY) drawPos = bottomY;
	if (drawPos < topY) drawPos = topY;
	
	var f = 1.0 - ((drawPos - topY) / (bottomY - topY));
	f = (f * (vmax - vmin)) + vmin;
	val = Math.min(Math.max(vmin,f),vmax);
	notifyclients();
	bang();

}
ondrag.local = 1; 

function onclick(x,y,but,cmd,shift,capslock,option,ctrl)
{
	drawPos = y;
	if (drawPos > bottomY) drawPos = bottomY;
	if (drawPos < topY) drawPos = topY;
	
	f = 1.0 - ((drawPos - topY) / (bottomY - topY));
	msg_float( f * (vmax - vmin) + vmin);
	mgraphics.redraw();
}
onclick.local = 1; 


function onresize()
{
	if(readout) box.size(img.size[0] + 6,img.size[1] + (fontsize * 2));
	else box.size(img.size[0] + 6,img.size[1]);
	
	width = box.rect[2]-box.rect[0];
	height = box.rect[3]-box.rect[1];
	
	mgraphics.redraw();
}
onresize.local = 1; //private