
function init(){

function runProcessor(){
  $('#edited').attr('src', '#');
  var pm = PixelManager(canvas);
  po('loaded image');

  po('searching for text bubbles...');
  var groups = pm.getContiguousWhite();
  po(groups.length + ' groups found')
  groups = pm.vetGroups(groups);
  po(groups.length + ' groups vetted');

  po('replacing text bubbles...');
  pm.replaceGroups(groups, fillImg);
  po('done!');

  var editedTag = document.getElementById('edited');
  var dataURL = canvas.toDataURL();
  editedTag.src = dataURL;
  $('#loading').hide();
}

function autoFill(){
  $('#loading').show();
  if (imagesReady > 2){
    throw "image state got broken";
  } else if (imagesReady == 2){
    setTimeout(runProcessor, 10);
  } else {
    setTimeout(autoFill, 1);
  }
}

function loadImages(){
  $('#loading').hide();
  imagesReady = 0;

  // trigger onload funcs
  comicImg.src = comicSrc;
  fillImg.src = fillSrc;

  // call autofill here someday
}

function handleImage(e, callback){
  var reader = new FileReader();
  reader.onload = function(event){
      callback(event.target.result);
  }
  reader.readAsDataURL(e.target.files[0]);
}

function loadComicDate(comicDate){
  var comicDateStr = comicDate.strftime("%Y-%m-%d");
  comicSrc = "https://s3.amazonaws.com/reddick/" + comicDateStr + ".gif";
  loadImages(canvas);
}

function readComicDate(){
  var comicDateStr = readUrlParam("date");
  if (comicDateStr){
    var s = comicDateStr.split('-');
    var comicDate = new Date(s[0], s[1]-1, s[2]);
    $datepicker.datepicker('setDate', comicDate);
    loadComicDate(comicDate);
  }
}

// on page load
var comicSrc = "img/sampleComic.gif";
var fillSrc = "img/sampleFill.png";
var canvas = document.getElementById("canvas");
var canvasFill = document.getElementById("canvasFill");
var imagesReady = 0;

var comicImg = new Image;
comicImg.crossOrigin = "Anonymous";
comicImg.onload = function() {
  imagesReady += 1;
  canvas.width = comicImg.width;
  canvas.height = comicImg.height;
  canvas.getContext("2d").drawImage(comicImg, 0, 0);
  $('#comic').attr('src', canvas.toDataURL());
};

var fillImg = new Image;
fillImg.crossOrigin = "Anonymous";
fillImg.onload = function() {
  imagesReady += 1;
  canvasFill.width = fillImg.width;
  canvasFill.height = fillImg.height;
  canvasFill.getContext("2d").drawImage(fillImg, 0, 0);
  $('#fill').attr('src', canvasFill.toDataURL());
  // credit for idea: https://github.com/scottcheng/cropit/issues/118
};
fillImg.src = fillSrc;

var $datepicker = $("#datepicker");
$datepicker.datepicker({
  minDate: new Date(2014, 4, 28),
  maxDate: 0 // 0 days from today
});
var comicDateStr = readUrlParam("date");
if (comicDateStr){
  var s = comicDateStr.split('-');
  var comicDate = new Date(s[0], s[1]-1, s[2]);
  $datepicker.datepicker('setDate', comicDate);
  loadComicDate(comicDate);
}

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', function(e){
  handleImage(e, function(newcomicSrc){
    comicSrc = newcomicSrc;
    window.history.pushState({}, "", "?");
    $datepicker.datepicker('setDate', "");
    // ^ only work because this doesnt trigger dp.change
    loadImages();
  });
}, false);
var fillLoader = document.getElementById('fillLoader');
fillLoader.addEventListener('change', function(e){
  handleImage(e, function(newFillSrc){
    fillSrc = newFillSrc;
    loadImages();
  });
}, false);

function readDatepicker(){
  var comicDate = new Date($datepicker.datepicker('getDate'));
  window.history.pushState({}, "", "?date=" + comicDate.strftime("%Y-%m-%d"));
  readComicDate();
}
function previousComic(){
  var date = $datepicker.datepicker('getDate');
  if (date){
    date.setTime(date.getTime() - (1000*60*60*24))
    $datepicker.datepicker("setDate", date);
    readDatepicker();
  }
}
function nextComic(){
  var date = $datepicker.datepicker('getDate');
  if (date){
    date.setTime(date.getTime() + (1000*60*60*24))
    $datepicker.datepicker("setDate", date);
    readDatepicker();
  }
}

$datepicker.datepicker().on('change', readDatepicker);
$('#next').on("click", nextComic);
$('#prev').on("click", previousComic);
$('#next').on("click", nextComic);
$('#prev').on("click", previousComic);

document.onkeydown = function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
       // left arrow
       previousComic();
    }
    else if (e.keyCode == '39') {
       // right arrow
       nextComic();
    }
}

$(window).bind("popstate", readComicDate);  //Back button
$(window).bind("pushstate", readComicDate); //Forward button, OR window.history.pushState()

$('#autoFill').on('click', function(){
  autoFill();
});

loadImages();

}

@@ -4136,82 +4136,8 @@
 ic);
-%0A$('#next').on(%22click%22, nextComic);%0A$('#prev').on(%22click%22, previousComic);
 %0A%0Ado

fix dupe code