Control.TextArea.ToolBar.Markdown = Class.create();
Object.extend(Control.TextArea.ToolBar.Markdown.prototype,{
	
	textarea: false,
	toolbar: false,
	options: {},
    using_toolbar: false,
	initialize: function(textarea,options){
        if (textarea == 'topic_content' ||
              textarea == 'comment_content' ||
                textarea == 'blog_post_content' ||
                  textarea == 'blog_post_comment_content' ||
                    textarea == 'item_content' ||
                      textarea == 'review_content' ||
					textarea == 'group_description' ||
					  textarea == 'friendship_introduction' ||
					    textarea == 'record_body' ||
						  textarea == 'message_body' ||
						    textarea == 'profile_introduction' ||
                              textarea == 'record_content' ||
							  textarea == 'interior_album_introduction' ||
							  textarea == 'interior_album_comment') {
          this.using_toolbar = true;
        }
	    set_button_tag();
        if (this.using_toolbar)
	    set_textarea_style(textarea);
		this.textarea = new Control.TextArea(textarea);
		this.toolbar = new Control.TextArea.ToolBar(this.textarea);
		this.converter = (typeof(Showdown) != 'undefined') ? new Showdown.converter : false;
		this.options = {
			preview: false,
			afterPreview: Prototype.emptyFunction
		};
		Object.extend(this.options,options || {});
		if(this.options.preview){
			this.textarea.observe('change',function(textarea){
				if(this.converter){
					$(this.options.preview).update(this.converter.makeHtml(textarea.getValue()));
					this.options.afterPreview();
				}
			}.bind(this));
		}
        
        if (this.using_toolbar) {
            /* 太字*/
		    this.toolbar.addButton(str['bold'],function(){
			    this.wrapSelection('<strong>','</strong>');
		    },{
			    id: 'markdown_bold_button'
		    });
        
            /* 打ち消し線*/
		    this.toolbar.addButton(str['del'],function(){
			    this.wrapSelection('<del>','</del>');
		    },{
			    id: 'markdown_del_button'
		    });
        
            /* 見出し*/
		    this.toolbar.addButton(str['headding'],function(){
			    var selection = this.getSelection();
			    if(selection == '')
				    selection = '見出し';
			    var str = '';
			    (Math.max(5,selection.length)).times(function(){
				    str += '-';
			    });
			    this.replaceSelection("\n" + "<h3>" + selection + "</h3>" + "\n");
		    },{
			    id: 'markdown_heading_button'
		    });
        
            /* フォントカラー*/
		    this.toolbar.addButton(str['color'],function(){
			    window.open('/popup/select_color.html','select_color','width=250, height=210, menubar=no, toolbar=no, scrollbars=no');
		    },{
			    id: 'openwizwig_select_color_button'
		    });
        
            /* フォントサイズ*/
	        this.toolbar.addButton(str['size'],function(){
	          switch_display_single('font_size_list');
		    },{
			    id: 'openwizwig_select_font_size_button'
		    });
        
            /* リンク*/
		    this.toolbar.addButton(str['link'],function(){
			    var selection = this.getSelection();
			    var response = prompt('URLを入力してください。','');
			    if(response == null)
				    return;
			    this.replaceSelection('<a target="_blank" href="' + (response == '' ? 'http://link_url/' : response).replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + '">' + (selection == '' ? 'Link Text' : selection) + '</a>' );
		    },{
			    id: 'markdown_link_button'
		    });
        
            /* 外部画像リンク*/
		    this.toolbar.addButton(str['image'],function(){
			    var selection = this.getSelection();
			    var response = prompt('外部画像へのリンクを入力してください。','');
			    if(response == null)
				    return;
			    this.replaceSelection('<img alt="' + (selection == '' ? '代替テキスト' : selection) + '" src="' + (response == '' ? 'http://image_url/' : response).replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + '" />');
		    },{
			    id: 'markdown_image_button'
		    });
        
            /* 絵文字パレット */
		    this.toolbar.addButton(str['emoji'],function(){
			    window.open('/popup/emoji_pallete.html','絵文字','width=360, height=290, menubar=no, toolbar=no, scrollbars=no, resizable=no');
		    },{
			    id: 'openwizwig_emoji_pallete'
		    });
        
            /* 確認*/
	        this.toolbar.addButton(str['view'],function(){
                switch_display(textarea,"confirm_view");
		    },{
			    id: 'openwizwig_view_button'
		    });
        
            /* ヘルプ*/
		    this.toolbar.addButton(str['help'],function(){
			    window.open('/popup/help_editor.html','help_editor','width=330, height=600, menubar=no, toolbar=no, scrollbars=yes');
		    },{
			    id: 'markdown_help_button'
		    });
		
		    /* フォントサイズリスト（特大、大、小、極小）*/
		    this.toolbar.addButton(select_font_size_table(),function(){
		          
		    },{
			    id: 'markdown_font_size_list'
		    });
        } else {
            /* 絵文字パレット */
		    this.toolbar.addButton(str['emoji_btn'],function(){
			    window.open('/popup/emoji_pallete.html','絵文字','width=360, height=300, menubar=no, toolbar=no, scrollbars=no, resizable=no');
		    },{
			    id: 'openwizwig_emoji_pallete'
		    });
        }
	},
	
    color_change: function (color) {
        this.textarea.wrapSelection('<span style="color:'+color+';">','</span>');
	},
	
	size_change: function (size) {
        this.textarea.wrapSelection('<span style="font-size:'+size+'px;line-height:1em;">','</span>');
	},

    input_emoji: function (id) {
        this.textarea.insertTag('[l:' + id + ']');
    }
});

function set_button_tag(){
    str = new Array;
    str['bold']      = '<img src="/images/wysiwyg/wysiwyg_01.gif" alt="太字" title="太字" id="bold" name="bold" onmouseover="swap(\'wysiwyg_hover_01\',\'bold\')" onmouseout="swap(\'wysiwyg_01\',\'bold\')" />';
    str['del']       = '<img src="/images/wysiwyg/wysiwyg_02.gif" alt="打ち消し" title="打ち消し" id="del" name="del" onmouseover="swap(\'wysiwyg_hover_02\',\'del\')" onmouseout="swap(\'wysiwyg_02\',\'del\')" />';
    str['headding']  = '<img src="/images/wysiwyg/wysiwyg_03.gif" alt="見出し" title="見出し" id="headding" name="bold" onmouseover="swap(\'wysiwyg_hover_03\',\'headding\')" onmouseout="swap(\'wysiwyg_03\',\'headding\')" />';
    str['color']     = '<img src="/images/wysiwyg/wysiwyg_05.gif" alt="フォントカラー" title="フォントカラー" id="color" name="color" onmouseover="swap(\'wysiwyg_hover_05\',\'color\')" onmouseout="swap(\'wysiwyg_05\',\'color\')" />';
    str['size']      = '<img src="/images/wysiwyg/wysiwyg_04.gif" alt="フォントサイズ" title="フォントサイズ" id="size" name="size" onmouseover="swap(\'wysiwyg_hover_04\',\'size\')" onmouseout="swap(\'wysiwyg_04\',\'size\')" />';
    str['link']      = '<img src="/images/wysiwyg/wysiwyg_06.gif" alt="リンク" title="リンク" id="link" name="link" onmouseover="swap(\'wysiwyg_hover_06\',\'link\')" onmouseout="swap(\'wysiwyg_06\',\'link\')" />';
    str['image']     = '<img src="/images/wysiwyg/wysiwyg_07.gif" alt="外部画像リンク" title="外部画像リンク" id="image_link" name="image_link" onmouseover="swap(\'wysiwyg_hover_07\',\'image_link\')" onmouseout="swap(\'wysiwyg_07\',\'image_link\')" />';
    str['view']      = '<img src="/images/wysiwyg/wysiwyg_08.gif" alt="表示確認" title="表示確認" id="view_change" name="view_change" onmouseover="swap(\'wysiwyg_hover_08\',\'view_change\')" onmouseout="swap(\'wysiwyg_08\',\'view_change\')" />';
    str['help']      = '<img src="/images/wysiwyg/wysiwyg_09.gif" alt="ヘルプ" title="ヘルプ" id="help" name="help" onmouseover="swap(\'wysiwyg_hover_09\',\'help\')" onmouseout="swap(\'wysiwyg_09\',\'help\')" />';
    str['emoji']     = '<img src="/images/wysiwyg/wysiwyg_10.gif" alt="絵文字" title="絵文字" id="emoji" name="emoji" onmouseover="swap(\'wysiwyg_hover_10\',\'emoji\')" onmouseout="swap(\'wysiwyg_10\',\'emoji\')" />';
    str['emoji_btn'] = '<img src="/images/wysiwyg/emoji_btn.gif" alt="絵文字" title="絵文字" id="emoji" name="emoji" onmouseover="swap(\'emoji_btn_hover\',\'emoji\')" onmouseout="swap(\'emoji_btn\',\'emoji\')" />';
}


function select_font_size_table(){
    html = "";
    html += "<ul style='display:none;' id='font_size_list'>";
    html += "<li><a href='#' onclick='markdown_toolbar.size_change(9);switch_display_single(\"font_size_list\");return false;'>フォント極小</a></li>";
    html += "<li><a href='#' onclick='markdown_toolbar.size_change(10);switch_display_single(\"font_size_list\");return false;'>フォント小</a></li>";
    html += "<li><a href='#' onclick='markdown_toolbar.size_change(20);switch_display_single(\"font_size_list\");return false;'>フォント大</a></li>";
    html += "<li class='last'><a href='#' onclick='markdown_toolbar.size_change(60);switch_display_single(\"font_size_list\");return false;'>フォント特大</a></li>";
    html += "</ul>";
    return html;
}

function switch_display(name,target_name){
   if ($(name).style.display == "none"){
    	    $(name).style.display = "inline";
			$(target_name).style.display = "none";  
    } else {
			$(name).style.display = "none";
			$(target_name).style.display = "block"; 
			set_confirm_view_style(target_name);
			send_data("/helps;escape_html",$(name).value);
			/*$(target_name).innerHTML = $(name).value.replace(/\n/g,'<br \/>');*/
  }
}
function switch_display_single(name){
   if ($(name).style.display == "none"){
    	    $(name).style.display = "inline";

    } else {
			$(name).style.display = "none";
  }
}
function swap(img,name) {
    $(name).src = "/images/wysiwyg/"+img+".gif";
}
function set_textarea_style(name){
	    $(name).style.width       = "408px";
	    $(name).style.height      = "324px";
	    $(name).style.padding     = "6px";
	    $(name).style.border      = "1px #BEBEBE solid";
		$(name).style.margin      = "0";
	    $(name).style.lineHeight  = "1.4";
	    $(name).style.fontSize    = "1em";
		$(name).style.overflow    = "auto";
	    $(name).style.clear       = "both";
		$(name).style.letterSpacing = "0.1em";
}
function set_confirm_view_style(name){
	    $(name).style.width       = "408px";
	    $(name).style.height      = "324px";
	    $(name).style.padding     = "6px";
	    $(name).style.border      = "1px #BEBEBE solid";
		$(name).style.margin      = "0px";
		$(name).style.lineHeight  = "1.4";
	    $(name).style.overflow    = "auto";
	    $(name).style.clear       = "both";
		$(name).style.letterSpacing = "0.1em";
}
function send_data(url,params){
	var myAjax = new Ajax.Request(
			url, 
			{
				method: 'post',
				parameters: 'body='+encodeURIComponent(params),
				onComplete: showResponse
			});
}
function showResponse(oj){
  $('confirm_view').innerHTML = oj.responseText;
 }