$(document).ready(function() {
	var _editor = undefined;
	var insert_image = function (data) {
		var show_image = '';
		var link_image = '';
		if (data.thumbnail_path == '') {
			show_image = data.picture_path;
		}
		else {
			show_image = data.thumbnail_path;
			link_image = data.picture_path;
		};
		var inner = '<p>';
		if (link_image == '') {
			inner += '<img src="' + show_image + '" />';
		}
		else {
			inner += '<a href="' + link_image + '" target="_blank"><img src="' + show_image + '" /></a>';
		};
		inner += '</p>';
		_editor.insertHtml(inner);
	};
	document.getElementById('wysiwyg') && $('#wysiwyg').ready(function() {
		var toolbar = [
			['Source','-'],
			['Bold','Italic','Underline','Strike'],
			['Outdent','Indent'],
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
			['Table','HorizontalRule','SpecialChar'],
			'/',
			['TextColor','BGColor'],
			['Font','FontSize'],
			['Maximize','-'],
			['CSI_button','EMOJI_button','KAOMOJI_button']
		];
		_editor = CKEDITOR.replace('wysiwyg', {
			toolbar : toolbar
		});
		_editor.on('pluginsLoaded', function(ev) {
			// 画像貼り付けボタン
			_editor.addCommand('CSI_command', {
				async: true,
				exec: function() {
					$.get('/blog/pictures', {mode: 'list'}, function(json) {
						data = eval('(' + json + ')');
						var count = 0;
						var lines_per_page = 3;
						var elem = undefined;
						$('#your_pictures').empty();
						for (var i in data) {
							var v = data[i];
							if ((count++ % lines_per_page) == 0) {
								elem = document.createElement('tr');
							};
							var def = document.createElement('td');
							$(def).css('border', '1px solid pink');
							var anchor = document.createElement('a');
							$(anchor).attr('href', 'javascript:void(0)');
							$(anchor).attr('picture_id', v.picture_id);
							$(anchor).click(function() {
								$.get('/blog/pictures', {id: $(this).attr('picture_id')}, function(json) {
									var p = eval('(' + json + ')');
									insert_image(p);
									$('#picture_upload_block').dialog('close');
								});
							});
							var image = document.createElement('img');
							$(image).attr('src', v.path);
							var ratio = 100 / v.width;
							$(image).attr('width', v.width * ratio);
							$(image).attr('height', v.height * ratio);
							$(anchor).append(image);
							$(def).append(anchor);
							$(elem).append(def);
							if ((count % lines_per_page) == 0) {
								$('#your_pictures').append(elem);
								elem = undefined;
							};
						}
						if (elem != undefined) {
							$('#your_pictures').append(elem);
							elem = undefined;
						};
					});
					$('#picture_upload_block').dialog('open');
				}
			});
			_editor.ui.addButton('CSI_button', {
				label: '画像',
				command: 'CSI_command'
			});
			// 絵文字ボタン
			_editor.addCommand('EMOJI_command', {
				async: true,
				exec: function() {
					$.get('/blog/pictgram', {t: 'emoji'}, function(json) {
						data = eval('(' + json + ')');
						$('#emoji_dialog_content').empty();
						var title = document.createElement('div');
						$('#emoji_dialog_content').append(title);
						var count = 0;
						for (var i in data) {
							var identifier = 'emoji_dialog_content_' + count++;
							var anchor = document.createElement('a');
							$(anchor).attr('href', 'javascript:void(0)');
							$(anchor).text(i);
							(function() {
								var x = '#' + identifier;
								$(anchor).click(function() {
									$('div.emoji_dialog_content_inner').css('display', 'none');
									$(x).css('display', 'block');
								});
							})();
							$(title).append(anchor);
							if (count % 3 == 0) {
								$(title).append(document.createElement('br'));
							}
							else {
								$(title).append(document.createTextNode(' | '));
							};
							var cont = document.createElement('div');
							if (count > 1) {
								$(cont).css('display', 'none');
							};
							$(cont).attr('id', identifier);
							$(cont).css('text-align', 'left');
							$(cont).addClass('emoji_dialog_content_inner');
							for (var j in data[i]) {
								var v = data[i][j];
								var image = document.createElement('img');
								$(image).attr('src', v.file_name);
								$(image).attr('alt', v.title);
								$(image).attr('width', 18);
								$(image).attr('height', 18);
								$(image).attr('title', v.title);
								$(image).css('margin', '6px');
								$(image).click(function() {
									var s = '<img class="emoji" alt="' + $(this).attr('title') + '" src="' + $(this).attr('src') + '" title="' + $(this).attr('title') + '" />';
									_editor.insertHtml(s);
									//$('#emoji_dialog').dialog('close');
								});
								$(cont).append(image);
							}
							$('#emoji_dialog_content').append(cont);
						}
					});
					$('#emoji_dialog').dialog('open');
				}
			});
			_editor.ui.addButton('EMOJI_button', {
				label: '絵文字',
				command: 'EMOJI_command'
			});
			// 顔文字ボタン
			_editor.addCommand('KAOMOJI_command', {
				async: true,
				exec: function() {
					$.get('/blog/pictgram', {t: 'kaomoji'}, function(json) {
						data = eval('(' + json + ')');
						$('#kaomoji_dialog').empty();
						var obj = document.createElement('ul');
						$(obj).css('text-align', 'left');
						$(obj).css('padding', '1em');
						var child = undefined;
						var actual_length = 0;
						var character_limit = 32;
						for (var i in data) {
							if (!child) {
								child = document.createElement('li');
								$(child).css('border-style', 'solid');
								$(child).css('border-color', 'pink');
								$(child).css('border-width', '0px 0px 1px 0px');
								$(child).css('margin', '6px');
								$(child).css('padding', '0px');
							};
							var v = data[i];
							var inner = document.createElement('span');
							actual_length += v.content.length;
							$(inner).css('padding', '4px');
							$(inner).css('background-color', 'transparent');
							$(inner).mouseover(function() {$(this).css('background-color', 'pink')});
							$(inner).mouseout(function() {$(this).css('background-color', 'transparent')});
							$(inner).text(v.content);
							$(inner).attr('title', v.title);
							$(inner).click(function() {
								_editor.insertText($(this).text());
								//$('#kaomoji_dialog').dialog('close');
							});
							$(child).append(inner);
							if (character_limit < actual_length) {
								$(obj).append(child);
								child = undefined;
								actual_length = 0;
							};
						}
						if (child) {
							$(obj).append(child);
						};
						$('#kaomoji_dialog').append(obj);
					});
					$('#kaomoji_dialog').dialog('open');
				}
			});
			_editor.ui.addButton('KAOMOJI_button', {
				label: '顔文字',
				command: 'KAOMOJI_command'
			});
		});
		var mini_dialog = {
			autoOpen: false,
			width: 240,
			height: 420,
			modal: false,
			position: 'right'
		};
		$('#emoji_dialog').css('z-index', 5000);
		$('#kaomoji_dialog').css('z-index', 5001);
		$('#picture_upload_block').css('z-index', 5002);
		$('#emoji_dialog').dialog(mini_dialog);
		$('#kaomoji_dialog').dialog(mini_dialog);
		$('#picture_upload_block').dialog({
			autoOpen: false,
			width: 640,
			height: 480,
			modal: true
		});
		$('#picture_upload').ajaxForm({
			dataType: 'json',
			success: function(data) {
				if (data.upload_ok != 'ok') {
					alert('画像をアップロードできませんでした。');
					$('#picture_upload_block').dialog('close');
					return;
				};
				insert_image(data);
				$('#picture_upload_block').dialog('close');
			},
			error: function(xml, status, e) {
				alert(e.message);
				$('#picture_upload_block').dialog('close');
			}
		});
	});
});