/**@license setplus: a lightweight HTML editor
 * @author  Levente Hunyadi
 * @version 0.2.0
 * @remarks Copyright (C) 2010-2011 Levente Hunyadi
 * @remarks Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
 * @see     http://hunyadi.info.hu/projects/setplus
 **/

/*
* setplus: a lightweight HTML editor
* Copyright 2010-2011 Levente Hunyadi
*
* setplus is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* setplus is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with setplus.  If not, see <http://www.gnu.org/licenses/>.
*/

(function ($) {
	setplus.ImagePropertiesDialog = new Class({
		'Extends': setplus.EditorDialog,

		'initialize': function () {
			var self = this;
			self.parent();

			self._title.adopt(
				new Element('span', {
					'class': 'setplus-imageproperties-title'
				})
			);

			var protocol, url, alt, width, height, title, previewimage;
			var rows = [
				[
					new Element('span', {
						'class': 'setplus-imageproperties-url'
					}),
					[  // many elements into the same cell
						protocol = new Element('select').adopt(
							['','http://','https://','ftp://','mailto:'].map(function (protocol) {
								return new Element('option', {
									'value': protocol,
									'html': protocol
								});
							})
						),
						url = new Element('input', {
							'type': 'text'
						})
					]
				],
				[
					new Element('span', {
						'class': 'setplus-imageproperties-alt'
					}),
					alt = new Element('input', {
						'type': 'text'
					})
				],
				[
					new Element('span', {
						'class': 'setplus-imageproperties-width'
					}),
					width = new Element('input', {
						'type': 'text'
					})
				],
				[
					new Element('span', {
						'class': 'setplus-imageproperties-height'
					}),
					height = new Element('input', {
						'type': 'text'
					})
				],
				[
					new Element('span', {
						'class': 'setplus-imageproperties-tooltip'
					}),
					title = new Element('input', {
						'type': 'text'
					})
				],
				[
					new Element('span', {
						'class': 'setplus-imageproperties-preview'
					}),
					new Element('div', {
						'class': 'setplus-imageproperties-preview'
					}).adopt(previewimage = new Element('img'))
				]
			];

			// maps HTML <a> properties to form controls
			self._controls = {
				'src': url,
				'alt': alt,
				'width': width,
				'height': height,
				'title': title
			};

			self._content.adopt(
				new Element('table').adopt(
					rows.map(function (cells) {
						return new Element('tr').adopt(
							cells.map(function (contents) {
								return new Element('td').adopt(contents);
							})
						)
					})
				),
				new Element('button', {
					'type': 'button',
					'class': 'setplus-preview',
					'events': {
						'click': function () {
							var image = $(new Image).set('src', protocol.get('value') + url.get('value')).addEvents({
								'load': function () {
									previewimage.set('src', image.get('src'));
									if (!width.get('value') && !height.get('value')) {
										width.set('value', image.width);
										height.set('value', image.height);
									}
								},
								'error': function () {
									previewimage.erase('src');
								}
							});
						}
					}
				}),
				new Element('button', {
					'type': 'button',
					'class': 'setplus-ok',
					'events': {
						'click': self.invoke.bind(self, function (editor) {
							// insert image
							editor.image(
								protocol.get('value') + url.get('value'),
								Object.filter({
									'alt': alt.get('value'),
									'width': width.get('value'),
									'height': height.get('value'),
									'title': title.get('value')
								}, function (value) {
									return value;
								})
							);

							// close pop-up window
							self.hide();
						})
					}
				})
			)
		},

		/**
		* Assigns initial values to form controls.
		*/
		'assign': function (elem) {
			// clear current values
			this._content.getElements('input[type=text],select').set('value', '');

			// set values based on element passed in
			if (elem) {
				Object.each(self._controls, function (ctrl, key) {
					ctrl.set('value', elem.getProperty(key));
				});
			}
		}
	});
})(document.id);