function contentTabClick(index){
			
			tabCount = $('.contentTabs').children().length;
			
			for(i=0;i<tabCount;i++){
				$tab = $('#contentTab'+i);
				$panel = $('#contentPanel'+i);
				
				cssClass="";
				if(i==0){
					cssClass = 'contentTabStart'; //the first tab is always selected
				} else {
				   if(i == tabCount-1){
				   	   cssClass = "contentTabEnd";
				   } else {
				   	   cssClass = "contentTabMiddle";
				   }				   
				}
				if(i==index){
					cssClass += "Active";
				}
				
				$tab.addClass(cssClass);
				
				if(cssClass!="contentTabStart"){$tab.removeClass("contentTabStart");}
				if(cssClass!="contentTabMiddle"){$tab.removeClass("contentTabMiddle");}
				if(cssClass!="contentTabEnd"){$tab.removeClass("contentTabEnd");}
				if(cssClass!="contentTabStartActive"){$tab.removeClass("contentTabStartActive");}
				if(cssClass!="contentTabMiddleActive"){$tab.removeClass("contentTabMiddleActive");}
				if(cssClass!="contentTabEndActive"){$tab.removeClass("contentTabEndActive");}				
				
				if(i==index){					
					$panel.show();
				} else {
					$panel.hide();
				}	
			}
}
		
function convertShowTabs()
{
			$tabPages = $(".tabPage");
	
			if($tabPages.length>0){
	
				$tabArea = $('<div class="contentTabArea1"><div class="contentTabArea2"><ul class="contentTabs"></ul><div class="contentTabBody"></div></div></div>');
				
				$($tabPages[0]).before($tabArea);
					
				$tabPages.each(
				function( index ){
					
					h2s = $(this).find('h2');
					
					tabHeading = "Tab" + index;
					if(h2s.length>0){
						tabHeading = $(h2s[0]).html();
						$(h2s[0]).remove();//remove the heading all together
					}					
					
					
					
					cssClass="";
					if(index==0){
						cssClass = 'contentTabStartActive'; //the first tab is always selected
					} else {
					   cssClass = ((index == ($tabPages.length)-1)?"contentTabEnd":"contentTabMiddle");
					}			
					
					$newTab = $("<li id=\"contentTab"+index+"\" class=\""+cssClass+"\"><a href=\"javascript:void(0);\">" + tabHeading + "</a></li>");
					
					//window.alert('Tab ' + intIndex);
					$('.contentTabs').append($newTab);
					
					$newTab.click(function(){
						contentTabClick(index);
					});
					
					$panel = $(this).remove();
					
					extra="";
					if(index>0){
						extra = ' style="display:none;"';
					}				
					
					$newDiv = $('<div id="contentPanel'+index+'" '+extra+'></div>');
					$newDiv.append($panel);
					
					$('.contentTabBody').append($newDiv);
					
				}
				);
			
			} //if tab pages		
}

