// globals

var oldclass = 'old';
var theclass = '?';
var theartist = '?';
var indexWork = 0;
var indexImage = 0;

var videodata = {
	/* themes */
		t01: ["28294763001","Nicolas Bourriaud on 'Borders'","Curator's film"],
		t02: ["28294758001","Nicolas Bourriaud on 'Docu-Fiction'","Curator's film"],
		t03: ["28280288001","Nicolas Bourriaud on 'Archive'","Curator's film"],
		t04: ["28291733001","Nicolas Bourriaud on 'Viatorisation'","Curator's film"],
		t05: ["28291748001","Nicolas Bourriaud on 'Heterochronia'","Curator's film"],
		t06: ["28280277001","Nicolas Bourriaud on 'Travel'","Curator's film"],
		t07: ["28284021001","Nicolas Bourriaud on 'Exiles'","Curator's film"],
		t08: ["28291751001","Nicolas Bourriaud on 'Energy'","Curator's film"],
		
	/* exhibition artists */
		e03x: ["/britain/exhibitions/altermodern/xml/avery.xml","Nicolas Bourriaud on Charles Avery","Curator's film"],
		e24: ["28291734001","Nicolas Bourriaud on Lindsay Seers","Curator's film"],
		e26: ["28294746001","Nicolas Bourriaud on Simon Starling","Curator's film"],
		
		/* theorists */
		th01: ["28820602001","Nicolas Bourriaud on Nicolas Bourriaud","Curator's film"],
		th01b: ["28828433001","Nicolas Bourriaud on Nicolas Bourriaud","Curator's film"],
		
		/* videos on specific exhibtion works */
		e01: ["28294755001", "Installing <em>&laquo;Gateway&raquo;&ndash;Getaway</em>","Video of installation"],
		e07: ["28291746001", "Installing <em>Untitled (Tate Britain)</em>","Video of installation"],
		e12: ["28284007001", "Installing <em>Tremors Where Forever</em>","Video of installation"],
		
	/* prologue events */
		p02: ["27082994001","Simon Critchley and Tom McCarthy: 'Tate Declaration on Inauthenticity'","Film from the event"],
		th02: ["29700485001","TJ Demos: 'Exiles'","Film from the event"],
		th03: ["31067749001","Okwui Enwezor: 'Specious Modernity'","Film from the event"],
		pr04: ["27082994001","Simon Critchley and Tom McCarthy: 'Tate Declaration on Inauthenticity'","Film from the event"],
		pr02: ["29700485001","TJ Demos: 'Exiles'","Film from the event"],
		pr01: ["31067749001","Okwui Enwezor: 'Specious Modernity'","Film from the event"]
};

// test for Internet Explorer 6
var isIE6 = false;
if (( $.browser.msie ) && (parseInt($.browser.version,10) == 6)) { isIE6 = true; }

// hide the non-JS content and load the special CSS for the JS version of the page
$('#defaultcss').after('<style type="text/css" id="loadingcss"> #interactive {display: none} \n body { background: #f5f5f5 url("/britain/exhibitions/altermodern/images/page-loader.gif") no-repeat 499px 357px; } </style>');
// $('#loadingcss').after('<link href="/britain/exhibitions/altermodern/css/altermoderninteractive.css" rel="stylesheet" type="text/css" />');
// $('#defaultcss').attr("href","/britain/exhibitions/altermodern/css/explore-interactive.css");
// FUNCTIONS

// reset the islands' colours
function themesReset(){	
	if (isIE6) { $(".greysea").css("opacity","1"); }
	else { $(".greysea").stop(true,false).fadeTo(100,1); }
} // end function themesReset()		

// highlight theme island on rollover
function themesHighlightthis(thing){
	var themeIndex = ($(thing).attr('href')).charAt(3);
	$(".i0"+themeIndex+" .greysea").stop(true,true).fadeTo(200,0);
} // end function tthemesHighlightthis()

function keyTip(theitem){ // this positions the border of the extension box in the key rollover
	var p = $(theitem).position();
	var tipY = p.top;
	var tipX = (632 - $('.keynav ul').outerWidth()) + p.left;
	var tipH = $(theitem).innerHeight() + 1;
	$('#keytip').css({'left':tipX + 'px','top':tipY + 'px','height':tipH+'px','display':'block'});
} // function 'keyTip' ends

// highlight the islands and show contributor qualities
function themesHighlight(myClass){
		
	var tarr = '';

	if (myClass == 'e01') { tarr = ["06",3,"04",3,"01",2,"03",2,"08",1,"05",1,"02",1,"07",0]; } // Franz Ackermann
	if (myClass == 'e02') { tarr = ["05",3,"04",3,"06",2,"08",1,"07",0,"01",0,"02",0,"03",0]; } // Darren Almond
	if (myClass == 'e03') { tarr = ["05",3,"02",3,"03",2,"06",1,"01",0,"08",0,"04",0,"07",0]; } // Charles Avery
	if (myClass == 'e04') { tarr = ["04",3,"01",3,"06",3,"08",1,"03",0,"02",0,"05",0,"07",0]; } // Walead Beshty
	if (myClass == 'e05') { tarr = ["02",3,"03",3,"05",3,"08",3,"01",2,"07",1,"04",0,"06",0]; } // Spartacus Chetwynd
	if (myClass == 'e06') { tarr = ["01",3,"02",3,"04",2,"08",2,"05",1,"07",1,"06",0,"03",0]; } // Marcus Coates
	if (myClass == 'e07') { tarr = ["03",2,"02",2,"05",2,"01",2,"08",2,"04",1,"06",0,"07",0]; } // Peter Coffin
	if (myClass == 'e08') { tarr = ["03",3,"02",2,"05",2,"01",1,"06",0,"08",0,"04",0,"07",0]; } // Matthew Darbyshire
	if (myClass == 'e09') { tarr = ["02",3,"03",3,"05",2,"01",2,"07",0,"04",0,"08",0,"06",0]; } // Shezad Dawood
	if (myClass == 'e10') { tarr = ["02",3,"03",3,"05",3,"04",2,"06",2,"01",0,"07",0,"08",0]; } // Tacita Dean
	if (myClass == 'e11') { tarr = ["01",2,"08",2,"03",2,"06",0,"02",0,"05",0,"07",0,"04",0]; } // Ruth Ewan
	if (myClass == 'e12') { tarr = ["08",3,"01",3,"04",1,"05",1,"06",0,"03",0,"02",0,"07",0]; } // Loris Greaud
	if (myClass == 'e13') { tarr = ["08",3,"04",0,"01",0,"06",0,"03",0,"02",0,"05",0,"07",0]; } // Subodh Gupta
	if (myClass == 'e14') { tarr = ["05",2,"03",3,"04",2,"02",1,"01",0,"07",0,"08",0,"06",0]; } // Rachel Harrison
	if (myClass == 'e15') { tarr = ["02",3,"03",3,"08",2,"05",1,"06",1,"04",1,"01",0,"07",0]; } // Joachim Koester
	if (myClass == 'e16') { tarr = ["01",3,"02",3,"03",2,"05",2,"08",1,"07",0,"04",0,"06",0]; } // Nathaniel Mellors
	if (myClass == 'e17') { tarr = ["08",3,"04",2,"01",3,"03",1,"06",0,"07",0,"05",0,"02",0]; } // Gustav Metzger
	if (myClass == 'e18') { tarr = ["03",3,"02",3,"01",2,"06",1,"05",1,"07",0,"04",0,"08",0]; } // Mike Nelson
	if (myClass == 'e19') { tarr = ["05",2,"02",2,"03",3,"01",0,"07",0,"04",0,"08",0,"06",0]; } // David Noonan
	if (myClass == 'e20') { tarr = ["04",3,"01",3,"08",2,"06",2,"03",2,"05",2,"02",1,"07",0]; } // Katie Paterson
	if (myClass == 'e21') { tarr = ["03",3,"02",3,"05",1,"01",0,"06",0,"08",0,"04",0,"07",0]; } // Olivia Plender
	if (myClass == 'e22') { tarr = ["01",3,"03",2,"04",1,"06",0,"08",0,"07",0,"05",0,"02",0]; } // Seth Price
	if (myClass == 'e23') { tarr = ["07",3,"04",3,"01",3,"06",3,"02",3,"03",2,"05",0,"08",0]; } // Navin Rawanchaikul
	if (myClass == 'e24') { tarr = ["02",3,"05",2,"03",2,"01",2,"08",2,"07",0,"04",0,"06",0]; } // Lindsay Seers
	if (myClass == 'e25') { tarr = ["03",2,"02",2,"05",2,"07",2,"04",2,"08",2,"06",2,"01",2]; } // Bob & Roberta Smith
	if (myClass == 'e26') { tarr = ["04",3,"01",3,"06",3,"03",3,"02",3,"05",2,"08",1,"07",0]; } // Simon Starling
	if (myClass == 'e27') { tarr = ["01",2,"07",2,"04",2,"02",1,"03",1,"05",0,"06",0,"08",0]; } // Pascale Marthine Tayou
	if (myClass == 'e28') { tarr = ["02",3,"05",3,"01",3,"03",2,"06",3,"04",3,"07",0,"08",0]; } // Tris Vonna-Michell
	
	if (myClass == 'p01') { tarr = ["07",3,"01",3,"06",3,"04",2,"02",2,"03",1,"08",0,"05",0]; } // Tania Bruguera
	if (myClass == 'p02') { tarr = ["01",3,"02",3,"06",1,"03",1,"05",0,"07",0,"04",0,"08",0]; } // Simon Critchley & Tom McCarthy
	if (myClass == 'p03') { tarr = ["01",3,"03",2,"08",2,"06",0,"04",0,"07",0,"05",0,"02",0]; } // General Idea
	if (myClass == 'p04') { tarr = ["06",3,"08",1,"01",3,"04",2,"03",1,"02",1,"05",0,"07",0]; } // Carsten Holler
	if (myClass == 'p05') { tarr = ["07",3,"04",2,"01",1,"06",2,"02",2,"08",0,"05",0,"03",0]; } // Flavia Muller Medeiros & Nasrin Tabatabai
	if (myClass == 'p06') { tarr = ["03",3,"06",2,"02",2,"01",1,"05",1,"04",1,"08",0,"07",0]; } // Zoran Naskovski
	if (myClass == 'p07') { tarr = ["06",3,"03",1,"02",2,"04",1,"01",0,"08",0,"07",0,"05",0]; } // John Smith
	if (myClass == 'p08') { tarr = ["07",3,"01",3,"03",3,"04",0,"05",0,"08",0,"02",0,"06",0]; } // Ultra-Red
	
	if (myClass == 'th01') { tarr = ["03",2,"02",2,"05",2,"07",2,"04",2,"08",2,"06",2,"01",2]; } // Nicolas Bourriaud
	if (myClass == 'th02') { tarr = ["07",3,"01",1,"06",1,"03",1,"04",0,"05",0,"08",0,"02",0]; } // TJ Demos
	if (myClass == 'th03') { tarr = ["07",3,"01",2,"04",0,"05",0,"08",0,"02",0,"06",0,"03",0]; } // Okwui Enwezor
	if (myClass == 'th04') { tarr = ["01",3,"03",3,"06",0,"08",0,"04",0,"07",0,"05",0,"02",0]; } // Jordi Vidal
	
	$(".i"+tarr[0]+" .greysea").stop(true,true).fadeTo(150,0.9-((3*tarr[1])/10),function(){
		$(".i"+tarr[2]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[3])/10),function(){
			if ((tarr[5]>0) || !($('#interactive').hasClass('overlay'))) { $(".i"+tarr[4]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[5])/10),function(){
				if ((tarr[7]>0) || !($('#interactive').hasClass('overlay'))) { $(".i"+tarr[6]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[7])/10),function(){
					if ((tarr[9]>0) || !($('#interactive').hasClass('overlay'))) { $(".i"+tarr[8]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[9])/10),function(){
						if ((tarr[11]>0) || !($('#interactive').hasClass('overlay'))) { $(".i"+tarr[10]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[11])/10),function(){
							if ((tarr[13]>0) || !($('#interactive').hasClass('overlay'))) { $(".i"+tarr[12]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[13])/10),function(){
								$(".i"+tarr[14]+" .greysea").stop(true,true).fadeTo(50,1-((3*tarr[15])/10));
							}); } // end of "if (tarr[13]>0)"
						}); } // end of "if (tarr[11]>0)"
					}); } // end of "if (tarr[9]>0)"
				}); } // end of "if (tarr[7]>0)"
			}); } // end of "if (tarr[5]>0)"
		});
	});


} // end function themesHighlight()

// FUNCTIONS FOR THE 'LIGHTBOX' OVERLAY (and its content pages)

function destroyOverlay() { // this removes the 'lightbox' effect
	$(document).unbind('keydown');
	$('#overlaynav').animate({'top':'422px'},200, 'swing', function(){
		$('#objview').remove();
		$('.lightbox, #slide, #viewerbox, .imgbase').fadeOut(400);  // taken out ", .imgview"
		$('#overlayglass').fadeTo(400,0);
		$('#shadebox').fadeTo(400,0,function(){
			$('#interactivetitle, .keynav, .keynav .title').fadeIn(400);
			$('body, #interactive, #overlaynav, #overlaybox').removeClass();
			$('#overlaynav').addClass('onav_index');
			$('#overlay, #shadebox, #overlayglass').css('display','none');
			$('#slide').css({'left':'633px','display':'block'});
			$('#spotlight').css('top','-200px');
			$('#viewerbox').css('top','-408px');
			oldclass = 'old';
		});
		themesReset();
	});
} // destroyOverlay ends

function switchOverlay(theclass,thetype) { // this dims the 'lightbox' effect before switching to another topic
	if ($('#viewerbox').css('top') != '-408px') { 
		$('.imglist').fadeOut(200); 
		$('.imgbase').css({'display':'none'});
		$('#viewerbox').animate({'top':'432px'},300,'swing',function(){$(this).css('top','-408px');});
		}
	$('#spotlight').css('top','-200px');
	$('.lightbox').fadeOut(200);
	$('#overlayglass').css({'z-index':50});
	// animate the navigation
	$('#overlaynav').animate({'top':'422px'},200, 'swing', function(){
		$('#keyglass').fadeTo(100,1,function(){ $('#keyglass').css({'display':'block'}); });
		var thetime = 612 - parseInt($('#slide').css('left'), 10);
		$('#slide').animate({'left':'633px'},thetime, 'swing', function(){
			createOverlay(theclass,false,thetype);
		});
	});
} // switchOverlay ends

function loadImage(workindex,imageindex) {
	indexImage = imageindex;
	$('.imglist .imagelist li').removeClass('display');
	$('.imglist .work:eq('+workindex+') .imagelist li:eq('+imageindex+')').addClass('display');
	var thepath = $('.imglist .work:eq('+workindex+') .imagelist li:eq('+imageindex+') a').attr('href');
	$('.lower, .imgbase').stop(true,true).css({'background-image':'url("'+thepath+'")', 'display':'block'});
	$('.upper').stop(true,true).fadeOut(500, function(){
		$('.imgview').toggleClass('upper').toggleClass('lower');
		});	
} // loadImage ends

function getImages(workindex,direction) {
	indexWork = workindex;
	indexImage = 0;
	$('.imglist .work').removeClass('current');
	$('.imglist .work:eq('+workindex+')').addClass('current');
	if ($('.imglist .work:eq('+workindex+') li').size() > 1) { 
		$('.imglist .work:eq('+workindex+') .imagelist').addClass('thumbs'); }
	
	// display the first image
	$('.imglist li').removeClass('display');
	$('.imglist .work:eq('+workindex+') .imagelist li:eq(0)').addClass('display');
	if (direction == "+") { loadImage(workindex,0); }
	else { loadImage(workindex,$('.imglist .work:eq('+workindex+') li').size() - 1); }
	
	// assign the image swapping action to each link in the image list
	$('.imglist .work:eq('+workindex+') .imagelist a').each(function(index){
		$(this).click(function(){
			if (!($(this).parent().hasClass('display'))) { loadImage(workindex,index); }
			return false;
		});
	});

} // getImages ends

function imageNav(myKey,shiftDown){
	// keyboard
	var myScroll = 0;
	switch (myKey) {
		case 37: myScroll = -1; break; // Left Arrow key (scroll back)
		case 39: myScroll = 1; break; // Right Arrow key (scroll forward)
		case 9: shiftDown ? myScroll = -1 : myScroll = 1; break; // Tab (scroll forward) or Shift + Tab (scroll back)
	}
	if (myScroll == 1) { // we want to advance forward
		if ((indexImage + 1) < $('.imglist .work:eq('+indexWork+') li').size()) { 
			// we can still move forward in this set of pictures 
			loadImage(indexWork,indexImage+1); 
		} else {
			if (indexWork < $('.imglist .work').size()-1) { 
				getImages(indexWork+1,"+");  // we can move on to the next work
			} else { getImages(0,"+"); } // we return to the first image
		}
	}
	if (myScroll == -1) { // we want to move backwards
		if (indexImage > 0) { 
			loadImage(indexWork,indexImage-1); // we can still move backwards in this set of pictures
		} else {
			if (indexWork > 0) {
				getImages(indexWork-1,"-"); // we can move to the previous work
			} else { 
				getImages($('.imglist .work').size()-1,"-"); // we move to the last picture in the current set
			}
		}
	}
}

// pass this function the id of the BrightCove video and it will return you video object to be embedded
function getvideoobject( videoid ) {

		// create a new video object
		return $('<!-- Start of Brightcove Player --><div style="display:none"></div><!-- By use of this code snippet, I agree to the Brightcove Publisher T and C found at http://corp.brightcove.com/legal/terms_publisher.cfm. --><object id="myExperience' + videoid + '" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF" /><param name="width" value="544" /><param name="height" value="306" /><param name="playerID" value="28915011001" /><param name="publisherID" value="1854890877"/><param name="isSlim" value="true" /><param name="@videoPlayer" value="' + videoid + '" /></object><!-- End of Brightcove Player -->');

} // end function getvideoobject( thehtml )

function loadParticipants(theclass,theartist) {
	var thehtml = '';
	  switch(theclass) {
		case 'listall': thehtml = '<h4>List of participants</h4><p>The following artists and theorists have participated in <em>Altermodern: Tate Triennial 2009</em>:</p><div id="overlayex"><p>Exhibition artists</p><ul class="contrlinks">' + $('#participantlist1').html() + '</ul></div><div id="overlaypr"><p>Prologue artists</p><ul class="contrlinks">' + $('#participantlist2').html() + '</ul></div><div id="overlayth"><p>Theorists</p><ul class="contrlinks">' + $('#participantlist3').html() + '</ul></div>'; break;
		case 'key01': thehtml = '<h4>List of participants: the exhibition artists</h4><p>The following artists feature in the exhibition <em>Altermodern: Tate Triennial 2009</em>:</p><div id="overlayex"><p>Exhibition artists</p><ul class="contrlinks">' + $('#participantlist1').html() + '</ul></div>'; break;
		case 'key02': thehtml = '<h4>List of participants: the Prologue artists</h4><p><em>' + $('.prologueintro').html() + '</em></p><p>The following artists feature in the Prologue events for <em>Altermodern: Tate Triennial 2009</em>:</p><div id="overlaypr"><p>Prologue artists</p><ul class="contrlinks">' + $('#participantlist2').html() + '</ul></div>'; break;
		case 'key03': thehtml = '<h4>List of participants: the theorists</h4><p>The following theorists participated in <em>Altermodern: Tate Triennial 2009</em>:</p><div id="overlayth"><p>Theorists</p><ul class="contrlinks">' + $('#participantlist3').html() + '</ul></div>'; break;
		case 'key04': thehtml = '<h4>List of Prologue events</h4><p><em>' + $('.prologueintro').html() + '</em></p><p>The following Prologue events took place during the run up to <em>Altermodern: Tate Triennial 2009</em>:</p><div id="overlaypr"><p>Prologue events</p><ul class="contrlinks"><a href="#pr01">Prologue 1: Altermodern</a> <span>Saturday 26 April 2008</span></li><li><a href="#pr02">Prologue 2: Exiles</a> <span>Saturday 28 June 2008</span><li><a href="#pr03">Prologue 3: Travels</a> <span>Saturday 18 October 2008</span></li><li><a href="#pr04">Prologue 4: Borders</a> <span>Saturday 17 January 2009</span></li></ul></div>'; 
			break;
		case 'key05': thehtml = '<h4>List of Altermodern themes</h4><p>The following themes feature in <em>Altermodern: Tate Triennial 2009</em>:</p><div id="overlayex"><p>Altermodern themes</p><ul class="contrlinks">'; 
			$('#themes li').each(function(index){
				var myid = "t0" + $(this).attr('class').charAt(2);
				thehtml = thehtml + '<li class="'+myid+'"><a href="#' + myid + '">' + $('#'+myid +' .themename').html() + '</a> <span>' + $('#'+myid +' .index').html() + '</span></li>';
				});
			thehtml = thehtml + '</ul></div>';
			break;
		default: thehtml = '<h4>List of participants</h4><p>The following participants in <em>Altermodern: Tate Triennial 2009</em> are all linked to the theme of <strong>'+theartist+'</strong></p><div id="overlayex"><p>Exhibition artists</p><ul class="contrlinks">' + $('#participantlist1').html() + '</ul></div><div id="overlaypr"><p>Prologue artists</p><ul class="contrlinks">' + $('#participantlist2').html() + '</ul></div><div id="overlayth"><p>Theorists</p><ul class="contrlinks">' + $('#participantlist3').html() + '</ul></div>';
	  }
	  return thehtml;
} // loadParticipants ends

function loadPage(theclass,theartist,thepage,hasshape,theframe) {
	$(document).unbind('keydown'); // clean-up image navigation to avoid duplicate events 
	// At the first pass: check size and colour of bounding box
	if (!(hasshape)) {
		// gather the content
		var thehtml = '' + $('#' + theclass + ' .' + thepage+':eq(0)').html();
		if (thepage == 'intro') { 
			if ((theclass.charAt(0) == 'p') || ((theclass.charAt(1) == 'h') && (theclass != 'th01'))) { 
				thehtml = '<p><em>' + $('.prologueintro').html() + '</em></p>' + thehtml; 
			} 
			thehtml = '<h4>About ' + theartist + '</h4>' + thehtml; 
		}
		if ((thepage == 'event') && (theclass.substr(0,2) == 'pr')) { thehtml = '';
			$(' .' + theclass + 'img').each(function(){ thehtml = thehtml + $(this).html(); });
		}
		if (thepage == 'part') { thehtml = loadParticipants(theclass,theartist); }
		if ((thepage == 'video') && (videodata.hasOwnProperty(theclass))) { thehtml = '<h4>' + videodata[theclass][1] + '</h4>'; }
		
		// set the appropriate CSS classes on the BODY element
		if (thepage == 'index') { $('body').addClass('index'); $('#overlayglass').css({'z-index':15}); }
		else { $('body').removeClass('index');
			$('#overlayglass').css({'z-index':50});
			$('#more').fadeOut(5); // hide the 'More...' link if it's visible 
			}
		if ((thepage == 'works') || (thepage == 'event')) { $('.imglist').html(thehtml); } else { $('#overlaytext').html(thehtml); } // insert the content
		if (thepage == 'event') { $('.imglist h4:gt(0)').remove(); }
		
		if (parseInt($('#viewerbox').css('top'), 10) > -408) {  // hide image box if it's visible (by sliding it out of view)
			$('.imglist').fadeOut(200); 
			$('.imgbase').css({'display':'none'});
			$('#viewerbox').animate({'top':'432px'},300,'swing',function(){$(this).css('top','-408px');});
		}
		$('#objview').remove(); // hide the video if it's visible
		
		// change the background colour
		var boxColour = '#ffffff';
		if (thepage == 'video') { 
			if (!($('#overlaybox').hasClass('solid'))) { $('#overlaybox').addClass('solid'); }
			boxColour = "#0374d3";  // themes and exhibition artists (blue)
			if (theclass.charAt(1) == 'h') { boxColour = "#ffd801"; } // theorists (yellow)
			if (theclass.charAt(0) == 'p') { boxColour = "#fe0501"; } // prologue artists and prologue events (red)
		}
		else { boxColour = "#ffffff"; $('#overlaybox').removeClass('solid'); }
		if (theclass == 'e04') theframe = 1;
		// set the dimensions of the content box
		var boxH = 389;
		var boxW = 544;
		var boxP = 10;
		if ((thepage == 'works') || (thepage == 'event')) { boxW = 194; }
		if (thepage == 'index') { boxH = $('#overlaytext').height(); boxW = 230; }
		if (thepage == 'video') { boxH = 353; boxW = 544; }
		var boxL = 612 - boxW;
		// check the size
		if (($('#overlaybox').width() != boxW) || ($('#overlaybox').height() != boxH) || ($('#overlaybox').css('background-color') != boxColour)) { // animate the box shape
			$('#slide').stop(true,false).animate({'left':boxL+'px'},300, 'swing');
			$('#overlaybox').stop(true,false).animate({'height':boxH+'px', backgroundColor:boxColour},300, 'swing', function(){loadPage(theclass,theartist,thepage,true,theframe);}); }
		else { loadPage(theclass,theartist,thepage,true,theframe); }
	}
	
	// At the second pass: display the content and apply CSS classses
	else {	
		// apply the relevant CSS class for the tab navigation
		$('#overlaynav').removeClass().addClass('onav_' + thepage);

		// display the content
		if (thepage == 'index') { $('#more').fadeIn(200); }
		if ((thepage == 'works') || (thepage == 'event')) { 
			if (theframe > 0) {
				if (theframe == 1) thehtml =  $('#' + theclass + ' .' + thepage+':eq(0)').html() + '<a href="#" class="next">More works &gt;</a>';
				if (theframe == 2) thehtml = '<h4>Works in the exhibition</h4>' + $('#' + theclass + ' .' + thepage+':eq(1)').html() + '<a href="#" class="back">&lt; Back</a>';
				$('.imglist').html(thehtml); 
				$('.next').click(function(){ $('.imglist').fadeOut(200,function(){ loadPage(theclass,theartist,thepage,true,2); }); });
				$('.back').click(function(){ $('.imglist').fadeOut(200,function(){ loadPage(theclass,theartist,thepage,true,1); }); });
			}
			if (parseInt($('#viewerbox').css('top')) < 24) {
				$('.imgview').css('background-image','none');
				$('#viewerbox').fadeTo(1,1).css('display','block').animate({'top':'24px'},400,'swing',function(){ 
					$('.imgbase').css({'display':'block'});
					$('.upper').css({'background-image':'none', 'display':'block'});
					getImages(0,"+");
				});
			} else { getImages(0,"+"); }
			$('.imglist').fadeIn(200); 
			$('.imglist .work').each(function(index){
				$(this).click(function(){ if (!($(this).hasClass('current'))) { getImages(index,"+"); } }); 
			});
			$(document).bind('keydown', function(e){
				imageNav(e.which,e.shiftKey);
				return e.preventDefault();
				});
		} 
		else { $('#overlaytext').fadeIn(200); }
		if ((thepage == 'video') && (videodata.hasOwnProperty(theclass))) { 
			var theobject = getvideoobject( videodata[theclass][0] ); 
			$('#overlaytext h4').after('<div id="objview"></div>');
			$('#objview').html(theobject);
			brightcove.createExperiencesPostLoad();
		}

		// create the cross-reference links
		if (thepage == 'part') {$('#overlaytext a').addClass('crosslink');}
		$('#overlaytext .crosslink, .imglist .crosslink').click(function(){ 
		   var thehref = $(this).attr('href'); theclass = thehref.substr(thehref.lastIndexOf('#')+1);
		   switchOverlay(theclass,'undefined'); return false; });
	}
} // loadPage ends

function fillOverlay(theclass,isNew,thetype){
	var navhtml = '<li id="onav_index">Connections map</li>';	
	$('#overlaytitle, #overlayclose').fadeIn(200);	
	switch (thetype) {
	case 'themes': // we clicked on a theme
		$('#spotlight').css('top','-200px');
		$('#overlaycat').html('<li class="tipE">ALTERMODERN THEMES</li>');
		navhtml = navhtml + '<li id="onav_intro">About this theme</li><li id="onav_part">Participants</li>';
		if (!isNew) { $(".i0" + theclass.charAt(2) + " .greysea").stop(true,true).fadeTo(200,0); } // set 'glow' effect on island
		break;
	case 'prologues': // we clicked on a prologue event
		// position the spotlight (i.e. the yellow disc)
		$('#spotlight').css('left', ( parseInt( $("#prologues li." + theclass).css('left'),10) - 24 ) + "px");
		$('#spotlight').css('top', ( parseInt( $("#prologues li." + theclass).css('top'),10) - 15 ) + "px");
		$('#overlaycat').html('<li class="tipP">PROLOGUE EVENTS</li>');
		navhtml = navhtml + '<li id="onav_intro">About this event</li><li id="onav_event">Prologue in pictures</li>';
		break;
	case "theorists": // we clicked on a theorist
		$('#overlaycat').html('<li class="tipT">THEORISTS</li>');
		navhtml = navhtml + '<li id="onav_intro">About this theorist</li>';
		if (theclass != 'th01') { navhtml = navhtml + '<li id="onav_event">Prologue in pictures</li>'; }
		break;
	case "exartists": // we clicked on an exhibtion artist
		navhtml = navhtml + '<li id="onav_intro">About this artist</li><li id="onav_works">Works in the exhibition</li>';
		if ((theclass == "e23") || (theclass == "e28")) { 
			$('#overlaycat').html('<li class="tipP">PROLOGUE ARTISTS</i><li class="tipE">EXHIBITING ARTISTS</li>');
			navhtml = navhtml + '<li id="onav_event">Prologue in pictures</li>'; }
		else { $('#overlaycat').html('<li class="tipE">EXHIBITING ARTISTS</li>'); }
		break;
	case "prartists": // we clicked on a prologue artist
		$('#overlaycat').html('<li class="tipP">PROLOGUE ARTISTS</li>');
		navhtml = navhtml + '<li id="onav_intro">About this artist</li>';
		if (theclass != 'p03') { navhtml = navhtml + '<li id="onav_event">Prologue in pictures</li>'; }
		break;
	case "key": // we clicked on the key to symbols
		loadPage(theclass,theartist,'part',false,0);
		return; 
	}
	if (videodata.hasOwnProperty(theclass)) { navhtml = navhtml + '<li id="onav_video">' + videodata[theclass][2] + '</li>'; }
	if ((thetype == 'exartists') || (thetype == 'prartists') || (thetype == 'theorists')) {
		if (!isNew) { themesHighlight(theclass); } // set 'glow' effect on islands. Now position the spotlight (the yellow disc)
		$('#spotlight').css('left', ( parseInt( $("#contribs li." + theclass).css('left'), 10) - 24 ) + "px");
		$('#spotlight').css('top', ( parseInt( $("#contribs li." + theclass).css('top'), 10) - 22 ) + "px");
	}
	
	$('#overlaycat').fadeIn(200).css('display','block');
	$('#overlaynav').html(navhtml).removeClass().addClass('onav_index');

	// display the brief text
	$('#overlaybox').css({'background-color':'#ffffff', 'height':'auto'});
	var thehtml = $('#' + theclass + ' .index').html();
	$('#overlaytext').html(thehtml);
	$('#overlaytext').css({'display':'block'});
	var moreT = $('#overlaytext').height() + 20;
	$('#more').css({'display':'block','top':moreT+'px'}).html('<a href="#">More...</a>');
	$('#slide').css({left:'633px',display:'block'}).animate({'left':'382px'},{duration:300, queue: false, easing:'swing'});

	// activate the page links in the navigation menu 
	$('#overlaynav li').each(function(){
		$(this).click(function(){
			var theid = $(this).attr('id'); var thepage = theid.substr(5);
			if (!($('#overlaynav').hasClass(theid))) {$('#overlaytext').fadeOut(200,function(){loadPage(theclass,theartist,thepage,false,0);}); }
		});
	});
	$('#more a').click(function(){ 
		$('#overlaytext').fadeOut(200,function(){loadPage(theclass,theartist,'intro',false,0);}); return false; 
	});
	// animate the navigation
	$('#overlaynav').animate({'top':'462px'},{duration:400, easing:'swing', queue:true});
	// $('.imgview').css('display','none');

} // fillOverlay ends

function createOverlay(theclass,isNew,thetype){
	if (!isNew) { themesReset(); }
	if (thetype == 'undefined') { thetype = $('li.'+theclass+':not(#overlaybox li)').parent().attr('id'); }
	theartist = 'Key to symbols';
	$('body').removeClass().addClass(thetype);
	if (thetype != 'key') { $('body').addClass('index'); $('.keynav').fadeOut(300); theartist = $('#' + theclass + ' h3').html(); } 
	$('#overlaytitle').html(theartist);
	$('#interactive').addClass('o'+theclass).removeClass(oldclass);
	oldclass = 'o'+theclass;
	// if (thetype != 'key') { $('body').addClass('index'); $('.keynav').fadeOut(300); theartist = $('#' + theclass + ' h3').html(); }
	if (isNew) {
		// create the lightbox effect
		$('#interactive').addClass('overlay');
		$('#interactivetitle').fadeOut(300);
		if (thetype == 'key') { $('.keynav .title').fadeOut(300); }
		$('#shadebox').css('height',$(document).height()+'px').fadeTo(200,0.7,function(){$('#shadebox').css('display','block');});
		$('#overlayglass').fadeTo(100,0.2,function(){
			$('#overlayglass').css({'display':'block','z-index':15}); 
			fillOverlay(theclass,isNew,thetype);
		});
	}
	else {
		$('#keyglass').stop(true,false).fadeTo(300,0,function(){
			$('#keyglass').css('display','none'); 
			$('#overlayglass').css({'z-index':15}); 
		});
		fillOverlay(theclass,isNew,thetype);
	} 
} // createOverlay ends


// create the interactive map
function initexplore(){

	$('body').attr('id','explore');
	// $('head').append('<link href="/britain/exhibitions/altermodern/css/explore-interactive.css" rel="stylesheet" type="text/css" />');

	//create empty lists, key and participant list  button used for the interactive
	$('#participantlist').before('' +
		'<span id="overlayclose" class="lightbox"></span>' + 
		'<h2 id="overlaytitle" class="lightbox">OVERLAY TITLE</h2>' + 
		'<div id="overlay"></div>' +
		'<div id="slide"><div id="overlaybox"><div id="overlaytext"></div></div><div id="more"></div></div>' +
		'<div id="viewerbox"><div class="imgview upper"></div><div class="imgview lower"></div></div><div class="imglist lightbox"></div><div class="imgbase"></div>' + 
		'<div id="overlayglass"></div><div id="keyglass"></div>' + 
		'<div id="spotlight"></div>' + 
		'<div id="contribs"><ul id="exartists"></ul><ul id="prartists"></ul><ul id="theorists"></ul></div>' + 
		'<ul id="themes"></ul><ul id="prologues"></ul>');
		
	//copy lists contents from xhtml
	$('#exartists').html( $('#participantlist1').html());
	$('#prartists').html( $('#participantlist2').html());
	$('#theorists').html( $('#participantlist3').html());
	$('#prartists .hybrid').remove();
	var islands = '<ul id="islands"><li class="i01"><span class="island"></span><span class="greysea"></span></li><li class="i02"><span class="island"></span><span class="greysea"></span></li><li class="i03"><span class="island"></span><span class="greysea"></span></li><li class="i04"><span class="island"></span><span class="greysea"></span></li><li class="i05"><span class="island"></span><span class="greysea"></span></li><li class="i06"><span class="island"></span><span class="greysea"></span></li><li class="i07"><span class="island"></span><span class="greysea"></span></li><li class="i08"><span class="island"></span><span class="greysea"></span></li></ul><div class="smallislands"></div>';
	$('#themes').html( $('#themesplain').html());
	$('#prologues').html( $('#prologuelist').html());
	$('#overlay').after(islands);
	$('#content').after('<div id="shadebox"></div>');
	$('#introcontainer').before('<ul id="overlaycat" class="lightbox"><li>CATEGORY</li></ul><ul id="overlaynav" class="onav_index"></ul><div id="contrtip"></div><div class="keynav"><span class="title">Key to symbols:</span>' +
		'<ul><li class="keyitem01"><span class="label">Exhibition artists</span><span class="show">Show as list</span></li><li class="keyitem02"><span class="label">Prologue artists</span><span class="show">Show as list</span></li><li class="keyitem03"><span class="label">Theorists</span><span class="show">Show as list</span></li><li class="keyitem04"><span class="label">Prologue events</span><span class="show">Show as list</span></li><li class="keyitem05"><span class="label">Themes</span><span class="show">Show as list</span></li></ul><div id="keytip"></div></div>');
		
	$('#interactive').css('display','block');

	// fancy stuff on key rollover
	$('.keynav li').each(function(index){
		$(this).hover(function(){
			var i = index + 1;
			if (oldclass != 'o'+'key0'+i) {
				$('.keynav ul').addClass('key0'+i);
				if (index > 0) { keyTip('.keyitem0'+i); }
				if (!($('#interactive').hasClass('overlay'))) {
				// alert(i);
					if (i == 1) { $('#exartists li').css('display',''); } else { $('#exartists li').css('display','none'); }
					if (i == 2) { $('#prartists, #exartists li.e23, #exartists li.e28').css('display',''); } else { $('#prartists').css('display','none'); }
					if (i == 3) { $('#theorists').css('display',''); } else { $('#theorists').css('display','none'); }
					if (i == 4) { $('#prologues').css('display',''); } else { $('#prologues').css('display','none'); }
					if (i == 5) { $('#themes').css('display',''); } else { $('#themes').css('display','none'); }
				} 
			}
		},function(){
			$('.keynav ul').removeClass('key0'+(index+1)); $('#keytip').css('display','none');
		});
		// display lists when you click on a key symbol
		$(this).click(function() {
			theclass = 'key0'+(index+1);
			$('#keyglass').stop(true,false).fadeTo(50,0).css('display','none');
			if (($('#slide').css('display') == 'none') || (parseInt($('#slide').css('left'),10) > 632)) { 
				$('#slide').css({left:'633px',display:'block'}); 
				createOverlay(theclass,true,'key');
				$('#exartists li, #prartists, #theorists, #themes, #prologues').css('display','');
				$('.keynav ul').removeClass(theclass); $('#keytip').css('display','none');
				}
			else { 
				if (oldclass != 'o'+theclass) {
				$('#overlaytext').fadeOut(100,function(){ $('#interactive').addClass('o'+theclass).removeClass(oldclass);
				oldclass = 'o'+theclass; 
				$('#overlaytext').html(loadParticipants(theclass,'Key to symbols'));
				loadPage(theclass,'Key to symbols','part',true,0);
				$('.keynav ul').removeClass(theclass); $('#keytip').css('display','none'); });  }
				}
		});
	});
								  
	$('.keynav ul').hover(function(){
			if (!($('#interactive').hasClass('overlay'))) {
				themesReset();
				$('#keyglass').stop(true,true).fadeTo(100,0.5).css('display','block');
			}
		},function(){  
			$('#keytip').css('display','none');
			$('#exartists li, #prartists, #theorists, #themes, #prologues').css('display','');
			// .removeAttr('style');
			if (!($('#interactive').hasClass('overlay'))) {
				$('#keyglass').stop(true,false).fadeTo(100,0).css('display','none'); 
			}
	});

	/* highlight islands on rollover */
	$("#prartists li a, #exartists li a, #theorists li a, #prologues li a").hover(function() {
			var myClass = $(this).parent().attr('class');
			var myGroup = "tipE";
			if (myClass.charAt(0) == "p") { myGroup = "tipP"; }
			if (myClass.charAt(0) == "t") { myGroup = "tipT"; }
			var cTop = parseInt($("li." + myClass).css('top'),10);
			var cLeft = parseInt($("li." + myClass).css('left'),10);
			var tTop = cTop - 28;
			var tLeft = cLeft + 39;
			if (cLeft > 429) { tLeft = cLeft - 166; }
			if (myClass.charAt(1) == "r") { myGroup = "tipPE"; tTop = tTop + 40; tLeft = cLeft + 43; }
			if (tTop < 31) { tTop = 31; }
			$('#contrtip').addClass(myClass + 'tip tipbox ' + myGroup);
			$('#contrtip').html($("li." + myClass + " .infotip").html());
			$('#contrtip').css({'top':tTop+'px','left':tLeft+'px','display':'block'});
			if (!($('#interactive').hasClass('overlay'))) {themesHighlight(myClass);}
		}, function() {
			$('#contrtip').css('display','none').removeClass();
			if (!($('#interactive').hasClass('overlay'))) { themesReset(); }
		});

	/* highlight on rollover this island */
	$("#themes li a").hover(function(){ 
		if (!($('#interactive').hasClass('overlay'))) { $(".i0"+$(this).attr('class').charAt(2)+" .greysea").stop(true,true).fadeTo(200,0); }
	}, function(){ 
		if (!($('#interactive').hasClass('overlay'))) { themesReset(); } 
	});

		
	// create lightbox overlay box when an item on the map is clicked 
	$("#prartists li a, #exartists li a, #theorists li a, #themes li a, #prologues li a").click(function(){
		theclass = $(this).parent().attr('class');
		if (theclass != oldclass) { 
			$('#contrtip').css('display','none').removeClass();
			var thetype = $(this).parent().parent().attr('id');
			if (!($('#interactive').hasClass('overlay'))) { createOverlay(theclass,true,thetype); }
			else { switchOverlay(theclass,thetype); } 
			$(this).blur();
		}
		return false;
	});

    // close the overlay (using close box in top right) 
	$("#overlayclose, #shadebox, #backplane").click(function(){destroyOverlay();});
	
	if (isIE6) { $("#spotlight").ifixpng(); } // fix transparent PNG for IE 6. $("#overlaybox").css('margin-bottom','16px'); 
	$.preloadCssImages();
	
	// fix height of the shadebox
	$(window).resize(function(){ $('#shadebox').css('height',$('body').height()+'px'); });

} // initexplore ends

$(document).ready( function(){
  	initexplore();
});