// JavaScript Document
Event.observe(window, "load", function() {
	initOurClients();
	setInterval(pollHash, 300);
});

function initOurClients(){
	
	if ($('clientList')) {
	
		// collapse company list
		$('clientList').select('p').invoke('hide');
		
		// highlight first icon
		$('clientList').firstDescendant().down().addClassName('active');
		
		// observe logos
		clientLinks = $('clientList').select('h3');
		for (var i=0; i<=clientLinks.length-1; i++) {
			$(clientLinks[i]).observe('mouseover', function(e) {
				this.down().addClassName('over');
			});
			$(clientLinks[i]).observe('mouseout', function(e) {
				this.down().removeClassName('over');
			});
			$(clientLinks[i]).observe('click', function(e) {
				e.stop();
				switch(this.className){
				case "gsk": $$('h1').each(function(e){e.addClassName('bw');}); break;
				case "bupa": $$('h1').each(function(e){e.addClassName('bw');}); break;
				case "kimberly-clark": $$('h1').each(function(e){e.addClassName('bw');}); break;

				default: $$('h1').each(function(e){e.removeClassName('bw');}); break;
				}
				//reset all logos
				$('clientList').select('a').invoke('removeClassName', 'active');
				// highlight current logo
				this.down().addClassName('active');
				// swap content of info div
				headerText = this.down().innerHTML;
				straplineText = this.next().innerHTML;
				//$('introPanel').update('<h2>'+headerText+'</h2><p>'+straplineText+'</p>');
				updateIntroPanel(headerText, straplineText);
				// replace image
				updateBackgroundImage(this.className);
				setHash(this.className);
			});
		}
	}
}

function intialiseStateFromURL(){
	var idToShow = window.location.hash;
	if(idToShow.length > 1){
		setClientDetails(idToShow.replace("#",""));
	} else {
		setClientDetails('coca-cola');
	}
}

function updateIntroPanel(headerText, straplineText){
	$('introPanel').update('<h2>'+headerText+'</h2><p>'+straplineText+'</p>');
}

function updateBackgroundImage(imageid){
	var currentImage = document.getElementById("bgImage").style.backgroundImage;
	var newImage = imageid+'.jpg';
	var newBackground = currentImage.replace(/[^\/]+\.jpg/, newImage);
	document.getElementById("bgImage").style.backgroundImage = newBackground;
}

function setClientDetails(idToShow){
	//remove highlight
	$$('div#clientList a').invoke('removeClassName', 'active')
	
	//set new highlight
	$$('h3.'+idToShow+' a').invoke('addClassName', 'active')

	//swap content
	var headerText = $$('h3.'+idToShow+' a');
	var straplineText = $$('p.'+idToShow);
	updateIntroPanel(headerText[0].innerHTML, straplineText[0].innerHTML);
	
	//replace image
	updateBackgroundImage(idToShow);
}