// prepare any tabstrips on the page
$(document).ready(function(){

	// iterate any tabstrips in the content
	var tabstrips = $('.ctl-tabstrip');
	for (var i = 0; i < tabstrips.length; i++) {
		var d = tabstrips[i];
		// container
			var nd = document.createElement('DIV');
				nd.id = 'tabstrip-' + i;
				nd.className = 'tabstrip';
			
		// tab area
			var ndt = document.createElement('DIV');
				ndt.id = 'tabstrip-tabs-' + i;
				ndt.className = 'tabstrip-tabs';
			
		// content panels
			var ndp = document.createElement('DIV');
				ndp.id = 'tabstrip-panels-' + i;
				ndp.className = 'tabstrip-panels';
			var ndp1 = document.createElement('DIV');
				ndp1.className = 'tabstrip-panels-inner1';
			var ndp2 = document.createElement('DIV');
				ndp2.className = 'tabstrip-panels-inner2';
			var ndp3 = document.createElement('DIV');
				ndp3.className = 'tabstrip-panels-inner3';
			
		// iterate each tab
		var tabs = $(d).children();
		for (var j = 0; j < tabs.length; j++) {
			var t = tabs[j];
			var tabName = $($(t).children()[0]).html();
			var tabContent = $($(t).children()[1]).html();

			// clickable tab
				
			var a = document.createElement('A');
				a.id = 'tabstrip-tabs-a-' + i + '-' + j;
				a.innerHTML = tabName;
				a.setAttribute('href', '#' + tabName.toLowerCase().replace(/\s/, '-'));
				
			var l = document.createElement('IMG');
				l.setAttribute('src', '/images/spacer.gif');
				l.setAttribute('height', '26');
				l.setAttribute('width', '16');
				l.className = 'tab-left';
			a.insertBefore(l, a.childNodes[0]);

			var r = document.createElement('IMG');
				r.setAttribute('src', '/images/spacer.gif');
				r.setAttribute('height', '26');
				r.setAttribute('width', '16');
				r.className = 'tab-right';
			a.insertBefore(r, null);
				
			var t = document.createElement('DIV');
				t.id = 'tabstrip-tabs-' + i + '-' + j;
				t.className = (j == 0) ? 'tabstrip-tab-active' : 'tabstrip-tab-inactive';
				
			//t.appendChild(l);
			t.appendChild(a);
			//t.appendChild(r);
			ndt.appendChild(t);
			
			// panel
			var p = document.createElement('DIV');
				p.id = 'tabstrip-panels-' + i + '-' + j;
				p.className = (j == 0) ? 'tabstrip-panel-active' : 'tabstrip-panel-inactive';
				p.innerHTML = tabContent;
			ndp.appendChild(p);
		}
		nd.appendChild(ndt);
		
		ndp3.appendChild(ndp);
		ndp2.appendChild(ndp3);
		ndp1.appendChild(ndp2);
		nd.appendChild(ndp1);
		//d.parentNode.replaceChild(d, nd);
		$(d).replaceWith(nd);
	}
	$('.tabstrip .tabstrip-tabs DIV A').bind("click", null, function(e) {
		var aid = this.id;
		var ahash = this.hash;
		tparts = aid.split('-');
		var tsid = tparts[3];
		var tid = tparts[4];
		
		// loop through all tabs
		var tabs = $('#tabstrip-' + tsid + ' .tabstrip-tabs DIV A');
		for (var i = 0; i < tabs.length; i++) {
			var tab = tabs[i];
			tab.parentNode.className = (tab.id == aid) ? 'tabstrip-tab-active' : 'tabstrip-tab-inactive';
		}
		
		// loop through all panels
		var panels = $('#tabstrip-' + tsid + ' .tabstrip-panels > DIV');
		for (var i = 0; i < panels.length; i++) {
			var panel = panels[i];
			pid = panel.id
			pparts = pid.split('-');
			panel.className = (tid == pparts[3]) ? 'tabstrip-panel-active' : 'tabstrip-panel-inactive';
		}
		this.blur();
		document.location.hash = ahash;
		return false;
	}).filter('[href="' + document.location.hash + '"]').click();

});