// the array that we use as a cache to store all the ids of content that we've already fetched from the server
	var arrayIdsFromServer = [];

	// if we wanted to add any data we could do it here
	var dataFromBrowser = "";

	// this callbackProxy simply wraps our method "processDataFromServer" and passes it another argument named "dataFromBrowser"
	var callbackProxy = function(pDataFromServer) {
		processDataFromServer(pDataFromServer, dataFromBrowser);
	};

	// meta data variable that represents the callbackProxy (which wraps our actual method),
	// we can add other meta data details too if needed which is why this meta data is a good feature to have
	var callMetaData = { callback:callbackProxy };

	/*
	* pDataFromServer will contain data from the server. This object could potentially
	* be null or its teaserText property could be empty. Both these cases
	* are error cases and must be handled appropriately.
	*/
	function processDataFromServer(pDataFromServer, pDataFromBrowser)
	{
		// get the div and insert the table into it creatively
		var oDIV = document.getElementById(pDataFromServer.returnString);

		// if the server response is null or undefined
		if(!pDataFromServer || !pDataFromServer.teaserText || pDataFromServer.teaserText == "") {
			oDIV.innerHTML = "There is no description available";
			return;
		}

		var oTABLE = document.createElement("table");
		var oTR = oTABLE.insertRow(0);	// table has to be set to gearexpand
		var oTD1 = oTR.insertCell(0);
		var oTD2 = oTR.insertCell(1);

		oTABLE.setAttribute("className", "gearexpand");

		// only add the image if its there
		if(pDataFromServer.teaserImagePath) {
			var oIMG = document.createElement("img");
			oIMG.src = pDataFromServer.teaserImagePath;
			oTD1.appendChild(oIMG);
		}
		oTD2.innerHTML = pDataFromServer.teaserText;
		oDIV.appendChild(oTABLE);

		// add the data id to the array so that it does not have to be requested again
		arrayIdsFromServer[arrayIdsFromServer.length] = pDataFromServer.returnString;
	}

	function expandOrCollapse(pDocType, pDivName, pImage, pContentFilePath, pContentImagePath)
	{
		// the display can be none or block
		var display = new String(document.getElementById(pDivName).style.display);

		// if the div is hidden then display the div, change image to show the expanded sign, and request server for info
		if( display.indexOf("block")!=-1 )
		{
			document.getElementById(pDivName).style.display = "none";
			//pImage.src="/ecc-portal/flex/images/collapsed.gif";  This has been commented out as the collapsed image is replaced with information icon	
			
		}
		else
		{
			document.getElementById(pDivName).style.display = "block";
			//pImage.src="/ecc-portal/flex/images/expanded.gif";

			// if we already have the data in the array then no need to request it again from the server
			for(var i=0; i<arrayIdsFromServer.length; i++) {

				if(arrayIdsFromServer[i] == pDivName) {
					return;
				}
			}

			// create the object to send over to the server
			var teaserReqObject = {
				documentType: pDocType,
				documentFileName: pContentFilePath,
				returnString: pDivName,
				teaserImage: pContentImagePath
			};

			// since we could not find the data in the cache array we request the server for it using the call meta data
			HomePageFormHandler.getTeaserData(teaserReqObject, callMetaData);
		}
	}


	function expandAndCollapse(pDivName)
	{		
		// the display can be none or block
		var display = new String(document.getElementById(pDivName).style.display);
		var imgTagId="img"+pDivName
	
		// if the div is hidden then display the div
		if( display.indexOf("block")!=-1 )
		{
			document.getElementById(pDivName).style.display = "none";
			document.getElementById(imgTagId).src="/ecc-portal/flex/images/collapsed.gif";
		}
		else
		{
			document.getElementById(pDivName).style.display = "block";
			document.getElementById(imgTagId).src="/ecc-portal/flex/images/expanded.gif";
		}
	}
	
	function expCollapseAll(pDivName,pExpColl)
	{
	
		var alldivs = document.getElementsByTagName("div");
		// All the divs for ecc_topic and ecc_content_type has naming convention of "ecc_subheading:ecc_topic" or "ecc_subheading:ecc_content_type"
		var re = pDivName + "*"; // this will fetch all the topic and content type divs under a particular ecc_subheading
		
		var regex = new RegExp(re,'g');
		var ctRegex = /-[0-9]/; // regular expression to identify content tiles div's.
		
		
		for (var i = 0; i < alldivs.length; i++)
		{
		  var divId= alldivs[i].id;
		  
		  if(regex.test(divId))
		  {		  	
		  	var imgTagId="img"+divId;
		  	var display = new String(document.getElementById(divId).style.display);
			if( pExpColl.indexOf("collapse")!=-1 )
			{
				if( display.indexOf("block")!=-1 ){
					if (!ctRegex.test(divId))
					{
					document.getElementById(divId).style.display = "none";
					document.getElementById(imgTagId).src="/ecc-portal/flex/images/collapsed.gif";
					}else{
						document.getElementById(divId).style.display = "none"; 
						// this is called for expanded content titles. In this case icon images is not to be replaced with collapsed image.
					}
				}
			}
			else
			{
				if (!ctRegex.test(divId)) // Expand All should expand all non content tiles div's.
				{
					document.getElementById(divId).style.display = "block";
					document.getElementById(imgTagId).src="/ecc-portal/flex/images/expanded.gif";
				}
			}
		  	
		  }
		}
	
	}