var slidelist = [
	//list of images to be rotated in order
	{src: 'img/rotated/1.jpg'},
	{src: 'img/rotated/2.jpg'},
	{src: 'img/rotated/3.jpg'},
	{src: 'img/rotated/4.jpg'},
	{src: 'img/rotated/5.jpg'},
	{src: 'img/rotated/6.jpg'},
	{src: 'img/rotated/7.jpg'},
	{src: 'img/rotated/8.jpg'}
];
window.addEvent('domready', function() {
	//begin rotating the images
	window.slides = Slides.start(
		slidelist, 'rotator',{
			showFor: 5000,
			transitionFor: 750
		}
	);
	//set up vars for the logo
	var logo = $('logo');
	var oTop = logo.getStyle('top');
	var oLeft = logo.getStyle('left');
	
	//move over for animation when loaded
	logo.setStyle('left',80);
	
	//drag it around and spring back in place
	var logoDrag = new Fx.Styles(logo, {duration: 1000, transition: Fx.Transitions.Elastic.easeOut});
	new Drag.Base(logo, {
		onComplete: function(){
			logoDrag.start({'top': oTop, 'left': oLeft});
		}
	});
	
	//animate the rollovers for the artist section
	$$('.artist').each(function(el,i){
		var oColor = el.getStyle('backgroundColor');
		el.setStyle('backgroundColor',oColor);
		var contentfx = new Fx.Style(el,'backgroundColor', {wait:false, duration: 200});
		el.addEvent('mouseenter',function(){
			contentfx.start('#DBD4D4');
		})
		el.addEvent('mouseleave',function(){
			contentfx.start(oColor);				 
		})
	});
	
	//animate the navigation
	var normalSize=90, smallSize=80, fullSize= 100;
	var navs = $$("#header ul li a");
	var fx = new Fx.Elements(navs, {wait: false, duration: 500, transition: Fx.Transitions.Expo.easeOut});
	navs.each(function(navlink, i) {
		navlink.addEvent("mouseenter", function(event) {
			var change = {};
			change[i] = {
				color: [navlink.getStyle("color"), '#480000'],
				paddingRight: [navlink.getStyle("paddingRight").toInt(), fullSize]
				}
			navs.each(function(other, j) {
				if(i != j) {
					var col = other.getStyle("color");
					var ml = other.getStyle("paddingRight").toInt();
					if(ml != smallSize) change[j] = {
						paddingRight: [ml, smallSize],
						color: [col, "#000000"]
					};
					
				}
			});
			fx.start(change);
		});
	});
	$$("#header ul").addEvent("mouseleave", function(event) {
		var change = {};
		navs.each(function(navlink, i) {
			change[i] = {
				color: [navlink.getStyle("color"),"#000000"],
				paddingRight: [navlink.getStyle("paddingRight").toInt(), normalSize]
			}
		});
		fx.start(change);
	});
});
window.addEvent('load', function(){
	//initial animation
	var logo = $('logo');
	var logoMove = new Fx.Style(logo, 'left', {duration: 1000,	transition: Fx.Transitions.Back.easeOut});
	//set a delay and then animate
	logoMove.start.delay(500, logoMove, 180);
	(function(){new Element('div',{id:'logomsg'}).injectAfter(logo).setHTML('Hey!  Put that back!');}).delay(2000);
});