function Preview(){
  var that = this;
  this.preview_div = document.querySelectorAll('#sample')[0];
//  this.canvas = document.querySelectorAll('canvas')[0]
//  this.ctx = this.canvas.getContext('2d');
  this.pat = ""
  this._fill_preview = function(pat){
    this.preview_div.style.background = 'url('+pat+')'
  }
//{{{  
//  this._fill_preview = function(pat){
//    that.ctx.fillStyle = that.ctx.createPattern(pat, "repeat")
//    that.ctx.fillRect(
//      0, 0,
//      that.canvas.width,
//      that.canvas.height
//    )
//  }
// }}} 
  this.from_matrix = function(data){
    var pat = document.createElement("canvas");
    pat.height = data.height
    pat.width = data.width
    var pat_ctx = pat.getContext('2d')
    for (var h = 0; h< data.height; h++){
      for (var i = 0; i < data.width; i++){
        if (parseInt(data.matrix[h][i])){
          pat_ctx.fillRect(i, h, 1, 1)
        }else{
          pat_ctx.clearRect(i, h, 1, 1)
        }
      }
    }
    
    that._fill_preview(pat.toDataURL())
  }
  this.from_image = function(url){
    var pat = document.createElement("img");
    pat.src = url
    pat.onload = function(){
      that._fill_preview(pat.src)
    }
  }
}
$(document).ready(function(){
  window.preview_controller = new Preview()
})