var contextMainCanvas = null;

function colorClickDivergence(color){
	contextMainCanvas.strokeStyle = color;
}

function weightClickDivergence(weight){
	contextMainCanvas.lineWidth = weight;
}

Event.observe(window, 'load', function(){

	var clickFlag = false;
	var innerFlag = false;

	// ----------------
	// 定数宣言
	// ----------------

	var NOTICE_CLASS_NAME    = 'notice';
	var NOTICE_COUNT         = 3;
	var NOTICE_INTERVAL_TIME = 500;

	var CANVAS_BW = container['CANVAS_BW'];
	var CANVAS_BH = container['CANVAS_BH'];

	// ----------------
	// 変数初期化
	// ----------------

	var confMemorySize = parseInt(readArgs('confMemorySize'));

	var imageList         = returnArray1(confMemorySize);
	var imageListIterator = 0;
	var imageListLower    = 0;
	var imageListUpper    = 0;
	var imageListLen      = imageList.length;

	var idCanvas             = container['idCanvas'];
	var tagMainCanvas        = container['tagMainCanvas'];
	var idButtonUndo         = $('button-undo');
	var idButtonRedo         = $('button-redo');
	var idButtonClear        = $('button-clear');
	var idSettingForm        = $('setting-form');
	var idUserName           = $('user-name');
	var idLoginPasswordLabel = $('login-password-label');
	var idLoginPassword      = $('login-password');
	var idPublicFlag         = $('public-flag');
	var idAdminPassword      = $('admin-password');
	var idDataURLMain        = $('data-url-main');

	var formIdUserName      = new Form(idUserName);
	var formIdLoginPassword = new Form(idLoginPassword);
	var formIdAdminPassword = new Form(idAdminPassword);

	contextMainCanvas = container['contextMainCanvas'];

	var tagCanvasW = container['tagCanvasW'];
	var tagCanvasH = container['tagCanvasH'];

	var tagCanvasPointX;
	var tagCanvasPointY;

	setCanvasPoint();

	imageList[imageListIterator] = contextMainCanvas.getImageData(0, 0, tagCanvasW, tagCanvasH);

	// ----------------
	// 関数定義
	// ----------------

	function setCanvasPoint(){
		tagCanvasPointX = idCanvas.offsetLeft + CANVAS_BW;
		tagCanvasPointY = idCanvas.offsetTop  + CANVAS_BH;
	}

	function terminateCanvas(){

		imageListIterator = (imageListIterator + 1) % imageListLen;
		imageListUpper    = imageListIterator;

		if(imageListUpper == imageListLower){
			imageListLower = (imageListLower + 1) % imageListLen;
		}

		imageList[imageListIterator] = contextMainCanvas.getImageData(0, 0, tagCanvasW, tagCanvasH);

		checkButtonStatus();

	}

	function undoRedoProcess(ili){

		imageListIterator = ili;

		contextMainCanvas.putImageData(imageList[imageListIterator], 0, 0);

		checkButtonStatus();

	}

	function checkButtonStatus(){
		idButtonUndo.disabled = (imageListIterator != imageListLower) ? '' : 'disabled';
		idButtonRedo.disabled = (imageListIterator != imageListUpper) ? '' : 'disabled';
	}

	// ----------------
	// イベント定義
	// ----------------

	Event.observe(window, 'resize', function(){	setCanvasPoint();	});

	Event.observe(idButtonUndo, 'click', function(){

		if(imageListIterator != imageListLower){
			undoRedoProcess((imageListIterator + imageListLen - 1) % imageListLen);
		}

	});

	Event.observe(idButtonRedo, 'click', function(){

		if(imageListIterator != imageListUpper){
			undoRedoProcess((imageListIterator + 1) % imageListLen);
		}

	});

	Event.observe(idButtonClear, 'click', function(){

		contextMainCanvas.clearRect(0, 0, tagCanvasW, tagCanvasH);

		terminateCanvas();

	});

	Event.observe(tagMainCanvas, 'mousedown', function(e){ if(!clickFlag){

		var x = e.pageX - tagCanvasPointX;
		var y = e.pageY - tagCanvasPointY;

		contextMainCanvas.beginPath();
		contextMainCanvas.moveTo(x, y);

		clickFlag = true;
		innerFlag = true;

	}});

	Event.observe(window, 'mousemove', function(e){ if(clickFlag){

		var x = e.pageX - tagCanvasPointX;
		var y = e.pageY - tagCanvasPointY;

		if(innerFlag){

			contextMainCanvas.lineTo(x, y);
			contextMainCanvas.stroke();

			innerFlag = (x >= 0 && x < tagCanvasW && y >= 0 && y < tagCanvasH);

		}else if(x >= 0 && x < tagCanvasW && y >= 0 && y < tagCanvasH){

			contextMainCanvas.lineTo(x, y);
			contextMainCanvas.stroke();

			innerFlag = true;

		}else{

			contextMainCanvas.moveTo(x, y);

		}

	}});

	Event.observe(window, 'mouseup', function(e){ if(clickFlag){

		contextMainCanvas.closePath();

		clickFlag = false;
		innerFlag = false;

		terminateCanvas();

	}});

	Event.observe(idPublicFlag, 'click', function(){

		if(idPublicFlag.checked){
			formIdLoginPassword.stopNotice();
			idLoginPassword.disabled       = 'disabled';
			idLoginPasswordLabel.className = 'disabled';
		}else{
			idLoginPassword.disabled       = '';
			idLoginPasswordLabel.className = '';
		}

	});

	Event.observe(idSettingForm, 'submit', function(e){

		var vUserName      = idUserName.value;
		var vLoginPassword = idLoginPassword.value;
		var vAdminPassword = idAdminPassword.value;
		var okFlag         = true;

		if(vUserName.trim() == ''){
			okFlag = formIdUserName.startNotice(NOTICE_CLASS_NAME, NOTICE_COUNT, NOTICE_INTERVAL_TIME);
		}

		if(!idPublicFlag.checked && vLoginPassword.trim() == ''){
			okFlag = formIdLoginPassword.startNotice(NOTICE_CLASS_NAME, NOTICE_COUNT, NOTICE_INTERVAL_TIME);
		}

		if(vAdminPassword.trim() == ''){
			okFlag = formIdAdminPassword.startNotice(NOTICE_CLASS_NAME, NOTICE_COUNT, NOTICE_INTERVAL_TIME);
		}

		if(okFlag){
			idDataURLMain.value = tagMainCanvas.toDataURL();
		}else{
			Event.stop(e);
		}

	});

	// ----------------

});