/* HTML5 Canvas で drag&drop その2
 * ドラッグ中のみ、dtest2.mspfで指定した間隔でCanvas更新
 */
var dtest2 = {}; // namespace

(function($) {

/* 定数 */
dtest2.con = {
  id: { // id名
    cvm: 'cv2',  // main Canvas
    cvdiv: 'cvdiv2',  // main Canvasのdiv
    msgdiv: 'msg2',  // メッセージ表示div
    stbtn: 'stbtn2'  // スタートボタン
  },
  msg: { // 表示メッセージ
    candr: 'ドラッグできます',
    dring: 'ドラッグ中',
    leave: 'ポインタがCanvasから外れたので<br>ドロップしました',
    pushb: 'スタートボタンを押してください'
  },
  btnmsg: { // ボタン表示メッセージ
    start: 'スタート',
    stop: 'ストップ'
  },
  dtype: { // 図形のタイプ
    cir: 'circle', // 円
    tri: 'triangle', // 三角形
    squ: 'square'  // 正方形
  }
};

/* グローバル変数 */
// drag状態
dtest2.drag = {
  now: false, // ドラッグ状態ならtrue
  item: null  // ドラッグしているアイテムのitemArのindex
};
dtest2.gamestart = false;  // 実行中ならtrue
dtest2.timeoutID;  // タイマー用ID
var fps = 24; // 1秒あたりのフレーム数
dtest2.mspf = 1000 / fps;  // フレーム表示間隔(ミリ秒)

/* スタートボタンを押した場合の処理
 * return なし
 */
dtest2.start = function() {
  var $cvdiv = $('#' + dtest2.con.id.cvdiv); // main Canvasのdiv
  var $btn = $('#' + dtest2.con.id.stbtn); // スタートボタン
  if (!dtest2.gamestart) { // 停止中の場合
    // canvasにイベント付与
    $cvdiv.mousedown(dtest2.cvmsDown);
    $cvdiv.mouseup(dtest2.cvmsUp);
    $cvdiv.mouseleave(dtest2.cvmsUp);
    $cvdiv.mousemove(dtest2.cvmsMove);
    // canvas初期化
    dtest2.DRAG.init();
    dtest2.DRAG.draw();
    
    dtest2.gamestart = true;
    dtest2.showmsg(dtest2.con.msg.candr);
    $btn.text(dtest2.con.btnmsg.stop);
  } else { // 実行中の場合
    // 画面更新停止
    if (dtest2.timeoutID) {
      window.clearInterval(dtest2.timeoutID);
    }
    // イベント削除
    $cvdiv.unbind('mousedown', dtest2.cvmsDown);
    $cvdiv.unbind('mouseup', dtest2.cvmsUp);
    $cvdiv.unbind('mouseleave', dtest2.cvmsUp);
    $cvdiv.unbind('mousemove', dtest2.cvmsMove);
    
    dtest2.gamestart = false;
    dtest2.showmsg(dtest2.con.msg.pushb);
    $btn.text(dtest2.con.btnmsg.start);
  }
};

/* 画面更新
 * return なし
 */
dtest2.update = function() {
  if (dtest2.drag.now) {
    dtest2.DRAG.draw();
  }
};

/* メッセージ表示
 * {string} msg 表示するメッセージ
 * return なし
 */
dtest2.showmsg = function(msg) {
  $('#' + dtest2.con.id.msgdiv).html(msg);
};

/* Canvasでmousedown時に行われる処理
 * {event} evt イベントオブジェクト
 * return なし
 */
dtest2.cvmsDown = function(evt) {
  if (!dtest2.drag.now) {
    // ポインタ座標をCanvas座標へ変換
    var cx = evt.pageX - dtest2.DRAG.cvpos.x;
    var cy = evt.pageY - dtest2.DRAG.cvpos.y;
    // ポインタ座標内にドラッグ可能なアイテムがあるかチェック
    var itemIdx = dtest2.DRAG.checkItem(cx, cy);
    if (itemIdx != null) {
      // 一定時間ごとに画面更新
      dtest2.timeoutID = window.setInterval("dtest2.update()", dtest2.mspf);
      
      dtest2.drag.now = true;
      dtest2.drag.item = itemIdx;
      dtest2.showmsg(dtest2.con.msg.dring);
    }
  }
  return false;
};
/* Canvasでmouseup/mouseleave時に行われる処理
 * {event} evt イベントオブジェクト
 * return なし
 */
dtest2.cvmsUp = function(evt) {
  if (dtest2.drag.now) {
    // ポインタ座標をCanvas座標へ変換
    var cx = evt.pageX - dtest2.DRAG.cvpos.x;
    var cy = evt.pageY - dtest2.DRAG.cvpos.y;
    if (cx < 0) cx = 0;
    if (cx > dtest2.DRAG.area.w) cx = dtest2.DRAG.area.w;
    if (cy < 0) cy = 0;
    if (cy > dtest2.DRAG.area.h) cy = dtest2.DRAG.area.h;
    // 画面更新停止
    if (dtest2.timeoutID) {
      window.clearInterval(dtest2.timeoutID);
    }
    // アイテムの座標をグリッドの中央にセット
    dtest2.DRAG.setCenter(dtest2.drag.item, cx, cy);
    // 画面更新
    dtest2.DRAG.draw();
    
    dtest2.drag.now = false;
    dtest2.drag.item = null;
    if (evt.type == 'mouseleave'){
      dtest2.showmsg(dtest2.con.msg.leave);
    } else if (dtest2.gamestart) {
      dtest2.showmsg(dtest2.con.msg.candr);
    }
  }
};
/* Canvasでmousemove時に行われる処理
 * {event} evt イベントオブジェクト
 * return なし
 */
dtest2.cvmsMove = function(evt) {
  if (dtest2.drag.now) {
    // ポインタ座標をCanvas座標へ変換
    var cx = evt.pageX - dtest2.DRAG.cvpos.x;
    var cy = evt.pageY - dtest2.DRAG.cvpos.y;
    // アイテムの座標更新
    dtest2.DRAG.itemAr[dtest2.drag.item].x = cx;
    dtest2.DRAG.itemAr[dtest2.drag.item].y = cy;
  }
  return false;
};

/* body onload時の処理 */
$(window).load(function() {
  // canvasのDOM elementとcontext取得
  var canvas = document.getElementById(dtest2.con.id.cvm);
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 1;
  ctx.globalAlpha = 0.7;
  ctx.globalCompositeOperation = "source-over";

  // 画面表示
  dtest2.DRAG = new dtcom.canv(ctx, canvas.width, canvas.height, dtest2);
  dtest2.DRAG.init();
  dtest2.DRAG.draw();

  // イベント付与
  // ドラッグ中にボタンが押されることを防ぐため、
  // clickではなくmousedownイベントを付与
  var $btn = $('#' + dtest2.con.id.stbtn); // スタートボタン
  $btn.mousedown(dtest2.start);
  $btn.text(dtest2.con.btnmsg.start);
  
  // メッセージ表示
  dtest2.showmsg(dtest2.con.msg.pushb);
});


})(jQuery);