window.addEvent('domready', function(){
	Fx.Morph = Fx.Styles.extend({
		start: function(className){
			var to = {};
			$each(document.styleSheets, function(style){
				var rules = style.rules || style.cssRules;
				$each(rules, function(rule){
					if (!rule.selectorText.test('\.' + className + '$')) return;
					Fx.CSS.Styles.each(function(style){
						if (!rule.style || !rule.style[style]) return;
						var ruleStyle = rule.style[style];
						to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
					});
				});
			});
			return this.parent(to);
		}
	});
	Fx.CSS.Styles = ["left", "top"];
	
	var changeSpeed = 1000; // Amount of time taken for transition of each section(1000 = 1 second)
	var loopSpeed = 10000; // Amount of time taken between switching section when looping (1000 = 1 second)
	var imageWidth = 626; // Width of the images that are sliding in
	var noSlides = 4; // Amount of sections on the page
	var container = $('slide-container');
	var thumb = new Array();
	var image = new Array();
	var thumbSlide = new Array();
	var imageSlide = new Array();
	var current = 1;
	var rotate;
	var rotateActive = false;
	var allow = false;

	var slide = new Fx.Scroll('slide-box', {
		wait: false,
		duration: changeSpeed,
		offset: {'x': 0, 'y': 0},
		wheelStops: false,
		transition: Fx.Transitions.Quad.easeInOut
	});
	var slideStart = new Fx.Scroll('slide-box', {
		wait: false,
		duration: 0,
		offset: {'x': 0, 'y': 0},
		wheelStops: false,
		transition: Fx.Transitions.Quad.easeInOut
	});
	function createSlide(select) {
		thumb[x].addEvent('mouseenter', function(e){
			e = new Event(e);
			if(allow) {
				allow=false;
				thumbSlide[select].start('thumb-out');
				thumbSlide[current].start('thumb-in');
				slide.toElement('image'+select).chain(function(){
					current = select;
					allow=true;
				});
			}
			e.stop();
		});
	}
	for(x=1;x<=noSlides;x++) {
		thumb[x] = $('image-thumb'+x);
		image[x] = $('image'+x);
		if(thumb[x] && image[x]) {
			thumbSlide[x] = new Fx.Morph(thumb[x], {wait: false, duration: changeSpeed});
			createSlide(x);
		}
	}
	var loop = function() {
		if(allow) {
			allow=false;
			newCurrent = current+1;
			if(newCurrent>noSlides) { newCurrent=1; }
			thumbSlide[newCurrent].start('thumb-out');
			thumbSlide[current].start('thumb-in');
			slide.toElement('image'+newCurrent).chain(function(){
				current = newCurrent
				allow=true;
			});
		}
	}
	function opening(z) {
		thumbSlide[z].start('thumb-in').chain(function(){
			if(z==noSlides) {
				thumbSlide[1].start('thumb-out');
				slide.toElement('image'+1).chain(function(){
					allow=true;
					if(!rotateActive) {
						rotate = loop.periodical(loopSpeed); 
						rotateActive=true;
					}
				});
			}
			else {
				opening(z+1);
			}
		});
	}
	container.addEvent('mouseenter', function(e){ 
		if(rotateActive) {
			$clear(rotate); 
			rotateActive=false;
		}
	});
	container.addEvent('mouseleave', function(e){ 
		if(!rotateActive) {
			rotate = loop.periodical(loopSpeed); 
			rotateActive=true;
		}
	});
	slideStart.toElement('image'+0);
	window.addEvent('load', function() {
		opening(1);
	});

});