window.addEvent('domready', function(){

	var myAccordion = new Accordion($('accordion'), 'p.toggler', 'div.element', {
		opacity: true,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#fff');
			toggler.setStyle('background', '#000');
			toggler.setStyle('cursor', 'auto');
			toggler.addClass('active');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#000');
			toggler.setStyle('background', '#f0f0f0');
			toggler.setStyle('cursor', 'pointer');
			toggler.removeClass('active');	
		}
	});
	
	$$('.toggler').addEvent('mouseenter', function() { 
		elEnter(this);
	});
	
	$$('.toggler').addEvent('mouseleave', function() { 
		elLeave(this);
	});
	
	var szSmall = {};
	var szNormal = {};
	var szFull = {};
	 
	var kwicks = $$("#kwick .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	kwicks.each(function(kwick, i) {
		szNormal[i] = kwick.getStyle("width").toInt();
		szFull[i] = szNormal[i] * 1.5;
		szSmall[i] = szNormal[i] * .92;	
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull[i]]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall[j]) o[j] = {width: [w, szSmall[j]]};
				}
			});
			fx.start(o);
		});
	});
	 
	$("kwick_list").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal[i]]}
		});
		fx.start(o);
	});
	
	// so links open in new windows/tabs
	if($$("opennew")) {
		$$('a.opennew').addEvent('click', function(){
			$$('a.opennew').setProperties({ target: '_blank' }); 
		});
	}
	
	// if funky is present, begin the funk
	if ($('funky')) {
		myShow = new Slideshow.KenBurns('funky', ['slider.png','slider2.png','slider3.png','slider4.png'], { zoom: 0, transition: 'back:in:out', overlap: true, duration: 1000, height: 200, hu: 'graphics/', width: 790 });
	
		var myEffect_funky = new Fx.Morph('funky', {
			duration: 5000, 
			link: 'chain', 
			transition: Fx.Transitions.Sine.easeOut
		});
	
		var begin_funky = function(){
			myEffect_funky.start({
				'background-color': ['#00fd65', '#007DC5']
			}).start({
				'background-color': ['#007DC5', '#00fd65']
			});
		};
		
		begin_funky.periodical(5000);		
	}	
	
	// if sketches are present bring the funk
	if ($('experiment1')) {
		var myEffect_exp = new Fx.Morph('experiment1', {
			duration: 5000, 
			link: 'chain', 
			transition: Fx.Transitions.Sine.easeOut
		});
	
		var begin_exp = function(){
			myEffect_exp.start({
				'background-color': ['#6d0000', '#e700ef']
			}).start({
				'background-color': ['#e700ef', '#0049f0']
			}).start({
				'background-color': ['#0049f0', '#006abb']
			}).start({
				'background-color': ['#006abb', '#6d0000']
			});
		};
		
		var myEffect_redstripe = new Fx.Morph('red', {
			duration: 5000, 
			link: 'chain', 
			transition: Fx.Transitions.Sine.easeIn
		});
	
		var begin_redstripe = function(){
			myEffect_redstripe.start({
				'background-color': ['#ff0000', '#000000']
			}).start({
				'background-color': ['#000000', '#ff0000']
			});
		};
		
		begin_exp.periodical(5000);		
		begin_redstripe.periodical(5000);	
	}	
	
	// if map is present, load google maps
	if($("map")) {
		load();
	}

});

function active(el) {
	var parts = el.className.split(" ");
	var active = false;
	for(var i = 0; i < parts.length; i++) {
		if(parts[i] == 'active') {
			return true;
			break;
		}
	} 
	return false;
}

// for design page when mouse enters
function elEnter(el) {
	if(!active(el)) {
		el.setStyle('background', '#000');
		el.setStyle('color', '#fff');
	}
}

// for design page when mouse leaves
function elLeave(el) {
	if(!active(el)) {
		el.setStyle('background', '#f0f0f0');
		el.setStyle('color', '#000');
	}
}	


function load() {
if (GBrowserIsCompatible()) {		
  // arrays to hold copies of the markers and html used by the side_bar
  // because the function closure trick doesnt work there
  var gmarkers = [];
  var htmls = [];
  var i = 0;

  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	// save the info we need to use later for the side_bar
	gmarkers[i] = marker;
	htmls[i] = html;
	i++;
	return marker;
  }

  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng( 15,-50), 2, G_HYBRID_MAP);
  
  // === Define the function thats going to process the text file ===
  process_it = function(doc) {
	// === split the document into lines ===
	lines = doc.split("\n");
	for (var i=0; i<lines.length; i++) {
	  if (lines[i].length > 1) {
		// === split each line into parts separated by "|" and use the contents ===
		parts = lines[i].split("|");
		var lat = parseFloat(parts[0]);
		var lng = parseFloat(parts[1]);
		var html = parts[2];
		var label = parts[3];
		var point = new GLatLng(lat,lng);
		// create the marker
		var marker = createMarker(point,label,html);
		map.addOverlay(marker);
	  }
	}
  }          		  
  GDownloadUrl("../618/data/user_data.txt", process_it);
}
}
// this code is based roughly on this example: http://econym.org.uk/gmap/example_map9.htm