//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/UIComponent>

var MyAccountView = function()
{
	this.Extends = UIComponent;
	this._editButtons = null;
	this._listingTable = null;
	this._dataprovider = null;
	this._dataProviderChanged = false;
	//////////////////////////////////////////////////
	// Children
	
	this.initialize = function()
	{
		this.parent("div", {id:"myAccountView"});
		
		this.editButton_clickHandler = this.editButton_clickHandler.bind(this);
	};
	
	this.commitProperties = function()
	{
		this.parent();
		
		if (this._dataProviderChanged)
		{
			this.buildView();
			this._dataProviderChanged = false;
		}
	};
	
	this.updateDisplayList = function(w, h)
	{
		this.parent(w, h);
		this._listingTable.setActualSize(w, h);
	};
	
	this.dataProvider = function(value /* Array */)
	{
		if (arguments.length && value != this._dataProvider)
		{
			this._dataProvider = value;
			this._dataProviderChanged = true;
			
			this.invalidateProperties();
		}
		return this._dataProvider;
	};
	
	this.buildView = function()
	{
		if (this._listingTable)
		{
			this.removeChild(this._listingTable);
			this._listingTable = null;
			this._editButtons = null;
		}
		if (this._dataProvider)
		{
			this._listingTable = new UIComponent("div", {html:this.buildRows(this._dataProvider)});
			this.addChild(this._listingTable);
			var editButtonElements = $$(".editButton");
			if (editButtonElements)
			{
				this._editButtons = [];
				var i = editButtonElements.length;
				while(i--)
				{
					var editButtonElement = editButtonElements[i];
					editButtonElement.addEvent("click", this.editButton_clickHandler);
					editButtonElement.store("data", this._dataProvider[i]);
				}
			}
		}
	};
	
	this.buildRows = function(rows)
	{
		var html = "<table id='listingTable'>";
		html += "<tr>";
		html += "<th class='tableSeperator'></th>";
		html += "<th class='tableSeperator'>ID</th>";
		html += "<th class='tableSeperator'>Active</th>";
		html += "<th class='tableSeperator'>Title</th>";
		html += "<th class='tableSeperator'>Description</th>";
		html += "<th class='tableSeperator'>Phone Number</th>";
		html += "<th>Date Created</th>";
		html += "</tr>";
		var len = rows.length;
		for (var i = 0; i < len; i++)
		{
			html += "<tr>";
			var row = rows[i];
			html += "<td class='tableSeperator'><button class='editButton'>Edit</button></td>";
			html += "<td class='tableSeperator'>"+row.listing_id+"</td>";
			html += "<td class='tableSeperator'>"+(row.accepted == "1" ? "true":"false")+"</td>";
			html += "<td class='tableSeperator'>"+row.title+"</td>";
			html += "<td class='tableSeperator'><p>"+row.description+"</p?</td>";
			html += "<td class='tableSeperator'>"+row.phone_number+"</td>";
			html += "<td class='tableSeperator'>"+row.creation_date+"</td>";
			html += "</tr>";
		}
		html += "</table>";
		return html;
	};
	
	//----------------------------
	// Event handlers
	this.editButton_clickHandler = function(event)
	{
		var button = event.target;
		this.dispatchEvent(new UICEvent("editListing", false, false, button.retrieve("data")));
	};
};
MyAccountView = new Class(new MyAccountView());