/* (CC) 2007 Eden Design
/* <documentation about="ABOUT Default.js" type="GENERAL">
	<summary>Rabobank Special Products javascript file
		Structure of this file:
		1. Implementation of namespace:
			- Default
		2. Definition global variables
		3. Functions
		4. Call: Lib.addEvent(window, "load", Default.init); start js application
	</summary>
	<namespace>Default</namespace>
</documentation> */
var Default = {};

/* <documentation about="Global variables" type="global variables">
	<summary>Default.delayCloseMenu = delay time for menu to close</summary>
	<namespace>Default</namespace>
</documentation> */
Default.delayCloseMenu = 500;
Default.activeBlock = "";
Default.overlay = null;
Default.iframe = null;
Default.modelDialog = null;

/* <documentation about="Default.init" type="init function">
	<summary>This function containes all calls made to functions used within RabobankSP application.
		It is initialized on page load (Lib.addEvent(window, "load", Default.init);).
	</summary>
	<namespace>Default</namespace>
</documentation> */
Default.init = function (){
	Lib.debug = true;	//set to false to suppress errors

	try {
		Default.addFoldOutMainNavigation(); //adds fold out functionality for IE

		Default.addRollEffect();

		Lib.inputAutoClear("search-word", "search-product", "search-news");
	} catch (ex){ Lib.errHandler(ex); }
}


/* <documentation about="Default.addFoldOutMainNavigation" type="specific function">
	<summary>This function adds fold out functionality for IE browsers</summary>
	<namespace>RabobankSP</namespace>
</documentation> */
Default.addFoldOutMainNavigation = function () {
	if(!Lib.ie || Lib.opera) { return; }

	// previous menu item
	var previousListItem;
	var time;

	//Private functions used for addFoldOutMainNavigation
	var menuItem = function (mainNavigation, menu, listItem, lists) {
		this.mainNavigation = mainNavigation;
		this.listItem = listItem;
		this.originalClass = this.listItem.className;
		this.lists = lists;
		this.listItem.menuItem = this;

		//this.time; // this will be the amount of time the menu stays visible
		this.closetime; // allows us to clear the timer function

		previousListItem = this.listItem; // set the previousListItem on load

		this.listItem.onmouseover = function () { if (lists) { this.menuItem.timeMouseover(); }; return true; }
		Lib.eventCache.add(this.listItem, "onmouseover", function () { if (lists) { this.menuItem.timeMouseover(); }; return true; }, false);

		this.listItem.onmouseout = function () { if (lists) { this.menuItem.timeMouseout(); }; previousListItem = listItem; return true; }
		Lib.eventCache.add(this.listItem, "onmouseout", function () { if (lists) { this.menuItem.timeMouseout(); }; previousListItem = listItem; return true; }, false);

		//added private function to menuItem object
		menuItem.prototype.timeMouseover = function () {
			clearTimeout(this.closetime);
			if(previousListItem.className.indexOf("current")>-1){ previousListItem.className = "current"; }
			else { previousListItem.className = ""; }

			if (previousListItem.getElementsByTagName("iframe")[0]) { removeIframeLayer(previousListItem); }

			this.listItem.className = this.originalClass + " hover";
			if (this.lists) { createIframeLayer(this.lists); }
		}

		//added private function to menuItem object
		menuItem.prototype.timeMouseout = function () {
			if (previousListItem == this.listItem) { time = Default.delayCloseMenu; }
			else {  time = 0;  }
			var me = this; // we have to assign 'this' to a variable
						// because setTimeout has global scope
						// and this.listItem is local

			this.closetime = setTimeout(function() {
								if(me.listItem.className.indexOf("current")>-1){ me.listItem.className = "current"; }
								else { me.listItem.className = ""; }

								if (me.lists) { removeIframeLayer(me.lists); }
							}, time);
		}
	}

	// These functions creates/remove an iframe 'mask' underneath dropdown lists in main nav -  for internet explorer only
	var createIframeLayer = function (menu) {
   		var layer = document.createElement("iframe");
    	layer.tabIndex = "-1";
    	layer.src = "javascript:false;";
		menu.parentNode.appendChild(layer);
		// make the iframe the same size and position as the dropdown
    	layer.style.left = menu.offsetLeft + "px";
    	layer.style.top = menu.offsetTop + "px";
    	layer.style.width = menu.offsetWidth + "px";
    	layer.style.height = menu.offsetHeight + "px";
	}

	var removeIframeLayer = function (menu) {
    	var layers = menu.parentNode.getElementsByTagName("iframe");
    	while (layers.length > 0) {
      		layers[0].parentNode.removeChild(layers[0]);
    	}
	}
	//-----------
	//End privat functions for addFoldOutMainNavigation

	var liArr = new Array;
	// get top level UL
	var topLevelUL = document.getElementById("main-nav").getElementsByTagName("ul")[0];

	if(topLevelUL == null) { return; }

	// get all lis
	var topLevelLIs = topLevelUL.getElementsByTagName("li");
	for (var i=0; i < topLevelLIs.length; i++) {
		// exclude nested list items, so only those on the top level are collected
		if (topLevelLIs[i].parentNode.parentNode.tagName != "li") {
			// get first unordered list if it exists
			this.secondLevelUL = topLevelLIs[i].getElementsByTagName("UL")[0];
			liArr[liArr.length] = new menuItem(this, this.menu, topLevelLIs[i], this.secondLevelUL);
		}
	}
}

/* <documentation about="Default.addRollEffect" type="specific function">
	<summary>Adds rollover effect for bottom border of table cells</summary>
	<namespace>Default</namespace>
</documentation> */
Default.addRollEffect = function () {
	//for submit buttons
	var buttons = document.getElementsByTagName("input");
	for(var i=0; i< buttons.length; i++) {
		if(buttons[i].type=="submit" && buttons[i].className.indexOf("button") != -1) {

			buttons[i].originalClassName = buttons[i].className;
			buttons[i].onmouseover = function () { this.className = this.originalClassName + " hover";  };
			Lib.eventCache.add(buttons[i], "onmouseover",  function () { this.className = this.originalClassName + " hover";  }, false);

			buttons[i].onmouseout = function () { this.className = this.originalClassName };
			Lib.eventCache.add(buttons[i], "onmouseout", function () { this.className = this.originalClassName }, false);
		}

		if(buttons[i].type=="image") {
			buttons[i].onmouseover = function () { this.src = this.src.replace(".gif", "") + "-hover.gif";  };
			Lib.eventCache.add(buttons[i], "onmouseover",  function () { this.className = "button hover";  }, false);

			buttons[i].onmouseout = function () { this.src =  this.src.replace("-hover.gif", ".gif"); };
			Lib.eventCache.add(buttons[i], "onmouseout", function () { this.className = "button" }, false);
		}
	}

	//for bottom border in table cels
	var tables = document.getElementsByTagName("table");
	for(var i=0; i< tables.length; i++) {
		if(tables[i].className.indexOf("no-rollover") != -1) { continue; }

		var hyperlinks = tables[i].getElementsByTagName("a");

		for(var j=0; j< hyperlinks.length; j++) {
			hyperlinks[j].onmouseover = function () { this.parentNode.parentNode.className = this.parentNode.parentNode.className + " hover";  };
			Lib.eventCache.add(hyperlinks[j], "onmouseover", function () { this.parentNode.parentNode.className = this.parentNode.parentNode.className + " hover"; }, false);

			hyperlinks[j].onmouseout = function () { this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(" hover", ""); };
			Lib.eventCache.add(hyperlinks[j], "onmouseout", function () { this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(" hover", ""); }, false);
		}
	}
}


Default.showModelOverlay = function (show) {
 	if(show) {
		var body = document.getElementsByTagName("body")[0];
		var container = document.getElementById("container");

		Default.overlay = document.createElement("div");
		Default.overlay.id = "overlay";

		Default.iframe = document.createElement("iframe");
		Default.iframe.src = "";
		Default.iframe.id = "iFrameOverlay"

		Default.modelDialog = document.createElement("modelDialog");
		Default.modelDialog.id = "modelDialog";

		body.insertBefore(Default.modelDialog, container);
		body.insertBefore(Default.iframe, Default.modelDialog);
		body.insertBefore(Default.overlay, Default.modelDialog);
		Default.overlay.style.height = Default.iframe.style.height = container.offsetHeight + "px";

		//exceptions
		document.getElementById("main-nav").getElementsByTagName("ul")[0].style.position = "static";
	}
	else {
		Default.modelDialog.innerHTML= "";
		if(Default.iframe) { Default.iframe.parentNode.removeChild(Default.iframe); }
		if(Default.overlay) { Default.overlay.parentNode.removeChild(Default.overlay); }
		if(Default.modelDialog) { Default.modelDialog.parentNode.removeChild(Default.modelDialog); }

 		Default.iframe = Default.overlay = Default.modelDialog = null;

		document.getElementById("main-nav").getElementsByTagName("ul")[0].style.position = "relative";
	}
 }

 /* <documentation about="Default.addProductAction" type="specific function">
	<summary>Add product search buttons and panels to home page</summary>
	<namespace>Default</namespace>
</documentation> */
Default.addProductAction = function () {
	//private function to toggle main panels "risk-return" and "growth-income"
	var toggleMainPanels = function (button, status) {
		//show panel
		if(status=="show") {
			//Default.modelDialog is not there; show white layer
			if(!Default.modelDialog) { Default.showModelOverlay(true); }

			//determine postion of modelDialog
			var searchBlockPosition = Lib.findElementPosition(document.getElementById("search-block"));
			Default.modelDialog.style.left = searchBlockPosition[0] + "px";
			Default.modelDialog.style.top = searchBlockPosition[1] + "px";

			//see which buttons is clicked and get hidden content and move it to modelDialog
			if((button.id=="risk-return-product-link" || button.id=="risk-return-product-link2") && document.getElementById("riskContent")) {
				var riskContent = document.getElementById("riskContent");
				Default.modelDialog.appendChild(riskContent);
				riskContent.className="";
				
				// webtrends
				dcsMultiTrack('DCS.dcsuri', document.location.pathname.substring(0, document.location.pathname.lastIndexOf('.')) + '.ajax'
							  ,'WT.si_n','product_search'
							  ,'WT.si_p','select_character'
							  ,'DCSext.step1button','risk_return');
			}
			else if ((button.id=="growth-income-product-link" || button.id=="growth-income-product-link2") && document.getElementById("growthContent")) {
				var growthContent = document.getElementById("growthContent");
				Default.modelDialog.appendChild(growthContent);
				growthContent.className="";
				
				// webtrends
				dcsMultiTrack('DCS.dcsuri', document.location.pathname.substring(0, document.location.pathname.lastIndexOf('.')) + '.ajax'
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_character'
						      ,'DCSext.step1button','growth_income');
			}
			//this situation should not occur; only when layers are not there
			else { alert("No content present!"); return; }

			//add fold functionality in model dialog
			addFunctionalityInModelDialog(button.id);
		}
		else {
			var body = document.getElementsByTagName("body")[0];			//get body
			Default.modelDialog.childNodes[0].className = "hide"; 			//change "riskContent" or "growthContent" layer className to "hide", to hide it from view
			body.appendChild(Default.modelDialog.childNodes[0]);			//remove "riskContent" or "growthContent" from dialog and append it as the last node of the body
			Default.showModelOverlay(false); 								//remove white layer
		}
	} // end function toggleMainPanels

	//private function triggeres when a main panel is openened
	var addFunctionalityInModelDialog = function (block) {
		//private function within addFunctionalityInModelDialog
		var toggleProductPanels = function (hyperlink, originalClassName, changeParentClass) {
			//the correct ProductPanels to toggle is determined by reading the href of the links and uding the portion after #
			var splitHref;
			var idLayer;

			//hide all panels
			for(var i=0; i<hyperlink.allLinks.length; i++) {
				splitHref = hyperlink.allLinks[i].href.split("#");
				idLayer = splitHref[splitHref.length-1];
				document.getElementById(idLayer).className = "hide";			//hide all product panels
				hyperlink.allLinks[i].className = "";							//reset all links
				if(changeParentClass) { hyperlink.allLinks[i].parentNode.parentNode.className = hyperlink.allLinks[i].parentNode.parentNode.className.replace(" active", "");	}
			}

			//hide all intro text
			if(hyperlink.introText) {
				document.getElementById("risk-return-intro").className = "hide";
				document.getElementById("not-protected-intro").className = "hide";
				document.getElementById("part-protected-intro").className = "hide";
				document.getElementById("capital-garant-intro").className = "hide";
				document.getElementById(hyperlink.introText).className = "";
			}

			//get the layer that you want to toggle
			splitHref = hyperlink.href.split("#");
			idLayer = splitHref[splitHref.length-1];

			document.getElementById(idLayer).className = originalClassName; 	//reset original className
			hyperlink.className = "active";										//activate current link
			if(changeParentClass) { hyperlink.parentNode.parentNode.className = hyperlink.parentNode.parentNode.className + " active";	}								//activate current link
			
			// webtrends
			var currentPageURIAjax = document.location.pathname.substring(0, document.location.pathname.lastIndexOf('.')) + '.ajax'; 
			
			if(block.indexOf("risk") != -1) {
				if(idLayer=="graph-link1-content" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_protection'
						      ,'DCSext.step2button','no_protection');
				} else if (idLayer=="graph-link2-content" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_protection'
						      ,'DCSext.step2button','some_protection');
				} else if (idLayer=="graph-link3-content" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_protection'
						      ,'DCSext.step2button','principal_protection');
				} else if (idLayer=="product-A3" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Leveraged_products');
				} else if (idLayer=="product-A2" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Yield_enhancement');
				} else if (idLayer=="product-B2" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Participation');
				} else if (idLayer=="product-A1" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Capital_protection');
				}
			} else if(block.indexOf("growth") != -1) {
				if (idLayer=="growth-products" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_growth_income'
						      ,'DCSext.step2button','growth');
				} else if (idLayer=="income-products" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_growth_income'
						      ,'DCSext.step2button','income');
				} else if ((idLayer=="product-Income-B") && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Capital_protection_capped');
				} else if (idLayer=="product-Income-A" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Yield_enhancement');
				} else if (idLayer=="product-growth-C" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Leveraged_products');
				} else if (idLayer=="product-growth-B" && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Participation');
				}  else if ((idLayer=="product-growth-A") && document.getElementById("riskContent")) {
					dcsMultiTrack('DCS.dcsuri', currentPageURIAjax
						      ,'WT.si_n','product_search'
						      ,'WT.si_p','select_type'
						      ,'DCSext.step3button','Capital_protection_uncapped');
				} 
			}
		}

		//toggle main panels "risk-return" and "growth-income" with new buttons
		var riskReturnProductLink2 = document.getElementById("risk-return-product-link2");
		var growthIncomeProductLink2 = document.getElementById("growth-income-product-link2");
		riskReturnProductLink2.onclick = growthIncomeProductLink2.onclick = function () { toggleMainPanels("", "hide"); toggleMainPanels(this, "show"); return false; };
		Lib.eventCache.add(riskReturnProductLink2, "onclick", function () { toggleMainPanels(this, "show"); return false; }, false);
		Lib.eventCache.add(growthIncomeProductLink2, "onclick", function () { toggleMainPanels(this, "show"); return false; }, false);

		//add functionality close button
		var closeLink = Lib.getElementsByClassName("close-link", "a", Default.modelDialog)[0];
		closeLink.onclick = function () { toggleMainPanels("", "hide"); return false; };
		Lib.eventCache.add(closeLink, "onclick", function () { toggleMainPanels("", "hide"); return false;}, false);

		//add close functionality on click of overlay
		var overlay = document.getElementById("overlay");
		overlay.onclick = function () { toggleMainPanels("", "hide"); return false; };
		Lib.eventCache.add(overlay, "onclick", function () { toggleMainPanels("", "hide"); return false;}, false);

		if(block.indexOf("risk") != -1) { // if block is risk
			//get the graph hyperlinks
			var graphLink1 = document.getElementById("graph-link1");
			var graphLink2 = document.getElementById("graph-link2");
			var graphLink3 = document.getElementById("graph-link3");
			graphLink1.allLinks = graphLink2.allLinks = graphLink3.allLinks = [graphLink1, graphLink2, graphLink3]; 	//add all links for every link to reset panels and links classes (see function toggleProductPanels)
			graphLink1.introText = "not-protected-intro";
			graphLink2.introText = "part-protected-intro";
			graphLink3.introText = "capital-garant-intro";

			//add fold out functionality
			graphLink1.onclick = graphLink2.onclick = graphLink3.onclick = function () { toggleProductPanels(this, "link-content"); return false; };
			Lib.eventCache.add(graphLink1, "onclick", function () { toggleProductPanels(this, "link-content"); return false; }, false);
			Lib.eventCache.add(graphLink2, "onclick", function () { toggleProductPanels(this, "link-content"); return false; }, false);
			Lib.eventCache.add(graphLink3, "onclick", function () { toggleProductPanels(this, "link-content"); return false; }, false);
		}

		else if(block.indexOf("growth") != -1) { // if block is growth
			//get the graph hyperlinks
			var growthProductsLink = document.getElementById("growth-products-link");
			var incomeProductsLink = document.getElementById("income-products-link");
			growthProductsLink.allLinks = incomeProductsLink.allLinks = [growthProductsLink, incomeProductsLink]; 	//add all links for every link to reset panels and links classes (see function toggleProductPanels)

			//add fold out functionality
			growthProductsLink.onclick = incomeProductsLink.onclick = function () { toggleProductPanels(this, "link-content", true); return false; };
			Lib.eventCache.add(growthProductsLink, "onclick", function () { toggleProductPanels(this, "link-content", true); return false; }, false);
			Lib.eventCache.add(incomeProductsLink, "onclick", function () { toggleProductPanels(this, "link-content", true); return false; }, false);
		}

		//loop through all fold out links in model dialog
		var allFoldOutLinks = Lib.getElementsByClassName("fold-out", "a", Default.modelDialog);
		for(var i=0; i<allFoldOutLinks.length; i++) {
			allFoldOutLinks[i].allLinks = allFoldOutLinks;
			allFoldOutLinks[i].onclick = function () { toggleProductPanels(this, ""); return false; };
			Lib.eventCache.add(allFoldOutLinks[i], "onclick", function () { toggleProductPanels(this, ""); return false; }, false);
		}
	} //end function addFunctionalityInModelDialog

	//stop if "risk-return-product-link" or "growth-income-product-link" are not there
	if(!document.getElementById("risk-return-product-link") || !document.getElementById("growth-income-product-link")) { return; }

	var riskReturnProductLink = document.getElementById("risk-return-product-link");			//get risk-return-product-link
	var growthIncomeProductLink = document.getElementById("growth-income-product-link");		//growth-income-product-link

	//add fold fuctionality to "risk-return-product-link" and "growth-income-product-link"
 	riskReturnProductLink.onclick = growthIncomeProductLink.onclick = function () { toggleMainPanels(this, "show"); return false; };
	Lib.eventCache.add(riskReturnProductLink, "onclick", function () { toggleMainPanels(this, "show"); return false; }, false);
	Lib.eventCache.add(growthIncomeProductLink, "onclick", function () { toggleMainPanels(this, "show"); return false; }, false);
}


/* <documentation about="Lib.addStyleSheet('static/css/javascript-enabled.css')" type="FUNCTION CALL">
	<summary>Add javascript style sheet to hide folds out etc. </summary>
</documentation> */
Lib.addStyleSheet(ROOT + "static/css/javascript-enabled.css");

/* <documentation about="Lib.cacheBackgroundImages()" type="FUNCTION CALL">
	<summary>Caching background images for IE to prevent from flicker-bug</summary>
</documentation> */
Lib.cacheBackgroundImages();

/* <documentation about="Default.init" type="FUNCTION CALL">
	<summary>Calling Lib.addEvent: Add Default.init as eventhandler on window onload event</summary>
</documentation> */
Lib.addEvent(window, "load", Default.init);
Lib.eventCache.add(window, "load", Default.init, false);

