var emoji=[["E415","E056","E057","E414","E405","E106","E418","E417","E40D","E40A","E404","E105","E409","E40E","E402","E108","E403","E058","E407","E401","E40F","E40B","E406","E413","E411","E412","E410","E107","E059","E416","E408","E40C","E11A","E10C","E32C","E32A","E32D","E328","E32B","E022","E023","E327","E329","E32E","E335","E334","E337","E336","E13C","E330","E331","E326","E03E","E11D","E05A","E00E","E421","E420","E00D","E010","E011","E41E","E012","E422","E22E","E22F","E231","E230","E427","E41D","E00F","E41F","E14C","E201","E115","E428","E51F","E429","E424","E423","E253","E426","E111","E425","E31E","E31F","E31D","E001","E002","E005","E004","E51A","E519","E518","E515","E516","E517","E51B","E152","E04E","E51C","E51E","E11C","E536","E003","E41C","E41B","E419","E41A"],["E04A","E04B","E049","E048","E04C","E13D","E443","E43E","E04F","E052","E053","E524","E52C","E52A","E531","E050","E527","E051","E10B","E52B","E52F","E109","E528","E01A","E134","E530","E529","E526","E52D","E521","E523","E52E","E055","E525","E10A","E522","E019","E054","E520","E306","E030","E304","E110","E032","E305","E303","E118","E447","E119","E307","E308","E444","E441"],["E436","E437","E438","E43A","E439","E43B","E117","E440","E442","E446","E445","E11B","E448","E033","E112","E325","E312","E310","E126","E127","E008","E03D","E00C","E12A","E00A","E00B","E009","E316","E129","E141","E142","E317","E128","E14B","E211","E114","E145","E144","E03F","E313","E116","E10F","E104","E103","E101","E102","E13F","E140","E11F","E12F","E031","E30E","E311","E113","E30F","E13B","E42B","E42A","E018","E016","E015","E014","E42C","E42D","E017","E013","E20E","E20C","E20F","E20D","E131","E12B","E130","E12D","E324","E301","E148","E502","E03C","E30A","E042","E040","E041","E12C","E007","E31A","E13E","E31B","E006","E302","E319","E321","E322","E314","E503","E10E","E318","E43C","E11E","E323","E31C","E034","E035","E045","E338","E047","E30C","E044","E30B","E043","E120","E33B","E33F","E341","E34C","E344","E342","E33D","E33E","E340","E34D","E339","E147","E343","E33C","E33A","E43F","E34B","E046","E345","E346","E348","E347","E34A","E349"],["E036","E157","E038","E153","E155","E14D","E156","E501","E158","E43D","E037","E504","E44A","E146","E50A","E505","E506","E122","E508","E509","E03B","E04D","E449","E44B","E51D","E44C","E124","E121","E433","E202","E135","E01C","E01D","E10D","E136","E42E","E01B","E15A","E159","E432","E430","E431","E42F","E01E","E039","E435","E01F","E125","E03A","E14E","E252","E137","E209","E154","E133","E150","E320","E123","E132","E143","E50B","E514","E513","E50C","E50D","E511","E50F","E512","E510","E50E"],["E21C","E21D","E21E","E21F","E220","E221","E222","E223","E224","E225","E210","E232","E233","E235","E234","E236","E237","E238","E239","E23B","E23A","E23D","E23C","E24D","E212","E24C","E213","E214","E507","E203","E20B","E22A","E22B","E226","E227","E22C","E22D","E215","E216","E217","E218","E228","E151","E138","E139","E13A","E208","E14F","E20A","E434","E309","E315","E30D","E207","E229","E206","E205","E204","E12E","E250","E251","E14A","E149","E23F","E240","E241","E242","E243","E244","E245","E246","E247","E248","E249","E24A","E24B","E23E","E532","E533","E534","E535","E21A","E219","E21B","E02F","E024","E025","E026","E027","E028","E029","E02A","E02B","E02C","E02D","E02E","E332","E333", "E24E", "E24F", "E537"]]
var emoji_dropdown = null;
var emoji_textarea = null;
var emoji_btn = null;
var panes = [];
var charsPerGroup = 21

function emoji_show_emoji(c) {
	emoji_dropdown.fade( { duration: 0.2 } )
	emoji_btn.setStyle( { 'background-color': 'transparent' })
	var text = '[:' + c + ']'
    
    var scroll_top = emoji_textarea.scrollTop;
    if(!!document.selection){
        emoji_textarea.focus();
        var range = (this.range) ? this.range : document.selection.createRange();
        range.text = text;
        range.select();
    }else if(!!emoji_textarea.setSelectionRange){
        var selection_start = emoji_textarea.selectionStart;
        emoji_textarea.value = emoji_textarea.value.substring(0,selection_start) + text + emoji_textarea.value.substring(emoji_textarea.selectionEnd);
        emoji_textarea.setSelectionRange(selection_start + text.length,selection_start + text.length);
    }
    emoji_textarea.focus();
    emoji_textarea.scrollTop = scroll_top;
}

function emoji_show_pane(p) {
	var btns = $('emoji_menu').children;
	for (var b=0; b<btns.length; b++) {
		if (b == p) Element.extend(btns[b]).addClassName('highlighted')
		else Element.extend(btns[b]).removeClassName('highlighted')
	}

	$('emoji_pane').update(panes[p])
	if ((typeof(window['pngfix']) != "undefined")) pngfix()
}

document.observe("dom:loaded", function() {
	for (var pane=0; pane < emoji.length; pane++) {
		var out = '<div style="width: 300px; height: 120px; overflow-y: scroll; border: 1px solid #7a808b; background: #ebecee">'
		for (var group=0; group < Math.ceil(emoji[pane].length / charsPerGroup); group++) {
			out += '<div style="display: block; float: left; width: 140px; vertical-align: top; text-align: left;">'
			var start = group*charsPerGroup;
			var end = Math.min(emoji[pane].length, (group+1)*charsPerGroup);
			for (var c=start; c < end; c++) {
				out += '<img width="20" height="20" src="/img/emoji/emoji-' + emoji[pane][c] + '.png" onclick="emoji_show_emoji(\'' + emoji[pane][c] + '\')" />'
			}
			out += '</div>'
		}
		out += "</div>"
		
		panes[pane] = out
	}
	emoji_dropdown = document.createElement('div');
	Element.extend(emoji_dropdown);
	emoji_dropdown.update('<div id="emoji_menu"></div><div id="emoji_pane"></div>')
	document.body.appendChild(emoji_dropdown)
	emoji_dropdown.setStyle({
		'position': 'absolute'
	});
	emoji_dropdown.hide()

	var menu_code = ''
	var css = '#emoji_menu div.pane_btn { position: relative; width: 41px; height: 54px; display: block; float: left; margin-right: -1px; z-index: 0 }'
	css += '#emoji_menu div.pane_btn.highlighted { z-index: 100 }'
	css += '#emoji_pane { clear: both; position: relative; left: -12px }'
	css += '#emoji_pane img:hover { background-color: #a7c2de }'
	for (var p=0; p<panes.length; p++) {
		off_image = '/img/emoji/'+p+'_off.jpg'
		on_image = '/img/emoji/'+p+'_on.jpg'
		css += '#emoji_menu div#pane_btn'+p+' { background-image: url('+off_image+') }'
		css += '#emoji_menu div#pane_btn'+p+'.highlighted { background-image: url('+on_image+') }'
		menu_code += '<div id="pane_btn'+p+'" class="pane_btn" onclick="emoji_show_pane('+p+')"></div>'
		new Image().src = off_image;	// preload
		new Image().src = on_image;	// preload
	}
	
	var style = document.createElement('style');
	style.setAttribute("type", "text/css");
	if (style.styleSheet) {   // IE
	    style.styleSheet.cssText = css;
	} else {                // the world
	    style.appendChild(document.createTextNode(css));
	}
	$$('head')[0].appendChild(style);
	
	$('emoji_menu').update(menu_code)
	emoji_show_pane(0)
});

function toggle_emoji(btn, textarea) {
	Element.extend(btn)
	if (emoji_dropdown.visible()) {
		emoji_dropdown.fade( { 'duration': 0.2 } )
		btn.setStyle( { 'background-color': 'transparent' })
		emoji_textarea = null
		emoji_btn = null
	} else {
		btn.parentNode.appendChild(emoji_dropdown)
		emoji_dropdown.setStyle( {
						'top' : btn.offsetTop + btn.getHeight() + 'px',
						'left' : btn.offsetLeft + 'px'
						} )
//		emoji_dropdown.appear( { 'duration': 0.2 } )
		emoji_dropdown.show()
		btn.setStyle( { 'background-color': '#0c2394' })
		emoji_textarea = textarea
		emoji_btn = btn
	}
}