
/**
 * Module dependencies.
 */

var Canvas = require('../lib/canvas')
  , canvas = new Canvas(500, 210)
  , ctx = canvas.getContext('2d')
  , http = require('http');

var x = 100
  , y = 100;

function h1(str) {
  ctx.font = '40px Helvetica';
  ctx.fillText(str, x + 45, y);
  ctx.arc(x + 15, y - 10, 20, 0, Math.PI * 2);
  ctx.fill();
  ctx.font = 'bold 15px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText('nc', x + 6, y - 6);
  ctx.fillStyle = 'black';
  y += 25;
}

function p(str, weight) {
  ctx.font = (weight || 'normal') + ' 13px Arial';
  ctx.fillText(str, x, y += 17);
}

function roundedRect(ctx, x, y, width, height, radius){
	ctx.beginPath();
	ctx.moveTo(x, y + radius);
	ctx.lineTo(x, y + height - radius);
	ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
	ctx.lineTo(x + width - radius, y + height);
	ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
	ctx.lineTo(x + width, y + radius);
	ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
	ctx.lineTo(x + radius, y);
	ctx.quadraticCurveTo(x, y, x, y + radius);
	ctx.fill();
	ctx.strokeStyle = 'rgba(0,0,0,.25)';
	ctx.stroke();
}

function button(str) {
  y += 30;
  var te = ctx.measureText(str)
    , width = te.width
    , pad = 10
    , totalWidth = width + (pad * 2)
    , height = 25
    , canvas = new Canvas(totalWidth, height)
    , c = canvas.getContext('2d');
  c.font = '13px Arial';
  c.fillStyle = 'rgba(0,0,0,0.2)';
  roundedRect(c, 0, 0, width + (pad * 2), height, 6);
  c.fillStyle = 'black';
  c.fillText(str, pad, height / 2 + 4);
  return canvas;
}

h1('node-canvas');
p('node-canvas is a Cairo backed canvas implementation for nodejs.');
p('Every graphical aspect of this page was rendered using node-cairo,');
p('include the text, and is purely for demonstration purposes :)');

var b1 = button('Github repo').toDataURL();
var b2 = button('Issue queue').toDataURL();

var body = ''
  + '<html>'
  + '  <head>'
  + '    <title>node-canvas - Canvas API for NodeJS</title>'
  + '  </head>'
  + '  <body>'
  + '    <br />'
  + '    <img src="' + canvas.toDataURL() + '" />'
  + '    <br />'
  + '    <a href="http://github.com/learnboost/node-canvas"><img src="'
    + b1 + '" style="border: none; margin-left: 95px" /></a>'
  + '    <a href="http://github.com/learnboost/node-canvas/issues"><img src="'
    + b2 + '" style="border: none; margin-left: 5px" /></a>'
  + '  </body>'
  + '</html>'
  ;

http.createServer(function (req, res) {
  res.writeHead(200, {
      'Content-Type': 'text/html'
    , 'Content-Length': body.length
  });
  res.end(body);
}).listen(3000);
console.log('Server started on port 3000');
