// Written By: Michael Worrall
// Date: 21/08/2008
var CurrentSlide = 0;
var paused = false;
var hide = new Array();

window.addEvent('domready', function() {
	$$('#carousel-1').setStyle('z-index',5);
	$$('#carousel-2').setStyle('z-index',4);
	$$('#carousel-3').setStyle('z-index',3);
	$$('#carousel-4').setStyle('z-index',2);
	$$('#carousel-5').setStyle('z-index',1);
	
	for (x=1; x<=5; x++) {
		$$('#carousel-tabs-' + x + ' a').addEvent('click', function() {
			PauseCarousel(this);
		});
	}
	
	$('carousel').addEvent('mouseleave', function() {
		if (paused==true) {
			if ($('dummywrapper')!=null) {
				$('dummywrapper').destroy();
				$('dummy-tabs').destroy();
			}
			paused = false;
		}
	});
	
	StartCarousel();
	//(function() { StartCarousel() }).delay(5000); //waits 5 seconds before beginning the carousel
});

function PauseCarousel(el) {
	if ($type(hide[CurrentSlide])=='object') {
		//returns the int part of the clicked on layer/list element
		if (el.getParent().id.indexOf('carousel-tabs')>-1) {
			var Id = el.getParent().id.replace(/carousel-tabs-/,''); 
		} else {
			var Id = el.getParent().id.replace(/dummy-tabs-/,''); 
		}
								
		//destroys the dummywrapper if one exists as we are about to create a new one!
		if ($('dummywrapper')!=null) {
			$('dummywrapper').destroy();
			$('dummy-tabs').destroy();
		}
		paused = true;					
		
		//creates a dummy set of tabs to use as the buttons
		var dummyTabs = $('carousel-tabs').clone(true,true);
		dummyTabs.set('id','dummy-tabs');
		dummyTabs.set('html', dummyTabs.get('html').replace(/carousel-tabs/g,'dummy-tabs'));
		
		
		//creates a dummy Layer to place on top of the carousel!
		var dummyLayer = $$('#carousel-' + Id).get('html');
		var dummyWrap = new Element('div', {
			'id':'dummywrapper',
			'html':dummyLayer
		});

		// injects the dummy carousel/tabs on top of the real carousel
		var carousel = $('carousel');
		carousel.appendChild(dummyWrap);
		carousel.appendChild(dummyTabs);
		
		//Sets the clicked on dummy-tab to the active class
		var a = $$('#dummy-tabs li a');
		for (i=0; i<a.length; i++) {
			a[i].set('class','inactive');
		} 
		$$('#dummy-tabs-' + Id + ' a').set('class','active');
		
		//assigns the click events to the dummy-tabs
		for (x=1; x<=5; x++) {
			$$('#dummy-tabs-' + x + ' a').addEvent('click', function() {
				PauseCarousel(this);
			});
		}
	}
};

function StartCarousel() {
	var list = $$('#carousel-list li');
	for (x=0; x<list.length; x++) {
		//var el = $$('#carousel-' + x);
		hide[x] = new Fx.Morph(list[x], {
			duration: 750, 
			transition: Fx.Transitions.Sine.easeOut
		});
		
		hide[x].addEvent('complete', function(listItem) {
			var x = (listItem.id.replace('carousel-','')-1);
			var list = $$('#carousel-list li');
			for (i=0; i<list.length; i++) {
				$$('#carousel-tabs-' + (i+1) + ' a').set('class','inactive'); //hides the active cross
					
				//sets the z-index's of the li's so we can continually loop them hiding them as we go				
				if (x==i) {
					list[i].setStyle('z-index',1);
				} else {
					list[i].setStyle('z-index', list[i].getStyle('z-index').toInt()+1 );
				}
			}
			$$('#carousel-tabs-' + (CurrentSlide+1) + ' a').set('class','active'); //shows the newly active cross
			
			hide[x].set({
				'width': [712],
				'margin-right': [0]
			}); //sets the li back to normal after then z-index's of the rest of the li's has changed!
			
			(function() { SwapCarousel() }).delay(5000); //inits the next swap
		});
	}
	
	(function() { SwapCarousel() }).delay(5000);
};

function SwapCarousel() {
	var PreviousSlide = null;
	hide[CurrentSlide].start({
		'width': [712, 0],
		'margin-right': [0, 712]
	});
	
	if (CurrentSlide<4) {
		CurrentSlide++;
	} else {
		CurrentSlide = 0;
	}
};