var intervalId = 0;

function initTabs(){
	$("#coArticleZoneTabs .tab").css("cursor", "pointer")
	$("#coArticleZoneTabs .tab").click(function () {
	  	selectTab($(this).attr("tabId"));
    });
	
	preloadImages();
	
	intervalId = setInterval ( "showNextTab()", 10000 );
}

function preloadImages(){
	
	//first one will already be loaded	
	for (var i = 1; i < zones.length; i++) {
		$.preloadImages(zones[i].imageURL);		
	}
}

function selectTab(tabId){
	clearInterval ( intervalId );
	showTab(tabId);
}

function showTab(tabId){
	currentTab = tabId;
	showTabDetails(tabId);
	showImage(tabId);
}

function showNextTab(){
	
	var nextTabId = 0;
	
	for (var i = 0; i < zones.length; i++){
		if(zones[i].id == currentTab){
			if(i+1 < zones.length){
				nextTabId = zones[i+1].id;
			}
			else{
				nextTabId = zones[0].id;
			}
		}
	}
	
	showTab(nextTabId);
}

function showTabDetails(tabId){
	var tabToShow = $("#coArticleZoneTabs .tabDetails[tabId='"+tabId+"']");
	//var tabImageToShow = $("#coArticleZoneTabs .articleZoneImageURL[tabId='"+tabId+"']");

	$("#coArticleZoneTabs .tabDetails").hide();
	
	tabToShow.show();
	$("#coArticleZoneTabs .tabDetails .textArea").hide();
	$("#coArticleZoneTabs .tabDetails .textArea").fadeIn(500);	
	
}

function showImage(tabId){	

	//var img = new Image();
	var tabDetails = getTabDetails(tabId);
	var imageToShow = $("#coArticleZoneTabs #imageArea div[tabId='"+tabId+"']");
	var imagesToHide = $("#coArticleZoneTabs #imageArea div[tabId!='"+currentTab+"']");
		
	$("#imageArea").css("background-color",  tabDetails.colour )
	
	imageToShow.css("z-index",  1 );
	imagesToHide.css("z-index",  0 );		
	
	imageToShow.hide();
	imageToShow.fadeIn(500, tidyUpImageArea);	 

}

function tidyUpImageArea(){
	var imagesToRemove = $("#coArticleZoneTabs #imageArea div[tabId!='"+currentTab+"']");
	imagesToRemove.hide();	
}

function getTabDetails(tabId){
	var tabDetails;
	
	for(var i = 0 ; i < zones.length; i++){
		if (tabId == zones[i].id) {
			tabDetails = zones[i];
			break;
		}
	}
	
	return tabDetails;
}

jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}