Hello I am trying to get index of current selected tab. Alert(ui.index) returns "undefined". Any idea why?

thanks

    <script>
	$(document).ready(function(){
		var $tabs = $("#apttabs > ul").tabs();

		$tabs.bind('tabsselect', function(event, ui) {
			alert(ui.index);
		});
	});
</script>


<div id="apttabs">
    <ul>
    	<li><a href="#fragment-1"><span>tab1</span></a></li>
    	<li><a href="#fragment-2"><span>tab1</span></a></li>
    	<li><a href="#fragment-3"><span>tab1</span></a></li>
        </ul>

    <div id="fragment-1">content 1</div>
    <div id="fragment-2">content 1</div>
    <div id="fragment-3">content 1</div>

</div>