var canvas;

var x = 400;
var y = 300;

var CANVAS_WIDTH = 1210;
var CANVAS_HEIGHT = 612;

var OPACITY_SPEED = 78;
var EASING_SPEED = 0.5;
var CENTER_RADIUS_X = 26;
var CENTER_RADIUS_Y = 17;
var CENTER_OFFSET_X = 200;
var CENTER_OFFSET_Y = 0;

var ZOOM_MIN_X = 7;
var ZOOM_MIN_Y = 7;
var ZOOM_RADIUS_X = 1;
var ZOOM_RADIUS_Y = 1;

var SPEED_FACTOR = 0.5;
var SPEED_FACTOR_RADIUS = 0.3;

var TEXT_SIZE = 35;
var TEXT_SPEED = 10;

var object_sizes     = [5, 7, 12, 13, 18, 20, 27, 30, 41, 43, 57, 59, 72, 75, 88, 92];

var opacity_angle = {'rect': 0, 'circle': 0, 'arc': 0, 'line': 0, 'bezier': 0, 'triangle': 0};
var speed_angle = {'rect': 0, 'circle': 0, 'arc': 0, 'line': 0, 'bezier': 0, 'triangle': 0};
var center_angle = {'rect': 0, 'circle': 0, 'arc': 0, 'line': 0, 'bezier': 0, 'triangle': 0};
var zoom_angle = {'rect': 0, 'circle': 0, 'arc': 0, 'line': 0, 'bezier': 0, 'triangle': 0};
var rotation_angle = {'rect': 0, 'circle': 0, 'arc': 0, 'line': 0, 'bezier': 0, 'triangle': 0};
var speed_factor_angle = {'rect': 50, 'circle': 50, 'arc': 50, 'line': 50, 'bezier': 50, 'triangle': 50};
var text_step = {'rect': 0, 'circle': 0, 'arc': 0, 'line': 0, 'bezier': 0, 'triangle': 0};

var texts = {
  'rect': [
    'Firemné prezentácie',
    'Internetové aplikácie',
    'Online reklama',
    'SEO optimalizácia',
    'Profesionálna grafika',
    'Online marketing',
    'Štatistiky návštevnosti'
  ],
  'circle': [
    'Internetové obchody',
    'Portálové riešenia',
    'Mediálne servre',
    'Online platobný systém',
    'Atraktívna grafika',
    'Samostatné moduly',
    'Veľké aj malé riešenia'
  ],
  'arc': [
    'arc Hello world!',
    'Informačné systémy',
    'Webstránky, marketing, reklama, video a všetko ostatné.',
    'Oddych je dôležítý. Nepodceňujte ho.'
  ],
  'line': [
    'Infraštruktúra siete',
    'Servis PC techniky',
    'Optimalizácia procesov',
    'Firemné podujatia',
    'Športové hry',
    'Fotografické služby',
    'Semináre o marketingu',
    'Diskusie o internete'
  ],
  'bezier': [
    'Zvýšenie predaja',
    'Budovanie značky',
    'Corporate identity',
    'Marketingové semináre',
    'POS materiály',
    'Dizajn obalov',
    'Stratégia',
    'Reklamné kampane'
  ],
  'triangle': [
    'Intranetové aplikácie',
    'Firemný softvér',
    'Analýza potrieb',
    'Databázové riešenia',
    'Portálové riešenia',
    'Vývoj a integrácia aplikácií',
    'Business intelligence',
    'Garantovaná dlhodobá spolupráca'
  ]
};
var texts_x = [];
var texts_z = [];

function grid_circles(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.fill();
}

function draw_elements(ctx, shape_type) {
  var i, center_x, center_y, zoom, opacity, x, y, w, h;

  center_x = CANVAS_WIDTH/2 + CENTER_RADIUS_X*Math.sin(center_angle[shape_type]*Math.PI/180);
  center_y = CANVAS_HEIGHT/2 + CENTER_RADIUS_Y*Math.cos(center_angle[shape_type]*Math.PI/180);
  
  zoom_x = ZOOM_MIN_X + ZOOM_RADIUS_X*Math.sin(zoom_angle[shape_type]*Math.PI/180);
  zoom_y = ZOOM_MIN_Y + ZOOM_RADIUS_Y*Math.cos(zoom_angle[shape_type]*Math.PI/180);
  
  for (i = 0; i < object_sizes.length; i++) {

    x = center_x - object_sizes[i]*zoom_x/2 - CANVAS_WIDTH/2;
    y = center_y - object_sizes[i]*zoom_y/2 - CANVAS_HEIGHT/2;
    w = object_sizes[i]*zoom_x;
    h = object_sizes[i]*zoom_y;
    
    opacity = 0.1 + Math.cos(((opacity_angle[shape_type] + i*OPACITY_SPEED) % 360)*Math.PI/180) / 6;

    ctx.save();
    ctx.translate(CANVAS_WIDTH/2 + CENTER_OFFSET_X, CANVAS_HEIGHT/2 + CENTER_OFFSET_Y);
    ctx.rotate(rotation_angle[shape_type]*i*Math.PI/180);
    
    if (shape_type == 'rect') ctx.strokeStyle = 'rgba(226, 191, 4, '+opacity+')';
    if (shape_type == 'circle') ctx.strokeStyle = 'rgba(0, 242, 3, '+opacity+')';
    if (shape_type == 'arc') ctx.strokeStyle = 'rgba(0, 242, 3, '+opacity+')';
    if (shape_type == 'line') ctx.strokeStyle = 'rgba(183, 183, 183, '+opacity+')';
    if (shape_type == 'bezier') ctx.strokeStyle = 'rgba(142, 0, 75, '+opacity+')';
    if (shape_type == 'triangle') ctx.strokeStyle = 'rgba(0, 159, 221, '+opacity+')';

    ctx.lineWidth = opacity*7;
    ctx.beginPath();

    if (shape_type == 'rect') ctx.rect(x + i*Math.sin(rotation_angle[shape_type]*Math.PI/180), y - i*Math.cos(opacity_angle[shape_type]*Math.PI/180), w + i*4*Math.sin(opacity_angle[shape_type]*Math.PI/180), h - i*3*Math.cos(rotation_angle[shape_type]*Math.PI/180));
    if (shape_type == 'circle') ctx.arc(x + i*2*Math.sin(opacity_angle[shape_type]*Math.PI/180), y - i*3*Math.cos(rotation_angle[shape_type]*Math.PI/180), w, 0, Math.PI*2, false);
    if (shape_type == 'arc') ctx.arc(x + i*2*Math.sin(opacity_angle[shape_type]*Math.PI/180), y - i*3*Math.cos(rotation_angle[shape_type]*Math.PI/180), w, (h*8 % 360)*Math.PI/180, Math.PI*2, false);
    if (shape_type == 'line') { ctx.moveTo(x, y); ctx.lineTo(x + w + 2*Math.sin(rotation_angle[shape_type]*Math.PI/180), y + h + 130*Math.cos(opacity_angle[shape_type]*Math.PI/180)); };
    if (shape_type == 'bezier') { ctx.moveTo(x + 5*Math.sin(rotation_angle[shape_type]*Math.PI/180), y - 97*Math.cos(opacity_angle[shape_type]*Math.PI/180)); ctx.bezierCurveTo(x + w, y, x - w + 2*Math.sin(rotation_angle[shape_type]*Math.PI/180), y + h + 130*Math.cos(opacity_angle[shape_type]*Math.PI/180), x, y - h); };

    if (shape_type == 'triangle') { 
      var p1x = x + w/3;
      var p1y = y;
      var p2x = x + w;
      var p2y = y + h / 2 + 10*Math.cos(opacity_angle[shape_type]*3*Math.PI/180);
      var p3x = x;
      var p3y = y + h + 10*Math.cos(opacity_angle[shape_type]*3*Math.PI/180);

      ctx.moveTo(p1x, p1y); 
      ctx.lineTo(p2x, p2y);
      ctx.lineTo(p3x, p3y);
      ctx.closePath();
    };

    ctx.stroke();
    ctx.restore();
  }
}

function draw_texts_matrix(ctx, shape_type) {
  var i, j, x, y, opacity;
  var font_size, text_height;
  var step = text_step[shape_type];
  
  ctx.save();
  ctx.translate(2*CANVAS_WIDTH/4, CANVAS_HEIGHT/4);
  ctx.scale(0.5, 0.5);
  
  for (i = 0; i < texts[shape_type].length; i++) {
    font_size = TEXT_SIZE*texts_z[i];
    text_height = texts[shape_type][i].length*font_size;
    y = (step*texts_z[i] % (CANVAS_HEIGHT + text_height*4)) - text_height*2;

    for (j = 0; j < texts[shape_type][i].length; j++) {
      opacity = Math.min(1, (texts[shape_type][i].length - j)/texts[shape_type][i].length + 0.3);
      ctx.save();
      ctx.font = font_size/1.4+'pt Futura';
      ctx.fillStyle = 'rgba('+texts_z[i]*255+', '+texts_z[i]*255+', '+texts_z[i]*255+', ' + opacity + ')';
      ctx.fillText(texts[shape_type][i][j], texts_x[i], y);
      ctx.restore();
      y += font_size;
    };
  };
  
  ctx.restore();
  
};
function draw_texts(ctx, shape_type) {
  var i, j, x, y, opacity;
  var font_size, text_height;
  var step = text_step[shape_type];
  
  ctx.save();
  ctx.translate(2*CANVAS_WIDTH/4, CANVAS_HEIGHT/4);
  ctx.scale(0.5, 0.5);
  
  for (i = 0; i < texts[shape_type].length; i++) {
    font_size = TEXT_SIZE*texts_z[i];//*(0.8 + Math.sin(step*Math.PI/180)/15);
    text_height = texts[shape_type][i].length*font_size;
    y = i*50 + texts_z[i]*50;

    opacity = Math.min(1, texts[shape_type][i].length + 0.3);
    ctx.save();
    ctx.rotate(texts_z[i]*Math.sin((i*125 + step)*Math.PI/180)/40);
    ctx.scale(1.3 + Math.sin(i/2*step/2*Math.PI/180)/20, 1.3 + Math.sin(i/2*step/3*Math.PI/180)/20);
    //ctx.rotate(0.1);
    ctx.font = font_size/1.4+'pt Verdana';
    ctx.textAlign = "center";
    ctx.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')';
    ctx.fillText(texts[shape_type][i], texts_x[i] + CANVAS_WIDTH/4 + CANVAS_WIDTH/16, y - CANVAS_HEIGHT/2);
    ctx.restore();
    y += font_size;
  };
  
  ctx.restore();
  
};

function clear(ctx) {
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  ctx.beginPath();
  ctx.fillStyle = "rgba(200,0,0,0)";
  ctx.strokeStyle = "rgba(200,0,0,0)";
  ctx.rect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  // var img = new Image();
  // img.src = _ROOT_BASE + '/images/black-shadow.png';
  // ctx.drawImage(img, 0, 0);
}

var animation_interval = null;
var texts_visible = false;
function init_animation(shape_type, tmp_texts_visible) {
  var i;
  
  texts_visible = tmp_texts_visible;
  
  for (i = 0; i < texts[shape_type].length; i++) {
    texts_x[i] = Math.random()*CANVAS_WIDTH/4;
    texts_z[i] = Math.random()*0.3 + 0.5;
  };

  if (animation_interval !== null) clearInterval(animation_interval);
  
  $('#canvas').css('background', 'transparent');
  
    animation_interval = setInterval(function() { 
      try {
        animate($('#canvas').get(0).getContext('2d'), shape_type, 1);
      } catch(ex) { };
    }, 80);
}

function animate(ctx, shape_type, speed_factor) {
  clear(ctx);
  
  var tmp_speed_factor = SPEED_FACTOR_RADIUS*SPEED_FACTOR*speed_factor*(0.3 + Math.sin(speed_factor_angle[shape_type]*Math.PI/180) / 7);
  
  opacity_angle[shape_type]  = (opacity_angle[shape_type]  + tmp_speed_factor*7) % 360;
  center_angle[shape_type]   = (center_angle[shape_type]   + tmp_speed_factor*3) % 360;
  zoom_angle[shape_type]     = (zoom_angle[shape_type]     + tmp_speed_factor*2) % 360;
  rotation_angle[shape_type] = (rotation_angle[shape_type] + tmp_speed_factor*1) % 360;
  
  try {
    draw_elements(ctx, shape_type);
  } catch (ex) { };

  speed_factor_angle[shape_type] = (speed_factor_angle[shape_type] + SPEED_FACTOR*speed_factor) % 360;

  if (texts_visible) {
    try {
      ctx.save();
      ctx.rotate(0.1);
      draw_texts(ctx, shape_type);
      ctx.restore();
    } catch (ex) { };
  };
  
  text_step[shape_type] += TEXT_SPEED*SPEED_FACTOR*speed_factor;
}