d=document;b=d.body;l='addEventListener';a='setAttribute';f='getElementById';p='position:absolute';b.innerHTML+='<textarea id=t>JS1K</textarea>';r='px';w='style';b[w].background='#9d3';c=d[f]('c');g=c.getContext('2d');s=[['font-size:',99,1,r],['line-height:',99,1,r],['letter-spacing:',30,.5,r],['opacity:',200,.005,''],['-webkit-transform:rotate(',0,1.8,'deg)']];d[l]('mousedown',function(e){x=e.pageX;for(i in s) {y=e.pageY-i*75;if(x<200&&y>65&&y<83){s[i][1]=x-17;s[i][4]=1;z()}}},0);d[l]('mouseup',function(){for(i in s)s[i][4]=0},0);d[l]('mousemove',function(e){for(i in s)s[i][4]?s[i][1]=Math.max(0,Math.min(e.clientX,200)):0;z()},0);function z(){c.height=999;ns='';g.fillStyle='#fff';for(i in s){k=i*75;x=s[i];h=d.createElement('div');h[a](w,'top:'+(35+k)+'px;'+p);h.innerHTML=x[0];b.appendChild(h);g.fillRect(0,67+k,214,1);g.fillRect(x[1],60+k,14,14);ns+=x[0]+x[1]*x[2]+x[3]+';'}g.fill();d[f]('t')[a](w,'padding:50px;text-align:center;border:0;overflow:hidden;width:600px;background:transparent;'+ns+p)}z();
// Create Text Area
document.body.innerHTML+='<textarea id=t>JS1K</textarea>';
// Set Background Color
document.body.style.background='#9d3';
// Find the canvas and the context
c=document.getElementById('c');
ctx=c.getContext('2d');
// Decalre the sliders (css property, value, modifier, units, [dragging])
sliders=[
['font-size:',99,1,'px'],
['line-height:',99,1,'px'],
['letter-spacing:',30,.5,'px'],
['opacity:',200,.005,''],
['-webkit-transform:rotate(',0,1.8,'deg)']
];
// Add listeners
document.addEventListener('mousedown',function(e){
x=e.pageX;
for(i in sliders) {
y=e.pageY-i*75;
// test each slider vs. mouse x/y
if(x<200&&y>65&&y<83){
// set slider value
sliders[i][1]=x-17;
// set slider dragging to true
sliders[i][4]=true;
z()
}}},0);
document.addEventListener('mouseup',function(){
for(i in sliders) {
// set all sliders dragging to false
sliders[i][4]=false;
}},0);
document.addEventListener('mousemove',function(e){
for(i in sliders) {
// test each slider vs. mouse x/y and set slider value
sliders[i][4]?sliders[i][1]=Math.max(0,Math.min(e.clientX,200)):0;
z()
}},0);
function z(){
// Reset canvas
c.height=999;
// Reset textarea styles
newstyles='';
// Set fill color to white
ctx.fillStyle='#fff';
for(i in sliders){
// Create new divs with slider labels
newdiv=document.createElement('div');
newdiv.setAttribute('style','top:'+(35+i*75)+'px;position:absolute;');
newdiv.innerHTML=sliders[i][0];
document.body.appendChild(newdiv);
// Create sliders
ctx.fillRect(0,67+i*75,214,1);
ctx.fillRect(sliders[i][1],60+i*75,14,14);
// Add to textarea styles
newstyles+=sliders[i][0]+sliders[i][1]*sliders[i][2]+sliders[i][3]+';'
}
// Fill the sliders
ctx.fill();
// Apply new styles to text area
document.getElementById('t').setAttribute('style','padding:50px;text-align:center;border:0;overflow:hidden;width:600px;background:transparent;position:absolute;'+newstyles)
}
z();
