//= require <mootools-core-1.3-full-nocompat>
//= require <uiframework/UIComponent>
//= require <uiframework/UICEvent>
//= require <uiframework/TabNavigation>
//= require <findsalons/TabNavigationMediator>
//= require <findsalons/PreviewPanelMediator>
//= require <findsalons/Breadcrumbs>
//= require <findsalons/BreadcrumbsMediator>
//= require <findsalons/TopLeftColumn>
//= require <findsalons/TopCenterColumn>
//= require <findsalons/TopCenterColumnMediator>
//= require <findsalons/TopRightColumn>
//= require <findsalons/TopRightColumnMediator>
//= require <findsalons/BottomLeftColumn>
//= require <findsalons/BottomCenterColumn>
//= require <findsalons/BottomCenterColumnMediator>
//= require <findsalons/BottomRightColumn>
//= require <findsalons/BottomRightColumnMediator>

var ContentArea = function()
{
	this.Extends = UIComponent;

	this.initialize = function()
	{
		this.parent('div',
		{
			id : "contentArea"
		});
	};

	this.createChildren = function()
	{
		this.parent();

		var skins =
		{
			upSkin : 'url("img/tab-up.png")',
			downSkin : 'url("img/tab-down.png")',
			overSkin : 'url("img/tab-over.png")'
		};
		var data = $('navigation').dispose().getChildren(); // Array of
		// Elements.
		data.each(function(item, index, array)
		{
			array.splice(index, 1,
			{
				label : item.get("text"),
				url : item.getChildren('a')[0].get('href')
			});
		});
		this.tabNavigation = new TabNavigation(
		{
			id : "topNavigation"
		});
		this.tabNavigation.tabSkins(skins);
		this.tabNavigation.tabHeight(30);
		this.tabNavigation.tabWidth(85);
		this.tabNavigation.dataProvider(data);
		this.addChild(this.tabNavigation);

		this.breadcrumbs = new Breadcrumbs(
		{
			id : "breadcrumbs"
		});
		this.breadcrumbs.labelField('name');
		this.breadcrumbs.tabHeight(18);
		this.addChild(this.breadcrumbs);

		this.logo = new UIComponent('logo');
		this.addChild(this.logo);

		this.topLeftColumn = new TopLeftColumn();
		this.addChild(this.topLeftColumn);

		this.topCenterColumn = new TopCenterColumn();
		this.addChild(this.topCenterColumn);

		this.topRightColumn = new TopRightColumn();
		this.addChild(this.topRightColumn);

		this.bottomLeftColumn = new BottomLeftColumn();
		this.addChild(this.bottomLeftColumn);

		this.bottomCenterColumn = new BottomCenterColumn();
		this.bottomCenterColumn.expandable(true);
		this.addChild(this.bottomCenterColumn);

		this.bottomRightColumn = new BottomRightColumn();
		this.addChild(this.bottomRightColumn);
	};

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

		var paddingTop = 30;
		var paddingRight = 30;
		var paddingBottom = 20;
		var paddingLeft = 30;
		var horizontalGap = 10;
		var verticalGap = 10;

		this.logo.move(paddingLeft, paddingTop);
		var _w = width - paddingLeft - paddingRight;
		var upperSectHeight = 225;
		var centerColWidth = _w * .6;
		var outerColWidth = (_w * .2) - horizontalGap;

		this.tabNavigation.setActualSize(_w, 30);
		this.tabNavigation.move(paddingLeft, paddingTop + this.logo.height() + 30);

		this.breadcrumbs.setActualSize(_w, 18);
		this.breadcrumbs.move(paddingLeft - 1 /* 1px border */, this.tabNavigation._y + this.tabNavigation.height() + 8);

		this.topLeftColumn.setActualSize(outerColWidth, upperSectHeight);
		this.topLeftColumn.move(paddingLeft, this.breadcrumbs._y + this.breadcrumbs.height() + 8);

		this.topCenterColumn.setActualSize(centerColWidth, upperSectHeight);
		this.topCenterColumn.move(this.topLeftColumn._x + this.topLeftColumn.width() + horizontalGap, this.topLeftColumn._y);

		this.topRightColumn.setActualSize(outerColWidth, upperSectHeight);
		this.topRightColumn.move(this.topCenterColumn._x + this.topCenterColumn.width() + horizontalGap, this.topCenterColumn._y);

		var lowerColHeight = height - this.topCenterColumn._y - upperSectHeight - verticalGap - paddingBottom;
		this.bottomLeftColumn.setActualSize(outerColWidth, lowerColHeight);
		this.bottomLeftColumn.move(paddingLeft, this.topCenterColumn._y + upperSectHeight + verticalGap);

		if (!this.bottomCenterColumn.expanded())
		{
			this.bottomCenterColumn.setActualSize(centerColWidth, lowerColHeight);
			this.bottomCenterColumn.move(this.bottomLeftColumn._x + this.bottomLeftColumn.width() + verticalGap, this.bottomLeftColumn._y);
		}

		this.bottomRightColumn.setActualSize(outerColWidth, lowerColHeight);
		this.bottomRightColumn.move(this.bottomCenterColumn._x + this.bottomCenterColumn.width() + verticalGap, this.bottomCenterColumn._y);

	//		this.bottomCenterColumn.expandedRect({x:this._x, y:this._y, width:width, height:height});
	//		this.bottomCenterColumn.expanded(true);
	};

	this.initializationComplete = function()
	{
		this.parent();
		application.addEventListener("creationComplete", this.applicationCompleteHandler, false, 0, this);
	};

	this.applicationCompleteHandler = function(event)
	{
		application.removeEventListener("creationComplete", this.applicationCompleteHandler, false);
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ TabNavigationMediator, this.tabNavigation ]));
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ BreadcrumbsMediator, this.breadcrumbs ]));
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ TopCenterColumnMediator, this.topCenterColumn ]));
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ TopRightColumnMediator, this.topRightColumn ]));
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ BottomCenterColumnMediator, this.bottomCenterColumn ]));
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ PreviewPanelMediator, this.bottomCenterColumn.previewPanel ]));
		this.dispatchEvent(new UICEvent("registerMediator", true, false, [ BottomRightColumnMediator, this.bottomRightColumn ]));
	};
};
ContentArea = new Class(new ContentArea());