//
// blog_editor.js 
//
function eventHandle (e) {
    e = e ? e : window.event ? event : null;
    if ( ! e ) return null;
    
    this.element = e;
    
    this.clientX = e.clientX;
    this.clientY = e.clientY;

    if (window.opera) {
	this.pageX = e.clientX;
	this.pageY = e.clientY;
    }
    else if ( document.all ) {
	var dd = document.documentElement, db = document.body;
	if (document.getElementById('top')) {
	    // old template
	    this.pageX = e.clientX + (db.scrollLeft);
	    this.pageY = e.clientY + (db.scrollTop);
	} else {
	    this.pageX = e.clientX + (dd ? dd.scrollLeft : db.scrollLeft);
	    this.pageY = e.clientY + (dd ? dd.scrollTop  : db.scrollTop);
	}
    }
    else if ( typeof(e.pageX) == 'number' ) {
	this.pageX = e.pageX;
	this.pageY = e.pageY;
    }
    
    return this;
}
function layerHandle (layer) {
    if ( typeof(layer) == 'undefined' ) {
	return this;
    }
    else if ( typeof(layer) == 'string' ) {
	if ( document.getElementById ) {
	    layer = document.getElementById(layer);
	}
	else if ( document.all ) {
	    layer = document.all(layer);
	}
	else if ( document.layers ) {
	    layer = document.layers[layer];
	}
    }
    this.srcElement = layer;
    return this;
}
layerHandle.prototype.show = function () {
    var e = this.srcElement;
    if ( e.style && e.style.display ) {
	e.style.display = 'block';
    }
    else if ( e.visibility ) {
	e.visibility = 'show';
    }
}
layerHandle.prototype.hide = function () {
    var e = this.srcElement;
    if ( e.style && e.style.display ) {
	e.style.display = 'none';
    }
    else if ( e.visibility ) {
	e.visibility = 'hide';
    }
}
layerHandle.prototype.bgColor = function (color) {
    if ( color ) {
	if ( document.getElementById || document.all ) {
	    this.srcElement.style.backgroundColor = color;
	}
	else if ( document.layers ) {
	    this.srcElement.bgColor = color;
	}
    }
    if ( document.getElementById || document.all ) {
	return this.srcElement.style.backgroundColor;
    }
    else if ( document.layers ) {
	return this.srcElement.bgColor;
    }
}
layerHandle.prototype.left = function (x) {
    if ( typeof(x) == 'number' ) {
	if ( document.getElementById ) {
	    this.srcElement.style.left = x + 'px';
	}
	else if ( document.all ) {
	    this.srcElement.style.pixelLeft = x;
	}
	else if ( document.layers ) {
	    this.srcElement.left = x;
	}
    }
    if ( document.getElementById ) {
	return parseInt(this.srcElement.style.left);
    }
    else if ( document.all ) {
	return this.srcElement.style.pixelLeft;
    }
    else if ( document.layers ) {
		return this.srcElement.left;
    }
}
layerHandle.prototype.top = function (y) {
    if ( typeof(y) == 'number' ) {
	if ( document.getElementById ) {
	    this.srcElement.style.top = y + 'px';
	}
	else if ( document.all ) {
	    this.srcElement.style.pixelTop = y;
	}
	else if ( document.layers ) {
	    this.srcElement.top = y;
	}
    }
    if ( document.getElementById ) {
	return parseInt(this.srcElement.style.top);
    }
    else if ( document.all ) {
	return this.srcElement.style.pixelTop;
    }
    else if ( document.layers ) {
	return this.srcElement.top;
    }
}
layerHandle.prototype.moveTo = function (x, y) {
    this.left(x);
    this.top(y);
}
layerHandle.prototype.alpha = function (value) {
    var ua = new userAgent();
    if ( ua.isIE() ) {
	this.srcElement.style.filter = "alpha(opacity=0)";
        this.srcElement.filters.alpha.opacity = value;
    }
    else if ( ua.isGecko() ) {
	this.srcElement.style.MozOpacity = value / 100;
    }
}
layerHandle.prototype.zIndex = function (value) {
    if ( document.layers ) {
	this.srcElement.zIndex = value;
    }
    else {
	this.srcElement.style.zIndex = value;
    }
}
layerHandle.prototype.innerHTML = function (html) {
    if ( document.layers ) {
	with ( this.srcElement.document ) {
	    open();
	    write(html);
	    close();
	}
    }
    else {
	this.srcElement.innerHTML = html;
    }
}
function createLayer (name) {
    if ( document.getElementById ) {
	var layer = document.createElement('div');
	layer.setAttribute('id', name);
	layer.style.display = 'none';
	layer.style.position = 'absolute';
	document.body.appendChild(layer);
	return new layerHandle(name);
    }
    else if ( document.all ) {
	var str =
	    '<div id="' + name + '" style="' +
	    'display:none; position:absolute; left:0px; top:0px;"></div>';
	document.body.insertAdjacentHTML('BeforeEnd',str);
	return new layerHandle(name);
    }
    else if ( document.layers ) {
	var layer = new Layer(65535);
	var lh = new layerHandle(layer.name);
	lh.hide();
	lh.moveTo(0, 0);
	return lh;
    }
    return null;
}
function textRange (srcElement) {
    this.srcElement   = srcElement;
    if ( document.selection && document.selection.createRange ) {
	this.focus();
	this.range = document.selection.createRange();
    }
    else if ( typeof(srcElement.selectionStart) == 'number' ) {
	this.position  =
	    new Array(srcElement.selectionStart, srcElement.selectionEnd);
    }

    return this;
}
textRange.prototype.focus = function () {
    if ( this.srcElement && this.srcElement.focus )
	this.srcElement.focus();
}
textRange.prototype.text = function () {
    if ( this.range ) {
	return this.range.text;
    }
    else if ( this.position ) {
	return this.srcElement.value.substring(this.position[0], this.position[1]);
    }
    return null;
}
textRange.prototype.insert = function (str) {
    var txt = this.text();
    if ( txt == null ) {
	this.srcElement.value += str;
    }
    else {
	var len_txt = txt.length;
	var len_str = str.length;
	if ( this.range ) {
	    var ret = txt.match(/\r\n|\r|\n/g);
	    if ( ret ) len_txt -= ret.length;
	    this.range.text = str + txt;
	    this.range.move('character', - len_txt);
	    this.range.moveEnd('character', len_txt);
	    this.range.select();
	}
	else if ( this.position ) {
	    this.srcElement.value =
	    this.srcElement.value.substring(0, this.position[0]) +
	    str + txt +
	    this.srcElement.value.substring(this.position[1], this.srcElement.value.length);
	    this.srcElement.selectionStart = this.position[0] + len_str;
	    this.srcElement.selectionEnd = this.position[1] + len_str;
	}
    }
    this.focus();
}
textRange.prototype.insertTag = function (startTag, endTag) {
    var txt = this.text();
    if ( txt == null ) {
	this.srcElement.value += startTag + endTag;
    }
    else {
	var len_txt  = txt.length;
	var len_stag = startTag.length;
	var len_etag = endTag.length;
	if ( this.range ) {
	    var ret = txt.match(/\r\n|\r|\n/g);
	    if ( ret ) len_txt -= ret.length;
	    this.range.text = startTag + txt + endTag;
	    this.range.move('character', - (len_txt + len_etag));
	    this.range.moveEnd('character', len_txt);
	    this.range.select();
	}
	else if ( this.position ) {
	    this.srcElement.value =
	    this.srcElement.value.substring(0, this.position[0]) +
	    startTag + txt + endTag +
	    this.srcElement.value.substring(this.position[1], this.srcElement.value.length);
	    this.srcElement.selectionStart = this.position[0] + len_stag;
	    this.srcElement.selectionEnd = this.position[1] + len_stag;
	}
    }
    this.focus();
}
textRange.prototype.replace = function (str) {
    var txt = this.text();
    if ( txt == null ) {
	this.srcElement.value += str;
    }
    else {
	var len_txt = txt.length;
	var len_str = str.length;
	if ( this.range) {
	    this.range.text = str;
	    var ret = txt.match(/\r\n|\r|\n/g);
	    if ( ret ) len_txt -= ret.length;
	    this.range.text = str + txt;
	    this.range.move('character', - len_txt);
	    this.range.moveEnd('character', len_txt);
	    this.range.select();
	}
	else if ( this.position ) {
	    this.srcElement.value =
	    this.srcElement.value.substring(0, this.position[0]) +
	    str +
	    this.srcElement.value.substring(this.position[1], this.srcElement.value.length);
	    this.srcElement.selectionStart = this.position[0] + len_str;
	    this.srcElement.selectionEnd = this.position[1] + len_str;
	}
    }
    this.focus();
}
function wordProcessor (form_name,element_name) {
    this.form_name    = form_name;
    this.element_name = element_name;
    this.color_palette_name   = form_name + '_' + element_name + '_color_palette';
    this.emoji_palette_name   = form_name + '_' + element_name + '_emoji_palette';
    return this;
}
wordProcessor.prototype.insertTag = function (start_tag, end_tag) {
    var text_range = new textRange(document.forms[this.form_name][this.element_name]);
    text_range.insertTag(start_tag, end_tag);
}
wordProcessor.prototype.setFontDecoration = function (tag_name, style) {
    var start_tag = '<' + tag_name + ' style="' + style + ';">';
    var end_tag = '</' + tag_name + '>';
    this.insertTag(start_tag, end_tag);
}
wordProcessor.prototype.setFontBold = function () {
  this.insertTag('<太>', '</太>');
}
wordProcessor.prototype.setFontItalic = function () {
  this.insertTag('<斜>', '</斜>');
}
wordProcessor.prototype.setFontUnderline = function () {
  this.insertTag('<下線>', '</下線>');
}
wordProcessor.prototype.setFontStrike = function () {
  this.insertTag('<打消線>', '</打消線>');
}
wordProcessor.prototype.setFontBlockquote = function () {
  this.insertTag('<引用>', '</引用>');
}
wordProcessor.prototype.setFontLarge = function () {
    this.insertTag('<大>','</大>');
}
wordProcessor.prototype.setFontExtraLarge = function () {
    this.insertTag('<特大>','</特大>');
}
wordProcessor.prototype.setFontSmall = function () {
    this.insertTag('<小>','</小>');
}
wordProcessor.prototype.setTextAlign = function (align) {
    var start_tag = '<'  + align + '>';
    var end_tag   = '</' + align + '>';
    this.insertTag(start_tag, end_tag);
}
wordProcessor.prototype.createColorPaletteInnerHTML = function () {
    var layer_name = this.color_palette_name;
    var form_name = layer_name + '_form';
    var display_name = layer_name + '_display';

    var colorbox = function (color, display_form_name, display_name, editor_form_name, editor_name, layer_name) {
	//var mover = 'document.' + display_form_name + '.' + display_name + '.value=\'#' + color + '\';new layerHandle(\'' + layer_name + '\').srcElement.style.color=\'#' + color + '\';';
	var mover = 'document.forms[\'' + display_form_name + '\'][\'' + display_name + '\'].value=\'#' + color + '\';new layerHandle(\'' + layer_name + '\').srcElement.style.color=\'#' + color + '\';';
	var str =
	'<span style="height:10px; width:10px; background: #' + color + '; display: block; float:left; cursor:default; position: relative; font-size: 2px; overflow: hidden;" ' +
	'onmouseover="' + mover + '"' +
	'onmousedown=\'new textRange(document.forms["' + editor_form_name + '"]["' + editor_name + '"]).insertTag("<色:#' + color + '>", "</色>");new layerHandle("' + layer_name + '").hide();\'></span>';
	return str;
    }

    var inner_html =
    '<form name="'+ form_name + '">' +
    '<div style="background:#ffffff; border:#aaa solid 2px; width: 400px; text-align:left;">' +
    '<input name="' + display_name + '" style="border-color:#000; border-style:solid; border-width:1px; width:60px; font-size:12px" />' +
    '<span style="font-size:12px;"> AaＡａあぁアァ漢字 <span style="font-weight:bold;">サンプルテキスト</span>' +
    '<table border="0" cellpadding="0" cellspacing="0">';

    var r_dt = 51.2;
    var g_dt = 51.2;
    var b_dt = 51.2;
    var r_max = 256 / r_dt;
    var g_max = 256 / g_dt;
    var b_max = 256 / b_dt;
    var rgb_list = new Array('000000', 'FF0000', '333333', '00FF00', '666666', '0000FF', '999999', 'FFFF00', 'CCCCCC', 'FF00FF', 'FFFFFF', '00FFFF');

    for ( var r = 0 ; r <= r_max ; r++ ) {
	var r_hex = (Math.floor(r * r_dt) - ( r > 0 ? 1 : 0)).toString(16);
	r_hex = "00".substring(0, 2 - r_hex.length) + r_hex;

	inner_html += '<tr><td>' +
	    colorbox(rgb_list[r * 2], form_name, display_name, this.form_name, this.element_name, layer_name) +
	    colorbox(rgb_list[r * 2 + 1], form_name, display_name, this.form_name, this.element_name, layer_name);

	for ( var b = 0 ; b <= b_max ; b++ ) {
	    var b_hex = (Math.floor(b * b_dt) - ( b > 0 ? 1 : 0)).toString(16);
	    b_hex = "00".substring(0, 2 - b_hex.length) + b_hex;

	    for ( var g = 0 ; g <= g_max ; g++ ) {
		var g_hex = (Math.floor(g * g_dt) - ( g > 0 ? 1 : 0)).toString(16);
		g_hex = "00".substring(0, 2 - g_hex.length) + g_hex;
		var color = r_hex + g_hex + b_hex;
		inner_html +=
		    colorbox(color.toUpperCase(), form_name, display_name, this.form_name, this.element_name, layer_name);
	    }
	}
	inner_html += '</td></tr>';
    }

    inner_html += '</table><div style="text-align:center;" ><input type="button" value="閉じる" onclick="new layerHandle(\'' + layer_name + '\').hide();" /></div></div></form>';
    return inner_html;
}
wordProcessor.prototype.showColorPalette = function (e) {
    var lh = new layerHandle(this.color_palette_name);
    if (! lh.srcElement) {
	lh = new createLayer(this.color_palette_name);
    }
    var eh = new eventHandle(e);
    lh.srcElement.innerHTML  = this.createColorPaletteInnerHTML();
    lh.moveTo(eh.pageX, eh.pageY);
    lh.show();
}
wordProcessor.prototype.addLink = function() {
    var link = prompt('URL: ', 'http://');
    var start_tag  = '<リンク:' + link + '>';
    var end_tag    = '</リンク>';
    if(link != null) this.insertTag(start_tag, end_tag);
}
var wordProcessorEmoji;
var wordProcessorEmojiLabel = {
    //'0'   : '標準・よく使う',
    '0'   : 'よく使う絵文字',
    '1'   : '顔・表情・ハート・気持ち・やじるし',
    '2'   : '動物・食べ物・飲み物',
    '3'   : '趣味・スポーツ',
    '4'   : '乗り物・建物・道具',
    '5'   : '星座・血液型・天気・星・季節',
    '6'   : 'ヘタ文字',
    '7'   : 'デコメ風絵文字',
    '0-0' : '標準',
    '0-1' : 'よく使う絵文字',
    '1-1' : '人・顔・気持ち',
    '1-2' : 'ハート・キラキラ',
    '1-3' : 'やじるし',
    '2-1' : '動物・生物',
    '2-2' : '食べ物・飲み物',
    '3-1' : '趣味',
    '3-2' : 'スポーツ',
    '3-3' : 'オシャレ',
    '4-1' : '乗り物',
    '4-2' : '建物',
    '4-3' : '道具・記号',
    '5-1' : '天気',
    '5-2' : '12星座',
    '5-3' : '血液型',
    '5-4' : '自然・季節・星',
    '6-1' : 'ヘタ文字',
    '7-1' : 'デコメ風絵文字'
};
wordProcessor.prototype.hideEmojiLabel = function() {
    var c_id = wordProcessorEmojiLabel['comitted'];
    var form_name    = wordProcessorEmoji.form_name;
    var el = document.getElementById(form_name + '-emoji-palette-label');
    el.innerHTML = wordProcessorEmojiLabel[c_id];
}
wordProcessor.prototype.showEmojiLabel = function(c_id,commit) {
    c_id = c_id + '';
    var form_name    = wordProcessorEmoji.form_name;
    var el = document.getElementById(form_name + '-emoji-palette-label');
    if (commit) wordProcessorEmojiLabel['comitted'] = c_id;
    el.innerHTML = wordProcessorEmojiLabel[c_id];
}
wordProcessor.prototype.loadEmojiPalette = function(c_id) {
    c_id = c_id + '';
    var form_name    = wordProcessorEmoji.form_name;
    var element_name = wordProcessorEmoji.element_name;
    var layer_name   = wordProcessorEmoji.emoji_palette_name;
    var emoji = new Array();
    if (! c_id) c_id = '0-0';
    if (c_id == '0-0') {
	emoji = wordProcessorEmoji.oricon_tag_json.emoji_seesaa;
    } else {
	emoji = wordProcessorEmoji.oricon_tag_json.emoji;
    }
    var html   = [];
    var sorted = new Array();
    if (c_id == '0-1') {
	var emoji_useful = wordProcessorEmoji.oricon_tag_json.emoji_useful;
	for (var i = 0; i < emoji_useful.length; i++) {
	    for (p in emoji) {
		if (emoji[p].id == emoji_useful[i]) {
		    sorted.push(p.toString());
		    break;
		}
	    }
	}
    } else {
	for (p in emoji) {
	    if (emoji[p].c_id == c_id) {
		sorted.push(p.toString());
	    }
	}
	sorted.sort(function(a,b) { return emoji[a].id - emoji[b].id });
    }
    for (i in sorted) {
	var key = sorted[i];
	if (c_id == '0-0') {
	    if (i > 175) break;
	}
	var vPx = - (16 * i);
	var imgtag = '<img src="/_common/img/spacer.gif" width="1px" height="1px" style="cursor:pointer;width:16px;height:16px;background-position: 0px ' +  vPx
	    + 'px;background-image:url(' + "'" + '/_images_o/' + c_id + '.png' + "'" + ');">';
	var tag = '<span style="" onClick="new wordProcessor(' + "'" + form_name + "'" + ",'" + element_name + "'" + 
	    ').insertTag(' + "'" + key + "'" + ",''" + ');">' +  imgtag + '</span>';
	html.push(tag);
    }

    var palette = html.join("");
    if (! wordProcessorEmoji.paletteLh.srcElement) {
	wordProcessorEmoji.paletteLh  = new createLayer(wordProcessorEmoji.emoji_palette_name);
    }

    var genPager = function(pType,cId,label) {
	if (! label) label = ' * ';
	var labelId = cId;
	if (pType == 'p') {
	    var list = cId.split('-');
	    labelId = list[0];
	}
	return '<a style="color: red" class="emoji-palette-' + pType + '" id="' + form_name + '-emoji-palette-' +  pType + '-' + cId 
	+ '" href="javascript:;" onClick="wordProcessorEmoji.loadEmojiPalette(' + "'" + cId + "'" + ');" '
	+ 'onMouseOver="wordProcessorEmoji.showEmojiLabel(' + "'" + labelId + "'" + ');" '
	+ 'onmouseOut="wordProcessorEmoji.hideEmojiLabel(' + "'" +  labelId + "'" + ');"> '
	+ label + '</a>';
    }

    var child = '';
    var p_id;
    if (c_id.match(/^0-/)) {
	//child = genPager('c','0-0') + genPager('c','0-1');
	child = genPager('c','0-1','A');
	p_id  = '0-1';
    }
    if (c_id.match(/^1-/)) {
	child = genPager('c','1-1','A') + genPager('c','1-2','B') + genPager('c','1-3','C');
	p_id  = '1-1';
    }
    if (c_id.match(/^2-/)) {
	child = genPager('c','2-1','A') + genPager('c','2-2','B');
	p_id  = '2-1';
    }
    if (c_id.match(/^3-/)) {
	child = genPager('c','3-1','A') + genPager('c','3-2','B') + genPager('c','3-3','C');	
	p_id  = '3-1';
    }
    if (c_id.match(/^4-/)) {
	child = genPager('c','4-1','A') + genPager('c','4-2','B') + genPager('c','4-3','C');	
	p_id  = '4-1';
    }
    if (c_id.match(/^5-/)) {
	child = genPager('c','5-1','A') + genPager('c','5-2','B') + genPager('c','5-3','C') + genPager('c','5-4','D');	
	p_id  = '5-1';
    }
    if (c_id.match(/^6-/)) {
	child = genPager('c','6-1','A');
	p_id  = '6-1';
    }
    if (c_id.match(/^7-/)) {
	child = genPager('c','7-1','A');
	p_id  = '7-1';
    }
    
    
    //margin-bottom: 0px;
    
    wordProcessorEmoji.paletteLh.srcElement.innerHTML = '<div style="background:#ffffff; border:#aaa solid 2px;position:absolute;"><div style="width:320px;">'
    + '<div>' 
    + '<div id="' + form_name + '-emoji-palette-label"></div>'
    + genPager('p','0-1',' <strong>1</strong> <font color="black">|</font>')
    + genPager('p','1-1',' <strong>2</strong> <font color="black">|</font>')
    + genPager('p','2-1',' <strong>3</strong> <font color="black">|</font>')
    + genPager('p','3-1',' <strong>4</strong> <font color="black">|</font>')
    + genPager('p','4-1',' <strong>5</strong> <font color="black">|</font>')
    + genPager('p','5-1',' <strong>6</strong> <font color="black">|</font>')
    + genPager('p','6-1',' <strong>7</strong> <font color="black">|</font>')
    + genPager('p','7-1',' <strong>8</strong>')
    + '</div>'
    + '<div>' + child + '</div>'
    + '<div style="clear: both;text-align: left;word-break: break-all;">' // position: absolute;
    + palette + '</div></div><div style="text-align:center;margin:5px 0px;">' + 
    '<input type="button" value="閉じる" onclick="new layerHandle(\'' + layer_name + '\').hide();"></div></div>';

    var pEl1 = document.getElementById(form_name + '-emoji-palette-p-' + c_id);    
    var pEl2 = document.getElementById(form_name + '-emoji-palette-p-' + p_id);
    var cEl = document.getElementById(form_name  + '-emoji-palette-c-' + c_id);
    if (pEl1) pEl1.style.color = 'black';
    if (pEl2) pEl2.style.color = 'black';
    if (cEl) cEl.style.color   = 'black';
    wordProcessorEmoji.showEmojiLabel(c_id,'commit');
}
wordProcessor.prototype.showEmojiPalette = function (e) {
    var req = this.createRequest();
    var url = '/_js/oricon_tag.json?';
    this.paletteEh = new eventHandle(e);
    this.paletteLh = new layerHandle(this.emoji_palette_name);
    wordProcessorEmoji = this;
    req.onreadystatechange = function() {
	if ((req.readyState == 4) && (req.status == 200)) {
	    var jsonStr = req.responseText;
	    if(navigator.userAgent.indexOf("Safari")!=-1){
		wordProcessorEmoji.oricon_tag_json = eval('(' + jsonStr + ')');
	    } else {
		wordProcessorEmoji.oricon_tag_json = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(jsonStr.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + jsonStr + ')');
            //")
	    }
	    wordProcessorEmoji.loadEmojiPalette('0-1');
	    wordProcessorEmoji.paletteLh.moveTo(wordProcessorEmoji.paletteEh.pageX, wordProcessorEmoji.paletteEh.pageY);
	    wordProcessorEmoji.paletteLh.show();
	}
    }
    req.open("GET", url,true);
    req.send(null);
}
wordProcessor.prototype.createRequest = function() {
    return window.XMLHttpRequest ? new XMLHttpRequest() : 
    (function() {
	try { return new ActiveXObject("Msxml2.XMLHTTP"); }
	catch(e) { return new ActiveXObject("Microsoft.XMLHTTP"); }
    })();
}