var DynamicExtensions = {
	    dynamicize: function(element){
	        element.dHref = element.getAttribute("href");
			element.dTarget = element.getAttribute("target");
			element.target = "";
			element.dynamic = dynamicallyLoad.bindAsEventListener(element);
			Event.observe(element, 'click', element.dynamic);
			return element;
	    }
	}

	Element.addMethods(DynamicExtensions);

	function dynamicallyLoad(e) {
		//Get the element we need
		element = Event.element(e);
		//Call the function to s
		displayByElement(element);
		GoogleTrack(element.dHref);
		Event.stop(e);
		return false;
	}
	
	var animateTab =null;
	
	function displayByElement(element, doNotTrack, no_animate){
		new Ajax.Updater(element.dTarget, element.dHref, {
			method: 'get',
			onComplete: function() {
				setLinks(element,element.dTarget);
				
				if (element.innerHTML != undefined) 
					$('tabLabel').innerHTML = element.innerHTML; 
				else 
					$('tabLabel').innerHTML = "SONGS";
				if(!no_animate)
					animateTab = new Effect.Highlight(element.dTarget, {duration:0.2, startcolor:'#000000',queue: 'end' });

					swapImage();
					//Show hide  the scrollbar 
					if ($('popup').getHeight() > 630){
							$('scrollbarFlash').show();
					}else{
							$('scrollbarFlash').hide();
					}
					resetScroll();				  	
					
					/*****************************************************************************
					The sIFR configuration should typically go in `sifr-config.js`, but in order to
					keep the config file clean, and to give a quick overview, it's done here instead.
					*****************************************************************************/
				  /*
				  sIFR.replace(default_font, {
					selector: '#popup h3'
					,css: [
					  '.sIFR-root {color:#000000; font-size: 40px; font-weight:bold; }'
					],
					forceSingleLine: true
				  });
				
				sIFR.replace(default_font, {
				  selector: '#tabLabel'
					,css: [
					  '.sIFR-root {color:#000000; font-size: 120px; font-weight:bold; }'
					],
					forceSingleLine: true
				});
				*/
				
			}
		});
	}

	function setLinks(e, target) {
		(target) ? selector = '#'+target+' ' : selector = '';
		$$(selector+'a.tab').invoke('dynamicize');
	}

	Event.observe(window, 'load', function(){
		setLinks();
	});