window.addEvent('domready', function() {
	var maparea = $(document.body).getElement('#maparea');
	var sites = $$('#maparea .site');
	var sitesindex = new Array();
	var current_site = 0;



	// insert map key into page
	// var mapkey = new Element('div',{'id':'mapkey'});
	// mapkey.inject(maparea);
	// var key1 = new Element ('p',{'id':'key1'});
	// var key2 = new Element ('p',{'id':'key2'});
	// key1.inject(mapkey);
	// key2.inject(mapkey);
	// key1.set('text','Historic site location');
	// key2.set('text','Currently displayed site');



	// placeholder variables for effects that are currently running
	var next_site_fx_running = false;
	var current_site_fx_running = false;
	var maplabel_fx_running = false;
	
	
	
	
	// insert map dot label into page
	var maplabel = new Element('div',{'id':'mapdotlabel'});
	maplabel.inject(maparea);
	maplabel.fade('hide');




	// begin defining site dots
	$each(sites, function (site, index){
		
		// record the index number of the current site
		sitesindex[site.getProperty('id')] = index; 
		
		// create a map dot for this site
		var mapdot_id = site.getProperty('id') + "dot";
		var mapdot_title = site.getElement('h3').get('text');
		var mapdot = new Element ('div',{'class':'mapdot','id':mapdot_id,'title':mapdot_title});
		mapdot.inject(maparea);

		// create an on click event for the map dot
		mapdot.addEvents({
			'click': function(){
				if (!(mapdot.hasClass('current'))) {

					// cancel currently running effects
					if (next_site_fx_running != false) { next_site_fx_running.cancel(); }
					if (current_site_fx_running != false) { current_site_fx_running.cancel(); }
					if (maplabel_fx_running != false) { maplabel_fx_running.cancel(); }

					// define the current site and the next site
					var next_site = site;
					var current_site = maparea.getElement('.site.showing');
					var next_dot_id = "#" + next_site.getProperty('id') + "dot";
					var next_dot = maparea.getElement(next_dot_id);
					
					// if the next site's photo isn't loaded, load it now
					if (!($chk(next_site.getElement('.photo')))) {
						var photosrc = "Presentation/Images/feature/" + next_site.getProperty('id') + ".jpg";
						var newimg = new Element ('img',{'src':photosrc,'width':'260','height':'220','alt':''});
						var newdiv = new Element ('div',{'class':'photo'});
						newdiv.inject(next_site,'top');
						newimg.inject(newdiv);
					}
			
					// define the effects
					var current_site_fx = new Fx.Tween(current_site,{'property':'opacity','duration':500});
					var next_site_fx = new Fx.Tween(next_site,{'property':'opacity','duration':1000});
					var maplabel_out_fx = new Fx.Tween(maplabel,{'property':'opacity','duration':500});
					var maplabel_in_fx = new Fx.Tween(maplabel,{'property':'opacity','duration':1000});
					
					// define what happens when the current site fades out
					current_site_fx.addEvent('complete',function(){
						maparea.getElement('.site.showing').setStyle('display','none');
						maparea.getElement('.site.showing').removeClass('showing');
						maparea.getElement('.mapdot.current').removeClass('current');
						mapdot.addClass('current');
						site.addClass('showing');
						site.setStyle('display','block');
						maparea.getElement('h2').set('text','Historic Site ' + (sitesindex[site.getProperty('id')]+1) + ' of 27');

						next_site_fx_running = next_site_fx.start(0,1);
					});

					// define what happens when the current label fades out
					maplabel_out_fx.addEvent('complete',function(){
						var nextcaptiontext = next_site.getElement('h3').get('text');
						var nexttop = (next_dot.getStyle('top').toInt() - 2) + "px";
						var nextleft = (next_dot.getStyle('left').toInt() + 14) + "px";
						maplabel.set('text',nextcaptiontext);
						maplabel.setStyles({'top':nexttop,'left':nextleft});
						maplabel_fx_running = maplabel_in_fx.start(0,1);
					});

					current_site_fx_running = current_site_fx.start(1,0);
					maplabel_fx_running = maplabel_out_fx.start(1,0);
					
					$clear(SwitchTimer);
					var ni = sitesindex[site.getProperty('id')]+1;
					SwitchTimer = SiteSwitch.delay(15000,maparea,ni);
				}
			}
		});

		// as part of the setup, initially hide all the site information
		// (they are already display:none)
		site.fade('hide');

		// for the first site to show... 
		if (index == current_site) {

			// insert photo
			var photosrc = "Presentation/Images/feature/" + site.getProperty('id') + ".jpg";
			var newimg = new Element ('img',{'src':photosrc,'width':'260','height':'220','alt':''});
			var newdiv = new Element ('div',{'class':'photo'});
			newdiv.inject(site,'top');
			newimg.inject(newdiv);
			
			// set caption
			var captiontext = site.getElement('h3').get('text');
			var newtop = (mapdot.getStyle('top').toInt() -2) + "px";
			var newleft = (mapdot.getStyle('left').toInt() + 14) + "px";
			maplabel.set('text',captiontext);
			maplabel.setStyles({'top':newtop,'left':newleft});
			
			site.setStyle('display','block');
			site.addClass('showing');
			site.fade('in');
			maplabel.fade('in');
			mapdot.addClass('current');
			maparea.getElement('h2').set('text','Historic Site ' + (sitesindex[site.getProperty('id')]+1) + ' of 27');
		}
	});
	
	var SwitchTimer;
	var SiteSwitch = function(i) {
		if (i >= sites.length) { i = 0; }
		
		// cancel currently running effects
		if (next_site_fx_running != false) { next_site_fx_running.cancel(); }
		if (current_site_fx_running != false) { current_site_fx_running.cancel(); }
		if (maplabel_fx_running != false) { maplabel_fx_running.cancel(); }
		
		// define the current site and the next site
		var current_site = maparea.getElement('.site.showing');
		var next_site = sites[i];
		var next_dot_id = "#" + next_site.getProperty('id') + "dot";
		var next_dot = maparea.getElement(next_dot_id);

		// if the next site's photo isn't loaded, load it now
		if (!($chk(next_site.getElement('.photo')))) {
			var photosrc = "Presentation/Images/feature/" + next_site.getProperty('id') + ".jpg";
			var newimg = new Element ('img',{'src':photosrc,'width':'260','height':'220','alt':''});
			var newdiv = new Element ('div',{'class':'photo'});
			newdiv.inject(next_site,'top');
			newimg.inject(newdiv);
		}

		// define the animations
		var current_site_fx = new Fx.Tween(current_site,{'property':'opacity','duration':500});
		var maplabel_out_fx = new Fx.Tween(maplabel,{'property':'opacity','duration':500});
		var next_site_fx = new Fx.Tween(next_site,{'property':'opacity','duration':1000});
		var maplabel_in_fx = new Fx.Tween(maplabel,{'property':'opacity','duration':1000});
		
		// define what happens when the current site fades out
		current_site_fx.addEvent('complete',function(){
			maparea.getElement('.site.showing').setStyle('display','none');
			maparea.getElement('.site.showing').removeClass('showing');
			maparea.getElement('.mapdot.current').removeClass('current');
			
			next_dot.addClass('current');
			
			next_site.addClass('showing');
			next_site.setStyle('display','block');
			maparea.getElement('h2').set('text','Historic Site ' + (i+1) + ' of 27');

			next_site_fx_running = next_site_fx.start(0,1);
		});
		
		// define what happens when the current label fades out
		maplabel_out_fx.addEvent('complete',function(){
			var nextcaptiontext = next_site.getElement('h3').get('text');
			var nexttop = (next_dot.getStyle('top').toInt() - 2) + "px";
			var nextleft = (next_dot.getStyle('left').toInt() + 14) + "px";
			maplabel.set('text',nextcaptiontext);
			maplabel.setStyles({'top':nexttop,'left':nextleft});
			maplabel_fx_running = maplabel_in_fx.start(0,1);
		});
		
		current_site_fx_running = current_site_fx.start(1,0);
		maplabel_fx_running = maplabel_out_fx.start(1,0);
		
		var new_i = i + 1;
		SwitchTimer = SiteSwitch.delay(10000,maparea,new_i);
	}
	
	SwitchTimer = SiteSwitch.delay(7000,maparea,1);




	// define "tips" for map dots
	var mapdot_tips = new Tips('#maparea .mapdot',{
		className: 'mapdottip',
		fixed: 'true',
		offsets: {'x': 14, 'y': -2}
	});	




	// insert next and previous buttons into map and define actions
	var mapcontrol = new Element('div',{'id':'mapcontrol'});
	mapcontrol.inject(maparea);
	var controlHTML = '<img border="0" width="8" height="8" src="Presentation/Images/main/mapbackarrow.gif" alt="Previous Site" title="Previous Site" id="siteprev">&nbsp;&nbsp;&nbsp;<img border="0" width="8" height="8" src="Presentation/Images/main/mapforwardarrow.gif" alt="Next Site" title="Next Site" id="sitenext">';
	mapcontrol.set('html',controlHTML);
	maparea.getElement('#siteprev').addEvents({
		'click': function(){
			var current_site_id = maparea.getElement('.site.showing').getProperty('id');
			var current_site_num = sitesindex[current_site_id];
			var x = current_site_num - 1;
			if (x < 0) { x = sites.length-1; }
			$clear(SwitchTimer);
			SiteSwitch(x);
		}
	});
	maparea.getElement('#sitenext').addEvents({
		'click': function(){
			var current_site_id = maparea.getElement('.site.showing').getProperty('id');
			var current_site_num = sitesindex[current_site_id];
			var x = current_site_num + 1;
			$clear(SwitchTimer);
			SiteSwitch(x);
		}
	});
	
});