TextInserter = Class.create();
TextInserter.prototype = {

    /**
    *    コンスラクタ
    *    初期可時にテキストエリアの現在の選択位置をセットします。
    *    @param    element テキストエリアのelement
    *    @param    mode ブラウザモード
    */
    initialize: function(element,mode){


        this.textelement = element;
        this.start = 0;
        this.sel = null;
        this.rang = null;
        this.mode = mode;

        if (this.mode == 1 || this.mode == 4) {
            this.start = element.selectionStart;
        }
        else if (this.mode == 2) {
            this.textelement.focus();
            this.sel = document.selection.createRange();
            this.rang = element.createTextRange();
            this.start = element.selectionStart;
            this.rang.moveToPoint(this.sel.offsetLeft,this.sel.offsetTop);
            this.rang.moveEnd("textedit");
            if(this.rang.text.replace(/\r/g,"").length != 0){
                var las = (element.value.match(/(\r\n)*$/),RegExp.lastMatch.length);
                this.start = (element.value.length - (this.rang.text.length + las));
            }else{
                this.start = (element.value.length - (this.rang.text.length));
            }
        }else{
            this.start = element.value.length;
        }

    },

    /**
    *    テキストエリアの指定された位置に文字をセットします。
    *    @param code 文字列
    */
    insertText: function(code){
        var bl1 = this.textelement.value.substring(0, this.start);
        var bl2 = this.textelement.value.substring(this.start,this.textelement.value.length);
        this.textelement.value = bl1 + code + bl2;
        //IEはカーソル位置を戻す
        if (this.mode == 2) {
            this.rang.moveStart("character",bl1.length + code.length);
            this.rang.moveEnd("character",-(bl2.replace(/\r/g,"").length));
            this.rang.select();
        }
    }

}


EmojiPalette  = Class.create();
/**
*    パレット    abstract class
*/
EmojiPalette.prototype = {

    /**
    *    コンストラクタ
    *    @param    palette_name    作成するパレットの名前
    *    @param    width            パレットの横幅（cssで指定されたサイズ)
    *    @param    adv_x            パレットの表示できる幅限界
    *    @param    closefunction    パレットを閉じるときに実行される関数
    */
    initialize: function(palette_name,width,adv_x,closefunction){

        this.pos_x = 0;
        this.pos_y = 10;
        this.onclick_function = closefunction;    
        this.width = width;
        this.adv_x = adv_x;
        this.textinsert = null;

        this.palette_name = palette_name;
        this.popup = Popup.create(this.palette_name);
        this.popup.loadPlugin('Overlay');
    	Element.setOpacity(Overlay.getInstance().getElement(), 0);
    },



    /**
    *    パレットを開く
    *    @param    element     テキスト挿入エレメント
    *    @param    event        
    *    @param    x    
    *    @param    y
    */
    openPalette: function(element,event,x,y){

        // 日記ページ用処理(for IE)
        // (Close時にfocusするelementをopen時に保持しておく)
        //this.textelement = element;
        
        this.textinsert = new TextInserter(element,get_mode());

        var id = this.palette_name;

        var x = 0;
        var y = 0;
        x = (typeof(x) == 'undefined' || x  == null) ? this.pos_x : x;
        y = (typeof(y)   == 'undefined' || y   == null) ? this.pos_y : y;
    
        var mouse = this.getMousePosition(event);

        this.showPalette();
        var scroll_x = (window.opera) ? window.pageXOffset : 0;
        var scroll_y = (window.opera) ? window.pageYOffset : 0;
        this.pos_x    = mouse.x + x + scroll_x;
        this.pos_y    = mouse.y + y + scroll_y;
        var limit_x  = this.adv_x - this.width;
    
        if (this.pos_x > limit_x) {
            this.pos_x -= (this.pos_x - limit_x);
        }
    
	    var obj = (document.getElementById) ? document.getElementById(id).style :
	              (document.all)            ? document.all[id].style            : null;
     
        obj.display = "block";
        obj.left = this.pos_x + "px";
        obj.top  = this.pos_y + "px";
        obj.zIndex = 2;
    
        //Overlay
        obj.zIndex = 2;
        Event.observe(Overlay.getInstance().getElement(), 'click', this.onclick_function);
    
        Overlay.setZIndex(1);
        Overlay.appear();
        
        //emoji access count
        new Ajax.Request(
            '/log_emoji_openpalette.pl', 
            {
                method: 'get'
            });
    },
    


    /*
    //Overrideメソッド
    showPalette: function() {


    },
    */

    closePalette: function(){
        id = this.palette_name;
        var obj = (document.getElementById) ? document.getElementById(id).style :
                  (document.layers)         ? document.layers[id]               :
                  (document.all)            ? document.all[id].style            : null; 
    
        obj.display="none";
        Event.stopObserving(
            Overlay.getInstance().getElement(),
            'click',
            this.onclick_function
        );
        Overlay.fade();
        
        // 日記ページ用処理(for IE)
        // 絵文字Close後にtextareaをfocus
        //this.textelement.focus();
    },


    /**
    *    文字の挿入
    *    @param code 挿入する文字列
    */
    inputEmoji: function(code){
        this.textinsert.insertText(code);
    },

    getMousePosition: function(evt) {
        var mouse = {x:null, y:null};
    
        if (window.opera) {     
            mouse.x = evt.clientX;
            mouse.y = evt.clientY;
        } else if (document.all) {
            var pos = Position.realOffset(document.body);
            mouse.x = event.clientX + pos[0];
            mouse.y = event.clientY + pos[1];
        } else if (document.layers || document.getElementById) {
            mouse.x = evt.pageX;
            mouse.y = evt.pageY;
        }
        return mouse;
    },
    
    isSSL: function(){
		if(window.location.protocol == "https:"){
			return 1;
		}
		return 0;
    }

}


/**
*    Imodeパレット　パレットクラスの実装
*/
ImodeEmojiPalette = Class.create();
ImodeEmojiPalette.prototype = 
{
    initialize: function(palette_name,width,adv_x,closefunction){

        this.pos_x = 0;
        this.pos_y = 10;
        this.onclick_function = closefunction;    
        this.width = width;
        this.adv_x = adv_x;
        this.textinsert = null;
        this.emoji_array = new Array();
        this.emoji_img_array = new Array();

        this.palette_name = palette_name;
        this.popup = Popup.create(this.palette_name);
        this.popup.loadPlugin('Overlay');
    	Element.setOpacity(Overlay.getInstance().getElement(), 0);
    		
    },
    
    /**
    *	画像を先読み
    */
    load_img: function(){
    	
        this.emoji_array = new Array(
			'50',	'59',	'58',	'61',	'205',	'209',	'241',	'56',	'55',	'60',	'206',	'57',	'52',	'204',	'53',	'54',	'51',	'207',	'242',	'246',
			'208',	'210',	'46',	'47',	'49',	'48',	'65',	'68',	'76',	'75',	'74',	'78',	'79',	'73',	'66',	'67',	'80',	'77',	'72',	'71',
			'69',	'40',	'87',	'41',	'42',	'137',	'138',	'141',	'62',	'63',	'43',	'44',	'103',	'104',	'105',	'106',	'107',	'108',	'109',	'110',
			'111',	'112',	'113',	'114',	'237',	'238',	'239',	'240',	'243',	'244',	'24',	'98',	'99',	'236',	'229',	'231',	'232',	'22',	'21',	'202',
			'23',	'235',	'245',	'1',	'2',	'101',	'102',	'3',	'4',	'5',	'6',	'145',	'146',	'147',	'148',	'149',	'150',	'88',	'184',	'226',
			'227',	'228',	'230',	'233',	'234',	'90',	'91',	'92',	'93',	'94',	'95',	'116',	'193',	'201',	'215',	'115',	'31',	'134',	'82',	'29',
			'30',	'25',	'142',	'191',	'86',	'9',	'10',	'7',	'8',	'12',	'11',	'118',	'119',	'120',	'18',	'13',	'89',	'14',	'15',	'16',
			'17',	'121',	'122',	'123',	'124',	'125',	'19',	'20',	'26',	'27',	'133',	'28',	'81',	'32',	'152',	'117',	'135',	'154',	'100',	'153',
			'197',	'196',	'33',	'34',	'35',	'97',	'180',	'84',	'96',	'181',	'136',	'83',	'212',	'127',	'128',	'129',	'130',	'131',	'143',	'144',
			'160',	'162',	'176',	'177',	'178',	'179',	'182',	'183',	'188',	'203',	'189',	'192',	'190',	'194',	'195',	'198',	'199',	'200',	'85',	'132',
			'64',	'70',	'165',	'166',	'167',	'168',	'169',	'170',	'171',	'172',	'173',	'174',	'175',	'164',	'163',	'126',	'139',	'140',	'151',	'219',
			'217',	'224',	'225',	'159',	'45',	'211',	'36',	'37',	'38',	'39',	'155',	'157',	'158',	'156',	'161',	'185',	'186',	'187',	'216',	'220',
			'221',	'222',	'223',	'218',	'213',	'214'
        ); 

        this.emoji_img_array = new Array();  
        
        var img_server = "http://img.mixi.jp/";
        if(this.isSSL()){
        	img_server = "";
        }
              
        var i_img = 0;
        for(i_img = 0; i_img < 246; i_img++){
        	this.emoji_img_array[i_img] = new Image();
        	this.emoji_img_array[i_img].src = img_server + "img/emoji/" + this.emoji_array[i_img] + ".gif";
        }
        
		Element.hide(this.palette_name);        
        
        var palette='<table cellpadding="0" cellspacing="2" border="0" align="center">';
        var imgUrl= img_server + "img/dot0.gif";
        var i=0,j=0,current=0;
        
        while(i < 13) {
            palette+="<tr>";
            while(j < 20) {
            	if(current >= 246 ){
	                palette+="<td></td>";
            	}else{
	                palette+=
	                "<td style='background-image: url(" + this.emoji_img_array[current].src + ")'>"+
	                "<a href=\"javascript:inputEmoji('m',"+this.emoji_array[current]+")\""+
	                "style=\"background-color: transparent;text-decoration: none;\" onClick=\"closeEmojiPalette();\""+
	                "onMouseOver=\"document.getElementById('plt"+current+"').src='" + img_server + "img/mouse_over03.gif'\" onMouseOut=\"document.getElementById('plt"+current+"').src='" +img_server + "img/dot0.gif'\">"+
	                "<img src=\""+imgUrl+"\" border=\"0\" width=\"16\" height=\"16\" id=\"plt"+current+"\"/>"+
	                "</a></td>";
	            }
                current++;
                j++;
            }
            palette+="</tr>";
            j=0;
            i++;
        }
        palette+="</table>";

        document.getElementById(this.palette_name).innerHTML = 
        '<div align=\"left\" class=\"' + this.palette_name + '_title\" onClick=\"closeEmojiPalette();\">' +
        '<div class=\"' + this.palette_name + '_title_left\">&nbsp;&nbsp;絵文字&nbsp;&nbsp;</div>' + 
        '<div class=\"' + this.palette_name + '_title_right\">' + 
        '<a href=\"javascript:void(0)\" class=\"' + this.palette_name + '_image_close\">' + 
        '<img src=\"' + img_server + 'img/p_close_rev.gif\" border=\"0\" height=\"11\" width=\"12\" alt=\"close\" class=\"' + this.palette_name + '_image_close\">' + 
        '</a>' + 
        '</div>' + 
        '</div>' + 
        '<div class=\"' + this.palette_name + '_body\">' + 
        palette + 
        '</div>';        
    },

    /**
    *    パレットの内容表示
    */
    showPalette: function() {
		Element.show(this.palette_name);
    }
};

Object.extend(ImodeEmojiPalette.prototype,EmojiPalette.prototype);


/**
*    Adsパレット　パレットクラスの実装
*/
AdsEmojiPalette = Class.create();
AdsEmojiPalette.prototype = 
{
    initialize: function(palette_name,width,adv_x,closefunction,ads_array){

        this.pos_x = 0;
        this.pos_y = 10;
        this.onclick_function = closefunction;    
        this.width = width;
        this.adv_x = adv_x;
        this.textinsert = null;
        this.emoji_array = new Array();
        this.emoji_img_array = new Array();
        
        this.ads_emoji_array = new Array();  
        this.ads_emoji_array_a = new Array();
        this.ads_emoji_img_array = new Array();        
        
        this.ads_html = null;      
        
        this.ads_dir = null;          

        this.palette_name = palette_name;
        this.popup = Popup.create(this.palette_name);
        this.popup.loadPlugin('Overlay');
    	Element.setOpacity(Overlay.getInstance().getElement(), 0);
    		
    },
    
    set_ads_array: function(array,array_a){
    	this.ads_emoji_array = array;
    	this.ads_emoji_array_a = array_a;
        this.ads_emoji_img_array = new Array();          	
    },
    
    set_ads_html: function(html){
    	this.ads_html = html;    	
    }, 
    
     set_ads_dir: function(dir){
    	this.ads_dir = dir;    	
    },      
    
    /**
    *	画像を先読み
    */
    load_img: function(){
    	
        this.emoji_array = new Array(
			'50',	'59',	'58',	'61',	'205',	'209',	'241',	'56',	'55',	'60',	'206',	'57',	'52',	'204',	'53',	'54',	'51',	'207',	'242',	'246',
			'208',	'210',	'46',	'47',	'49',	'48',	'65',	'68',	'76',	'75',	'74',	'78',	'79',	'73',	'66',	'67',	'80',	'77',	'72',	'71',
			'69',	'40',	'87',	'41',	'42',	'137',	'138',	'141',	'62',	'63',	'43',	'44',	'103',	'104',	'105',	'106',	'107',	'108',	'109',	'110',
			'111',	'112',	'113',	'114',	'237',	'238',	'239',	'240',	'243',	'244',	'24',	'98',	'99',	'236',	'229',	'231',	'232',	'22',	'21',	'202',
			'23',	'235',	'245',	'1',	'2',	'101',	'102',	'3',	'4',	'5',	'6',	'145',	'146',	'147',	'148',	'149',	'150',	'88',	'184',	'226',
			'227',	'228',	'230',	'233',	'234',	'90',	'91',	'92',	'93',	'94',	'95',	'116',	'193',	'201',	'215',	'115',	'31',	'134',	'82',	'29',
			'30',	'25',	'142',	'191',	'86',	'9',	'10',	'7',	'8',	'12',	'11',	'118',	'119',	'120',	'18',	'13',	'89',	'14',	'15',	'16',
			'17',	'121',	'122',	'123',	'124',	'125',	'19',	'20',	'26',	'27',	'133',	'28',	'81',	'32',	'152',	'117',	'135',	'154',	'100',	'153',
			'197',	'196',	'33',	'34',	'35',	'97',	'180',	'84',	'96',	'181',	'136',	'83',	'212',	'127',	'128',	'129',	'130',	'131',	'143',	'144',
			'160',	'162',	'176',	'177',	'178',	'179',	'182',	'183',	'188',	'203',	'189',	'192',	'190',	'194',	'195',	'198',	'199',	'200',	'85',	'132',
			'64',	'70',	'165',	'166',	'167',	'168',	'169',	'170',	'171',	'172',	'173',	'174',	'175',	'164',	'163',	'126',	'139',	'140',	'151',	'219',
			'217',	'224',	'225',	'159',	'45',	'211',	'36',	'37',	'38',	'39',	'155',	'157',	'158',	'156',	'161',	'185',	'186',	'187',	'216',	'220',
			'221',	'222',	'223',	'218',	'213',	'214'
        ); 

        this.emoji_img_array = new Array();  
        
        this.ads_emoji_img_array = new Array();          
        
        var img_server = "http://img.mixi.jp/";
        if(this.isSSL()){
        	img_server = "";
        }
              
        var i_img = 0;
        for(i_img = 0; i_img < 246; i_img++){
        	this.emoji_img_array[i_img] = new Image();
        	this.emoji_img_array[i_img].src = img_server + "img/emoji/" + this.emoji_array[i_img] + ".gif";
        }

        i_img = 0;
        for(i_img = 0; i_img < this.ads_emoji_array.length; i_img++){
        	this.ads_emoji_img_array[i_img] = new Image();
        	this.ads_emoji_img_array[i_img].src = img_server + "img/emoji/" + this.ads_dir + this.ads_emoji_array[i_img] + ".gif";
        }        
        
		Element.hide(this.palette_name);        
        
        var palette='<table cellpadding="0" cellspacing="2" border="0" align="center">';
        var imgUrl= img_server + "img/dot0.gif";
        var i=0,j=0,current=0;
        
        while(i < 13) {
            palette+="<tr>";
            while(j < 20) {
            	if(current >= 246 ){
	                palette+="<td></td>";
            	}else{
	                palette+=
	                "<td style='background-image: url(" + this.emoji_img_array[current].src + ")'>"+
	                "<a href=\"javascript:inputEmoji('m',"+this.emoji_array[current]+")\""+
	                "style=\"background-color: transparent;text-decoration: none;\" onClick=\"closeEmojiPalette();\""+
	                "onMouseOver=\"document.getElementById('plt"+current+"').src='" + img_server + "img/mouse_over03.gif'\" onMouseOut=\"document.getElementById('plt"+current+"').src='" +img_server + "img/dot0.gif'\">"+
	                "<img src=\""+imgUrl+"\" border=\"0\" width=\"16\" height=\"16\" id=\"plt"+current+"\"/>"+
	                "</a></td>";
	            }
                current++;
                j++;
            }
            palette+="</tr>";
            j=0;
            i++;
        }
        palette+="<tr><td colspan='20'>";
        palette+= this.ads_html;                
		palette+="</td></tr>";    

		i = 0; j=0; current = 0;
        while(i < Math.floor(this.ads_emoji_img_array.length / 20) + 1) {
            while(j < 20) {
            	if(current >= this.ads_emoji_img_array.length ){
	                palette+="<td></td>";
            	}else{
	                palette+=
	                "<td style='background-image: url(" + this.ads_emoji_img_array[current].src + ")'>"+
	                "<a href=\"javascript:inputEmoji('a',"+this.ads_emoji_array_a[current]+")\""+
	                "style=\"background-color: transparent;text-decoration: none;\" onClick=\"closeEmojiPalette();\""+
	                "onMouseOver=\"document.getElementById('ads_plt"+current+"').src='" + img_server + "img/mouse_over03.gif'\" onMouseOut=\"document.getElementById('ads_plt"+current+"').src='" +img_server + "img/dot0.gif'\">"+
	                "<img src=\""+imgUrl+"\" border=\"0\" width=\"16\" height=\"16\" id=\"ads_plt"+current+"\"/>"+
	                "</a></td>";
	            }
                current++;
                j++;
            }
            palette+="</tr>";
            j=0;
            i++;
        }
     
        palette+="</table>";

        document.getElementById(this.palette_name).innerHTML = 
        '<div align=\"left\" class=\"' + this.palette_name + '_title\" onClick=\"closeEmojiPalette();\">' +
        '<div class=\"' + this.palette_name + '_title_left\">&nbsp;&nbsp;絵文字&nbsp;&nbsp;</div>' + 
        '<div class=\"' + this.palette_name + '_title_right\">' + 
        '<a href=\"javascript:void(0)\" class=\"' + this.palette_name + '_image_close\">' + 
        '<img src=\"' + img_server + 'img/p_close_rev.gif\" border=\"0\" height=\"11\" width=\"12\" alt=\"close\" class=\"' + this.palette_name + '_image_close\">' + 
        '</a>' + 
        '</div>' + 
        '</div>' + 
        '<div class=\"' + this.palette_name + '_body\">' + 
        palette + 
        '</div>';        
    },

    /**
    *    パレットの内容表示
    */
    showPalette: function() {
		Element.show(this.palette_name);
    }
};

Object.extend(AdsEmojiPalette.prototype,EmojiPalette.prototype);