var Buttons ={
 play: function(id, status){
  var ctx = $(id).getContext('2d');
  $(id).writeAttribute({width: 30, height: 30});
  var colors = this._colors(status);
  this._circle(ctx, colors.bg);
  ctx.beginPath();
  ctx.fillStyle = colors.fg;
  ctx.moveTo(12, 6);
  ctx.lineTo(22, 15);
  ctx.lineTo(12, 24);
  ctx.fill();
 },

 pause: function(id, status) {
  var ctx = $(id).getContext('2d');
  var colors = this._colors(status);
  this._circle(ctx, colors.bg);
  ctx.fillStyle = colors.fg;
  ctx.fillRect(9, 8, 5, 14);
  ctx.fillRect(16, 8, 5, 14);
 },

 prev: function(id, status) {
  var ctx = $(id).getContext('2d');
  var colors = this._colors(status);
  this._circle(ctx, colors.bg);
  ctx.fillStyle = colors.fg;
  //affiche: |
  ctx.fillRect(8,10,2,10);
  //affiche: |<
  ctx.beginPath();
  ctx.moveTo(10,15);
  ctx.lineTo(16,20);
  ctx.lineTo(16,10);
  ctx.fill();
  //affiche: |<<
  ctx.beginPath();
  ctx.moveTo(16,15);
  ctx.lineTo(22,20);
  ctx.lineTo(22,10);
  ctx.fill();
 },

 rewind: function(id, status) {
  var ctx = $(id).getContext('2d');
  var colors = this._colors(status);
  this._circle(ctx, colors.bg);
  ctx.fillStyle = colors.fg;
  //affiche: |<
  ctx.beginPath();
  ctx.moveTo(10,15);
  ctx.lineTo(16,20);
  ctx.lineTo(16,10);
  ctx.fill();
  //affiche: |<<
  ctx.beginPath();
  ctx.moveTo(16,15);
  ctx.lineTo(22,20);
  ctx.lineTo(22,10);
  ctx.fill();
 },

 skip: function(id, status) {
  var ctx = $(id).getContext('2d');
  var colors = this._colors(status);
  this._circle(ctx, colors.bg);
  ctx.fillStyle = colors.fg;
  ctx.beginPath();
  ctx.moveTo(8, 10);
  ctx.lineTo(14, 15);
  ctx.lineTo(8, 20);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(14, 10);
  ctx.lineTo(20, 15);
  ctx.lineTo(14, 20);
  ctx.fill();
  ctx.fillRect(20, 10, 2, 10);
 },

 forward: function(id, status) {
  var ctx = $(id).getContext('2d');
  var colors = this._colors(status);
  this._circle(ctx, colors.bg);
  ctx.fillStyle = colors.fg;
  ctx.beginPath();
  ctx.moveTo(8, 10);
  ctx.lineTo(14, 15);
  ctx.lineTo(8, 20);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(14, 10);
  ctx.lineTo(20, 15);
  ctx.lineTo(14, 20);
  ctx.fill();
 },

 audio: function(id) {
  var ctx = $(id).getContext('2d');
  ctx.fillStyle = this._colors(1).bg;
  ctx.fillRect(0, 6, 4, 8);
  ctx.beginPath();
  ctx.moveTo(-1, 10);
  ctx.lineTo(10, 0);
  ctx.lineTo(10, 20);
  ctx.fill();
 },

 _colors: function(status){
  switch(status){
   case 0: return {bg:$('button-disabled').getStyle('background-color'), fg:$('button-disabled').getStyle('color')};
   case 1: return {bg:$('button').getStyle('background-color'), fg:$('button').getStyle('color')};
   case 2: return {bg:$('button-down').getStyle('background-color'), fg:$('button-down').getStyle('color')};
   }
  },

 _circle: function(ctx, color) {
  ctx.clearRect(0, 0, 30, 30);
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.arc(15, 15, 15, 0, Math.PI * 2, false);
  ctx.fill();
 }
}