/* ==========================================================
  Base Default JavaScript
  -- Table of Contents --
*/

// MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW:
paper.install(window);

// VARIABLE FOR THE CANVAS ELEMENT
var c;

// EXECUTE CALLBACK WHEN THE PAGE IS READY:
Zepto(function($){

  // CANAVAS ELEMENT
c = document.getElementById("canvas");

  // DRAW STAGE
drawStage();
  
});


function drawStage()
{

  // GET WINDOW ELEMENT
var _window  = $( window );

  // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS:   
paper.setup(c);

  // SET A STYLE FOR THE PROJECT
project.currentStyle = {
    fillColor:'red'
};
  
  // CREATE A CIRCLE

var leds = [];
  var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
  //noprotect
  for(n=0;n<20;n++)
    {
        
    var row=[];
      
      for(i=0;i<40;i++)
    {
      var round = new Path.Circle(new Point(10,10),10);
       round.position = new Point(i*20+20,n*20+20);
     // console.log(round.position.y);
      var nm = "r"+n+"c"+i;
      //round.name=nm;
     // console.log("-----"+round.name);
      round.name = 'red';
      round.data.coordinates={r:n,c:i};
      round.onMouseDown = function(event) {
        
        console.log(this.data.coordinates);
        
    if(this.name=='red'){this.fillColor = 'black';
        this.name = 'black';}
        else
          {
            this.fillColor = 'red';
        this.name = 'red';
          }
        // CHANGE BLACK VALUE
        darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1;
        // RETURN NEW ARRAY
        console.log(visualiseArray(darkShape));
};
       row.push(round);
    }
      leds.push(row);
    }
  
  // DRAW THE CÅURRENT VIEW
  // paper.view.draw();
  
  // OR DRAW REPEATEDLY
  view.onFrame = function(event) {
  // MOVE COLOURS
//     for(n=0;n<20;n++)
//       {
//         for(i=0;i<40;i++)
//         {
          
//           //console.log(leds[n][i].name);
//           //c = new Color(Math.random(), Math.random(), Math.random());
//         //  leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random());
//         }
        
//       }
    // UPDATE ARRAY
    for(n=0;n<20;n++)
      {
        for(i=0;i<40;i++)
        {
         
        }
        
      }
 
  
  };
  
  
        
}

function visualiseArray(ar)
{
  var visArr = "[";
  for(n=0;n<20;n++)
      {
        visArr = visArr.concat("[");
        for(i=0;i<40;i++)
        {
          //console.log(ar[n][i]);
          var v = ar[n][i];
         visArr = visArr.concat(v);
        }
        visArr = visArr+="]";
        if(n!=19)visArr = visArr.concat(",");
      }
  visArr = visArr.concat("]");
  
  return visArr
}