// [MODULE-HEADER]
// *************************************************************************************************
//
// Name:				HtmlUtil.js
//
// Created:			3/9/2009 VisionOne AG, St Gallen  Fbe
// Modified:		3/9/2009 VisionOne AG, St Gallen  Fbe	: Creation
//
// *************************************************************************************************

// Helper class to build html
function HtmlBuilder() {
	this.innerHtml = new Array();
	this.beginTable = _beginTable;
	this.endTable = _endTable;
	this.beginTableRow = _beginTableRow;
	this.endTableRow = _endTableRow;
	this.beginTableCell = _beginTableCell;
	this.endTableCell = _endTableCell;
	this.addLiteral = _addLiteral;
	this.addCssButton = _addCssButton;
	this.addTag = _addTag;
	this.addLink = _addLink;
	this.getHtml = _getHtml;
	
	
	function _getHtml() 
	{ 
		var result = this.innerHtml.join(""); 
		this.innerHtml = null;
		
		return result;
	}
	
	function _addLink(href, text, cssClass, attributes)
	{
		if (!attributes)
			attributes = "";
			
		this.innerHtml.push("<a class='" + cssClass + "' href='" + href + "' " + attributes + ">");
		this.innerHtml.push(text);
		this.innerHtml.push("</a>");
		
		return this;	
	}
	
	function _beginTable(attributes){ 
		if (attributes)
			this.innerHtml.push("<table " + attributes + ">"); 
		else
			this.innerHtml.push("<table width='100%' border='0' cellSpacing='0' cellPadding='0'>"); 
		return this;
	}
	
	function _endTable() { this.innerHtml.push("</table>"); return this; }
	
	function _beginTableRow(cssClass){
		if (cssClass)
			this.innerHtml.push("<tr class='" + cssClass + "'>");
		else
			this.innerHtml.push("<tr>");
			
		return this;		
	}
	
	function _endTableRow() { this.innerHtml.push("</tr>"); return this; }
	
	function _beginTableCell(colspan, attributes)
	{				
		this.innerHtml.push("<td");
		
		if (colspan)
			this.innerHtml.push(" colspan='" + colspan + "'");
			
		if (attributes)
			this.innerHtml.push(" " + attributes);
			
		this.innerHtml.push('>');
		return this;
	}
	
	
	function _endTableCell() { this.innerHtml.push("</td>"); return this; }
	
	function _addCssButton(caption, width, onClickScript) {
	
		this.innerHtml.push("<input class='ContentFormButton' style='background-image:url(../Image/CssButtonStandard.gif); width:" + width + ";' type='button' value='" + caption + "'");
		
		if (onClickScript)
			this.innerHtml.push(" onclick='javascript: " + onClickScript + "'");
			
		this.innerHtml.push(" />");
	
		return this;
	}
	
	
	function _addLiteral(value)	{
		this.innerHtml.push(value); 
		return this;
	}
	
	function _addTag(tagName, cssClass, innerContent) {
		this.innerHtml.push("<");
		this.innerHtml.push(tagName);
		if (cssClass)
			this.innerHtml.push(" class='" + cssClass + "'");
		
		this.innerHtml.push('>');
		this.innerHtml.push(innerContent);
		this.innerHtml.push("</");
		this.innerHtml.push(tagName);
		this.innerHtml.push(">");
		
		return this;
	}
	
}


// Popup helper class
// Wraps the usage of jQuery.blockUI
function ShoWarePopup() {
	this.title = "";
	this.displayCloseButton = true;
	this.closeButtonText = "";
	
	this.saveButtonHandler = null;
	this.saveButtonText = "";
	this.displaySaveButton = false;
	
	this.width = "800";
	this.content = "";
	this.open = _open;	
	this.close = _close;
	this.fadeIn = 500;
	this.fadeOut = 500;
	this.blockParent = false;
	
	
	function _open()
	{
		var html = new HtmlBuilder();
		html.beginTable();
		html.beginTableRow("BoxTitleBackground")
				.beginTableCell()
					.addLiteral("<IMG height='20' src='../Image/blank.gif' width='4' border='0'>")
				.endTableCell()
				.beginTableCell()
					.addTag("span", "BoxTitleText", this.title)
				.endTableCell()
				.beginTableCell()
					.addLiteral("<IMG height='20' src='../Image/blank.gif' width='4' border='0'>")
				.endTableCell()
			.endTableRow();
			
		html.beginTableRow()
				.beginTableCell()
					.addLiteral("&nbsp;")
				.endTableCell()
				.beginTableCell(2)
					.addLiteral(this.content)
				.endTableCell()
			.endTableRow();
			
		html.beginTableRow("BoxcategoriesNavfirstBackground").beginTableCell(3, "align='center'").addLiteral("<span id='ShoWarePopupButtons'>");
		
		if (this.displaySaveButton)
			html.addCssButton(this.saveButtonText, "120px", this.saveButtonHandler);
		
		if (this.displayCloseButton)
			html.addCssButton(this.closeButtonText, "120px", "$.unblockUI();");	
		html.addLiteral("</span>").endTableCell().endTableRow();
			
		html.endTable();
				
		
		$.blockUI({  
				message: html.getHtml(), 
				fadeIn: this.fadeIn, 
				fadeOut: this.fadeOut, 
				showOverlay: this.blockParent, 
				centerX: true,
				css: {  
					border: '2px solid #aaa', 
					padding: '0px',
					color: '#000',
					cursor: 'normal',
					width: this.width
				},
				overlayCSS: { 
			    backgroundColor:'#000', 
				opacity:'0.6' }				
			}); 
	}
	
	function _close()
	{
		$.unblockUI();
	}	
}

// close the current opened popup
ShoWarePopup.close = function() { $.unblockUI(); };

ShoWarePopup.hideButtons = function() {
	$('#ShoWarePopupButtons').html("&nbsp;");
};


// Render a table with pictures of each facebook profile
function FacebookProfileTable() {

	this.columnCount = 3;
	this.title = "";
	this.maxProfiles = 0;
	this.getHtml = _getHtml;
	
	
	function _getHtml(guests)
	{
		var html = new HtmlBuilder();
				
		html.beginTable(" border='0' cellSpacing='0' cellPadding='2'")
						.beginTableRow()
							  .beginTableCell(this.columnCount)
								.addTag("span", "BoxNormalText", this.title)
							.endTableCell()
						.endTableRow()
						.beginTableRow();

		var guestsToDisplay = guests.length;
		if (this.maxProfiles > 0 && this.maxProfiles < guestsToDisplay)
			guestsToDisplay = this.maxProfiles;
								
		for (var i=0; i < guestsToDisplay; ++i)				
		{
			if (i > 0 && ((i % this.columnCount) == 0))
			{
				// start new row
				html.endTableRow().beginTableRow();
			}
									
			html
					.beginTableCell()
						.addLiteral("<div class='fbprofilepic'><fb:profile-pic uid='" + guests[i] + "' size='square'></fb:profile-pic></div>")
					.endTableCell();
		}
							
		html.endTableRow().endTable();
		
		var result = html.getHtml();
		html = null;
		return result;
	}
}