/**
* VerticalComponentLayout
*
* Implements ComponentLayout.  
*
* Arranges components in vertical columns.  Constructor takes column count as input. 
*
* @param col Count of columns to create 
* @param style_set
*	-style_set_layout_container
*	-style_set_layout_column
**/
function VerticalComponentLayout( style_set, c ) {

	this.style_set = style_set;
	this.column_count = c || 1;

	this.dom_container = document.createElement( 'div' );
	this.dom_container.className = style_set + "_layout_container";

	this.break_div = document.createElement( 'div' );
	this.break_div.style.height = '0px';
	this.break_div.style.clear = 'both';

	this.column_array = new Array();
	this.column_container_array = new Array();

	//calculate the width of each column and the margin-left which should be attributed to each column
	this.column_width = parseInt( 100 / this.column_count );
	this.final_column_width = parseInt( 100 - this.column_width * ( this.column_count - 1 ) );

	for ( var i=0; i<c; i++ ) { 
		this.column_array.push( document.createElement( 'div' ) );
		this.column_array[i].className = style_set + "_layout_column";

		this.column_container_array.push( document.createElement( 'div' ) );

		//this.column_container_array[i].style.cssFloat = 'left';

		if ( i == 0 )
			this.column_container_array[i].style.cssFloat = 'left';
		else
			this.column_container_array[i].style.cssFloat = 'right';

		//this.column_container_array[i].style.marginLeft = ( this.column_width * i ) + "%";
			
		if ( i+1 == c ) 
			this.column_container_array[i].style.width = this.final_column_width + "%";
		else
			this.column_container_array[i].style.width = this.column_width + "%";

		this.column_container_array[i].style.display = 'inline';

		this.column_container_array[i].appendChild( this.column_array[i] );
		this.dom_container.appendChild( this.column_container_array[i] );
	}

	this.component_set = new Object();

	this.dom_container.appendChild( this.break_div );

	//a pointer at the current column to insert at
	this.insert_pointer = 0;

}

new VerticalComponentLayout();

/**
* VerticalComponentLayout.getDOM
*
* Return the dom_container element of the layout object
**/
VerticalComponentLayout.prototype.getDOM = function () { 

	return this.dom_container;

}

/**
* abstract VerticalComponentLayout.addComponent
*
* @param c The component to add
*
* @throws exception
**/
VerticalComponentLayout.prototype.addComponent = function( c ) { 

	if (! ( c.getDOM || c.getWidgetDOM  ) ) {
		throw( "VerticalComponentLayout.addComponent :: Component does not implement getDOM function" );
	}

	c.getWidgetDOM().style.display = 'block';

	this.column_array[this.insert_pointer++].appendChild( c.getWidgetDOM() );

	if ( this.insert_pointer >= this.column_count ) this.insert_pointer = 0;

} 

/**
* abstract VerticalComponentLayout.removeComponent
*
**/
VerticalComponentLayout.prototype.removeComponent = function( c ) { } 

/**
* abstract VerticalComponentLayout.removeComponentByID
*
**/
VerticalComponentLayout.prototype.removeComponentByID = function( id ) { }

/**
* abstract VerticalComponentLayout.removeLastComponent
*
**/
VerticalComponentLayout.prototype.removeLastComponent = function() { } 

/**
* abstract VerticalComponentLayout.removeFirstComponent = function() { } 
*
**/
VerticalComponentLayout.prototype.removeFirstComponent = function() { }

/**
* abstract VerticalComponentLayout.condense
*
**/
VerticalComponentLayout.prototype.condense = function() { }

/**
* abstract VerticalComponentLayout.clearLayout
*
**/
VerticalComponentLayout.prototype.clearLayout = function() { }