$(document).ready(function() {

	//Default Action
	$(".promoContent").hide(); //Hide all content
	$("ul.promo li:first-child").addClass("active").show(); //Activate first tab
	$(".promoContent:first-child").show(); //Show first tab content
	
	//On Mouse Over Event
	$("ul.promo li").mouseover(function() {
		$("ul.promo li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".promoContent").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("rel"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).show(); //Fade in the active content
		return false;
	});


// reorder who represents box
function reorder() {            
var grp = $("#whox > div");            
var cnt = grp.length;             
var temp,x;            
for (var i = 0; i < cnt; i++) {                
temp = grp[i];
x = Math.floor(Math.random() * cnt);
	grp[i] = grp[x];
	grp[x] = temp;
}          
	$(grp).remove();          
	$("#displayu").after($(grp));
}

reorder();


$('#whox > #displayu').bind('click', function() {
   var $divs   = $('#whox > div'),
       offset  = $("#whox > div").size();
	   offset+=2;

   return function() {
       $divs.hide().slice(offset-2,offset).show();
       offset-=2;
  if( offset === 0 )
           offset =  $("#whox > div").size();

   
       
   };
}()).click();

$('#whox > #displayd').bind('click', function() {
   var $divs   = $('#whox > div'),
       offset  = 0;

   return function() {
       $divs.hide().slice(offset, offset+2).show();
       offset += 2;
var xoff = $("#whox > div").size();
       if( offset === xoff )
           offset = 0;
   };
}()).click();

});