/*******************************************************************************
 * KindEditor - WYSIWYG HTML Editor for Internet
 * Copyright (C) 2006-2011 kindsoft.net
 *
 * @author Roddy <luolonghao@gmail.com>
 * @site http://www.kindsoft.net/
 * @licence http://www.kindsoft.net/license.php
 *******************************************************************************/

KindEditor.plugin('emoticons', function (K) {
    var self = this, name = 'emoticons',
        path = (self.emoticonsPath || self.pluginsPath + 'emoticons/images/'),
        allowPreview = self.allowPreviewEmoticons === undefined ? true : self.allowPreviewEmoticons,
        currentPageNum = 1;
    self.clickToolbar(name, function () {
        var rows = 5, cols = 9, total = 135, startNum = 0,
            cells = rows * cols, pages = Math.ceil(total / cells),
            colsHalf = Math.floor(cols / 2),
            wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
            elements = [],
            menu = self.createMenu({
                name: name,
                beforeRemove: function () {
                    removeEvent();
                }
            });
        menu.div.append(wrapperDiv);
        var previewDiv, previewImg;
        if (allowPreview) {
            previewDiv = K('<div class="ke-preview"></div>').css('right', 0);
            previewImg = K('<img class="ke-preview-img" src="' + path + startNum + '.gif" />');
            wrapperDiv.append(previewDiv);
            previewDiv.append(previewImg);
        }
        function bindCellEvent(cell, j, num) {
            if (previewDiv) {
                cell.mouseover(function () {
                    if (j > colsHalf) {
                        previewDiv.css('left', 0);
                        previewDiv.css('right', '');
                    } else {
                        previewDiv.css('left', '');
                        previewDiv.css('right', 0);
                    }
                    previewImg.attr('src', path + num + '.gif');
                    K(this).addClass('ke-on');
                });
            } else {
                cell.mouseover(function () {
                    K(this).addClass('ke-on');
                });
            }
            cell.mouseout(function () {
                K(this).removeClass('ke-on');
            });
            cell.click(function (e) {
                self.insertHtml('<img src="' + path + num + '.gif" border="0" alt="" />').hideMenu().focus();
                e.stop();
            });
        }

        function createEmoticonsTable(pageNum, parentDiv) {
            var table = document.createElement('table');
            parentDiv.append(table);
            if (previewDiv) {
                K(table).mouseover(function () {
                    previewDiv.show('block');
                });
                K(table).mouseout(function () {
                    previewDiv.hide();
                });
                elements.push(K(table));
            }
            table.className = 'ke-table';
            table.cellPadding = 0;
            table.cellSpacing = 0;
            table.border = 0;
            var num = (pageNum - 1) * cells + startNum;
            for (var i = 0; i < rows; i++) {
                var row = table.insertRow(i);
                for (var j = 0; j < cols; j++) {
                    var cell = K(row.insertCell(j));
                    cell.addClass('ke-cell');
                    bindCellEvent(cell, j, num);
                    var span = K('<span class="ke-img"></span>')
                        .css('background-position', '-' + (24 * num) + 'px 0px')
                        .css('background-image', 'url(' + path + 'static.gif)');
                    cell.append(span);
                    elements.push(cell);
                    num++;
                }
            }
            return table;
        }

        var table = createEmoticonsTable(currentPageNum, wrapperDiv);

        function removeEvent() {
            K.each(elements, function () {
                this.unbind();
            });
        }

        var pageDiv;

        function bindPageEvent(el, pageNum) {
            el.click(function (e) {
                removeEvent();
                table.parentNode.removeChild(table);
                pageDiv.remove();
                table = createEmoticonsTable(pageNum, wrapperDiv);
                createPageTable(pageNum);
                currentPageNum = pageNum;
                e.stop();
            });
        }

        function createPageTable(currentPageNum) {
            pageDiv = K('<div class="ke-page"></div>');
            wrapperDiv.append(pageDiv);
            for (var pageNum = 1; pageNum <= pages; pageNum++) {
                if (currentPageNum !== pageNum) {
                    var a = K('<a href="javascript:;">[' + pageNum + ']</a>');
                    bindPageEvent(a, pageNum);
                    pageDiv.append(a);
                    elements.push(a);
                } else {
                    pageDiv.append(K('@[' + pageNum + ']'));
                }
                pageDiv.append(K('@&nbsp;'));
            }
        }

        createPageTable(currentPageNum);
    });
});