$(function() {
	$('.tabs').tabs();
});

jQuery.fn.extend({
    tabs: function() {
        return this.each(function() {
            if(!$(this).hasClass('ui-tab-wrapper')) {
                $(this)
                    .addClass('ui-tab-wrapper')
                    .find('ul:first')
                    .addClass('ui-tab-header')
                    .find('li:first')
                    .addClass('ui-tab-active')
                    .parents('div:first')
                    .children('div')
                    .addClass('ui-tab-panel')
                    .eq(0)
                    .addClass('ui-tab-panel-active');
                $(this).children('.ui-tab-header').find('a').click(function() {
                    var target = $(this);
                    var related = target.attr("href").substring(target.attr("href").indexOf("#"));
                    if(!related) return false;
                    var panel = $(related);
                    if(!(target.parent('li').hasClass('ui-tab-active'))) {
                        $('.ui-tab-active',target.parents('ul')).removeClass('ui-tab-active');
                        $('.ui-tab-panel-active',panel.parents('div')).removeClass('ui-tab-panel-active');

                        target.parent('li').addClass('ui-tab-active');
                        panel.addClass('ui-tab-panel-active');
                    }
                    return false;
                });
            }
        });
    }
});

function removeTabDataList() {
    $("#tab_header_id").empty();
    $("#tab_content_id").removeClass('ui-tab-wrapper');
    $("div","#tab_content_id").remove('.ui-tab-panel');
}
function addTabHeaderDataToPage(allData){
	removeTabDataList();
	var headerData = allData['tabHeader'];
	var contentData = allData['tabContents'];

	//adding the tab header content.
	for(var i = 0; i < headerData.length; i++){
		var $listItem = $('<li></li>');
		if(i == 0){
			$listItem.addClass('active');
		}
		$listItem.html('<a href=#tab-'+(i+1)+'>'+headerData[i] +'</a>');
		$('#tab_header_id').append($listItem);
	}

	// to add the tab content to the screen.
	for(var k = 0; k < contentData.length; k++){
		var idName = 'tab-' + (k+1);
		var $itemToAdd = $('<div id='+idName+'></div>');
			$itemToAdd.html(contentData[k]);
		$('#tab_content_id').append($itemToAdd);
	}

	$('.tabs').tabs();
}