

	// Note: in categories, link: text: and placement: keys are currently not used.

	var homepageColorTransitions = {
		
		categories: [
			{
				link: 'Chakra Oils',
				image: '/homepage_new/i/categoryPhotos/category-chakra-oils.jpg',
				text: 'chakraoils.htm',
				placement: [10, 10],
				colors: {
					background: '#F392F0',
					navigation: '#FB75E1',
					logo: '#F10D0D',
					header: '#FF8BCF'
				}
			},
			{
				link: 'Organic Aromatherapy Body Lotion',
				image: '/homepage_new/i/categoryPhotos/web_lotions112009.jpg',
				text: 'bodylotions.htm',
				placement: [10, 10],
				colors: {
					background: '#FAD256',
					navigation: '#F8C733',
					logo: '#FFD36A',
					header: '#F787D6'
				}
			},
			{
				link: 'Chakra Oils',
				image: '/homepage_new/i/categoryPhotos/web_chakra_new_photo_112009.jpg',
				text: 'chakraoils.htm',
				placement: [10, 10],
				colors: {
					background: '#F392F0',
					navigation: '#CFC353',
					logo: '#CC2299',
					header: '#FA93F9'
				}
			},
			{
				link: 'Organic Aromatherapy Bath Gels',
				image: '/homepage_new/i/categoryPhotos/web_gels112009.jpg',
				text: 'bathgels.htm',
				placement: [10, 10],
				colors: {
					background: '#88C8E0',
					navigation: '#DD6BC7',
					logo: '#DF4BBB',
					header: '#87D6FF'
				}
			},
			{
				link: 'Perfumes from Nature',
				image: '/homepage_new/i/categoryPhotos/web_perfumes112009.jpg',
				text: 'perfumes.htm',
				placement: [10, 10],
				colors: {
					background: '#BDDA6E',
					navigation: '#AC88F7',
					logo: '#7099BC',
					header: '#E8F8B6'
				}
			},
			{
				link: 'Massage Lotions',
				image: '/homepage_new/i/categoryPhotos/web_massage112009.jpg',
				text: 'massagelotions.htm',
				placement: [10, 10],
				colors: {
					background: '#F9E76A',
					navigation: '#B175FB',
					logo: '#AE74D7',
					header: '#F5D53D'
				}
			},
			{
				link: 'Soy Candles',
				image: '/homepage_new/i/categoryPhotos/web_candle112009.jpg',
				text: 'soycandles.htm',
				placement: [10, 10],
				colors: {
					background: '#7AAC43',
					navigation: '#E6E396',
					logo: '#4E9A1F',
					header: '#F3cD7B'
				}
			},
			{
				link: 'Travel Must Have\'s',
				image: '/homepage_new/i/categoryPhotos/web_travel112009.jpg',
				text: 'travel.htm',
				placement: [10, 10],
				colors: {
					background: '#F5c239',
					navigation: '#E4455F',
					logo: '#CC222E',
					header: '#F7B027'
				}
			}
		],
		
		settings: {
			imageSize: [310, 980],		// category photo image size
			current: 0,					// default category index on page load
			duration: 3,				// transition duration between category photos
			delay: 5					// delay between slides
		},
		
		transitionPhoto: function(k, callback) {
			var self = this;
			// get reference to current visible photo
			var on = $('PHOTO').getElement('img');
			// inject new photo underneath
			$(this.categories[k].img).clone().inject('PHOTO', 'top');
			var x = new Fx.Tween(on, {
				property: 'opacity',
				duration: this.settings.duration * 1000,
				onComplete: function() {
					self.transitionColors(k, callback);
				}
			});
			x.start(1, 0);
		},
		
		transitionColors: function(k, callback) {
			// transition background color
			var background = new Fx.Tween($(document.body), {
				property: 'background-color',
				duration: this.settings.duration * 1000,
				onComplete: function() {
					if($type(callback) == 'function') callback();
				}
			});
			// transition header color
			var header = new Fx.Tween($('HEADER'), {
				property: 'background-color',
				duration: this.settings.duration * 1000
			});
			// transition nav bar
			var navigation = new Fx.Tween($('NAVIGATION'), {
				property: 'background-color',
				duration: this.settings.duration * 1000
			});
			background.start(this.categories[k].colors.background);
			header.start(this.categories[k].colors.header);
			navigation.start(this.categories[k].colors.navigation);
			// transition logo color
			makeCall(this.categories[this.settings.current].colors.logo.replace('#',''), this.categories[k].colors.logo.replace('#',''), this.settings.duration);
			// cache current values
			this.settings.current = k;
		},
		
		transitionStart: function(k, callback) {
			var self = this;
			// load-in new image
			if($defined(this.categories[k].img)) this.transitionPhoto(k, callback);
			else
			{
				new Asset.image(this.categories[k].image, {
					onload: function(el){
						el.width = self.settings.imageSize[1];
						el.height = self.settings.imageSize[0];
						self.categories[k].img = el;
						self.transitionPhoto(k, callback);
					}
				});
			}
		},
		
		transitionCycle: function() {
			var self = this;
			var c = this.settings.current + 1;
			if(c >= this.categories.length) c = 0;
			this.transitionStart.delay(this.settings.delay * 1000, this, [c, this.transitionCycle.bind(self)]);
		}
		
	}
	
	// begin the transition show once all elements are loaded
	window.addEvent('load', function() {
		
		homepageColorTransitions.transitionCycle();		
		
	});

