// JavaScript Document
/*
Title:		Fat Tire Landing Page Javascript page
Author:		Matt McCloskey, Kemso Design
Date:		2008
*/

preloadImages('/images/icons/golink_over_red.png', '/images/structure/backgrounds/white-overlay-inverted.png');


window.addEvent('domready', function(){
	
	// load photo changer for each city	
	$('cities').getElements('li').each(function(el, index){
				
		// get flag from li id (city_id_flag)
		var flag_id = el.get('id');
		var id_parts = flag_id.split('_');
		var flag = id_parts[2];
				
		// get the image element (where the banners will go)
		var  image = el.getElement('.image');
		
		// make a new photo changer
		var pc = new PhotoChanger(image, {
			url: '/json/banners.php',
			tag: flag,
			photo_size: 'photo_ds'
		});
		
		// start photo changer
		(function(){ pc.load() }).delay(index*1000);
		/* pc.load(); */
	});
	
	
	// animate city links
	$('cities').getElements('a').each(function(el){
		var color1 = el.getParent().getElement('input[name=bgcolor]').get('value');
		var color2 = el.getParent().getElement('input[name=highlightcolor]').get('value');
		
		el.set('morph', {duration: 200});
		el.addEvents({
			'mouseenter': function(){
				this.morph({'background-color': color1, 'color': '#FFF'});
			},
			'mouseleave': function(){
				this.morph({'background-color': '#FFF', 'color': '#333'});
			}
		});
	});
	
});