var osapi = osapi || {};

(function(){

	function getDiv(callback) {
		var id = 'osapi-dialog-box';
		var div = document.getElementById(id);
		if (!div) {
			div = document.createElement('div');
			div.id = id;
			div.style.position = 'absolute';
			div.style.left = div.style.top = '50%';
			setTimeout(function() {
				document.body.appendChild(div);
				callback(document.getElementById(id));
			}, 0);
		} else {
			callback(div);
		}
	}

	function getUploaderHTML(from) {
		var st = creyle.getSecurityToken(from);
		var rpcUrl = creyle.getRpcUrl(from);

		return [
			'<div ',
				'style="width:300px;height:100px;position:absolute;',
				'left:-150px;top:-50px;border:1px solid gray;',
				'background-color:black;color:white"',
			'>',
				'<iframe name="upload" ',
					'style="width:0px;height:0px;visibility:hidden;" ',
				'>',
				'</iframe>',
				'<form id="osapi-form" ',
					'action="',
					rpcUrl,
					'?st=',
					encodeURIComponent(st),
					'#',
					from,
					'" ',
					'method="post" target="upload" enctype="multipart/form-data" ',
					'style="text-align:center;"',
				'>',
					'<p>アップロードするファイルを選択してください</p>',
					'<input type="file" name="upload_file" />',
					'<input type="button" name="cancel" value="キャンセル" />',
					'<input type="hidden" name="request" value="" />',
					'<input type="hidden" name="callback" value="uploaded"',
				'</form>',
			'</div>'
		].join('');
	}

	function getUpdateHTML(from) {
		var st = creyle.getSecurityToken(from);
		var rpcUrl = creyle.getRpcUrl(from);

		return [
				'<iframe name="upload" ',
					'style="width:0px;height:0px;visibility:hidden;" ',
				'>',
				'</iframe>',
				'<form id="osapi-form" ',
					'action="',
					rpcUrl,
					'?st=',
					encodeURIComponent(st),
					'#',
					from,
					'" ',
					'method="post" target="upload" enctype="multipart/form-data" ',
					'style="visibility:hidden;"',
				'>',
					'<input type="hidden" name="request" value="" />',
					'<input type="hidden" name="callback" value="uploaded"',
				'</form>'
		].join('');
	}

	function setUploadEvent(div, request, from, callback) {
		div.innerHTML = getUploaderHTML(from);

		var form = document.getElementById('osapi-form');
		form.request.value = gadgets.json.stringify(request);
		form.upload_file.onchange = function() {
			form.submit();
			form.innerHTML = '<p>送信中...</p>';
		};
		form.cancel.onclick = function() {
			gadgets.rpc.unregister('uploaded');
			div.innerHTML = '';
			callback({error: 'upload canceled'});
		};
		gadgets.rpc.register('uploaded', function(result) {
			gadgets.rpc.unregister('uploaded');
			div.innerHTML = '';
			callback(result);
		});
	}

	function execUpdate(div, request, from, callback) {
		div.innerHTML = getUpdateHTML(from);

		gadgets.rpc.register('uploaded', function(result) {
			gadgets.rpc.unregister('uploaded');
			div.innerHTML = '';
			callback(result);
		});

		var form = document.getElementById('osapi-form');
		form.request.value = gadgets.json.stringify(request);
		form.submit();
	}

	osapi.mediaitems._create = function(request, from, callback) {
		getDiv(function(div){
			setUploadEvent(div, request, from, callback);
		});
	};

	osapi.mediaitems._update = function(request, from, callback) {
		getDiv(function(div){
			if (request.params.mediaItem && request.params.mediaItem.url) {
				setUploadEvent(div, request, from, callback);
			} else {
				execUpdate(div, request, from, callback);
			}
		});
	};

	osapi.people._update = function(request, from, callback) {
		getDiv(function(div){
			if (request.params.person.thumbnailUrl &&
					request.params.person.thumbnailUrl.charAt(0) == '@'
				 ) {
				setUploadEvent(div, request, from, callback);
			} else {
				execUpdate(div, request, from, callback);
			}
		});
	};

})();