//
// DESC: write content html into the elements
// content - string - is the HTML you want to write
// elementIdList - string - comma delimited list of element IDs
//
function writeInnerHTML(content, elemIdList) {
    var idList = elemIdList.split(',');
	  for(i = 0; i < idList.length; i++) {
	      var elem = document.getElementById(idList[i]);
	      if (elem != null)
	          elem.innerHTML = content.replace(/^\s+|\s+$/, '');
	  }
}

// TabPages - manages tabbed divs
//
// (by manipulating the display property usually of divs, requires
// (all the tabs/divs to be inside a larger outside container
// (start by defining a TabPages element like so
//    var myTabs = new TabPages('pagedContentContainer1');
// (then add tabs to it likd so
//    myTabs.addTab("tab01");
//    myTabs.addTab("tab00");
// (then show the first (zero-eth) tab like so
//    myTabs.showTab("cont00")
// (assumptions:
// (   tabs are held in an array from 0 - number of
// (   tab/div ids should not start with numbers (keep the form cont4)
// (ideally the containers will not be displayed to start with and
// (the showTab("cont00") will show the first tab.
//
//
function TabPages(tabsContainerDiv) {
    //
    // private variables
    //
    var tabs = new Array();
    var tabCurrent = 0;
    var tabContainer = document.getElementById(tabsContainerDiv);
    var callbackFunc   = null; // callback function to call on tab change

    this.addTab = function(contId) {
        tabs[tabs.length] = contId;
    }
    this.getTabsSize = function() {
        return tabs.length;
    }
    this.getNextTotal = function(total,ipp) {
      if (this.getCurrentTabNumber() < (this.getTabsSize()-1)) {
        return ipp;
      } else {
        lastpage = total % (this.getTabsSize()-1);
        return lastpage;
      }
    }
    this.getCurrentIndex = function() {
    	  return tabCurrent;
    }
    this.getCurrentTabNumber = function () {
    	  return tabCurrent + 1;
    }
    this.getTabs = function() {
    	  return tabs;
    }
    this.setCallback = function(funcName) {
    	  this.callbackFunc = funcName;
    }
    this.goToNext = function() {
        tabCurrent++;
        if ( tabCurrent >= tabs.length ) tabCurrent = tabs.length - 1;
        if ( tabCurrent <= 0           ) tabCurrent = 0;
        this.showTab(tabs[tabCurrent]);
    };
    this.goToPrevious = function() {
        tabCurrent--;
        if ( tabCurrent >= tabs.length ) tabCurrent = tabs.length - 1;
        if ( tabCurrent <= 0           ) tabCurrent = 0;
        this.showTab(tabs[tabCurrent]);
    };
    this.goToFirst = function() {
        tabCurrent = 0;
        this.showTab(tabs[tabCurrent]);
    };
    this.goToLast = function () {
        tabCurrent = tabs.length - 1;
        this.showTab(tabs[tabCurrent]);
    };
    this.showTab = function(idNumber) {
        // check if array of tabs has been set up
        if ( (tabs == null) || (tabs.length == 0) )
            alert("Tabs is null (or zero lenth), nothing to show, config error");

        aTab = null;
        for (i = 0; i < tabs.length; i++) {
            aTab = document.getElementById(tabs[i]);
            if ( (tabs[i] == idNumber) || (i == idNumber) ) {
                tabCurrent = i;
                aTab.style.display = 'block';
            } else {
                aTab.style.display = 'none';
            }
        }
        if (this.callbackFunc != null) eval (this.callbackFunc);
        return false;
    };
    this.getNavigation = function() {
        var out = "";
        out += "<a href=\"#\" onclick=\"myTabs.goToPrevious();\">&lt; previous</a> | ";
        for(i = 0; i < tabs.length; i++) {
        	  var tabNo = i + 1;
        	  if (i == this.getCurrentIndex())
        	     out += "<b>" + tabNo + "</b> | ";
        	  else
               out += "<a href=\"#\" onclick=\"myTabs.showTab('cont" + i + "');\">" + tabNo + "</a> | ";
        }
        out += "<a href=\"#\" onclick=\"myTabs.goToNext();\">next &gt;</a>";

        return out;
    }
    this.toString = function() {
        return "TabPages with " + tabs.length + " panes";
    };
}


function newWin(n,wn,w,h,t,l,s) { new_window=window.open(n, wn, 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars='+s+',resizable=0,width='+w+',height=' + h + ((t)?',screenX='+t+',top='+t:'') + ((l)?',screenY='+l+',left='+l:'')); if (new_window.opener==null) { new_window.opener=self; } if (window.focus) new_window.focus(); }

// *************************************************
// HOMEPAGE_REDUX functions added for Homepage Redesign Jan 2009
// *************************************************
// Homepage Tabbed News And Content Area:
// Function to control clicking on the tabs - this function is called when user clicks a tab icon
// thus that tab's div is made visible and the others are hiddern

var numCols = 3; // Number of  Homepage Tabbed News And Content area has 3 tabs
var currCol = 0; // init this to 0

function colClick(col) {
  if (currCol) {
    document.getElementById('d' + currCol).style.visibility = 'hidden';
    document.getElementById('tab_' + currCol).src = '/images/hp/tab_' + currCol + '_off.gif';
  }
  document.getElementById('d' + col).style.visibility = 'visible';
  document.getElementById('tab_' + col).src = '/images/hp/tab_' + col + '_on.gif';
  currCol = col;
}
// *************************************************

// *************************************************
// Homepage Tabbed News And Content Area:
// on page load - need to set the tab to the tab that business has selected via teamsite (see tab_controller.jsp)
// where they simply assign an integer to this var - homepage_tab_default
// as in:
// homepage_tab_default = 1   Default Tab: 1st Tab
// homepage_tab_default = 2   Default Tab: 2nd Tab
// homepage_tab_default = 3   Default Tab: 3rd Tab

// *************************************************

// ************************************************
// Begin js code for the Sign-in, Register balloons
// ************************************************
// Used on Commentary Tab of home page for example
// This non-intrusive javascript is to handle showing the user helpful "sign-in or Register" balloon that notifies
// them that the link they want to go to requires being signed-in (thus registered as well). Also the P+ is added
// html structure that supports this is basically:
// each Categories link on the page that is to require logging in will have an anchor link of class 'lock_link_yes'
// based on that - 3 things are done:
// 0. create the P+ link
// 1. Create balloon html
// 2. create hover effect for the links that require Login (and user not logged in)
// The destination link (to truly require login first) relies on this:
// The link MUST be listed in page security xml config file
// User experience for non logged in user:
// Click the link... they are then brought to signin/register page ... they are then brought to destination link they wanted to go to.

// Another less desirable way would be to rewrite the destination url with signin/regestier page url for the non-logged in user
// Then after they logged in they would be returned to the page they clicked the link and they could then click the
// link again and actually go to the destination (because they are logged in the destination link is NOT rewritten).

// 0. Create P+ html
// adding  P+ html. It's just a div the precedes the balloon
function create_p_plus() {
  // find all links to create a balloon for. Create a balloon for each
  $('.lock_link_yes').each(function(){
    var p_plus_Parent = $(this).parent();
    var div_p_plus = document.createElement('span');
    var html_for_p_plus = '';
    html_for_p_plus += '<span class="lock_link_yes green_p_plus">P+</span>';

    $(div_p_plus).html(html_for_p_plus); // this innerhtml's  it into the balloon div (jquery syntax)
    // use below for debug:
    // $(div_balloon_basic).html("<span>Hello <b>Again</b></span>");

    // append html to parent div
    $(p_plus_Parent).append(div_p_plus);
  })
};

// 1. Create balloon html
// called on page load - creates a balloon div for each sign-in required link on the page
// to do this it relies on looking for a hrefs with class="lock_link_yes"
// then it will build the balloon html and append it to the parent of the a href.
function createBalloons() {
  // find all links to create a balloon for. Create a balloon for each
  $('.lock_link_yes').each(function(){
    var balloonParent = $(this).parent();
    var commentary_real_link;  // this is the link user sees in commentary - the one they want to go to
                               // we will use this as the sign-in link in the balloon. That way the
                               // user experience is: click... go to signin page... then destination url.
                               // example: <a class="lock_link_yes" href="/content/podcast/advisor_stories/risk.mp3">

    // $(this) refers to the current lock_link_yes we are iterating on
    // we want the href of it such that we can put that in for the sign_in link in the balloon.
    commentary_real_link =  $(this).attr("href");

    //  div_balloon_basic will be the balloon div - one balloon div (and it's contents) created for each lock link.
    var div_balloon_basic = document.createElement('div');
    div_balloon_basic.className = 'balloon_basic';
    // stuff the balloon with innerhtml so it will end up like this:
    //      <div class="balloon_basic">   -  this comes from above div create and  classname assignment.
    //        <div class="balloon_content">
    //          <div class="balloon_hdr">Registration required</div>
    //          <div class="balloon_reg_link_text">
    //            Please
    //            <a href="/content/podcast/advisor_stories/risk.mp3">Sign in</a>
    //            or
    //            <a href="/profile/registration_start.htm">Register</a>
    //          </div>
    //        </div>
    //        <div class="balloon_tip"/>
    //      </div>

    var html_for_balloon = '';
    html_for_balloon += '<div class="balloon_content">';
    html_for_balloon +=   '<div class="balloon_hdr">Registration required</div>';
    html_for_balloon +=   '<div class="balloon_reg_link_text">';
    html_for_balloon +=      'Please ';
    html_for_balloon +=      '<a href="'+ commentary_real_link +'">Sign in</a>';
    html_for_balloon +=      ' or ';
    html_for_balloon +=      '<a href="/profile/registration_start.htm">Register</a>';
    html_for_balloon +=   '</div>';
    html_for_balloon +=   '<div class="balloon_tip"/>';
    html_for_balloon += '</div>';

    $(div_balloon_basic).html(html_for_balloon); // this innerhtml's  it into the balloon div (jquery syntax)
    // use below for debug:
    // $(div_balloon_basic).html("<span>Hello <b>Again</b></span>");

    // append html to parent div
    $(balloonParent).append(div_balloon_basic);

    // overwrite the default signin link with the commentary link

    })
};

// 2. create hover effect for the Links that require Login (and user not logged in)
function createHovers() {
  // this loops through all divs that have class 'lock_box'
  $('.lock_box').each(function(i){
    // for this lock_box find the children we know should be there -  icon_lock  and balloon_basic
    var curr_lock_link = $(this).find('.lock_link_yes');
    var curr_balloon = $(this).find('.balloon_basic');

    // if user mouses over the link -  show the balloon, mouse off - hide the balloon.
    // the case of mousing off link and onto the balloon works ok, and vice versa - no unexpected balloon hiding etc.
    $(curr_lock_link).hover(
      function () {   // jquery hover 1st function is for hover OVER
        // show the balloon for this lock link
        $(curr_balloon).show();
      },
      function () {   // jquery hover 2nd function is  for hover OFF
        $(curr_balloon).hide();
      }
    );
    // If user mouses over the balloon - keep showing the balloon. If they mouese off it - hide it.
    $(curr_balloon).hover(
      function () {   // jquery hover 1st function is for hover OVER
        // show the balloon for this lock link
        $(curr_balloon).show();
      },
      function () {   // jquery hover 2nd function is  for hover OFF
        $(curr_balloon).hide();
      }
    );
  });
  // end LOOP through all lock_boxes and create Hovers for the links and balloons
} // end createHovers

// note - the above functions are used by tab_controller.jsp text cluster
// ************************************************
// end js code for the Sign-in, Register balloons
// ************************************************


<!--CyberAgent js code starts-->

// for Home 
// Topics Tab Open/Close

function initHomeTopicsTab() {
	if (!document.getElementById){
		return;
	}
	
	// Page Check 
	if( document.getElementById('home') ){
		// Get Tab Content Elements
		contentInformation = document.getElementById('content_information');
		//contentIndexPerformance = document.getElementById('content_index_performance');
		contentCommentary = document.getElementById('content_commentary');
	
		// Get Tab Elements
		var topicsTab = document.getElementById('topics_tab');
		var btnElement = topicsTab.getElementsByTagName('li');
		
		// Setting Button Element & Initial View
		for(i=0;i<btnElement.length;i++){
			btnElement[i].onclick = homeTopicsTabOpen;
		}
		document.getElementById('btn_information').className = 'current';	
		contentInformation.style.display = 'block';
		//contentIndexPerformance.style.display = 'none';
		contentCommentary.style.display = 'none';
	}
	
}

function homeTopicsTabOpen() {
	var topicsTab = document.getElementById('topics_tab');
	var btnElement = topicsTab.getElementsByTagName('li');
	var btnId = this.id;
	
	if( btnId == 'btn_information') {
		contentInformation.style.display = 'block';
		//contentIndexPerformance.style.display = 'none';
		contentCommentary.style.display = 'none';
	/*} else if( btnId == 'btn_index_performance') {
		contentInformation.style.display = 'none';
		contentIndexPerformance.style.display = 'block';
		//contentCommentary.style.display = 'none';*/
	} else if( btnId == 'btn_commentary') {
		contentInformation.style.display = 'none';
		//contentIndexPerformance.style.display = 'none';
		contentCommentary.style.display = 'block';
	}
	for(i=0;i<btnElement.length;i++){
		if(btnElement[i].id == btnId){
			btnElement[i].className = 'current';	
		} else {
			btnElement[i].className = 'off';
		}
	}

	return false;
}


// for About ETF & About iShares 
// Button Rollover

function initContentNaviRollOvers() {
	if (!document.getElementById){
		return;
	}
	
	var preLoads = new Array();
	var allImages = document.getElementsByTagName('img');

	for (var i = 0; i < allImages.length; i++) {		
		if (allImages[i].className == 'rollover') {
			var src = allImages[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var oSrc = src.replace(ftype, '_on'+ftype);

			//-- スワップ元、スワップ先画像の登録
			allImages[i].setAttribute('pSrc', src);
			allImages[i].setAttribute('oSrc', oSrc);

			//-- イメージのプリロード
			preLoads[i] = new Image();
			preLoads[i].src = oSrc;

			//-- イベントの設定
			allImages[i].onmouseover = function() {
				this.setAttribute('src', this.getAttribute('oSrc'));
			}
			allImages[i].onmouseout = function() {
				this.setAttribute('src', this.getAttribute('pSrc'));
			}
		}
	}
}


// for Examples of Example Portfolios with iShares 
// Country List Open/Close

function initExamplePortfolioList() {
	if (!document.getElementById){
		return;
	}
		
	// Page Check
	if(document.getElementById('example_portfolio')){
		// Get List Elements
		listTok = document.getElementById('list_tok');
		listEem = document.getElementById('list_eem');
		listIgov = document.getElementById('list_igov');
		listIef = document.getElementById('list_ief');
		listEmb = document.getElementById('list_emb');
	
		// Get Button Elements
		var btnTok = document.getElementById('btn_tok');
		var btnEem = document.getElementById('btn_eem');
		var btnIgov = document.getElementById('btn_igov');
		var btnIef = document.getElementById('btn_ief');
		var btnEmb = document.getElementById('btn_emb');
		
		// Setting Button Element
		btnTok.onmouseover = examplePortfolioListOpen;
		btnTok.onmouseout = examplePortfolioListClose;
		btnTok.style.cursor = 'pointer'
	
		btnEem.onmouseover = examplePortfolioListOpen;
		btnEem.onmouseout = examplePortfolioListClose;
		btnEem.style.cursor = 'pointer'
		
		btnIgov.onmouseover = examplePortfolioListOpen;
		btnIgov.onmouseout = examplePortfolioListClose;
		btnIgov.style.cursor = 'pointer'
		
		btnIef.onmouseover = examplePortfolioListOpen;
		btnIef.onmouseout = examplePortfolioListClose;
		btnIef.style.cursor = 'pointer'
		
		btnEmb.onmouseover = examplePortfolioListOpen;
		btnEmb.onmouseout = examplePortfolioListClose;
		btnEmb.style.cursor = 'pointer'
	}
}

function examplePortfolioListOpen() {
	var btnId = this.id;
	if( btnId == "btn_tok") {
		listTok.style.display = 'block';
	} else if( btnId == "btn_eem") {
		listEem.style.display = 'block';
	} else if( btnId == "btn_igov") {
		listIgov.style.display = 'block';
	} else if( btnId == "btn_ief") {
		listIef.style.display = 'block';
	} else if( btnId == "btn_emb") {
		listEmb.style.display = 'block';
	}
}

function examplePortfolioListClose() {
	var btnId = this.id;
	if( btnId == "btn_tok") {
		listTok.style.display = 'none';
	} else if( btnId == "btn_eem") {
		listEem.style.display = 'none';
	} else if( btnId == "btn_igov") {
		listIgov.style.display = 'none';
	} else if( btnId == "btn_ief") {
		listIef.style.display = 'none';
	} else if( btnId == "btn_emb") {
		listEmb.style.display = 'none';
	}
}



// for FAQ
// Q & A Open/Close

function initFaqQuestion() {
	if (!document.getElementById){
		return;
	}
	
	// Page Check
	if( document.getElementById('faq_content') ){
		// Get Q & A Content Elements
		var faqElement = document.getElementById('faq_content');
		var faqQuestion = faqElement.getElementsByTagName('h3');
		var faqAnswer = faqElement.getElementsByTagName('p');
		
		for(i=0;i<faqQuestion.length;i++){
			faqQuestion[i].onclick = openAnswer;
			faqQuestion[i].onmouseover = function() { this.className += ' ' + 'hover'; }
			faqQuestion[i].onmouseout = function() { this.className = this.className.replace('hover', ' '); }
			faqQuestion[i].style.cursor = 'pointer'
		}
		
		for(i=0;i<faqAnswer.length;i++){
			faqAnswer[i].style.display = 'none';
		}
	}
}

function openAnswer() {
	var faqContent = this.parentNode;
	var faqAnswer = faqContent.getElementsByTagName('p');
	
	if (faqAnswer[0].style.display == 'none'){
		faqAnswer[0].style.display = 'block'
	} else {
		faqAnswer[0].style.display = 'none'
	}
}





// add onLoad 

function addOnload(func){
	if ( typeof window.addEventListener != "undefined" ){
		window.addEventListener( "load", func, false );
	}else if ( typeof window.attachEvent != "undefined" ) {
		window.attachEvent( "onload", func );
	}else{
		if ( window.onload != null ){
			var oldOnload = window.onload;
			window.onload = function ( e ) {
			oldOnload( e );
			window[func]();
		};
	}else
		window.onload = func;
	}
}

addOnload(initHomeTopicsTab);
addOnload(initContentNaviRollOvers);
addOnload(initExamplePortfolioList);
addOnload(initFaqQuestion);


<!--CyberAgent js code ends--> 




// Tabs on the Contact Us page for Qualified Investors 

 $(document).ready(function(){
	$("div#fragment-1").show();
	$("div#fragment-2").hide();
	$("div#fragment-3").hide();
	$("div#fragment-4").hide();
	
	$("a#link-1").click(function(){
		$("div#fragment-1").show();		
		$("div#fragment-2").hide();
		$("div#fragment-3").hide();
		$("div#fragment-4").hide();
		
		$("li#li-1").addClass("selected");
		$("li#li-2").removeClass("selected");
		$("li#li-3").removeClass("selected");
		$("li#li-4").removeClass("selected");
		return false;
	})
	
	$("a#link-2").click(function(){
		$("div#fragment-2").show();		
		$("div#fragment-1").hide();
		$("div#fragment-3").hide();
		$("div#fragment-4").hide();
		
		$("li#li-2").addClass("selected");
		$("li#li-1").removeClass("selected");
		$("li#li-3").removeClass("selected");
		$("li#li-4").removeClass("selected");
		return false;
	})
	
	$("a#link-3").click(function(){
		$("div#fragment-3").show();
		$("div#fragment-1").hide();
		$("div#fragment-2").hide();
		$("div#fragment-4").hide();
		
		$("li#li-3").addClass("selected");
		$("li#li-1").removeClass("selected");
		$("li#li-2").removeClass("selected");
		$("li#li-4").removeClass("selected");
		return false;
	})
	
	$("a#link-4").click(function(){
		$("div#fragment-4").show();
		$("div#fragment-1").hide();
		$("div#fragment-2").hide();
		$("div#fragment-3").hide();
		
		$("li#li-4").addClass("selected");
		$("li#li-1").removeClass("selected");
		$("li#li-2").removeClass("selected");
		$("li#li-3").removeClass("selected");
		return false;
	})
	
  });