// decorate selectable btns with behaviour
var selectedEl = null;
document.observe("dom:loaded", function(){
	var btns = $$('.selectable td').each(function(el){
		el.observe("click", function(ev){
			// check if the event src is inside a link first!
			var el = Event.element(ev);
			selectTab(el);
		});
	});
});

function getAncestor(el, tagName){
	if(el.tagName == tagName) return el;
	if(el.ancestors().length = 0) return false;
	return getAncestor(el.parentNode, tagName);
}

function selectTab(el){
	if(el.tagName!="A"){
		// get the div holding this btn
		var tdEl = getAncestor(el, "TD");
		if(tdEl){
			if(selectedEl != null) selectedEl.className = '';
			if(selectedEl != tdEl){
				tdEl.className = 'on';
				// update the media pane
				if(selectedEl==null){
					var oldMedia = 0;
				} else {
					var oldMedia = selectedEl.identify().substring(1);
				}
				$('m'+oldMedia).hide();
				var newMedia = tdEl.identify().substring(1);
				$('m'+newMedia).show();
				selectedEl = tdEl;
			} else {
				var oldMedia = selectedEl.identify().substring(1);
				$('m'+oldMedia).hide();
				$('m0').show();
				selectedEl = null;
			}
		}
	}
}