// JavaScript Document

var effects; //i am global now
	window.onload = function(){
		var fx = new Fx.Styles('rollImagesScroll', {duration:800, transition: Fx.Transitions.cubicInOut, wait:false});
		var sx = new Fx.Styles('homeRollSelectBtn', {duration:0, wait:false});
		var tx = new Fx.Styles('rollTitlesScroll', {duration:800, wait:false});
		var bx1 = new Fx.Styles('ri01', {duration:40, wait:false});
		var bx2 = new Fx.Styles('ri02', {duration:400, wait:false});
		var bx3 = new Fx.Styles('ri03', {duration:400, wait:false});
		
		$('ar12').addEvent('click', function(){
			fx.start({
				'margin-left': -650,
				'margin-top': 0
			});
			sx.start({
				'margin-top': -40
			});
		
			tx.start({
				'margin-top': -60
			});
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
		});
		
		$('ar13').addEvent('click', function(){
			fx.start({
				'margin-left': -1300,
				'margin-top': 0
			});
			sx.start({
				'margin-top': -80
			});
		
			tx.start({
				'margin-top': -0
			});
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
		});
		
		$('ar21').addEvent('click', function(){
			fx.start({
				'margin-left': 0,
				'margin-top': 0
			});
			sx.start({
				'margin-top': -0
			});
		
			tx.start({
				'margin-top': -120
			});
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
		});
		
		$('ar23').addEvent('click', function(){
			fx.start({
				'margin-left': -1300,
				'margin-top': 0
			});
			sx.start({
				'margin-top': -80
			});
		
			tx.start({
				'margin-top': -0
			});
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
		});
		
		$('ar31').addEvent('click', function(){
			fx.start({
				'margin-left': 0,
				'margin-top': 0
			});
			sx.start({
				'margin-top': -0
			});
		
			tx.start({
				'margin-top': -120
			});
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
		});
		
		$('ar32').addEvent('click', function(){
			fx.start({
				'margin-left': -650,
				'margin-top': 0
			});
			sx.start({
				'margin-top': -40
			});
		
			tx.start({
				'margin-top': -60
			});
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
		});	
		
		$('ri01').addEvent('click', function(){
			fx.start({
				'margin-top': 0
			});
			
			bx1.start({
				'background-color': '#ed1c24'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#000'
			});
			
		});	
		
		$('ri02').addEvent('click', function(){
			fx.start({
				'margin-top': -210
			});
			bx1.start({
				'background-color': '#000'
			});
			bx2.start({
				'background-color': '#ed1c24'
			});
			bx3.start({
				'background-color': '#000'
			});
			
		});
		
		$('ri03').addEvent('click', function(){
			fx.start({
				'margin-top': -420
			});
			
			bx1.start({
				'background-color': '#000'
			});
			bx2.start({
				'background-color': '#000'
			});
			bx3.start({
				'background-color': '#ed1c24'
			});			
		});	
		
		var list = $$('#menu li a');
		list.each(function(element) {
		 
			var mfx = new Fx.Styles(element, {duration:300, wait:false});
		 
			element.addEvent('mouseenter', function(){
				mfx.start({
					'background-color': '#231f20',
					'padding-left': '30px',
					'width': '160px',
					'background-position': '0 0'					
				});
			});
		 
			element.addEvent('mouseleave', function(){
				mfx.start({
					'background-color': '#ed1c24',
					'padding-left': '10px',
					'width': '180px',
					'background-position': '-20px 0'
				});
			});
		 
		});
}

window.addEvent('domready', function(){
	var szNormal = 117, szSmall  = 100, szFull   = 219;
	
	var elastic = $$("#elastic .elastic");
	var fx = new Fx.Elements(elastic, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
	elastic.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			elastic.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
		});
	});
	
	$("elastic").addEvent("mouseleave", function(event) {
		var o = {};
		elastic.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	})
	
});