/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

(function() {
	// Load image preview.
	var IMAGE = 1,
	CLEANUP = 8;

	var imageDialog = function(editor) {
		var onImgLoadEvent = function() {
			// Image is ready.
			var original = this.originalElement;
			original.setCustomData('isReady', 'true');
			original.removeListener('load', onImgLoadEvent);
			original.removeListener('error', onImgLoadErrorEvent);
			original.removeListener('abort', onImgLoadErrorEvent);

		};

		var onImgLoadErrorEvent = function() {
			// Error. Image is not loaded.
			var original = this.originalElement;
			original.removeListener('load', onImgLoadEvent);
			original.removeListener('error', onImgLoadErrorEvent);
			original.removeListener('abort', onImgLoadErrorEvent);

			// Set Error image.
			var noimage = CKEDITOR.getUrl(editor.skinPath + 'images/noimage.png');

		};
		return {
			title: editor.lang.image.title,
			minWidth: 420,
			minHeight: 310,
			onShow: function() {
				this.imageElement = false;
				this.imageEditMode = false;

				var editor = this.getParentEditor(),
				sel = this.getParentEditor().getSelection(),
				element = sel.getSelectedElement();

				// Copy of the image
				this.originalElement = editor.document.createElement('img');
				this.originalElement.setAttribute('rel', '');
				this.originalElement.setCustomData('isReady', 'false');

				if (element && element.getName() == 'img' && ! element.getAttribute('_cke_protected_html')) this.imageEditMode = 'img';

				if (this.imageEditMode || this.imageElement) {
					if (!this.imageElement) this.imageElement = element;

					// Fill out all fields.
					this.setupContent(IMAGE, this.imageElement);
				}
			},
			onOk: function() {
				// Create a new image
				if (!this.imageEditMode) {
					// Image dialog -> create IMG element.
					this.imageElement = editor.document.createElement('img');
					this.imageElement.setAttribute('rel', '');
				}

				// Set attributes.
				this.commitContent(IMAGE, this.imageElement);

				// Insert a new Image.
				if (!this.imageEditMode) {
					editor.insertElement(this.imageElement);
				}
			},
			onLoad: function() {
				var doc = this._.element.getDocument();
			},
			onHide: function() {
				if (this.originalElement) {
					this.originalElement.removeListener('load', onImgLoadEvent);
					this.originalElement.removeListener('error', onImgLoadErrorEvent);
					this.originalElement.removeListener('abort', onImgLoadErrorEvent);
					this.originalElement.remove();
					this.originalElement = false; // Dialog is closed.
				}
			},
			contents: [{
				id: 'info',
				label: editor.lang.image.infoTab,
				accessKey: 'I',
				elements: [{
					type: 'vbox',
					padding: 0,
					children: [
					{
						type: 'hbox',
						widths: ['280px', '110px'],
						align: 'right',
						children: [{
							id: 'txtUrl',
							type: 'text',
              label : editor.lang.common.url,
							onChange: function() {
								var dialog = this.getDialog(),
								newUrl = this.getValue();

								//Update original image
								if (newUrl.length > 0) //Prevent from load before onShow
								{
									dialog = this.getDialog();
									var original = dialog.originalElement;

									original.setCustomData('isReady', 'false');

									original.on('load', onImgLoadEvent, dialog);
									original.on('error', onImgLoadErrorEvent, dialog);
									original.on('abort', onImgLoadErrorEvent, dialog);
									original.setAttribute('src', newUrl);

								}
							},
							setup: function(type, element) {
								if (type == IMAGE) {
									var url = element.data('cke-saved-src') || element.getAttribute('src');
									var field = this;

									// In IE7 the dialog is being rendered improperly when loading
									// an image with a long URL. So we need to delay it a bit. (#4122)
									setTimeout(function() {
										field.setValue(url); // And call this.onChange()
										field.focus();
									},
									0);
								}
							},
							commit: function(type, element) {
								if (type == IMAGE && (this.getValue() || this.isChanged())) {
									element.data('cke-saved-src', decodeURI(this.getValue()));
									element.setAttribute('src', decodeURI(this.getValue()));
									element.removeAttribute('width');
									element.removeAttribute('height');
								}
								else if (type == CLEANUP) {
									element.setAttribute('src', ''); // If removeAttribute doesn't work.
									element.removeAttribute('src');
								}
							}
						},
						{
							type: 'button',
							id: 'browse',
							align: 'center',
							label: editor.lang.common.browseServer,
							hidden: true,
							filebrowser: 'info:txtUrl'
						}]
					}]
				},
				{
					id: 'txtRel',
					type: 'text',
					label: "Relação (rel)",
					accessKey: 'R',
					'default': '',
					onChange: function() {},
					setup: function(type, element) {
						if (type == IMAGE) this.setValue(element.getAttribute('rel'));
					},
					commit: function(type, element) {
						if (type == IMAGE) {
							if (this.getValue() || this.isChanged()) element.setAttribute('rel', this.getValue());
						}
						else if (type == CLEANUP) {
							element.removeAttribute('rel');
						}
					}
				},
				{
					id: 'txtAlt',
					type: 'text',
					label: editor.lang.image.alt,
					accessKey: 'A',
					'default': '',
					onChange: function() {},
					setup: function(type, element) {
						if (type == IMAGE) this.setValue(element.getAttribute('alt'));
					},
					commit: function(type, element) {
						if (type == IMAGE) {
							if (this.getValue() || this.isChanged()) element.setAttribute('alt', this.getValue());
						}
						else if (type == CLEANUP) {
							element.removeAttribute('alt');
						}
					}
				}]
			}]
		};
	};

	CKEDITOR.dialog.add('image', function(editor) {
		return imageDialog(editor);
	});
})();