//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/UIComponent>
//=  require <uiframework/URLUtil>
//= require <uiframework/UIButton>
var ListingSummary = function()
{
	this.Extends = UIComponent;
	/**
	 * Background used to fade in/out border
	 * 
	 * @type UIComponent
	 */
	this.background = null;
	/**
	 * The text and inner content of the summary
	 * 
	 * @type UIComponent
	 */
	this.textContent = null;
	/**
	 * The logo image (if any)
	 * 
	 * @type UIComponent
	 */
	this.logo = null;
	/**
	 * The preview button used to trigger the preview popup
	 * 
	 * @type UIButton
	 */
	this.previewButton = null;
	/**
	 * The dataProvider for this control
	 * 
	 * @type Object
	 */
	this._dataProvider = null;
	/**
	 * The unscaledWidth and unsclaedHeight of the logo (if nay)
	 */
	this._unscaledLogoSize = null;

	// Flags
	this.dataProviderChanged = false;

	this.initialize = function()
	{
		this.parent('div',
		{
			'class' : 'listingSummary'
		});
	};

	this.commitProperties = function()
	{
		this.parent();
		if (this.dataProviderChanged)
		{
			this.createChildren();
			this.populateListingSummary();

			this.dataProviderChanged = false;
		}
	};

	this.createChildren = function()
	{
		this.parent();
		if (this.background)
			return;
		this.background = new UIComponent('div',
		{
			"class" : "listingSummaryBackground"
		});
		this.background.set('tween',
		{
			duration : 500,
			transition : Fx.Transitions.Quint.easeOut
		});
		this.addChild(this.background);

		this.logo = new UIComponent('img',
		{
			styles :
			{
				opacity : '.15'
			}
		});

		this.textContent = new UIComponent('div');
		this.addChild(this.textContent);

		this.previewButton = new UIButton('div',
		{
			styles :
			{
				cursor : 'pointer',
				opacity : '0.0'
			},
			tween :
			{
				duration : 500,
				transition : Fx.Transitions.Quint.easeOut
			}
		});
		this.previewButton.labelText('Preview');
		this.previewButton.labelStyles(
		{
			ht : "ht"
		});
		this.previewButton.buttonSkins(
		{
			upSkin : 'url("img/preview-button-up.png")',
			downSkin : 'url("img/preview-button-down.png")',
			overSkin : 'url("img/preview-button-up.png")'
		});
		this.addChild(this.previewButton);
		this.previewButton.getLabelNode().setStyle('font-size', '10px');
	};

	this.childrenCreated = function()
	{
		this.previewButton.addEventListener('mouseenter', this.preview_mouseOverHandler, false, 0, this);
		this.previewButton.addEventListener('mouseleave', this.preview_mouseOutHandler, false, 0, this);
		// -------------------------------
		this.addEventListener('mouseenter', this.mouseOverhandler, false, 0, this);
		this.addEventListener('mouseleave', this.mouseOutHandler, false, 0, this);
	};

	this.updateDisplayList = function(width, height)
	{
		this.parent(width, height);
		this.background.setActualSize(width, height);

		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 = height / _h;
			var scale = Math.min(scaleX, scaleY, 1);

			this.logo.setActualSize(_w * scale, _h * scale);
			this.logo.move(width - this.logo.width(), (height - this.logo.height()) / 2);
		}

		this.previewButton.setActualSize(45, 20);
		this.previewButton.move(width - 50, 5);

		this.textContent.setActualSize(width - 10, height - 25);
		this.textContent.move(10, 0);
	};

	// ////////////////////////////////////////////////////////////////
	// Helper functions

	this.populateListingSummary = function()
	{
		var dp = this.dataProvider();
		if (!dp)
			return;
		var title = URLUtil.stripSlashes(dp.title);
		var url = dp.web_address ? URLUtil.stripSlashes(dp.web_address) : '';
		var web_address = '';
		if (url)
		{
			// look for the http://
			if (/^(http:\/\/)/.test(url) == false)
				url = 'http://' + url;
			web_address = '<p><a href=' + url + '>' + url + '</a></p>';
		}
		this.textContent.set('html', '<h4><a href="?listing=' + dp.listing_id + '">' + title + '</a></h4><p>' + dp.phone_number + '</p>' + web_address);

		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, 'top');
		}
		else if (this.logo && this.contains(this.logo))
			this.removeChild(this.logo);
	};

	// ////////////////////////////////////////////////////////////////
	// Event listeners

	this.preview_mouseOverHandler = function(event /* UICEvent */)
	{
		this.mouseOverhandler();
		event.type = "previewMouseOver";
		event.eventPhase = 0;
		this.dispatchEvent(event);
	};

	this.preview_mouseOutHandler = function(event /* UICEvent */)
	{
		event.type = "previewMouseOut";
		event.eventPhase = 0;
		this.dispatchEvent(event);
	};

	this.mouseOverhandler = function()
	{
		this.previewButton.fade('in');
		this.background.fade('in');
	};

	this.mouseOutHandler = function()
	{
		this.previewButton.fade('out');
		this.background.fade('out');
	};

	/**
	 * Gets / sets the dataProvider.
	 * 
	 * @param {Object}
	 *            value The new value of the dataProvider. (optional)
	 * @return {object} The current value of the dataProvider.
	 */
	this.dataProvider = function(value /* Object */)
	{
		if (arguments.length)
		{
			this._dataProvider = value;
			this.dataProviderChanged = true;

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

		return this._dataProvider;
	};
};
ListingSummary = new Class(new ListingSummary());