// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 30;

// The maximum velocity in each direction
var maxVelocity = 2;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = Math.min(window.innerHeight, window.innerWidth) * 0.75;
var canvasHeight = canvasWidth;

// Create an image object (only need one instance)
var imageObj = new Image();

// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
  particles.forEach(function(particle) {
    particle.setImage(imageObj);
  });
};

// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";

// A function to create a particle object.
function Particle(context) {

  // Set the initial x and y positions
  this.x = 0;
  this.y = 0;

  // Set the initial velocity
  this.xVelocity = 0;
  this.yVelocity = 0;

  // Set the radius
  this.radius = 5;

  // Store the context which will be used to draw the particle
  this.context = context;

  // The function to draw the particle on the canvas.
  this.draw = function() {

    // If an image is set draw it
    if (this.image) {
      this.context.drawImage(this.image, this.x - 128, this.y - 128);
      // If the image is being rendered do not draw the circle so break out of the draw function                
      return;
    }
  };

  // Update the particle.
  this.update = function() {
    // Update the position of the particle with the addition of the velocity.
    this.x += this.xVelocity;
    this.y += this.yVelocity;

    // Check if has crossed the right edge
    if (this.x >= canvasWidth) {
      this.xVelocity = -this.xVelocity;
      this.x = canvasWidth;
    }
    // Check if has crossed the left edge
    else if (this.x <= 0) {
      this.xVelocity = -this.xVelocity;
      this.x = 0;
    }

    // Check if has crossed the bottom edge
    if (this.y >= canvasHeight) {
      this.yVelocity = -this.yVelocity;
      this.y = canvasHeight;
    }

    // Check if has crossed the top edge
    else if (this.y <= 0) {
      this.yVelocity = -this.yVelocity;
      this.y = 0;
    }
  };

  // A function to set the position of the particle.
  this.setPosition = function(x, y) {
    this.x = x;
    this.y = y;
  };

  // Function to set the velocity.
  this.setVelocity = function(x, y) {
    this.xVelocity = x;
    this.yVelocity = y;
  };

  this.setImage = function(image) {
    this.image = image;
  }
}

// A function to generate a random number between 2 values
function generateRandom(min, max) {
  return Math.random() * (max - min) + min;
}

// The canvas context if it is defined.
var context;

// Initialise the scene and set the context if possible
function init() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {

    // Set the context variable so it can be re-used
    context = canvas.getContext('2d');

    // Create the particles and set their initial positions and velocities
    for (var i = 0; i < particleCount; ++i) {
      var particle = new Particle(context);

      // Set the position to be inside the canvas bounds
      particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));

      // Set the initial velocity to be either random and either negative or positive
      particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
      particles.push(particle);
    }
  } else {
    alert("Please use a modern browser");
  }
}

// The function to draw the scene
function draw() {
  // Clear the drawing surface and fill it with a black background
  //context.fillStyle = "rgba(0, 0, 0, 0.5)";
  //context.fillRect(0, 0, 400, 400);

  // Go through all of the particles and draw them.
  particles.forEach(function(particle) {
    particle.draw();
  });
}

// Update the scene
function update() {
  canvasWidth = Math.min(window.innerHeight, window.innerWidth) * 0.75;
  canvasHeight = canvasWidth;
  var margin_left = (window.innerWidth - canvasWidth) * 0.5;
  var margin_top = (window.innerHeight - canvasWidth) * 0.5;
  $('#canvas').attr({
    width: Math.min(canvasWidth, canvasHeight),
    height: Math.min(canvasWidth, canvasHeight),
    'class': 'orb ' + $('input[name=mode]:checked').val()
  }).css({
    'margin-left': margin_left,
    'margin-top': margin_top
  });

  particles.forEach(function(particle) {
    particle.update();
  });
}

// Initialize the scene
init();

// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) {
  setInterval(function() {
    // Update the scene befoe drawing
    update();

    // Draw the scene
    draw();
  }, 1000 / targetFPS);
}

$(document).ready(function() {

  $('#btn_set_visual_uri').click(function() {

    var uri = $('#visual_uri').val();
    uri = prompt("Paste the URL to some image you wish to use...", uri);
    if (uri)
      $('#visual_uri').val(uri);
  });

  $('#visual_mode').change(function() {
    if ($(this).prop('checked')) {
      var uri = $('#visual_uri').val();
      $('#canvas').css({
        "background": "url(" + uri + ")",
        "-moz-background-size": "100% 100%",
        /* Firefox 3.6 */
        "background-size": "100% 100%",
        "background-repeat": "no-repeat"
      });
    } else {
      $('#canvas').css({
        "background": "",
        "-moz-background-size": "",
        "background-size": "",
        "background-repeat": ""
      });
    }
  })
});