Help with remembering Object.src in Javascript

[tanoru]

Hi I'm build a custom tab interface. When each tab is clicked a webpage is loaded into an iframe. There are multiple tabs so I've created multiple tab object that have a url parameter stored in them.

However I want each tab to remember the last page that it was at so they need to each save the url string into the object.

I'm having trouble getting it to change the parameter in the object correctly.

Here is my code:

var tabcount = 0;
var n = 0;
var tab = new Array(7);

var current_tab;$(document).ready(function() {
	function tabs(n) {
		if(n == "options") {
			$('#tabs').css({'height':'0'})
			$('.tab').css({'background-color':'transparent'});
		} else {
			if(n == "newtab") {
				addTab("pages/index.html","New tab");
			} else {
				current_tab = n;
				$('#tabs').css({'height':'100%'});
				changeTab(current_tab);
				setTab(current_tab);
			}
		}
	}
	
	$('li').click(function(){tabs(this.id)})
});

function setTab(current_tab) {
	tab[1].url = "http://www.google.com";
	$('#tabs').attr('src', tab[1].url);
}

function addTab(tempUrl, tempTitle) {
	if(tabcount == 7) {
		alert("Too many tabs");
	} else {
		alert(n);
		tab[n] = new tabObject(tempUrl, tempTitle);
		tabcount+=1;
		$('<li class="tab" id=' + n + '><span></span></li>')
	 		.click(function(){changeTab(this.id)})		  
	 		.dblclick(function(){removeTab(this.id);})
	 		.appendTo('#menu')
	  		.insertBefore("#newtab")
	 		.animate({"width":'100px'},{duration:"fast"})
	 		.html(tab[n].title)
	 		.attr('title',tab[n].title)
		n+=1;
	}
}

function homeTab() {
	tab[n] = new tabObject("pages/tasks/index.html","New tab");
	$('<li class="tab" id="0"><span></span></li>')
	 	 .click(function(){changeTab(this.id)})
	 	 .appendTo('#menu')
	  	 .insertBefore("#newtab")
	$('#0').css({'background':'url(images/icons/home.png) no-repeat center transparent','width':'16px !important'});
	n+=1;
	tabcount+=1;
	changeTab(0);
}

function removeTab(a) {
	$('#' + a).remove();
	tab[a].url="";
	tabcount -= 1;
	changeTab(0);
}

function changeTab(d) {	
	alert(tab[d].url);
	if(d == "hide") {
		hide();
	} else {
		$('#tabs').css({'height':'100%'}).attr('src', tab[d].url);
		$('.tab').css({'background-color':'transparent'});
		$('li#' + d).css({'background-color':'#15202a'});
	}
}

function tabObject(url, title) {
	this.url = url;
	this.title = title;
}

function tabChange() {
	tab[1].url = "http://www.yahoo.com";
	$('#tabs').attr('src', tab[1].url);
}

When the following link is clicked it's supposed to change the url property of tab[1] and then load that into the iframe (which has #tabs as its ID).

<a href="#" onclick="tabChange()">