$(document).ready(function () {
    //$("#tabs").tabs();
    for(i=0;;i++){
        var obj = document.getElementById('tabs' + i);
        if(obj == null){
            break;
        }
       
        //$("#tabs" + i).tabs();
        init_tabs(i);
    }
});
function init_tabs(id){
  	// Create tab
    var $tabs = $('#tabs' + id).tabs({
        fx: {   opacity: 'toggle',
                duration: 'fast' }
    });
    
    // Set background image for all tabs
 	resetBackgrounds(id);	
	//$('#tabs' + id).tabs( 'select' , 0 );
    
	
    $( '#tabs' + id ).bind( "tabsselect", function(event, ui) {
        tab_click(event, ui, id);
    });
    $( '#tabs' + id ).bind( "tabsshow", function(event, ui) {
        resizePage();
    });
     
	// to select tab initially
	//$tabs.tabs('select', $('#tab_sel').val()); // => 0
    
	var selected = $tabs.tabs('option', 'selected'); // => 0
	selected = selected + 1;
	 var bgimage = server + 'images/misc/tab_1.png';
	 $('#tab-' + id + selected ).css('background', 'none'); // First set emptyimge
	 $('#tab-' + id + selected ).css('background', 'url(' + bgimage + ')');		
  }	
  
function resetBackgrounds(id){
    for(var i=0; i<=$('#tabs' + id).tabs('length'); i++){
        var tab_ind = i + 1;
        var bgimage = server + 'images/misc/tab_1_close.png';
        $('#tab-' + id + tab_ind).css('background', 'none'); // First set emptyimge
        $('#tab-' + id + tab_ind).css('background', 'url(' + bgimage + ')');		
	}
 }
function tab_click(e,ui, id){
	var tab_ind = ui.index + 1;
	 var bgimage = server + 'images/misc/tab_1.png';
     resetBackgrounds(id);
	 $('#tab-' + id + tab_ind).css('background', 'none'); // First set emptyimge
	 $('#tab-' + id + tab_ind).css('background', 'url(' + bgimage + ')');
	 // 
}