// Written By: Michael Worrall
// Date: 21/08/2008
// Updated: 23/06/2010
var CurrentSlide = 0;
var paused = false;
var hide = new Array();
//var slide = null;
var listLength = null; 

window.addEvent('domready', function() {
	
	//sets the loading shroud to display
	$('loading-shroud').setStyle('top', '44px');
	/*var shroud = new Element('div', { id: 'loading-shroud' });
	var loading = new Element('img', { src: '/images/ajax-loader.gif' });
	loading.inject(shroud);
	shroud.inject($('wrapper'), 'top');*/
	
	//gets the main image lis
	var lis = $$('#carousel-list li');
	listLength = lis.length;
	
	var images = new Array();
	for (x=0; x<lis.length; x++) {
		//As the images etc are embedded in noscript tags, it means we can preload them using mootools assets
		images[x] = '/Images/Cache/' + lis[x].id + '-Banner.jpg'; // generates the URL from id of li;
		
		var div = new Element('div');
		div.inject(lis[x]);
		
		//reset the ids and set a zindex on each element.
		lis[x].set('id', 'carousel-' + (x+1));
		lis[x].setStyle('z-index', lis.length - x);
	}
		
	var infoList = $$('#carousel-info li');
	for (x=0; x<infoList.length; x++) {
		infoList[x].set('id', 'carousel-info-' + (x+1));	
	}
	$$('#carousel-info ul')[0].setStyle('width', infoList.length*1000); //Sets width of the info strip
	
	
	//repositions the thumbnails if they are too many for the page
	var thumbList = $$('#carousel-tabs li');
	if (thumbList.length > 22) {
		$$('#carousel-tabs ul')[0].set('class', 'reposition');
		$('carousel-tabs').set('class', 'reposition');	
		var i = thumbList.length-22;
		var marginRight = (22-i)*43;
		thumbList[i].set('class', 'break');
		thumbList[i-1].setStyle('margin-right', marginRight);
		
		$('logo').set('id', 'logo-goldRepositioned');
	}
	
	//Sets the thumbnails - we need to remove the background image and insert as a foreground image so that we can do the annimation!
	for (x=0; x<thumbList.length; x++) {
		var  url = '/Images/Cache/' + thumbList[x].id + '-Thumbnail.jpg'; //Gets the url of the image
		
		thumbList[x].set('id', 'carousel-tabs-' + (x+1));	
		var a = thumbList[x].getFirst('a');
		
		images[images.length] = url;
		
		a.empty();
		a.setStyles({
			'background-image': 'none',
			'padding-top': 0,
			'height': 35
		});
		if(x==0) { //if we are working on the 1st thumb then we want to set that to its active state!
			a.setStyle('border-color', '#A96900'); //sets the active border to the gold colour
		}
		
		a.addEvent('click', function(event) {
			event.stop();
			PauseCarousel(this);
		});
	}
	
	//sets the uk arts logos to preload
	if (Browser.Engine.name == 'trident' && Browser.Engine.version == 4) {
		images[images.length] = '/images/logos/gold-repositioned.gif'; 
		images[images.length] = '/images/logos/gold.gif'; 
	} else {
	
		images[images.length] = '/images/logos/gold-repositioned.png'; 
		images[images.length] = '/images/logos/gold.png'; 
	
	}
	
	
	$('carousel').addEvent('mouseleave', function() {
		if (paused==true) {
			if ($('dummywrapper')!=null) {
				$('dummywrapper').destroy();
				$('dummy-tabs').destroy();
			}
			paused = false;
		}
	});
	
	var progressBar = new dwProgressBar({
		container: $('progress-bar'),
		startPercentage: 0,
		speed:750,
		boxID: 'box',
		percentageID: 'perc',
		displayID: 'text',
		displayText: true
	});
	
	var loadedImages = new Asset.images(images, {
		onComplete: function() {

			for (x=0; x<images.length; x++) {
				
				if (x<((images.length-2)/2)) { //if we are working on the 1st half of the array then we want to insert the main images
					var div = $$('li#carousel-' + (x+1) + ' div')[0];
					loadedImages[x].inject(div);
				} else if (x < images.length-2) { //we are working on little thumbnails
					//alert(images[x]);
					var a = $$('li#carousel-tabs-' + ((x+1)-((images.length-2)/2)) + ' a')[0];
					loadedImages.set('border', 'none');
					loadedImages[x].inject(a);
					
					if((x+1)-((images.length-2)/2) == 1) {
						loadedImages[x].setStyle('margin-left', -35);		
					}
				} else { // we want to insert the ukarts png logo!
					if ($('logo-goldRepositioned')) {
						var h1 = $('logo-goldRepositioned');
						var img = loadedImages[x];
					} else {
						var h1 = $('logo');	
						var img = loadedImages[x+1];
					}
					
					h1.setStyles({
						'background-image': 'none',
						'padding-top': '0px',
						'height': '389px',
						'top': '0px'
					});
					img.inject(h1, 'top');
					h1.inject($('carousel-tabs'), 'before');
					break;
				}
			}
			
			var animate = new Fx.Morph($('loading-shroud'), {
				duration: 1500
			});
			
			animate.addEvent('complete', function() {
				StartCarousel();
			});
			
			(function() { animate.start({ 'opacity': '0' }) }).delay(2500); //inits the next swap
			
			//animate.start({ 'opacity': '0' });
		},
		
		onProgress: function(counter, index) {
			progressBar.set((counter + 1) * (100 / images.length));  
			//$('Log').set('html', 'Counter: ' + counter + '<br />Index: ' + index);	
		}
	});
});

function PauseCarousel(el) {
	if ($type(hide[CurrentSlide])=='object' && el.getParent()!=null) {
		//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 = new Element('div', {
			'id': 'dummy-tabs',
			'html': $('carousel-tabs').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
		});
		if ($$('#carousel-tabs li').length > 22) {
			dummyWrap.set('class', 'reposition-dummy');
			dummyTabs.set('class', 'reposition-dummy-tabs');
		}
		
		//creates a dummy of the info div
		var dummyInfo = $$('#carousel-info-' + Id).get('html');
		var dummyInfoWrap = new Element('div', {
			'id':'dummyinfo',
			'html':dummyInfo
		});

		// injects the dummy carousel/tabs on top of the real carousel
		var carousel = $('carousel');
		carousel.appendChild(dummyWrap);
		carousel.appendChild(dummyTabs);
		
		//Now we have injected the dummy tabs we need to apply the click event again!
		var a = $$('div#dummy-tabs a');
		for (x=0; x<a.length; x++) {
			a[x].removeEvents('click');
			a[x].addEvent('click', function(event) {
				event.stop();	
				PauseCarousel(this);
			});
		}

		
		//injects the info wrapper into the dummy div
		dummyInfoWrap.inject(dummyWrap, 'bottom');
		
		//inserts the logo inside dummywrap so that it doesn't break the on mouse out event!
		if ($('logo')) {
			var logo = $('logo').clone();
		} else {
			var logo = $('logo-goldRepositioned').clone();
		}
		logo.inject(dummyWrap,'top');
		//logo.setStyle('z-index', 1001);
		
		//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<=listLength; x++) {
			$$('#dummy-tabs-' + x + ' a').addEvent('click', function(event) {
				event.stop();													 
				PauseCarousel(this);
			});
		}		
	}
};

function StartCarousel() {
	var list = $$('#carousel-list li');
	//var infoList = $$('#carousel-info li');
	for (x=0; x<list.length; x++) {
		//var el = $$('#carousel-' + x);
		hide[x] = new Fx.Morph(list[x], {
			duration: 1500, 
			transition: Fx.Transitions.Quint.easeInOut
		});
				
		hide[x].addEvent('start', function(listItem) { // on starting the main animation we also want to animate the information text that goes with it!
			var ul = $$('#carousel-info ul')[0];
			var slide = new Fx.Morph(ul, {
				duration: 1500, 
				transition: Fx.Transitions.Quint.easeInOut							 
			});
			
			slide.addEvent('complete', function(ul) {
				var li = $$('#carousel-info li')[0];
				li.inject(ul,'bottom');
				ul.setStyle('margin-left', 0);
			});
			
			slide.start({
				'margin-left': [-1000]
			});
			
			//section handles the change of the thumbnail images
			var x = (listItem.id.replace('carousel-','')).toInt();
			var currentThumb = $$('li#carousel-tabs-' + x + ' a img')[0];
			if (x<listLength) {
				var nextThumb = $$('li#carousel-tabs-' + (x+1) + ' a img')[0];
			} else {
				var nextThumb = $$('li#carousel-tabs-1 a img')[0];
			}
						
			var thumbFx = new Fx.Morph(currentThumb, {
				duration: 750, 
				transition: Fx.Transitions.Quint.easeInOut												  
			});
			
			thumbFx.addEvent('start', function(img) {
				var a = img.getParent('a');	
				var borderFx = new Fx.Morph(a, {
					duration: 1500, 
					transition: Fx.Transitions.Quint.easeInOut												  
				});
				borderFx.start({  
					'border-color': '#ffffff'			   
				});

			});
			
			thumbFx.addEvent('complete', function(thumb) {
				thumb.setStyle('margin-left', 0);								  
			});
			
			thumbFx.start({
				'margin-left': '-70px' 		  
			});
			
			var nextThumbFx = new Fx.Morph(nextThumb, {
				duration: 750, 
				transition: Fx.Transitions.Quint.easeInOut						   
			});
			
			nextThumbFx.addEvent('start', function(img) {
				var a = img.getParent('a');	
				var borderFx = new Fx.Morph(a, {
					duration: 1500, 
					transition: Fx.Transitions.Quint.easeInOut												  
				});
				borderFx.start({  
					'border-color': '#A96900'			   
				});

			});
			
			nextThumbFx.start({
				'margin-left': '-35px'
				/*'border-color': '#A96900'*/
			});
		});
		
		hide[x].addEvent('complete', function(listItem) {
			var x = (listItem.id.replace('carousel-','')-1);
			var list = $$('#carousel-list li');
			list[1].setStyle('z-index',list.length);
			
			listItem.inject($('carousel-list'), 'bottom'); //Reorders the  lis so the currently active one is ALWAYS 1st in the flow!
			listItem.setStyles({
				'z-index' : 1,
				'width' : 1000,
				'margin-right' : 0
			});
			
			var list = $$('#carousel-list li');
			for (i=0; i<list.length; i++) {
				list[i].setStyle('z-index', list.length-i);		
			} 
						
			hide[x].set({
				'width': [1000],
				'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': [1000, 0],
		'margin-right': [0, 1000]
	});
	
	if (CurrentSlide<listLength-1) {
		CurrentSlide++;
	} else {
		CurrentSlide = 0;
	}
};