dynamic tabs

I have the following scrript:

<style>

#myTabs {width: 100%}

</style>

<span id="myTabs"></span>
<iframe id="myContent" style="border: 1px solid #aaa; height: 450px; width: 80%" frameborder=no></iframe>

<script>

var names = ["Index", "Contacts"];
var values = ["index.php", "contacts.php"];

var tabs = new AW.UI.Tabs;
tabs.setId("myTabs");
tabs.setItemText(names);
tabs.setItemValue(values); // store page URLs in the 'value' property.
tabs.setItemCount(2);
tabs.refresh();

</script>

<script>

tabs.onSelectedItemsChanged = function(selected){

var index = selected[0];
var value = this.getItemValue(index);
window.status = index + ": " + value;

document.getElementById("myContent").src = value; // iframe URL
}

tabs.setSelectedItems([0]); // load the first page.


</script>
<br>
add tab
  two questions:
1- How can I dynamically add a tab through the text "add tab" at the end of the page???
2 - How can I add a "x" following the tabs names (for example "Index x") in order to close a tab???

I hope anybody can help me

Thanks
Valerio