$(function() {
	$('a.photo_close').each(
		function() {
			$(this).click(
				function() {
					deletePicture(this);
					return false;
				}
			);
		}
	);
});

function deletePicture(target) {

	var id = $(target).attr('target');
	$('#delete').hide();
	$('#preview').hide();
	if($('#picture').hasClass('pictureCommentPc')) {
		$('#fileSelected').removeClass('incimg');
		$('#divFileSelected').removeClass('file');
		$('#ddFileSelected').addClass('file');
		$('#picturePath'+id).val("");
	}
	if($('#picture').hasClass('pictureCommentSp')){
		$('#divFileSelected').removeClass('kuchikomi_photo');
		$('#divFileSelected').addClass('button_camera');
		$('#iframe-content').removeClass('iframe-content-picture');
		$('#iframe-content').addClass('iframe-content');
		$('#photoimg').show();
		$('#picture').show();
		$('#picturePath'+id).val("");
	}
	if($('#picture').hasClass('pictureProfile')){
		$('#picturePath'+id).val("/image/no_img_120user.png");
		$('#preview'+id).attr('src', 'https://cdn1.cookingschool.jp/image/no_img_120user.png');
		thumbnailResize(id);
		$('#preview'+id).show();
	}
	hidePictureEdit(id);
	$('#temporaryPicture'+id).val(true);


}

var size = 0;
var angle = 0;
var targetId = "";
var targetform = "";
var context = "";
var progress = false;
$(document).ready(function() {

	// プレビュー・編集を行うため画像をアップロード
	$('.picture').bind('change', function() {
		var file;
		try {
			file = this.files[0];
		} catch(e) {
			file = this.value;	// ie8
		}
		if (!file) {
			return;
		}

		targetId = $(this).attr('target');
		targetform = $(this).attr('targetform');
		size = parseInt($('#size'+targetId).val());
		//画像回転時にプログレスor「処理中・・・」を切り替える
		try{
			if ($('#progress'+targetId).val() == 'true') {
				progress = true;
			}
		} catch (e) {
		}

		//SPのコメント編集はプログレス表示する前に画像選択ボタンを隠す
		if($('#picture'+targetId).hasClass('pictureCommentSp')){
			$('#photoimg').hide();
		}

		// プログレス表示
		showProgress($('#previewParent'+targetId));

		// 選択画像の表示
		$('#submitButton'+targetId).prop('disabled', true);	// 途中でボタンを押されると画像パスがテンポラリのままになるめ
		try {
			$('#' + targetform).ajaxSubmit({
				url: '/do/common/picture/upload',
				type: 'POST',
				dataType: 'json',
				success: function(json) {
					if (!json[0].temporaryPicturePath) {
						alert('画像のアップロードでエラーが発生しました。もう一度アップロードして下さい。');
						return;
					}

					try {
						$('#picturePath'+targetId).val(context + json[0].temporaryPicturePath);	// 商品画像にアップロードした画像のパスを指定
						$('#temporaryPicture'+targetId).val(false);								// 画像選択済み(保存対象)セット
						resetPicture(json[0].temporaryPicturePath, targetId);
						$('#preview'+targetId).show();	//削除されている場合がある為表示する
						if($('#picture'+targetId).hasClass('pictureCommentPc')) {
							//PCコメントフォーム 画像編集(回転)用のCalssに変更
							$('#fileSelected').addClass('incimg');
							$('#ddFileSelected').removeClass('file');
							$('#divFileSelected').addClass('file');
						}else if($('#picture'+targetId).hasClass('pictureCommentSp')){
							//SPコメントフォーム  画像編集(回転)用のCalssに変更
							$('#photoimg').hide();
							$('#picture').hide();
							$('#divFileSelected').removeClass('button_camera');
							$('#divFileSelected').addClass('kuchikomi_photo');
							$('#iframe-content').removeClass('iframe-content');
							$('#iframe-content').addClass('iframe-content-picture');
						}
						$('#delete').show();
						showPictureEdit(targetId);
					} catch(e) {
						sendErrorLog(e);
					}
				},
				complete: function() {
					var src = $('#preview'+targetId).attr('src');
					$('#picture'+targetId).val('');	// 二度目に反応しないため
					$('#preview'+targetId).attr('src', src);
					$('#submitButton'+targetId).prop('disabled', false);
					//$('#deletePicture'+targetId).remove();
					hideProgress();
				},
				error: function(request, status, e) {
					sendErrorLog(e);
				}});
		} catch (e) {
			sendErrorLog(e);
		}
	});

	// 画像回転処理
	try {
		$('#preview'+targetId).crossOrigin = "Anonymous";

		// 回転クリックにより実行
		$('.rotate').bind('click', function() {

			//非活性時は処理しない
			if($('.rotate').hasClass('disable')){
	 			return false;
			}
			targetId = $(this).attr('target');
			targetform = $(this).attr('targetform');

			size = parseInt($('#size'+targetId).val());
			$('#temporaryPicture'+targetId).val(false);	// キャンセル時に画像回転した場合保存対象FLGをセット

			if(progress){
				showProgress($('#previewParent'+targetId));
			}else{
				showWait($('#previewParent'+targetId));
			}

			angle = parseInt($('#angle'+targetId).val());
			var __angle = parseInt($(this).attr('angle'));
			angle += __angle;
			$('#angle'+targetId).val(angle);
			//回転処理をタイマーで呼び出し（処理中を表示する為）
			setTimeout('rotePicture(angle,targetId)',100);
 			return false;
 		});

	} catch(e) {
		//console.log(e);
	}
});

//画像回転処理(処理中を表示する為タイマーで呼び出される)
function rotePicture(angle, targetId) {
	if(progress){
		showProgress($('#previewParent'+targetId));
	}else{
		showWait($('#previewParent'+targetId));
	}

	editPicture({
		brightness: 0,
		contrast: 0,
		angle: angle,
		targetId:targetId
	});
}

//画像編集(回転)処理
var isEdit = false;
function editPicture(param) {
	isEdit = true;

	var path = $('#picturePath'+param.targetId).val();
	if(path.indexOf(context)){
		// コンテキスト未指定時は付与する
		path = context + path;
	}

	// angleの指定は絶対値とする為、回転時は元(temp)画像で初期化する
	$('#preview'+param.targetId).attr('src', path);

	try {
		var img = new Image();
		img.src = document.getElementById('preview'+param.targetId).src;

		//回転しない(360度の倍数)場合は、元画像を表示
		if (param.angle % 360 == 0) {
			if (!img) {
				if(progress){
					hideProgress();
				}else{
					removeWait();
				}
				return;
			}
			document.getElementById('preview'+param.targetId).src = img.src;

			if(progress){
				hideProgress();
			}else{
				removeWait();
			}
			thumbnailResize(param.targetId);
			return;
		}

		//画像回転処理
		Pixastic.process(
			img,
			"rotate",
			{
				angle: param.angle
			},
			function(res) {
				if (!res) {
					return;
				}
				document.getElementById('preview'+param.targetId).src = res.toDataURL();
				thumbnailResize(param.targetId);
				if(progress){
					hideProgress();
				}else{
					removeWait();
				}
			}
		);
	} catch(e) {
		//console.log(e);
	}

}


//元画像表示処理
function resetPicture(imgSrc, targetId) {
	$('#preview'+targetId).attr('src', context+imgSrc);
	angle = 0;
	$('#angle'+targetId).val(angle);
	thumbnailResize(targetId);
}

//サムネイル画像のリサイズ処理
function thumbnailResize(targetId) {
    var img = new Image();
    img.src = $('#preview'+targetId).attr('src');
    size = parseInt($('#size'+targetId).val());

	// 回転するときにチラつくので非表示にする
	$('#preview').css('opacity','0');

    img.onload = function() {
	    var wdt = img.width;
	    var hgt = img.height;
		var scaleX = wdt / size;
		var scaleY = hgt / size;
		// 画像の表示を戻す
		$('#preview').css('opacity','1');

		if (scaleX > 1 || scaleY > 1) {
			var scale = (scaleX > scaleY) ? scaleX : scaleY;
			$('#preview'+targetId).width(wdt / scale);
			$('#preview'+targetId).height(hgt / scale);
//alert("4-3-3\n"+ "scaleX:" + scaleX + "/scaleY:" + scaleY + "/scale:" + scale + "/wdt:" + wdt + "/hgt:" + hgt );
		}else{
			$('#preview'+targetId).width(wdt);
			$('#preview'+targetId).height(hgt);
		}
	}
}

//回転用編集フィールド表示
function showPictureEdit(targetId) {
	if (!isCanvasSupporte()) {
		return;
	}
	$('#pictureEdit'+targetId).fadeIn();
}

//回転用編集フィールド非表示
function hidePictureEdit(targetId) {
	$('#pictureEdit'+targetId).hide();
}


//コメントサブミット時の画像保存処理(SP)
function onCommentSubmitSP(id, formid) {
	targetId = id;
	targetform = formid;

	var val = $('#commentTextarea').val();
	if(val.length==0){
		alert('投稿内容を入力してください');
		return false;
	}
	var result = onSubmit(id, formid);

	return result;
}

//つくれぽ投稿サブミット時の画像保存処理(SP)
function onTsukurepoSubmit(id, formid) {
	targetId = id;
	targetform = formid;

	var val = $('#commentTextarea').val();
	if(val.length==0){
		alert('テキストを入力してください');
		return false;
	}
	var path = $('#picturePath').val();
	if(path.length==0){
		alert('投稿画像を設定してください');
		return false;
	}
	var result = onSubmit(id, formid);

	return result;
}

//サブミット時の画像保存処理
function onSubmit(id, formid) {
	targetId = id;
	targetform = formid;

	var result = uploadPicture(
		true,
		targetId,
		$('#temporaryPicture'+targetId).val(),
		false,/*同期登録*/
		function() {
			$('#'+targetform).attr('onsubmit', '');
			$('#'+targetform).submit();
			return false;
		}
	);
	if (!result) {
		return true;
	}
	return false;
}


// 各種登録時に利用する画像をアップロード
function uploadPicture(hideProgress, targetId, temporaryPicture, sync, complete) {
	if (!isCanvasSupporte()) {
		return false;
	}
	if (temporaryPicture == 'true') {
		return false;
	}
	try {
		uploadPictureBase64(
			$('#preview'+targetId),
			targetId,
			hideProgress,
			sync,
			function(picturePath) {
				// ブラウザによっては確認ページで編集後の画像が表示されないため、画像パスを都度新しくする
				$('#picturePath'+targetId).val(picturePath);	// アップロードした画像のパスを指定
				//バリデーションエラー後に、再度保存しない様に修正
				$('#temporaryPicture'+targetId).val(true);
			},
			function() {
			},
			function() {
				complete();
			});
	} catch (e) {
		sendErrorLog(e);
	}

	// プログレスを表示するため、ajax処理が完了後にsubmitする
	return true;
}

//画像をbase64でアップロード
function uploadPictureBase64(img, targetId, hide, sync, success, error, complete) {
	if (!isCanvasSupporte()) {
		throw new Error('Canvas is not supported');
	}
	showProgress();
	var canvas = document.getElementById('canvas'+targetId);
	//var canvas = document.createElement("canvas");
    var newImg = new Image();
    newImg.onload = function() {
		canvas.width = newImg.width;
		canvas.height = newImg.height;

		var ctx = canvas.getContext('2d');
		try {
			var scaleX = canvas.width / 1024;
			var scaleY = canvas.height / 1024;
			if (scaleX > 1 || scaleY > 1) {
				var scale = (scaleX > scaleY) ? scaleX : scaleY;
				canvas.width = canvas.width / scale;
				canvas.height = canvas.height / scale;
			}
			ctx.drawImage(newImg, 0, 0, newImg.width, newImg.height, 0, 0, canvas.width, canvas.height);
		} catch (e) {
			ctx.drawImage(newImg, 0, 0);
		}

		var dataUrl = canvas.toDataURL('image/jpeg');

		$.ajax({
			url: '/do/common/picture/uploadBase64',
			type: 'POST',
			data: {
				temporaryPicturePath: $('#picturePath'+targetId).val(),
				uploadDirectory:$('#uploadDirectory'+targetId).val(),
				uniqueId:$('#uniqueId'+targetId).val(),
				subUniqueId:$('#subUniqueId'+targetId).val(),
				dirCorrection:$('#dirCorrection'+targetId).val(),
				noneRename:$('#noneRename'+targetId).val(),
				picture: dataUrl,
				isEdit: isEdit
			},
			async: sync,
			cache: false,
			success: function(json) {
				success(json[0].temporaryPicturePath);
			},
			complete: function() {
				if(hide){
					hideProgress();
				}
				complete();
			}
		});
    }
    newImg.src = img.attr('src');
}

// 「処理中・・・」表示
function showWait(target) {
	removeWait();
	if (!target) {
		return;
	}
	target
		.append(
			$('<img />')
				.attr('id', 'wait_img')
				.attr('src', context + '/image/wait.png')
				.css('position', 'absolute')
				.css('top', (target.height() - 48) / 2 )
				.css('left',(target.width()) / 2)
				.css('width', 128)
				.css('height', 48)
				.css('z-index', 2)
				.css('opacity', 1));
}

// 「処理中・・・」非表示
function removeWait() {
	try {
		$('#wait_img').remove();
	} catch(e) {
	}
}

// プログレス表示
function showProgress(target) {
	removeProgress();
	if (!target) {
		showProgressBody();
		return;
	}
	target
		.append(
			$('<img />')
				.attr('id', 'progress_animation')
				.attr('src', context + '/image/progress68.gif')
				.css('position', 'absolute')
				.css('top', (target.height() - 68) / 2)
				.css('left', (target.width() - 68) / 2)
				.css('width', 68)
				.css('height', 68)
				.css('z-index', 2)
				.css('opacity', 1));
}

function showProgressBody() {
	removeProgress();
	$('body')
		.append(
			$('<img />')
				.attr('id', 'progress_animation')
				.attr('src', context + '/image/progress68.gif')
				.css('position', 'absolute')
				.css('top', jQuery(window).scrollTop() + (jQuery(window).height() - 68) / 2)
				.css('left', (jQuery(window).width() - 68) / 2)
				.css('width', 68)
				.css('height', 68)
				.css('z-index', 2)
				.css('opacity', 1));
}

// プログレス非表示
function removeProgress() {
	try {
		$('#progress_animation').remove();
	} catch(e) {
	}
}
function hideProgress() {
	try {
		$('#progress_animation').fadeOut().queue(function(){
			try {
				this.remove()
			} catch(e) {
			}
		});
	} catch(e) {
	}
}

// キャンバスのサポート状況を返す
// ie10以前は画像回転処理を行わない
 function isCanvasSupporte() {
	var canvas = document.getElementById('canvas');
	if (!canvas || !canvas.getContext) {
		return false;
	}
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf('msie') != -1) {
		return false;
	}
	return true;
}

function sendErrorLog(e) {
	 removeProgress();
	alert("画像の取り込み中にエラーが発生しました。")
}