//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/Panel>
//= require <uiframework/URLUtil>
//= require <uiframework/UICEvent>
var PreviewPanel = function()
{
	this.Extends = Panel;
	// ---------------------------------
	// Children
	this.image = null;
	this.descriptionTextArea = null;
	// Properties
	this._dataProvider = null;
	this._dataProviderChanged = false;
	this._data = null;
	this._unscaledLogoSize = null;
	this._sizeToContent = true;
	/**
	 * @private
	 */
	this.initialize = function(id /* String */)
	{
		this.parent(id);
		this.set('tween',
		{
			duration : 500,
			transition : Fx.Transitions.Quint.easeOut
		});
		this.setStyles(
		{
			"z-index" : 20,
			opacity : 0
		});
		this.backgroundStyle(
		{
			"background-color" : "#FFF"
		});
		this.borderData(
		{
			topLeft : "img/panel-top-left.png",
			top : "img/panel-top-border.png",
			topRight : "img/panel-top-right.png",
			right : "img/panel-right-border.png",
			bottomLeft : "img/panel-bottom-left.png",
			bottomRight : "img/panel-bottom-right.png",
			bottom : "img/panel-bottom-border.png",
			left : "img/panel-left-border.png"
		});
	};

	this.createChildren = function()
	{
		if (this.logo)
			return;
		this.parent();
		this.logo = new UIComponent('img');
		this.descriptionTextArea = new UIComponent('div');
	};

	this.commitProperties = function()
	{
		this.parent();
		if (this._dataProviderChanged)
		{
			this.populatePanel();
			this._dataProviderChanged = false;
		}
	};

	this.updateDisplayList = function(width, height)
	{
		if (!this.logo)
			return;
		var paddingTop = 15;
		var paddingBottom = 15;
		var paddingLeft = 15;
		var paddingRight = 15;
		var posY = paddingTop;
		if (this.logo && this.contains(this.logo))
		{
			// Maintain aspect ratio of logo but
			// restrict to the with and height
			var _w = this._unscaledLogoSize.width;
			var _h = this._unscaledLogoSize.height;
			var scaleX = width / _w;
			var scaleY = 65 / _h;
			var scale = Math.min(scaleX, scaleY, 1);
			this.logo.setActualSize(_w * scale, _h * scale);

			this.logo.move((width - this.logo.width()) / 2, posY);

			posY += this.logo.height() + 5;
		}
		// height - posY - paddingTop - paddingBottom
		this.descriptionTextArea.width(width - paddingLeft - paddingRight);
		this.descriptionTextArea.move(paddingLeft, posY);
		this.descriptionTextArea.validateNow();

		var sizeY = posY + this.descriptionTextArea.height() + paddingBottom;
		if (this._sizeToContent)
		{
			sizeY = isNaN(sizeY) ? 25 : sizeY;
			if (this.height() != sizeY)
				this.height(sizeY);
			this.parent(width, sizeY);
		}
		else
			this.parent(width, height);
	};

	this.dataProvider = function(value /* Object */)
	{
		if (arguments.length)
		{
			this._dataProvider = value;
			this._dataProviderChanged = true;

			this.dispatchEvent(new UICEvent("collectionChange", false, false, value));

			this.invalidateDisplayList();
			this.invalidateProperties();
		}

		return this._dataProvider;
	};

	this.data = function(value /* Object */)
	{
		if (arguments.length)
		{
			this.normalize();

			this._data = value;
			this.dispatchEvent(new UICEvent("dataChange", false, false, value));
		}
		return this._data;
	};

	this.populatePanel = function()
	{
		this.createChildren();
		var dp = this.dataProvider();

		if (dp.logo)
		{
			this.logo.setProperties(
			{
				src : 'index.php?image=' + dp.logo.image_id,
				alt : URLUtil.stripSlashes(dp.logo.alt),
				width : dp.logo.width,
				height : dp.logo.height
			});
			this._unscaledLogoSize =
			{
				width : dp.logo.width,
				height : dp.logo.height
			};
			this.addChild(this.logo, 'bottom');
		}
		var html = '<h1>' + dp.title + '</h1>';
		html += '<p>' + dp.description + '</p>';
		this.descriptionTextArea.set('html', html);
		this.addChild(this.descriptionTextArea);
	};

	this.normalize = function()
	{
		if (this.logo && this.contains(this.logo))
			this.removeChild(this.logo);
		if (this.titleTextArea && this.contains(this.titleTextArea))
			this.removeChild(this.titleTextArea);
		if (this.descriptionTextArea && this.contains(this.descriptionTextArea))
			this.removeChild(this.descriptionTextArea);
	};
};
PreviewPanel = new Class(new PreviewPanel());