/*
	Copyright (c) 2004-2006, The Dojo Foundation
	All Rights Reserved.

	Licensed under the Academic Free License version 2.1 or above OR the
	modified BSD license. For more information on Dojo licensing, see:

		http://dojotoolkit.org/community/licensing.shtml
*/

dojo.provide("dojo.widget.PageLayoutContainer");

dojo.require("dojo.widget.*");
dojo.require("dojo.widget.html.layout");

dojo.widget.defineWidget(
	"dojo.widget.PageLayoutContainer",
	dojo.widget.HtmlWidget,
{
	// summary
	//	Provides panel layout semantics for standard page layouts (Header, left/right nav, footer, body)
	//
	// details
	//	A PageLayoutContainer is a box with a specified width (like style="width: 500px;"),
	//	that contains children widgets marked with "layoutAlign" of "left", "right", "bottom", "top", and "client".
	//	It takes it's children marked as left/top/bottom/right, and lays them out along the edges of the box,
	//	and then it takes the child marked "client" and puts it into the remaining space in the middle.
	//
	//  Left/right positioning is similar to CSS's "float: left" and "float: right",
	//	and top/bottom positioning would be similar to "float: top" and "float: bottom", if there were such
	//	CSS.
	//
	//	Note that there can only be one oe each element type
	//
	// usage
	//	<style>
	//		html, body{ width: 100%; }
	//	</style>
	//	<div dojoType="PageLayoutContainer" style="width: 100%; ">
	//		<div dojoType="ContentPane" layoutAlign="top">header text</div>
	//		<div dojoType="ContentPane" layoutAlign="left" style="width: 200px;">table of contents</div>
	//		<div dojoType="ContentPane" layoutAlign="client">client area</div>
	//	</div>

	isContainer: true,

	top: false,
	bottom: false,
	left: false,
	right: false,
	client: false,

	postCreate: function(){
		//do Layout
		this.doPageLayout();

		if (this.client)
		{
			this.client.scriptScope = this.client;
			this.client.addOnLoad(function(){ this.parent.doPageLayout(); });
		}
	},

	addChild: function(child, overrideContainerNode, pos, ref, insertIndex){
		dojo.widget.PageLayoutContainer.superclass.addChild.call(this, child, overrideContainerNode, pos, ref, insertIndex);
		//do Layout
	},

	removeChild: function(pane){
		dojo.widget.PageLayoutContainer.superclass.removeChild.call(this,pane);
		//do Layout
	},

	onResized: function(){
		//do Layout
	},

	show: function(){
		// If this node was created while display=="none" then it
		// hasn't been laid out yet.  Do that now.
		this.domNode.style.display="";
		this.checkSize();
		this.domNode.style.display="none";
		this.domNode.style.visibility="";

		dojo.widget.PageLayoutContainer.superclass.show.call(this);
	},
	
	doPageLayout: function(){
		var widget;
		var i=0;
		while(this.children.length > i){
			widget = this.children[i];
			if (widget.layoutAlign == "left" && !(this.left)) 
				this.left = widget;
			if (widget.layoutAlign == "right" && !(this.right)) 
				this.right = widget;
			if (widget.layoutAlign == "top" && !(this.top)) 
				this.top = widget;
			if (widget.layoutAlign == "bottom" && !(this.bottom)) 
				this.bottom = widget;
			if (widget.layoutAlign == "client" && !(this.client)) 
				this.client = widget;
			i++;
		}

		var f =  {
			top: dojo.html.getPixelValue(this.domNode, "padding-top", true),
			left: dojo.html.getPixelValue(this.domNode, "padding-left", true),
			cw: 0
		};		

		dojo.lang.mixin(f, dojo.html.getAbsolutePosition(this.domNode,true));
		dojo.lang.mixin(f, dojo.html.getContentBox(this.domNode));

		if (this.top)
		{
			this.top.domNode.style.position = "absolute";
			this.top.domNode.style.display = "block";
			this.top.domNode.style.top = f.top + "px";
			this.top.domNode.style.left = f.left + "px";
			this.top.domNode.style.bottom = "auto";
			this.top.domNode.style.right = "auto";
			dojo.html.setMarginBox(this.top.domNode, {width: f.width});
			f.top += dojo.html.getMarginBox(this.top.domNode).height;
		}	

		if (this.left)
		{
			var w =  dojo.html.getMarginBox(this.left.domNode).width;
			this.left.domNode.style.position = "absolute";
			this.left.domNode.style.display = "block";
			this.left.domNode.style.top = f.top + "px";
			this.left.domNode.style.left = f.left + "px";
			this.left.domNode.style.bottom = "auto";
			this.left.domNode.style.height = "auto";
			this.left.domNode.style.right = "auto";
			this.left.layoutMinHeight = dojo.html.getMarginBox(this.left.domNode).height;
			f.cw += w;
		}

		if (this.right)
		{
			var w =  dojo.html.getMarginBox(this.left.domNode).width;
			this.right.domNode.style.position = "absolute";
			this.right.domNode.style.display = "block";
			this.right.domNode.style.top = f.top + "px";
			this.right.domNode.style.left = (f.left + f.width - w) + "px";
			this.right.domNode.style.bottom = "auto";
			this.right.domNode.style.height = "auto";
			this.right.domNode.style.right = "auto";
			this.right.layoutMinHeight = dojo.html.getMarginBox(this.right.domNode).height;

			f.cw += w;
		}

		if (this.client)
		{
			var w =  dojo.html.getMarginBox(this.left.domNode).width;
			this.client.domNode.style.position = "absolute";
			this.client.domNode.style.display = "block";
			this.client.domNode.style.top = f.top + "px";
			this.client.domNode.style.left = (f.left + dojo.html.getMarginBox(this.left.domNode).width) + "px";
			this.client.domNode.style.bottom = "auto";
			this.client.domNode.style.height = "auto";
			w = (f.width - f.cw); // + "px";

			dojo.html.setMarginBox(this.client.domNode, { width: w}); 
			this.client.layoutMinHeight = dojo.html.getMarginBox(this.client.domNode).height;
//			this.client.addOnLoad(this, this.doPageLayout);
		}

		var ht = 0
		if (this.left) ht = Math.max(ht, this.left.layoutMinHeight);
		if (this.right) ht = Math.max(ht, this.right.layoutMinHeight);
		if (this.client) ht = Math.max(ht, this.client.layoutMinHeight);

		if (this.left) this.left.resizeTo(dojo.html.getMarginBox(this.left.domNode).width, ht);
		if (this.right) this.right.resizeTo(dojo.html.getMarginBox(this.right.domNode).width, ht);
		if (this.client) this.client.resizeTo(dojo.html.getMarginBox(this.client.domNode).width, ht);
	
		f.top += ht;


		if (this.bottom)
		{
			this.bottom.domNode.style.position = "absolute";
			this.bottom.domNode.style.display = "block";
			this.bottom.domNode.style.top = f.top + "px";
			this.bottom.domNode.style.left = f.left + "px";
			this.bottom.domNode.style.bottom = "auto";
			this.bottom.domNode.style.right = "auto";
			dojo.html.setMarginBox(this.bottom.domNode, {width: f.width});
			f.top += dojo.html.getMarginBox(this.top.domNode).height;
		}	

		//this.resizeTo(f.width, f.top);

	}
});

// This argument can be specified for the children of a LayoutContainer.
// Since any widget can be specified as a LayoutContainer child, mix it
// into the base widget class.  (This is a hack, but it's effective.)
dojo.lang.extend(dojo.widget.Widget, {
	// layoutAlign: String
	//		"none", "left", "right", "bottom", "top", and "client".
	//		See the LayoutContainer description for details on this parameter.
	layoutAlign: 'none', 
	layoutMinHeight: 0
});