/*******************************************************************************

*

*******************************************************************************/

KindEditor.plugin(‘image’, function(K) {

var self = this, name = 'image',
        allowImageUpload = K.undef(self.allowImageUpload, true),
        allowImageRemote = K.undef(self.allowImageRemote, true),
        formatUploadUrl = K.undef(self.formatUploadUrl, true),
        allowFileManager = K.undef(self.allowFileManager, false),
        uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),
        imageTabIndex = K.undef(self.imageTabIndex, 0),
        imgPath = self.pluginsPath + 'image/images/',
        extraParams = K.undef(self.extraFileUploadParams, {}),
        filePostName = K.undef(self.filePostName, 'imgFile'),
        fillDescAfterUploadImage = K.undef(self.fillDescAfterUploadImage, false),
        lang = self.lang(name + '.');
self.plugin.imageDialog = function(options) {
        var imageUrl = options.imageUrl,
                imageWidth = K.undef(options.imageWidth, ''),
                imageHeight = K.undef(options.imageHeight, ''),
                imageTitle = K.undef(options.imageTitle, ''),
                imageAlign = K.undef(options.imageAlign, ''),
                showRemote = K.undef(options.showRemote, true),
                showLocal = K.undef(options.showLocal, true),
                tabIndex = K.undef(options.tabIndex, 0),
                clickFn = options.clickFn;
        var target = 'kindeditor_upload_iframe_' + new Date().getTime();
        var hiddenElements = [];
        for(var k in extraParams){
                hiddenElements.push('<input type="hidden" name="' + k + '" value="' + extraParams[k] + '" />');
        }
        var html = [
                '<div style="padding:20px;">',
                //tabs
                '<div class="tabs"></div>',
                //remote image - start
                '<div class="tab1" style="display:none;">',
                //url
                '<div class="ke-dialog-row">',
                '<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',
                '<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> &nbsp;',
                '<span class="ke-button-common ke-button-outer">',
                '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
                '</span>',
                '</div>',
                //size
                '<div class="ke-dialog-row">',
                '<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>',
                lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
                lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
                '<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title="' + lang.resetSize + '" />',
                '</div>',
                //align
                '<div class="ke-dialog-row">',
                '<label style="width:60px;">' + lang.align + '</label>',
                '<input type="radio" name="align" class="ke-inline-block" value="" checked="checked" /> <img name="defaultImg" src="' + imgPath + 'align_top.gif" width="23" height="25" alt="" />',
                ' <input type="radio" name="align" class="ke-inline-block" value="left" /> <img name="leftImg" src="' + imgPath + 'align_left.gif" width="23" height="25" alt="" />',
                ' <input type="radio" name="align" class="ke-inline-block" value="right" /> <img name="rightImg" src="' + imgPath + 'align_right.gif" width="23" height="25" alt="" />',
                '</div>',
                //title
                '<div class="ke-dialog-row">',
                '<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>',
                '<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />',
                '</div>',
                '</div>',
                //remote image - end
                //local upload - start
                '<div class="tab2" style="display:none;">',
                '<iframe name="' + target + '" style="display:none;"></iframe>',
                '<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + K.addParam(uploadJson, 'dir=image') + '">',
                //file
                '<div class="ke-dialog-row">',
                hiddenElements.join(''),
                '<label style="width:60px;">' + lang.localUrl + '</label>',
                '<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> &nbsp;',
                '<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',
                '</div>',
                '</form>',
                '</div>',
                //local upload - end
                '</div>'
        ].join('');
        var dialogWidth = showLocal || allowFileManager ? 450 : 400,
                dialogHeight = showLocal && showRemote ? 300 : 250;
        var dialog = self.createDialog({
                name : name,
                width : dialogWidth,
                height : dialogHeight,
                title : self.lang(name),
                body : html,
                yesBtn : {
                        name : self.lang('yes'),
                        click : function(e) {
                                // Bugfix: http://code.google.com/p/kindeditor/issues/detail?id=319
                                if (dialog.isLoading) {
                                        return;
                                }
                                // insert local image
                                if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
                                        if (uploadbutton.fileBox.val() == '') {
                                                alert(self.lang('pleaseSelectFile'));
                                                return;
                                        }
                                        dialog.showLoading(self.lang('uploadLoading'));
                                        uploadbutton.submit();
                                        localUrlBox.val('');
                                        return;
                                }
                                // insert remote image
                                var url = K.trim(urlBox.val()),
                                        width = widthBox.val(),
                                        height = heightBox.val(),
                                        title = titleBox.val(),
                                        align = '';
                                alignBox.each(function() {
                                        if (this.checked) {
                                                align = this.value;
                                                return false;
                                        }
                                });
                                if (url == 'http://' || K.invalidUrl(url)) {
                                        alert(self.lang('invalidUrl'));
                                        urlBox[0].focus();
                                        return;
                                }
                                if (!/^\d*$/.test(width)) {
                                        alert(self.lang('invalidWidth'));
                                        widthBox[0].focus();
                                        return;
                                }
                                if (!/^\d*$/.test(height)) {
                                        alert(self.lang('invalidHeight'));
                                        heightBox[0].focus();
                                        return;
                                }
                                clickFn.call(self, url, title, width, height, 0, align);
                        }
                },
                beforeRemove : function() {
                        viewServerBtn.unbind();
                        widthBox.unbind();
                        heightBox.unbind();
                        refreshBtn.unbind();
                }
        }),
        div = dialog.div;
        var urlBox = K('[name="url"]', div),
                localUrlBox = K('[name="localUrl"]', div),
                viewServerBtn = K('[name="viewServer"]', div),
                widthBox = K('.tab1 [name="width"]', div),
                heightBox = K('.tab1 [name="height"]', div),
                refreshBtn = K('.ke-refresh-btn', div),
                titleBox = K('.tab1 [name="title"]', div),
                alignBox = K('.tab1 [name="align"]', div);
        var tabs;
        if (showRemote && showLocal) {
                tabs = K.tabs({
                        src : K('.tabs', div),
                        afterSelect : function(i) {}
                });
                tabs.add({
                        title : lang.remoteImage,
                        panel : K('.tab1', div)
                });
                tabs.add({
                        title : lang.localImage,
                        panel : K('.tab2', div)
                });
                tabs.select(tabIndex);
        } else if (showRemote) {
                K('.tab1', div).show();
        } else if (showLocal) {
                K('.tab2', div).show();
        }
        var uploadbutton = K.uploadbutton({
                button : K('.ke-upload-button', div)[0],
                fieldName : filePostName,
                form : K('.ke-form', div),
                target : target,
                width: 60,
                afterUpload : function(data) {
                        dialog.hideLoading();
                        if (data.error === 0) {
                                var url = data.url;
                                if (formatUploadUrl) {
                                        url = K.formatUrl(url, 'absolute');
                                }
                                if (self.afterUpload) {
                                        self.afterUpload.call(self, url, data, name);
                                }
                                if (!fillDescAfterUploadImage) {
                                        clickFn.call(self, url, data.title, data.width, data.height, data.border, data.align);
                                } else {
                                        K(".ke-dialog-row #remoteUrl", div).val(url);
                                        K(".ke-tabs-li", div)[0].click();
                                        K(".ke-refresh-btn", div).click();
                                }
                        } else {
                                alert(data.message);
                        }
                },
                afterError : function(html) {
                        dialog.hideLoading();
                        self.errorDialog(html);
                }
        });
        uploadbutton.fileBox.change(function(e) {
                localUrlBox.val(uploadbutton.fileBox.val());
        });
        if (allowFileManager) {
                viewServerBtn.click(function(e) {
                        self.loadPlugin('filemanager', function() {
                                self.plugin.filemanagerDialog({
                                        viewType : 'VIEW',
                                        dirName : 'image',
                                        clickFn : function(url, title) {
                                                if (self.dialogs.length > 1) {
                                                        K('[name="url"]', div).val(url);
                                                        if (self.afterSelectFile) {
                                                                self.afterSelectFile.call(self, url);
                                                        }
                                                        self.hideDialog();
                                                }
                                        }
                                });
                        });
                });
        } else {
                viewServerBtn.hide();
        }
        var originalWidth = 0, originalHeight = 0;
        function setSize(width, height) {
                widthBox.val(width);
                heightBox.val(height);
                originalWidth = width;
                originalHeight = height;
        }
        refreshBtn.click(function(e) {
                var tempImg = K('<img src="' + urlBox.val() + '" />', document).css({
                        position : 'absolute',
                        visibility : 'hidden',
                        top : 0,
                        left : '-1000px'
                });
                tempImg.bind('load', function() {
                        setSize(tempImg.width(), tempImg.height());
                        tempImg.remove();
                });
                K(document.body).append(tempImg);
        });
        widthBox.change(function(e) {
                if (originalWidth > 0) {
                        heightBox.val(Math.round(originalHeight / originalWidth * parseInt(this.value, 10)));
                }
        });
        heightBox.change(function(e) {
                if (originalHeight > 0) {
                        widthBox.val(Math.round(originalWidth / originalHeight * parseInt(this.value, 10)));
                }
        });
        urlBox.val(options.imageUrl);
        setSize(options.imageWidth, options.imageHeight);
        titleBox.val(options.imageTitle);
        alignBox.each(function() {
                if (this.value === options.imageAlign) {
                        this.checked = true;
                        return false;
                }
        });
        if (showRemote && tabIndex === 0) {
                urlBox[0].focus();
                urlBox[0].select();
        }
        return dialog;
};
self.plugin.image = {
        edit : function() {
                var img = self.plugin.getSelectedImage();
                self.plugin.imageDialog({
                        imageUrl : img ? img.attr('data-ke-src') : 'http://',
                        imageWidth : img ? img.width() : '',
                        imageHeight : img ? img.height() : '',
                        imageTitle : img ? img.attr('title') : '',
                        imageAlign : img ? img.attr('align') : '',
                        showRemote : allowImageRemote,
                        showLocal : allowImageUpload,
                        tabIndex: img ? 0 : imageTabIndex,
                        clickFn : function(url, title, width, height, border, align) {
                                self.exec('insertimage', url, title, width, height, border, align);
                                // Bugfix: [Firefox] 上传图片后,总是出现正在加载的样式,需要延迟执行hideDialog
                                setTimeout(function() {
                                        self.hideDialog().focus();
                                }, 0);
                        }
                });
        },
        'delete' : function() {
                var target = self.plugin.getSelectedImage();
                if (target.parent().name == 'a') {
                        target = target.parent();
                }
                target.remove();
                // [IE] 删除图片后立即点击图片按钮出错
                self.addBookmark();
        }
};
self.clickToolbar(name, self.plugin.image.edit);

});