/**
 * Returns a function for changing the layout of portlets in the active container via 
 * the PageOptions Add Content tab.
 *
 * @see sunportal.AJAXPageOptions
 *
 * @return sunportal.AJAXChangeLayout
 */ 
sunportal.AJAXChangeLayout = function() {

	this.LAYOUT_DEFAULT=0;
	this.LAYOUT_THIN_THICK=1;
	this.LAYOUT_THICK_THIN=2;
	this.LAYOUT_THIN_THICK_THIN=3;

	this.columnWidths = [];
	this.columnWidths[this.LAYOUT_DEFAULT]= [ '100%' ];
	this.columnWidths[this.LAYOUT_THIN_THICK]= [ '30%', '70%' ];
	this.columnWidths[this.LAYOUT_THICK_THIN] = [ '70%', '30%'];
	this.columnWidths[this.LAYOUT_THIN_THICK_THIN] = [ '25%', '50%', '25%' ];

	/**
   * Initializes this function by pre-selecting the active container's layout for preview.
   * 
   * @see sunportal.ChangeLayout#createLayoutPreviewTable
   */
	this.init = function() {
  	var node = document.changeLayoutForm.changeLayoutSelect;
  	node.value = containerModel.layout;
  	this.handleChangeLayoutSelect(containerModel.layout);
	}

	/**
   * Returns an HTMLTableElement based on the passed layout.
   *
   * @param layout the layout to use to generate the table
   *
   * @return the HTMLTableElement
   */
	this.createLayoutPreviewTable = function(layout) {
  	var table = document.createElement('table');
  	table.setAttribute('id', 'layoutPreview', 0);
  	table.setAttribute('cellpadding', '3', 0);
  	table.setAttribute('cellspacing', '0', 0);
  	table.setAttribute('border', '1', 0);
  	var tbody = document.createElement('tbody');
  
  	var widths = this.columnWidths[layout];
  
  	var tr = document.createElement('tr');
  	var td = document.createElement('td');
  	td.setAttribute('colspan', widths.length,0);
  	td.setAttribute('height', '20',0);
		td.innerHTML = sunportal.getLocalizedString("full.top.portlets");
  	tr.appendChild(td);
  	tbody.appendChild(tr);
  
  	tr = document.createElement('tr');
  	tr.setAttribute('id', 'headings', 0);
  	for (i=0;i<widths.length;i++) {
    	td = document.createElement('td');
    	td.setAttribute('height', '40',0);
    	td.setAttribute('width', widths[i], 0);
    	(widths[i] == '25%' || widths[i] == '30%') ? td.innerHTML = sunportal.getLocalizedString("thin.portlets") : td.innerHTML = sunportal.getLocalizedString("thick.portlets");
    	((i % 2) == 0) ? td.className = 'even' : td.className = 'odd';
    	tr.appendChild(td);
  	}
  	tbody.appendChild(tr);
  
  	tr = document.createElement('tr');
  	td = document.createElement('td');
  	td.setAttribute('colspan', widths.length,0);
  	td.setAttribute('height', '20',0);
    td.innerHTML = sunportal.getLocalizedString("full.bottom.portlets");
  	tr.appendChild(td);
  	tbody.appendChild(tr);
  	table.appendChild(tbody);
  
  	return table;
	}

	/**
	 * Handles onchange event for a HTMLSelectElement whose members are the available layouts for the container.
   */
	this.handleChangeLayoutSelect = function(layout) {
  	var node = spd.byId('layoutTop');
  	while(node.hasChildNodes()){node.removeChild(node.firstChild);}
  	node.appendChild(this.createLayoutPreviewTable(layout));
	}

	/**
	 * Handles updating the layout by sending a request to the server.
   */
	this.handleUpdateLayout = function() {
  	var node = document.changeLayoutForm.changeLayoutSelect;
  	var newLayout = node.options[node.selectedIndex].value;

  	if (newLayout != containerModel.layout) {
    	var baseURL = document.URL.split('?')[0];
      var reqURL = baseURL;
      reqURL += '?action=process';
      reqURL += '&provider=' + containerModel.name;
      reqURL += '&containerName=' + containerModel.name;
      reqURL += '&editMode=layout';
      reqURL += '&pageOptionsPage=layout';
      reqURL += '&layout=' + newLayout;
      reqURL += '&last=false';

	  	window.location.href = reqURL;
  	}
	}
}