function prepareCss(){
// push text aside
    if (document.styleSheets[0].addRule){
        document.styleSheets[0].addRule(".txtContent","text-indent: -6000px;");
        return;
    }
    document.styleSheets[0].insertRule(".txtContent {text-indent: -6000px;}",document.styleSheets[0].cssRules.length);
}

$(document).ready(function(){
	
	// find the placeholder, and place main nav on top of it
	//var offset = $("#topnavPlaceHolder").offset();
	//$("#topnav").css("top",offset.top+3);
	//$("#topnav").css("left",offset.left);
	//$("#topnav").show();
	$("#topnavPlaceHolder").append($("#topnav"));
	$("#topnav").show();
	doTopNav();
	
    
    if ($("#contentBenefits").get(0))
		doDynamicList("contentBenefits");
	
	
	// set pager at resources links
	//doPager("#contentResources .linkList[pagecount]");
   
    AccSideBar("#contentHowtobuy");
    AccSideBar("#contentBSolutions");
    AccSideBar("#contentISolutions");
    AccSideBar("#contentShare");
	
	// create a playlist control
	doPlayList("#videoPlayList", 2, "step", "before","after");
	doPlayList("#productPlayList", 2, "step", "after","after");
	doPlayList("#contentShowcase", 4, "step", "after","after");
	
	//scrollArea();
	//var screenshots = new Showcase("contentShowcase");
	//screenshots.init();
	
	$('#contentShowcase ul a').bigPicture({
		'prevLabel': 'Back',
		'nextLabel': 'Next',
		'boxEaseFn': 'easeInQuint',
		'boxEaseSpeed': 900
	});
	
	if ($(".iconsdisplay ul").get(0))
		bniDisplayIcons(".iconsdisplay ul");
	if ($("#contentProducts").get(0))
		doProductsList("contentProducts");
	
	 // IO VIdeos
	if ($("#contentVideos").get(0))
		IOVideos();
	
	// prepare partners area, make it more generic, pass id and length
	if ($("ul#ioPartners").get(0)){
		
		IOPartners(3);
	}
    if ($("#contentResources").get(0))
	    doDynamicList("contentResources");
	    
	if ($(".ulVideo").get(0))
		doVideoNav(".ulVideo"); 
   // $('#shareThis .favorites').bind('click', setFavorite);
   if ($(".adRotate").length > 1){
		$(".adRotate").hide();
		rotateAd();
	}
	
});

function doTopNav(){
	// navigation menu, look for topnav ul a, get sibling, position, show
	// first, position sub menus below their parent
	$.each ($(".mainNav ul.topnav_menu"), function(){
	
		//var h = $(this).parent().offset().top + $(this).parent().height();
		var h =  $(this).parent().height();
		//if ($.browser.msie) h-=5; (TODO: test on IE7)
		$(this).css("top", h + "px");

	});

	
	// AYYASH: may 11, 09, change behavior to click
	$("ul.mainNav>li>a").click(function(){
		// show child, and hide currently showing, change class to selected
		
		$("ul.mainNav ul.topnav_menu:visible").hide();
		// bubble if no sub ul
		if ($(this).next('ul').html()){
			
			$(this).next('ul').show();
			// dont bubble
			return false;
		}
	});
	
	
	$("ul.mainNav>li").hover(
		function(){			
			$(this).addClass("active");
		},
		function(){
			$(this).removeClass("active");
		});
	
	$("body").click(function(){
		
		$("ul.mainNav ul.topnav_menu:visible").hide();
	});
}


function doDynamicList(id){
	// benefits area
	// find the elements, and place them absolutely on level of parent LI and to the right by LI width
	var bParent =  $("#"+ id +" ul:first");
	var bWidth = bParent.width();
	var bTop = bParent.get(0).offsetTop;
	
	
	
	// create a white background for the height
	bParent.before("<div class='iChildBG'></div>");
	var iChildBG = $("#"+ id +" .iChildBG");
	
	iChildBG.css("margin-left",  (bWidth) + "px");
	var iPad = (parseInt(iChildBG.css("padding-top")) + parseInt(iChildBG.css("padding-bottom")));
	
	var bMinHeight = bParent.height();
	
	// make height all the way to the bottom
	// compare bminheight to the height of other elements inside before comitting
	var refHeight = $("#"+ id).height() - bTop;
	var newHeight = 0;
	
	$.each($("#"+ id +" ul:first>li"), function(){
		var oDiv = $(this).children("div");
		oDiv.css("top", bTop);
		oDiv.css("left",(bWidth+ parseInt(oDiv.css("padding-left")) + parseInt(oDiv.css("padding-right"))) +"px" );		
		// capture maximum height;
		
		newHeight = parseInt(oDiv.height());// - parseInt(oDiv.css("padding-top")) - parseInt(oDiv.css("padding-bottom")); // remove padding top abd bottom
		bMinHeight = (newHeight > bMinHeight) ? newHeight : bMinHeight;
		
	});
	// set min height of div to refheight
	if (refHeight > bMinHeight) bMinHeight = refHeight;
	
	// set iChildBg to minheight, and set id to min height add the childs pad to make them equal in height
	iChildBG.css("height", bMinHeight + "px");
	bParent.css("height", bMinHeight +iPad+"px");
	
	// show first, and on click toggle
		
	var dDivs = $("#"+ id +" ul:first > li > div");
	//$("#"+ id +" ul:first > li:not(:first) > div").hide();
	$("#"+ id +" ul:first > li.on > div").show();
	$("#"+ id +" ul:first > li").click(function(){
		// do toggle appearnce
		dDivs.filter(":visible").parent().removeClass("on");
		dDivs.filter(":visible").hide();
		$(this).addClass("on");
		$(this).children("div:first").show();
		
	});
}	
function bniDisplayIcons(sel){
	// custome for the bni product list, hide all but the first four of every ul icon display
	
	// determine the height and add overflow hidden, height is that of first li, assuming all same width and height
	//var ulParent = $("ul."+id);
	
	$.each($(sel),function(i){
		//$("ul."+id+":eq("+ i +") li:gt(3)").hide();
		var ulParent = $(this);
		
		ulParent.children("li").filter(":gt(3)").hide();
		
		// insert a more link in case there are more
		if (ulParent.children("li").length > 4)
			ulParent.after("<a class='iMore' href='javascript://'>show more ...</a>");
		 else
			ulParent.after("<div class='iMore'></div>");
	});
	// on click, show the rest
	$(".iMore").toggle(function(){
		var a = $(this);
		a.prev("ul").children("li:hidden").slideDown(400);
		a.text("show less...");
		a.addClass("iMoreUp");
	},function(){
		var a = $(this);
		a.prev("ul").children("li").filter(":gt(3)").slideUp(400);
		a.text("show more...");
		a.removeClass("iMoreUp");
	});
	
	
}
function doProductsList(id){
	// special function to make the products and solutions
	// find the div inside the li, position to its lower part, with left = 0, display
	// height of first li is enough
	var bParent =  $("#"+ id +" ul:first");
	
	var bLeft = bParent.offset().left;
	var bWidth = bParent.width();
	
	
	//bParent.height($("#"+id+ " ul:first li:first").height() );
	// (4 px is height of bar image)
	var iOffset = $("#"+id+ " ul:first li:first").height() - 4;
	bParent.css("background-position","left "+ iOffset +"px");
		
	
	// every div inside, position top, get min height
	var oDiv;
	$.each($("#"+ id +" ul:first>li>div"), function(){
		oDiv = $(this);
		oDiv.width(bWidth - parseInt(oDiv.css("padding-left")) - parseInt(oDiv.css("padding-right")));
		oDiv.css("left",bLeft - oDiv.parent().offset().left);
		
	});
	//adjust height to contain all
	
	var dDivs = $("#"+ id +" ul:first > li > div");
	$("#"+ id +" ul:first > li.on > div").show();
		
	$("#"+ id +" ul:first > li").click(function(){
		// do toggle appearnce
		dDivs.filter(":visible").parent().removeClass("on");
		dDivs.filter(":visible").hide();
		$(this).addClass("on");
		$(this).children("div:first").show();
	
	});
	
}
function AccSideBar(sel){
    // how to buy side bar
    if (!$(sel)) return;
	$(sel +" ul span:not(:first)").hide();
	$(sel +" ul span:first").parent().addClass("hover");
	$(sel +" ul a.link").click(function(){
		if ( $(this).next().css("display") == "none"){
			$(sel +" ul span:visible").hide().parent().removeClass("hover");
			$(this).next().show().parent().addClass("hover");
		}
		return false;
	});
}
function Showcase(id){
	this.container = $("#"+id + " div");
	this.list = this.container.children("ul");
	this.children = this.list.children("li");
	this.ulWidth = 0;
	this.id = id;
	this.liWidth = this.list.children("li:first").width();
	
	this.scrollL;
	this.scrollR;
	
	this.init = function(){
		var ulWidth = 0;
		$.each(this.children, function(){
			oLi = $(this);
			ulWidth += parseInt(oLi.width()) + parseInt(oLi.css("padding-left")) + parseInt(oLi.css("padding-right")) + parseInt(oLi.css("margin-left")) + parseInt(oLi.css("margin-right"));
			
		});
		this.list.width(ulWidth);
		this.ulWidth = ulWidth;
		if ($("#"+ this.id).width() < this.ulWidth){
			//this.addScrollLeft();
		}
	}
	var container = this.container;
	this.addScrollLeft = function(){
		this.container.after("<a href='javascript://' class='iLeft'>Left</a>");
		var leftA = this.container.next("a");
		
		leftA.click(function(){
			// animate scrollLeft by amount of li width
			
			$("#"+ id).animate({scrollLeft : "+=200px"}, "fast");
		});
	}
	
	
}

var scrollStep=3;
var scrollDelay=10;
var timerScroll;
var doc;


function scrollArea(){

    // setup the area to have maximum width, add width of li children, plus paddings and margins
    if (! $("#scrollArea").get(0)) return;
    var mxWidth = 0;
    $.each($("#scrollArea li"), function(){
        oLi = $(this);
        mxWidth += parseInt(oLi.width()) + parseInt(oLi.css("padding-left")) + parseInt(oLi.css("padding-right")) + parseInt(oLi.css("margin-left")) + parseInt(oLi.css("margin-right"));
        
    });
    // attach mouseover and mouseout for scrollers
    $("#scrollArea ul").width(mxWidth+10);
    
    doc = $("#scrollArea").get(0);
	$("#iArrowScrollLeft,#iArrowScrollRight").mousedown(function(){ 
		
		
		if (this.id == "iArrowScrollRight"){
			timerScroll = window.setInterval(function(){
				    doc.scrollLeft += scrollStep;
			    },scrollDelay);
		}else{
			timerScroll = window.setInterval(function(){
				    doc.scrollLeft -= scrollStep;
			    },scrollDelay);

		}
		
	});
	
	$("#iArrowScrollLeft,#iArrowScrollRight").mouseup(function(){ 
		window.clearInterval(timerScroll);
	});
}

function IOVideos(){
    // build the player and insert after contentVideos, with height equal to ul height minus shwai
    var str = '<div id="pager">';
    
    // count elements in videos
    var len = $("#contentVideos ul").children("li").length;
   
    
    for (var i = 0; i<len; i++){
        
        str += '<a href="javascript:IOVideosNav('+ i +')"'
        if (i==0) str += 'class="selected"';
        str += '>'+ (i+1) +'</a>';
    }
    str += "</div>";
    $("#contentVideos .iCurveGT").append(str);
    
    $("#contentVideos ul li:first").show();
    
    var oPager = $("#pager");
    var iTop = ($.browser.msie) ? 20 : 0;
    
    oPager.css("margin-left",parseInt($("#contentVideos ul li:first dt").width()) + parseInt($("#contentVideos ul li:first dt").css("padding-right")));
    
    
    // ODD on IE
     if ($.browser.msie)
          {oPager.css("margin-top", "-" + (parseInt(oPager.height()) + parseInt($("#pager a").height()) +10 )+ "px");}
     
     oPager.show();
   
    if (!$.browser.msie)
        {oPager.css("margin-top", "-" + (parseInt(oPager.height()) + parseInt($("#pager a").height()) )+ "px");}
        
        
}
function IOVideosNav(iIndex){
    // hide all
     $("#contentVideos ul li:visible").hide();
     $("#pager a").removeClass("selected");
    // show index
    $("#contentVideos ul li:eq("+ iIndex +")").show();
    $("#pager a:eq("+ iIndex +")").addClass("selected");
}

function ULRotate (id, iLen){
// TODO LATER
//	this.id = id;
//	this.iLen = iLen;
//	this.iStart = 1;
//	
//	var gTimeout;
//	this.gTimeout = gTimeout;
//	
//	this.setupUl = function(){
//		// hide all, show indices, start with 1 - 4
//		$("ul#"+ this.id +" li").hide();
//		var str = "<li class='narrow_pager'><a class='p'>previous</a><a class='n'>next</a></li>";

//		// append only if total is more than len
//		$("ul#"+ this.id).append(str);
//		this.rotate();
//	};
//	
//	this.rotate = function(){
//		if (!this.iStart || this.iStart < 1) this.iStart = 1;
//		if (!this.iLen) this.iLen = 3;
//		window.clearTimeout(this.gTimeout);
//		
//		$("ul#"+ this.id+" li").hide();
//		$("ul#"+ this.id+" li:last-child").show();
//		// check start, if istart is larger than length, reset to 1
//		var len =  $("ul#"+ this.id).children("li").length;
//		
//		if (this.iStart > len-1) this.iStart = 1;
//		var iStartAfter = this.iStart + this.iLen;
//		var iStartBefore = this.iStart - this.iLen;
//		
//		// change hrefs of the last child  // add href to n
//		if (this.iStart - this.iLen > 0) $("ul#"+ id +" a.p").attr("href","javascript:rotateULnav("+iStartBefore+","+iLen+")");
//		else $("#contentPartners ul a.p").removeAttr("href");
//	   
//		if (iStart + iLen < len-1) $("ul#ioPartners a.n").attr("href","javascript:rotateULnav("+iStartAfter+","+iLen+")");
//		else $("ul#ioPartners a.n").removeAttr("href");
//	    
//	     
//	     
//		for (var x= iStart ; x< iStart+iLen; x++){ 
//			$("ul#ioPartners li:eq("+ (x-1) +")").show();
//		}
//	    
//		
//	   
//		};
//		
	
}
var io_partner = 0;
function IOPartners(iLen){
    // grat contentPartners content, and show three at a time, insert next and prev
    // hide all, show indices, start with 1 - 4
   
    $("ul#ioPartners li").hide();
    var str = "<li class='narrow_pager'><a class='p'>previous</a><a class='n'>next</a></li>";
       
    // append only if total is more than len
    $("ul#ioPartners").prepend(str);
    
    IOPartnersnav(1,iLen);
    
    
}


function IOPartnersnav(iStart, iLen){
    if (!iStart || iStart < 1) iStart = 1;
    if (!iLen) iLen = 3;
    
    window.clearTimeout(io_partner);
    
    $("ul#ioPartners li").hide();
    $("ul#ioPartners li:first-child").show();
    
    
    // check start, if istart is larger than length, reset to 1
    var len =  $("ul#ioPartners").children("li").length;
   
    if (iStart > len-1) iStart = 1;
    var iStartAfter = iStart + iLen;
    var iStartBefore = iStart - iLen;
    
   
    // change hrefs of the last child  // add href to n
    
    if (iStart - iLen > 0) $("ul#ioPartners a.p").attr("href","javascript:IOPartnersnav("+iStartBefore+","+iLen+")");
    else $("ul#ioPartners a.p").removeAttr("href");
   
 
    if (iStart + iLen < len-1) $("ul#ioPartners a.n").attr("href","javascript:IOPartnersnav("+iStartAfter+","+iLen+")");
    else $("ul#ioPartners a.n").removeAttr("href");
    
     
     
    for (var x= iStart ; x< iStart+iLen; x++){ 
        $("ul#ioPartners li:eq("+ (x) +")").show();
    }
    
    io_partner = window.setTimeout(function(){
		IOPartnersnav(iStartAfter,iLen);
    }, 5000);
    
}

function doPager(sSelector){
    // grab elements under selector, insert pager after element, show first pagecount attr, program next and prev links
    sSelector += " .linkList[pagecount]";
    var str = "<div class='wide_pager'><a class='p'>previous</a><a class='n'>next</a></div>";
    $(sSelector).before(str);
    // position pager according to height
    
    $.each($(sSelector), function(){
        
       
        $(this).prev(".wide_pager").show();
        // for every item, dopagenav
        var newSelector = sSelector + ":eq("+ $(sSelector).index(this) +")";
        doPagerNav(newSelector, 1, parseInt(this.getAttribute("pagecount")));
    });
    
    
}
function doPagerNav(sSelector, iStart, iLen){
    
    if (!iStart || iStart < 1) iStart = 1;
    if (!iLen) iLen = 3;
    
    // this child
   
   $(sSelector +" li").hide();
   
   // check start and end
   var len = $(sSelector).children("li").length;
   
   if (iStart > len) iStart = 1;
    var iStartAfter = iStart + iLen;
    var iStartBefore = iStart - iLen;
   
  
   if (iStart - iLen > 0) $(sSelector).prev(".wide_pager").children("a.p").attr("href","javascript:doPagerNav('" + sSelector + "',"+iStartBefore+","+iLen+")");
    else $(sSelector).prev(".wide_pager").children("a.p").removeAttr("href");
   
    if (iStart + iLen < len) $(sSelector).prev(".wide_pager").children("a.n").attr("href","javascript:doPagerNav('" + sSelector + "',"+iStartAfter+","+iLen+")");
    else $(sSelector).prev(".wide_pager").children("a.n").removeAttr("href");
    
    
    
    for (var x = iStart; x < iStart+iLen; x++){
      $(sSelector+ " li:eq("+ (x-1) +")").show();
      
    }
}

function doPlayList(id, len, behavior, whereLeft, whereRight){
	// check if len is less than kids of ul, add handlers accordingly
	if (!$(id)) return;
	if (!len) len = 2;
	
	var pUl = $(id+" ul");
	var pParent = $(id + " .parent");
	
	var ch = pUl.children("li");
	var stepWidth;
	var chl = ch.length;
	
	
	if (chl > len){
		var mxWidth = 0;
		var oLi;
		// if smooth behavior, add all widths, else one width times number
		if (behavior == "smooth"){
			$.each(ch, function(){
				oLi = $(this);
				mxWidth += parseInt(oLi.width()) + parseInt(oLi.css("padding-left")) + parseInt(oLi.css("padding-right")) + parseInt(oLi.css("margin-left")) + parseInt(oLi.css("margin-right"));
		        
			});
		}else{
			oLi = ch.filter(":first");//pUl.children("li:first");
			mxWidth = oLi.width() + parseInt(oLi.css("padding-left")) + parseInt(oLi.css("padding-right")) + parseInt(oLi.css("margin-left")) + parseInt(oLi.css("margin-right"));
			stepWidth = mxWidth;
			mxWidth *= ch.length;
			
		}
		// total width
		pUl.width(mxWidth);
		
		// decide the count
		var count = parseInt(pParent.get(0).scrollLeft / stepWidth);
		var mxCount = parseInt((mxWidth - pParent.width())/stepWidth);
		
				
		// check scrollLeft position
		var pParentElem = pParent.get(0);
		var lO = (count <= 0) ? " lo" : "";
		var rO = (count >= mxCount) ? " ro" : "";
		
		
		eval("pParent."+ whereLeft +"('<a class=\\'iLeft\'+ lO +\'\\' href=\\'javascript://\\'>left</a>')");
		eval("pParent."+ whereRight +"('<a class=\\'iRight\'+ rO +\'\\' href=\\'javascript://\\'>right</a>')");
		
		
		var iLeft = $(id+" a.iLeft");
		var iRight = $(id+ " a.iRight");
		

		iLeft.click(function(){
			// scroll amount is one li plus its padding and margins
			if (count <= 0) return;
			if (behavior == "step"){
				
				
				pParent.animate({scrollLeft : "-="+stepWidth +"px"}, "fast","",function(){
					
					count--;
					if (count <= 0) iLeft.addClass("lo");
					else iLeft.removeClass("lo");
					
					// clear right
					iRight.removeClass("ro");
				});
				
			}
		});
		iRight.click(function(){
			if (count >= mxCount) return;
			if (behavior == "step"){
				
				pParent.animate({scrollLeft : "+="+stepWidth +"px"}, "fast","",function(){
					count++;
					if (count >= mxCount) iRight.addClass("ro");
					else iRight.removeClass("ro");
					
					//clear left
					iLeft.removeClass("lo");
				});
				
			}
		});
	}
}
function doVideoNav(sel){
	// look for refId, look for a tags and assign a play to their refID using their medianame
	// 3ala kheir
	var oS = $(sel).attr("refId");
	var UlParent = $(sel);
	var Lis = $(sel +" li");
	if (oS != null && oS !="" && oS != "undefined"){
		var o = eval(oS);
		if (o){
			$(sel +" a.aVideo").click(function(){
				var m = this.getAttribute("medianame");
				o.setMediaName(m,true);
				Lis.removeClass("selected");
				$(this).parent("li").addClass("selected");
				
			});
		}
	}
}
function addFavorites(url,title){
	if (document.all)window.external.AddFavorite(url,title);
    else window.sidebar.addPanel(title,url,'');
    
}

function rotateAd(){
	// look for adRotate and randomize (TODO: enhance to accept multiple options)
	
	var ads = $(".adRotate");
	var rand = Math.ceil(Math.random() * ads.length);
	var CookieName = "BNICookie";
	var ck = 0;
	var cookiebegin = document.cookie.indexOf(CookieName + "=");
	if(cookiebegin > -1) {
		cookiebegin += 1 + CookieName.length;
		cookieend = document.cookie.indexOf(";",cookiebegin);
		if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
		ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
	}
	while(rand == ck) { 
		rand = Math.ceil(Math.random() * ads.length);
	}
	document.cookie = CookieName + "=" + rand;
	ads.hide();
	ads.eq(rand-1).show();
  }