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

* 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('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) {

					if (img) {

						img.attr('src', url);

						img.attr('data-ke-src', url);

						img.attr('width', width);

						img.attr('height', height);

						img.attr('title', title);

						img.attr('align', align);

						img.attr('alt', title);

					} else {

						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);

});

