window.addEvent('domready', function() {
	SetupFishEye(1)								 
	SetupArrows();
});

function SetupFishEye(listid) {
	//alert(listid);
	//var list = $$('#SliderWrapper li');	
	var ShowDetailFx = new Fx.Morph('ShowInfo', {duration: 2000, transition: Fx.Transitions.Cubic.easeInOut, link: 'cancel'});
	var list = $$('ul#SliderList-' + listid + ' li');
	var currentlyactive = null;
	var infolist = $$('#ShowInfoWrapper li.info');
	for (x=((listid-1)*7); x<infolist.length; x++) {
		infolist[x].set('id','ShowInfo-' + x);
	}
	
	for (x=0; x<list.length; x++) {
		list[x].set('id', 'ShowSelector-' + ( x+((listid-1)*7) ));
		var lnk = list[x].getChildren('a')[0];
		
		lnk.addEvent('click', function(event) { //removes event from the anachor link
			event.stop();
		});
		
		list[x].addEvent('click', function() { //click event on the li makes the main list scroll into position!
			currentlyactive = this;
			
			(function() {
			
				var i = currentlyactive.id.replace('ShowSelector-','').toInt();
				i = (i*307)-((i*307)*2);
				//var morph = new Fx.Morph('ShowInfo', {duration: 2000, transition: Fx.Transitions.Cubic.easeInOut});
				ShowDetailFx.start({
					'margin-top' : i + 'px'
				});
			
			}).delay(250);
			
			
			FishEye(this);
		})
		
		/*
		list[x].addEvent('mouseenter', function() {
			FishEye(this)				
		});
		*/
	}
	/*
	if (listid==1) {
		$$('#SliderOuterWrapper').addEvent('mouseleave', function() { //when user mouses out of the Div we want enable the currently active icon not the last rolled-over icon!
			if (currentlyactive!=null) {
				currentlyactive.setStyles({
					'padding-top' : '0px',
					'width' : '109px',
					'height' : '109px'
				});
				
				if (currentlyactive.getNext()!=null) {
					var next = currentlyactive.getNext();
					next.setStyles({
						'padding-top' : '15px',
						'width' : '94px',
						'height' : '94px'
					});
					
					var next = next.getAllNext();
					for (i=0; i<next.length; i++) {
						next.setStyles({ //morph for small sized icons
							'padding-top' : '23px',
							'width' : '86px',
							'height' : '86px'
						});
					}
				}
				
				if (currentlyactive.getPrevious()!=null) {
					var previous = currentlyactive.getPrevious();
					previous.setStyles({
						'padding-top' : '15px',
						'width' : '94px',
						'height' : '94px'
					});
					
					var previous = previous.getAllPrevious();
					for (i=0; i<previous.length; i++) {
						previous.setStyles({ //morph for small sized icons
							'padding-top' : '23px',
							'width' : '86px',
							'height' : '86px'
						});
					}
				}
				
			}
		}); //Ends MouseLeave of the Wrapping Div
	}
	*/
};

//Following Sets up the Next/Previous Arrows!
function SetupArrows() {
	var totalpages = $('AllEventsCount').get('html').toInt(); // defines the total number of pages that are required, so we know when to stop ajaxing!
	if (totalpages % 7 > 0) {
		var total = (totalpages/7).toInt()+1;
	} else {
		var total = totalpages/7;
	}
	total = total*665; //the total width as int that is required for the ul's
	var margin = 0;
	var slider = $('Slider');
	var recordpage = 1;
	var pagesRetrieved = new Array(); //an array of type boolean so we know when we have retrieved the data via ajax
	
	//sets all (but the first record page) array vals to false as we havent yet got any via ajax!
	for(i=1; i<=totalpages; i++) {
		if (i==1) {
			pagesRetrieved[i] = true;
		} else {
			pagesRetrieved[i] = false; 
		}
	}
	//var ul = $$('#Slider ul');
	//total = ul.length*665;
	
	slider.setStyle('width', total + 'px');
	
	if (total>665) {		
		$('previous').setStyle('visibility','visible');
		$('next').setStyle('visibility','hidden');
		
	} else {
		$('previous').setStyle('visibility','hidden');
		$('next').setStyle('visibility','hidden');
	}
	
	//sets up the sliding of the sliderWrapper when clicking on the next button
	$('previous').addEvent('click', function(event) {
		event.stop();
		recordpage++;
		if (pagesRetrieved[recordpage]==false) {
			var lang = null;
					
			if (window.location.pathname.toLowerCase().indexOf('/welsh/') > -1) {
				lang = 'false';
			} else {
				lang = 'true';
			}
					
			var request = new Request.HTML({
				url: '/includes/AllEvents-Thumbnails-StandAlone.asp?en=' + lang + '&pg=' + recordpage,
				
				onRequest: function() {
					var loadingShroud = new Element('div', { 'class' :'loadingcover' });
					loadingShroud.inject($('Slider'), 'top');
				},
				
				onComplete: function(ul) {
					//alert(ul[0]);
					
					//ul[0].innerHTML = ul[0].get('html').replace(/&amp;/g, '&');
					//alert(ul[0].get('html'));
					
					ul[0].inject($('Slider'));
					pagesRetrieved[recordpage] = true;
					
					var detailrequest = new Request.HTML({
						url: '/includes/AllEvents-Details-StandAlone.asp?en=' + lang + '&pg=' + recordpage,
						
						onComplete: function(li) {
							for (p=0; p<li.length; x++) {
								//alert(li[p].get('html'));
								//li[p].innerHTML = li[p].get('html').replace(/&amp;/g, '&');
								li[p].inject($('ShowInfo'));
							}
							SetupFishEye(recordpage);
							$$('div.loadingcover')[0].destroy();
							
							var tmp = (total-665)-((total-665)*2);
							if (tmp<margin) {
								var Slide = new Fx.Morph('Slider', {duration:500, transition:Fx.Transitions.Sine.easeOut, link:'ignore'});
								margin=margin-665;
								
								Slide.addEvent('complete', function() { 
									if (tmp>=margin) {
										$('previous').setStyle('visibility','hidden');
										$('next').setStyle('visibility','visible');
									} else {
										$('previous').setStyle('visibility','visible');
										$('next').setStyle('visibility','visible');
									}
								});
								
								Slide.start({ 'margin-left': [margin + 'px'] });	
							}
						}
						
					}).send();
					
				}
				
			}).send();
			
		} else {
			var tmp = (total-665)-((total-665)*2);
			if (tmp<margin) {
				var Slide = new Fx.Morph('Slider', {duration:500, transition:Fx.Transitions.Sine.easeOut, link:'ignore'});
				margin=margin-665;
				
				Slide.addEvent('complete', function() { 
					if (tmp>=margin) {
						$('previous').setStyle('visibility','hidden');
						$('next').setStyle('visibility','visible');
					} else {
						$('previous').setStyle('visibility','visible');
						$('next').setStyle('visibility','visible');
					}
				});
				
				//margin=margin-208;
				Slide.start({ 'margin-left': [margin + 'px'] });	
			}	
		}
		
	});
		
	//sets up sliding when click on previous button
	$('next').addEvent('click', function(event) {
		event.stop();
		recordpage--;
		
		if (margin<0) {
			var Slide = new Fx.Morph('Slider', {duration:500, transition:Fx.Transitions.Sine.easeOut, link:'ignore'});
			//Slide.addEvent('complete', function() { margin=margin+208; })
			margin=margin+665;
			
			Slide.addEvent('complete', function() { 
				if (margin>=0) {
					$('previous').setStyle('visibility','visible');
					$('next').setStyle('visibility','hidden');
				} else {
					$('previous').setStyle('visibility','visible');
					$('next').setStyle('visibility','visible');
				}
			});
			
			Slide.start({ 'margin-left': [margin + 'px'] });	
		}
	});
};


function FishEye(el) {
	//var sw = $('SliderWrapper').getPosition(); 
	
	el.morph('.largeShowIcon');
	el.getChildren('img')[0].morph({ 'height' : '109px' });
	//el.getChildren('img')[0].morph('li.largeShowIcon img');
	//var morph = new Fx.Morph(el, {duration: 250, transition: Fx.Transitions.Expo.easeInOut, link:'chain'});
	/*morph.addEvent('start', function(el) { // onstart of the mouseover morph we want to put a div over the top of li's so that mouseenter DOESNT occur on another li!
		el.getChildren('div')[0].set('styles', {
			'top' : sw.y + 'px',
			'left' : sw.x + 'px'
		});
	})
	morph.addEvent('complete', function(el) { //removes the invisible div!
		el.getChildren('div')[0].set('styles', {
			'top' : '-100000px',
			'left' : '-100000px'
		});
	})
	morph.start({
		'padding-top' : '0px',
		'width' : '109px'
	});
	*/
	
	if (el.getNext()!=null) { //handles morph of all icons to the RIGHT of the currently active one
		var next = el.getNext();
		next.morph('.mediumShowIcon');
		next.getChildren('img')[0].morph({ 'height' : '94px' });
		/*
		var morph = new Fx.Morph(next, {duration: 250, transition: Fx.Transitions.Expo.easeInOut, link:'chain'});
		morph.start({ //morph for medium sized icons
			'padding-top' : '15px',
			'width' : '94px'
		});
		*/			
		var next = next.getAllNext();
		
		
		for (i=0; i<next.length; i++) {
			next[i].morph('.smallShowIcon');
			next[i].getChildren('img')[0].morph({ 'height' : '86px' });
			/*
			var morph = new Fx.Morph(next[i], {duration: 250, transition: Fx.Transitions.Expo.easeInOut, link:'chain'});
			morph.start({ //morph for small sized icons
				'padding-top' : '23px',
				'width' : '86px'
			});
			*/
		}
		
	}
	
	if (el.getPrevious()!=null) { //handles morph of all icons to the LEFT of the currently active one
		var previous = el.getPrevious();
		previous.morph('.mediumShowIcon');
		previous.getChildren('img')[0].morph({ 'height' : '94px' });
		/*
		var morph = new Fx.Morph(previous, {duration: 250, transition: Fx.Transitions.Expo.easeInOut, link:'chain'});
		morph.start({ //morph for medium sized icons
			'padding-top' : '15px',
			'width' : '94px'
		});
		*/
		var previous = previous.getAllPrevious();
		//previous.morph('.smallShowIcon');
		
		for (i=0; i<previous.length; i++) {
			previous[i].morph('.smallShowIcon');
			previous[i].getChildren('img')[0].morph({ 'height' : '86px' });
			/*
			var morph = new Fx.Morph(previous[i], {duration: 250, transition: Fx.Transitions.Expo.easeInOut, link:'chain'});
			morph.start({ //morph for small sized icons
				'padding-top' : '23px',
				'width' : '86px'
			});
			*/
		}
		
	}
};