/**
 * The "searchboard" object is a single object used by CARGO Library.  It
 * contains utility function for setting up the searchboard that is visualized
 * inside of dashboard panel.
 * @title  CARGO
 * @module searchboard
 * @author Jose Manuel Rodriguez CNIO-INB (jmrodriguez@cnio.es)
 * @version 2.0
 */

/**
 * searchboard is an abstract base class.
 * @constructor
 * @param {String} sContainerName "div" identifier of HTML Element that will be contain dashboard panel
 * @param {Array} aSearches List of search widgets
 */
function searchboard(sContainerName, aSearches)
{
	this._createElementContainer(sContainerName, this.name, this.name); // Create "div" of searchboard Element
	this._createElementContainer(this.name, this.content, this.content); // Create "div" of searchboard content
	this._createElementContainer(this.name, this.tab, this.tab); // Create "div" of searchboard tab

	document.getElementById(this.name).style.width = this.maxSize + "px"; // Give the width of CSS style

	var oDivMainTab = this._createElementContainer(this.tab, "search_tab_main", "search_tab"); // Create "div" for main tab (double arrow)
	oDivMainTab.onclick = function() { cargo.searchboard._expandSearchBoard("search_tab_main"); } // Add onClick event to main tab (double arrow)

	this._addSearchboardTabs(aSearches);
};

searchboard.prototype = {

/* ATTRIBUTES */

	/**
	* Unique identifier
	* @type Integer
	*/
	id: null, // ???????
	/**
	* The name of searchboard
	* @type String
	*/
	name: "searchboard",
	/**
	* The "div" name of searchboard content
	* @type String
	*/
	content: "searchboard_content",
	/**
	* The "div" name of searchboard tab
	* @type String
	*/
	tab: "searchboard_tab",
	/**
	* The minimum size of searchboard
	* @type Integer
	*/
	minSize: 6,
	/**
	* The maximum size of searchboard
	* @type Integer
	*/
	maxSize: 200,
	/**
	* Current size of searchboard
	* @type Integer
	*/
	size: this.maxSize,
	/**
	* Flag that controls if searchboard is expanded. True by default.
	* @type Boolean
	*/
	expanded: true,

/* Private METHODS */

	/**
	* Create "div" element
	* @private
	* @param {String} sContainerName Name of "div" container
	*/
	_createElementContainer: function (sDivContainerName, sDivId, sDivClass)
	{
		var oDivSearchBoard = document.createElement("div");
		oDivSearchBoard.setAttribute("id", sDivId);
		oDivSearchBoard.setAttribute("class", sDivClass);
		document.getElementById(sDivContainerName).appendChild(oDivSearchBoard);
		return oDivSearchBoard;
	},
	/**
	* Create Searchboard tab
	* @private
	* @param {Array} aSearches List of search widgets
	*/
	_addSearchboardTabs: function (aSearches)
	{
		//var iTop = 30;
		for (var index = 0, len = aSearches.length; index < len; index++) {
			var aSearch = aSearches[index];
			if (typeof(aSearch) != 'undefined')
			{
				var sDivId = "search_"+aSearch.id+"_tab";
				var oDivSearch = this._createElementContainer(this.tab, sDivId, "search_tab");
				this._createElementContainer(sDivId, "searchboard_tab_top_border", "search_tab_top_border");
				oDivSearch.innerHTML += "<img id='search_tab_"+aSearch.id+"_text' class='search_tab_text' src='scripts/rotateText.cgi?text="+aSearch.name+"&degrees=90' />";
				this._createElementContainer(sDivId, "search_tab_bottom_border", "search_tab_bottom_border");
			}
		}
	},
	/**
	* Event that contract to expand and vice versa.
	* @private
	*/
	_expandSearchBoard: function (sId)
	{
		if (this.expanded)
		{
			this.expanded = false;
			document.getElementById(this.name).style.width = this.minSize + "px";
			document.getElementById(this.name).style.padding = "0px";
			document.getElementById(this.content).style.display = "none";
		}
		else
		{
			this.expanded = true;
			document.getElementById(this.name).style.width = this.maxSize + "px";
			document.getElementById(this.content).style.display = "block";
		}
	},
	
/* Public METHODS */
	
	/**
	* Initalize the visualization of first Search Panel.
	* @param {Array} aSearches List of search widgets
	*/
	showFirstSearchPanel: function(aSearches)
	{
		for (var index = 0, len = aSearches.length; index < len; index++) {
			var aSearch = aSearches[index];
			if (typeof(aSearch) != 'undefined')
			{
				// Insert the HTML content of search widget into Search Panel
				aSearch.addIFrameIntoSearchBoard(this.content);
				// Emphasize the given tag image
				document.getElementById("search_"+aSearch.id+"_tab").style.opacity = 1;
	
				break; // OUT OF LOOP !!!!!
			}
		}
	},
	/**
	* Add click events on searchboard tabs and Give correct top position
	* @param {Array} aSearches List of search widgets
	*/
	addEventOnSearchTabs: function(aSearches)
	{
		for (var index = 0, len = aSearches.length; index < len; index++) {
			var aSearch = aSearches[index];
			if (typeof(aSearch) != 'undefined')
			{
				document.getElementById("search_"+aSearch.id+"_tab").onclick = function() {
					cargo.searchboard.showGivenSearchWidget(this); //This => Div HTML Element
				}
			}
		}
	},
	/**
	* Show given search widget from search widget identifier
	* @param {Element} oDivTab HTML Element of div
	*/
	showGivenSearchWidget: function(oDivTab)
	{
		var sDivId = oDivTab.id;
		for (var index = 0, len = cargo.searches.length; index < len; index++) {
			var aSearch = cargo.searches[index];
			if ((typeof(aSearch) != 'undefined') && document.getElementById("search_"+aSearch.id+"_tab") )
			{
				if (sDivId == "search_"+aSearch.id+"_tab")
				{
					// Insert the HTML content of search widget into Search Panel
					cargo.searches[aSearch.id].addIFrameIntoSearchBoard(this.content);
					// Emphasize the given tag image
					document.getElementById("search_"+aSearch.id+"_tab").style.opacity = 1;
				} else {
					document.getElementById("search_"+aSearch.id+"_tab").style.opacity = 0.5;
				}
			}
		}
	}
};