var gallery = {
	images: '', // The images
	highest: '', // The highest index in the images array
	showing: 0, // The index of the image that's currently showing
	buttons: '', // The control buttons (sans the prev/next buttons)
	isChanging: false,
	init: function(){
		// Set the gallery images
		gallery.images = $$('.imageRotator .image a');
		
		$$('.imageRotator')[0].select('li:[class~=controls]').each(function (el,index) {
			var image = new Image(458,289);
			image.src = gallery.images[index].firstDescendant().src;
		});

		// Store the index of the highest one
		gallery.highest = gallery.images.size() - 1;
		
		// Get the buttons (sans controls) into an array
		gallery.buttons = $$('.imageRotator')[0].select('li:not([class~=controls])');
		gallery.clicked = 0;
		gallery.buttons[gallery.clicked].addClassName('active');
		
		// Loop through the buttons and add the event listener to each
		gallery.buttons.each(function(el,index) {
			el.observe('click',function(e) {
				if(index != gallery.showing) {
					gallery.goToImage(index,false);
				}
			});
		},this);

		// Assign listeners to the previous and next control buttons
		$$('.imageRotator')[0].select('li:[class~=controls]').each(function (el,index) {						
			// Listen on the control
			el.observe('click',function(e) {
				if(el.hasClassName('prev')) { // Let's move back an image
					target = gallery.showing == 0 ? gallery.highest : gallery.showing - 1;
					gallery.goToImage(target,false);
				} else { // we want to move forward
					target = gallery.showing == gallery.highest ? 0 : gallery.showing + 1;
					gallery.goToImage(target,false);
				}
			});
		},this);

		setTimeout('gallery.goToNextImage()',5000);

	},
	goToNextImage: function() {
		if(this.userControl != true) {
			var curImg = this.showing;
			target = gallery.showing == gallery.highest ? 0 : gallery.showing + 1;
			gallery.goToImage(target,true);
			setTimeout('gallery.goToNextImage()',5000);			
		}
	},
	goToImage: function(i,continueAutomatic) {
		if(continueAutomatic == false) {
			this.userControl = true;
		}
		// Switch the clicked button color with the last clicked one
		gallery.buttons[gallery.showing].removeClassName('active');
		gallery.buttons[i].addClassName('active');

		// For all but Safari, we have to apply the effect to the <a> tag and the <img> tag inside to get it all to happen.
		Effect.multiple(
			[this.images[i],this.images[i].firstDescendant()], 
			Effect.Appear, 
			{
				duration: .5
			}						
		);

		Effect.multiple(
			[this.images[this.showing],this.images[this.showing].firstDescendant()], 
			Effect.Fade, 
			{ 
				duration: .5
			}
		);
		this.showing = i;
			
	}
}

var popNav = {
	navEl: null,
	currentOver: null,
	open: null,
	init: function() {
		this.navEl = $('primary');
		// setup rollover states
		this.navEl.select('a').each(function(link,index) {
			var roSrc = link.readAttribute('title');
			link.writeAttribute({title: ''});
			var img = link.down('img');
			var noSrc = img.readAttribute('src');
			img.roSrc = roSrc;
			img.noSrc = noSrc;
			// preload images
			var preloadImg = new Image();
			preloadImg.src = img.roSrc;


			if(roSrc && img) {
				link.observe('mouseover',function(e) {
					if(popNav.currentOver != null) {
						popNav.currentOver.writeAttribute({src: popNav.noSrc});
					}
					img.writeAttribute({src: roSrc});
					popNav.currentOver = img;
					popNav.noSrc = noSrc;
				})
			}
		},this);
		this.navEl.select('ul.firstLevel li.top').each(function(trigger,index) {
			var dropDown = trigger.down('ul');
			if(dropDown) {
				popNav.eventHandleMouseOver = popNav._eventHandleMouseOver.bindAsEventListener(popNav,trigger,dropDown);
				Event.observe(trigger,'mouseover',popNav.eventHandleMouseOver);
				Event.observe(trigger,'mouseout',function(event) {
					popNav.hide(dropDown);
					img = trigger.down('img');
					img.writeAttribute({src: img.noSrc});							
				});				
			}
		},this)	
	},
	hide: function(dd) {
		if(this.open) {
			this.open.hide();
		}		
	},
	show: function(dd) {
		dd.show();
		this.open = dd;
	},
	_eventHandleMouseOver: function(event) {
		args = $A(arguments);
		var trigger = args[1];
		var dropDown = args[2];
		trigger.mouseIsOver = true;
		popNav.show(dropDown);
		img = trigger.down('img');
		img.writeAttribute({src: img.roSrc});
	}
	
}

Element.observe(document, 'dom:loaded', function(){
	if($('imageRotator')) {
		gallery.init();		
	}
	if($('primary')) {
		popNav.init();
	}
});