//dragging event 

var COLUMNS_MAX = 20;
var ROWS_MAX = 20;
var isDragging = false;
$("body").mousedown(function() {
    $(window).mousemove(function() {
        isDragging = true;
        $(window).unbind("mousemove");
    });
}).mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    $(window).unbind("mousemove");
    if (!wasDragging) { //was clicking
    }
});

var c;

window.active_tool = "brush";
var brush_tools; 



function BrushTools(){
  var brushtools = this;
  this.brush = $("#brush");
  this.eraser = $("#eraser");
  this.brush_tools = $(".brush_tools");
  this.active_css = {
    "border" : "1px solid black",
    "background" : "gray",
    "color" : "white",
  },
  this.inactive_css = {
    "border" : "1px solid gray",
    "background" : "whitesmoke",
    "color" : "black",
  };
  this.activate = function(elem){
    $(elem).css(this.active_css);
    window.active_tool = $(elem).attr("id");
  };
  this.deactivate = function(elem){
    $(elem).css(this.inactive_css);
  };
//  this.cursors = {
//    "brush" : "img/brush.png",
//    "eraser" : "img/eraser.png",
//  };
  this.brush_tools.click(function(){
    var that = this;
    window.active_tool = $(this).attr("id");
    brushtools.activate(that);
    brushtools.brush_tools.each(function(){
      if(this != that){
        brushtools.deactivate(this);
      }
    }); 
//   $("#canvas_wrapper").css(
//     "cursor" , "url("+brushtools.cursors[window.active_tool]+")"
//   ) 
  });
}




function GridCanvas(){
  var gridcanvas = this;
  this.rows = 10;
  this.cols = 10;
  this.current_rows = [];
  this.container = $("#canvas_wrapper");
  this.paint = function(elem){
    $(elem).attr("painted", "1");
    $(elem).css("background", "black");
  };
  this.erase = function(elem){
    $(elem).attr("painted", "0");
    $(elem).css("background", "white");
  };
  this.initialize = function(cols, rows){
    this.container.html("");
    this.rows = (rows > 0) ? rows : 1;
    this.cols = (cols > 0) ? cols : 1;
    if (this.rows > ROWS_MAX){
      this.rows = ROWS_MAX;
    }
    if (this.cols > COLUMNS_MAX){
      this.cols = COLUMNS_MAX;
    }
    this.cols = cols;
    for (var i = 0; i< this.rows; i++){
      var row = document.createElement("div");
      $(row).attr("id", "row_"+i)
      $(row).addClass("canvas_row")
      for (var j = 0; j< this.cols; j++){
        var cell = document.createElement("span");
        $(cell).addClass("canvas_cell")
        $(cell).attr("painted", "0")
        $(cell).addClass("column_"+j)
        $(cell).html("&nbsp;")
        $(cell).click(function(){
          if (window.active_tool == 'brush'){
            gridcanvas.paint(this);
          }else if(window.active_tool == 'eraser'){
            gridcanvas.erase(this);
          }
        });
        $(cell).mouseover(function(){
          if (isDragging){
            if (window.active_tool == 'brush'){
              gridcanvas.paint(this);
            }else if(window.active_tool == 'eraser'){
              gridcanvas.erase(this);
            }
          }
        });
        $(row).append(cell)
      }
      this.container.append(row)
    }
  }
  this.toggleGrid = function(){
    if ($("#show_grid").prop("checked")){
      $(".canvas_cell").css("border","1px solid silver");
    }else{
      $(".canvas_cell").css("border","none");
    }
  }
  this.serialize = function(){
    var matrix = [];
    for (var i = 0; i < this.rows; i++){
      var row_storage = [];
      $("#row_"+i+"> span").each(function(){
         row_storage.push($(this).attr("painted"));
      });
      matrix.push(row_storage);
    }
    return { 
      "matrix" : matrix, 
      "width" : this.cols, 
      "height" : this.rows, 
    }
  }
}
$("#cols").change(function(){
  var cols = $(this).val()
  c.initialize(cols, c.rows);
});
$("#rows").change(function(){
  var rows = $(this).val()
  c.initialize(c.cols, rows);
});

$('document').ready(function(){
  $("#create_your_own").click(function(){
    event.preventDefault();
    
    $("#draw_protector").show();
    $("#overlay > .close").html("CANCEL");
    $("#overlay").show();
    $("#draw").show();
    $("#final_image").hide();
  });
  $("#overlay > .close").click(function(){
    $("#draw").hide();
  });
  
  c = new GridCanvas()
  brush_tools = new BrushTools();
  c.initialize($("#cols").val(), $("#rows").val());
  $("#show_grid").change(function(){
    c.toggleGrid();
  });
  $("#drawing_finished").click(function(){
     
    window.custom_pattern = c.serialize();
    preview_controller.from_matrix(window.custom_pattern)
   $('.patterns').attr("current_pattern", "");
   $('#drawing_finished').prop("disabled", false);
   $('#drawing_finished').html("DONE");
   $("#draw_protector").css("background", "none");
   $("#draw").hide();
   $("#overlay").hide();
   console.log(window.custom_pattern)
  });
  
});
window.custom_pattern = "";

$('#drawing_finished').click(function(){
// $("#draw_protector").css("background", "url(img/loading.gif)");
// $(this).prop("disabled", true);
// $(this).html("Workin'...");
// $.ajax({
//   type: "POST",
//   url: NEW_PATTERN_URL,
//   data: { json : JSON.stringify(c.serialize()) }, 
// }).done(function( msg ) {
//   $('#drawing_finished').prop("disabled", false);
//   $('#drawing_finished').html("DONE");
//   $("#draw_protector").css("background", "none");
//   var error = msg.match(/ERR/ig);
//   if (error){ 
//     alert( "There was an error processing your request ");
//     return
//   }
//   $("#draw").hide();
//   $("#overlay").hide();
//   var parts = msg.split("\n")
//   window.custom_pattern = "http://i.asdf.us/patterns/"+parts[0]
//   $('#sample').css("background", "url("+window.custom_pattern+")");
// })
  
});