/*
 *  - If source-code ordering is important, then set the initially selected element/container first and a 'visible' style. The initially invisible elements/containers would need to be explicitly set to 'hidden'. 
 *  - If source code ordering is not important, all the containers can be 'visible' or 'hidden' but the initially selected element/container needs to come last
 *  - Above methods ensures screen-reader accessibility as well as allows search engines to reliably read/index all text inside
 *  - Unique id's for the hidden elements - this speeds up DOM traversing considerably
 *  - Assumes a <ul>/<li> structure for the link set. Adds a class 'selected' to the anchor tag of the clicked element
 *  - Supports multiple CSS classes
 *  - minimal ARIA support
 *  
 *  <ul class="load_any-unique-name">
 *		<li>
 *			<a class="showContent" href="#id-of-the-linked-element" id="ad_id-of-the-linked-element">Link text </a>
 *		</li>
 *  </ul>
 * 
 * <div class="class-name-of-the-parent-<ul>-element"><div class="ad_id-of-the-linked-element" id="id-of-the-linked-element"></div>
 * </div>
 * 
 * Eg:
 *  <ul class="load_promos">
 *		<li>
			<a class="showContent" href="#products" id="ad_products">Products </a>
		</li>
 *  </ul>
 * 
 * <div class="load_promos"><div class="ad_products" id="products"> Your content here </div></div>
 * 
 */


function loadBanner(itemClicked, block){
    $("div." + block).find("." + itemClicked).css("visibility","visible").attr({"aria-hidden":"false","aria-labelledby":itemClicked,"role":"tabpanel"}).animate({opacity: 1}, {duration: 500,queue: false}).siblings().css("visibility","hidden").attr("aria-hidden","true").animate({opacity: 0}, {duration: 500,queue: false});
}

$(document).ready(function(){
	
    $("a.showContent").bind("click",function(){
        var itemClicked = $(this).attr("id");
        var containerClass;
        $(this).parents("ul:first").filter(function(){
			$(this).attr("role","tablist");
           $.each($(this).attr("class").split(" "), function(){
                if (this.indexOf("load_") != -1) {
                    containerClass = this;
                    return false;
                }
            })
        })
        loadBanner(itemClicked, containerClass);
        $(this).addClass("selected").attr({"aria-selected":"true","role":"tab"}).parent("li").siblings().find("a").removeClass("selected").attr({"aria-selected":"false","role":"tab"});

		return false;
    });
	
		 $("a.showContent").each(function(){
	 	if($(this).hasClass("selected")){
			$(this).trigger("click")
		}
	 })
	
});