var faces = [];
faces[0] = {conf:3.6, x:166, y:181, yaw:10.1, roll:-22.7};
faces[0].box = [[133,122],[225,160],[218,215],[184,258],[92,220]];
faces[0].name = "Elsa";
faces[1] = {conf:4.4, x:313, y:158, yaw:-10.1, roll:24.2};
faces[1].box = [[253,138],[344,97],[387,194],[297,235],[262,192]];
faces[1].name = "Pam";
faces[2] = {conf:2.6, x:565, y:147, yaw:-75.7, roll:-1.3};
faces[2].box = [[541,93],[616,95],[613,228],[538,227],[490,159]];
faces[2].name = "Tasha";

var colors = ["#32FD32", "#DC143C", "#FF00FF", "#4146DD"];

var image = null;

function getChildById(parent,child_id)
{
  for (var i=0; i<parent.childNodes.length; i++)
    if (parent.childNodes[i].id == child_id)
      return parent.childNodes[i];
}

function draw_poly(ctx,poly,color,width,highlight,alpha, name)
{
  if (highlight) 
  {
    ctx.beginPath();
    ctx.moveTo(poly[0][0],poly[0][1]);
    for (j=1; j < poly.length; j++)
      ctx.lineTo(poly[j][0],poly[j][1]);
    ctx.closePath();
    ctx.globalAlpha=0.5;
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.globalAlpha=1;
  }
  
  if (alpha)
    ctx.globalAlpha=alpha;
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.beginPath();
  ctx.moveTo(poly[0][0],poly[0][1]);
  for (j=1; j < poly.length; j++)
    ctx.lineTo(poly[j][0],poly[j][1]);
  ctx.closePath();
  ctx.stroke();
  ctx.globalAlpha=1;

  try
  {
    ctx.font = '20px arial, sans-serif';
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(poly[0][0], poly[0][1] - 3);
    ctx.lineTo(poly[1][0], poly[1][1] - 3);
    ctx.closePath();
    if (navigator.userAgent.indexOf('Firefox') !=-1)
      ctx.mozTextAlongPath(name, false);
    else
      ctx.fillText(name, poly[0][0], Math.min(poly[0][1], (poly[1][1] + poly[0][1])/2) - 3);
  }
  catch(err)
  {
    if (frame % frames_per_face == frames_per_face - 1)
	{
      var info_box = document.createElement('div');

	  var offset = getPageOffset(document.getElementById("overlay"));
	  var x = offset.x + poly[0][0];
      var y = offset.y; 

      if (poly[0][1] < poly[1][1])
        y = y + poly[0][1];
      else
        y = y + (poly[0][1] + poly[1][1]) / 2;

      info_box.style.position = 'absolute';
      info_box.style.left = x+'px';
      info_box.style.width = 'auto';
      info_box.style.height = 'auto';
      info_box.style.fontFamily = 'arial,sans-serif';
      info_box.innerHTML = "<span style='font-weight: bold; color: " + color +"'>" + name + "</span>";
      document.body.appendChild(info_box);
      info_box.style.top = (y-info_box.offsetHeight)+"px";
	}
  }

}

function getPageOffset(obj)
{
  var x=y=0;
  while(obj)
  {
    x += obj.offsetLeft;
    y += obj.offsetTop;
    obj = obj.offsetParent;
  }
  return {x:x,y:y};
}


function poly_mid(poly)
{
    var p = [poly[0][0],poly[0][1]];
    
    for (var i=1; i<poly.length; i++)
    {
        p[0] += poly[i][0];
        p[1] += poly[i][1];
    }
    p[0]/=poly.length;
    p[1]/=poly.length;
    return p;
}

function res_image(elem_id)
{
  var image = document.getElementById(elem_id);
  image.last_threshold=null;
  image.overlay = getChildById(image,"overlay");
  image.ctx = image.overlay.getContext("2d");
  if (using_ie)
    image.overlay.style.cursor = 'default';
  
  image.first_draw=true;
  image.last_selected_face=null;
  image.draw = image_draw;
  
  return image;
}

function position_try_image()
{
    var t = document.getElementById("try_it");
    var menu = document.getElementById("menu");
    t.style.right = (t.parentNode.offsetWidth-(menu.offsetLeft))+"px";
    t.style.display = 'inline';
}


var frames_per_face = 15;
function scale_for_frame_bubble(frame)
{
    frame -= (frames_per_face+5);
    var scale = -5-(frame*frame);
    scale = (scale/400.0)+1.25;
    return scale;
}

function scale_for_frame_focus(frame)
{
    return 4-(frame/(frames_per_face/3));
}

var frame=0;
function image_draw()
{
    var current_face = (frame/frames_per_face)|0;
    
    if (current_face >= faces.length)
    {
        clearInterval(image_animation);
    }
    
    var face_frame = frame - current_face * frames_per_face;
    
    var scale = scale_for_frame_focus(face_frame);
    var transScale = -(scale-1);
    var width = 4;
    
    this.ctx.save()
    this.ctx.clearRect(0,0,this.overlay.width,this.overlay.height);
    
    for (var i=0; i<current_face; i++)
    {
        draw_poly(this.ctx, faces[i].box, colors[i], width, false, 1.0, faces[i].name);
    }
    
    if (current_face >= faces.length) return;
    
    var transX = faces[current_face].mid[0] * transScale;
    var transY = faces[current_face].mid[1] * transScale;
    
    this.ctx.translate(transX,transY);
    this.ctx.scale(scale,scale);
    if (using_ie) width *= scale;
    draw_poly(this.ctx, faces[current_face].box, colors[current_face], width, false, (face_frame+1)/frames_per_face, faces[i].name);
    frame = frame + 1;
    this.ctx.restore();
}

var image_animation = null;
var image;

function startAnimation()
{
    image_animation = setInterval("image.draw()",30);
}

function init()
{
    position_try_image();
    
    for (var i=0; i< faces.length; i++)
        faces[i].mid = poly_mid(faces[i].box);
    
    image = document.getElementById("image");
    image.style.backgroundImage = "url(front_page/demo_image.jpg)"
    
    
    image = res_image("image");
    
    var load_check = document.createElement('div');
    load_check.innerHTML = "<img src='front_page/demo_image.jpg' onload='startAnimation();'>";
    load_check.style.height = '0';
    load_check.style.width = '0';
    load_check.style.overflow = 'hidden';
    document.body.appendChild(load_check);
}