/*
 * hyCMS
 * Copyright(C)2008 by Friedrich Gräter
 * Published under the terms of the Lesser GNU General Public License v2
 *
 * WidgetKit backend: Frame widget
 *
 * Please Note: This module has to be clean from all dependencies to predicateJS!
 *
 *				Also this module requires "widget-kit.css" to be
 *				embedded to the parent site for styling the widgets.
 *
 */
 
/*
 * wk_createFrame(id, innerView, topAnchor, leftAnchor, topOrientation, leftOrientation, relatedDocument)
 *
 * Creates a frame that shows the given view. The frame
 * will autosize to the size of the inner view. The frame
 * will be position relative the given top and left anchors. The
 * relative positioning will be determined by "topOrientation" and
 * "leftOrientation", which can be: "center", "before", "after".
 *
 * If "topAnchor" or "leftAnchor" is -1, the frame will be centered in the document view.
 *
 * If the innerView throws a "resized" event, the frame will auto-resize on it.
 *
 * The control will have the following methods:
 *
 *		move			Moves the view
 *		autosize		Auto-resizes the view
 *
 * The control will trigger the following events:
 *
 *		moved			The frame has been moved
 *		resized			The frame has been resized
 *
 */
function wk_createFrame(id, innerView, topAnchor, leftAnchor, topOrientation, leftOrientation, relatedDocument)
{
	if (relatedDocument == null)
		relatedDocument = document;

	var view = relatedDocument.createElement("div");
	
	// Creating view
	view.wk_type = "frame";
		
	view.id = id;
	view.className = "wk_frame";
	
	// Creating ornaments
	function __div(name) { return "<div class='wk_frame_"+name+"'></div>" };
	
	view.innerHTML = 	__div("TopLeft") 	+ __div("Top") 		+ __div("TopRight")
					 +	__div("Left")	 	+ __div("Inner")	+ __div("Right")
					 +	__div("BottomLeft")	+ __div("Bottom")	+ __div("BottomRight")
				;

	// Mapping inner elements
	var childs = { "topLeft":		view.childNodes[0],
				   "top":			view.childNodes[1],
				   "topRight":		view.childNodes[2],
				   "left":			view.childNodes[3],
				   "inner":			view.childNodes[4],
				   "right":			view.childNodes[5],
				   "bottomLeft":	view.childNodes[6],
				   "bottom":		view.childNodes[7],
				   "bottomRight":	view.childNodes[8]
				 };
				 
	childs.inner.appendChild(innerView);

	// Register events
	wk_declareEvents(view, "resized", "moved");	

	// Private helpers
	function __computeSize(elem, sz)	 { return 25; }		// FIXME: Don't hardcode this!!!
	
	// Methods
	view.move = function(_topAnchor, _leftAnchor, _topOrientation, _leftOrientation)
	{
		function __anchor(anchor, orientation, posName, dimName, innerDimName)
		{
			if (anchor == -1) {
				// Center vertically
				if (relatedDocument.defaultView != null)
					anchor = (relatedDocument.defaultView[innerDimName] / 2);
				else {
					innerDimName = innerDimName.replace("inner", "client");
				
					anchor = relatedDocument.documentElement[innerDimName] / 2;
				}

			}	

		 	switch (orientation.toString()) {
		 		case "center":
		 			view.style[posName] = (anchor - (wk_sizeToNumber(view.style[dimName]) / 2)) + "px";
		 			break;
		 			
		 		case "before":
		 			view.style[posName] = (anchor - wk_sizeToNumber(view.style[dimName])) + "px";
		 			break;
		 			
		 		default:
		 		case "after":
		 			view.style[posName] = (anchor) + "px";
		 			break;
			}


		}
		
		__anchor(_topAnchor, _topOrientation, "top", "height", "innerHeight");
		__anchor(_leftAnchor, _leftOrientation, "left", "width", "innerWidth");

		topOrientation = _topOrientation;
		leftOrientation = _leftOrientation;
		
		topAnchor = _topAnchor;
		leftAnchor = _leftAnchor;

		wk_triggerEvent(view, "moved");
	}
	
	
	view.autosize = function()
	{
		view.style.height = (wk_sizeToNumber(innerView.style.height) + __computeSize(childs.top, "height")  + __computeSize(childs.bottom, "height")) + "px";
		view.style.width = (wk_sizeToNumber(innerView.style.width) + __computeSize(childs.left, "width")  + __computeSize(childs.right, "width")) + "px";		
		
		childs.top.style.width = wk_sizeToNumber(innerView.style.width) + "px";
		childs.bottom.style.width = wk_sizeToNumber(innerView.style.width) + "px";

		childs.left.style.height = wk_sizeToNumber(innerView.style.height) + "px";
		childs.right.style.height = wk_sizeToNumber(innerView.style.height) + "px";
		
		view.move(topAnchor, leftAnchor, topOrientation, leftOrientation);
		
		wk_triggerEvent(view, "resized");
	}
	
	
	view.autosize();
	view.move(topAnchor, leftAnchor, topOrientation, leftOrientation);
	
	// Auto-react on resize of innerView?
	if ((innerView.events != null) && (innerView.events.resized)) {
		innerView.events.resized.push( function() { view.autosize(); } );
	}
	
	return view;
}