window.addEvent('domready', function() {

	var alreadyOpen = new Array();
	var activePicture = new Array();
	var totalPictures = new Array();
	var pictureFiles = new Array();
	var maxWidth = 600;
	var maxHeight = 400;
	var nextPicture = 0;

	var myAccordion = new Accordion($('tourAccordion'), 'h2.tourTitle', 'div.tourInfo', {
		display: false,
		show: false,
		alwaysHide: true,
		opacity: false,
		onActive: function(tourTitle, tourInfo){

			tourTitle.getElement('img').setProperty('src', '/layout/images/smallArrowsInverse.png');
			var id = tourTitle.getProperty('id');
			if (Browser.Engine.trident == true) {
				tourInfo.getElement('.slideshow').setStyle('display','block');
			}

			if (alreadyOpen[id] != 1) {

				var slideshow = $('slideshow-'+tourTitle.getProperty('id'));
				var el1 = new Element('ul', {'class': 'slideshowCenter'}).inject(slideshow);
				var el2 = new Element('div', {'class': 'slideshowLinks'}).inject(slideshow);
				var el3 = new Element('a', {'class': 'slideshowLeftLink slideshowLinkInactive', 'href':'#', 'onfocus':'blur();'}).inject(el2);
				var el4 = new Element('a', {'class': 'slideshowRightLink', 'href':'#', 'onfocus':'blur();'}).inject(el2);

				var request = new Request.JSON({
					url: '/library/getJson.php?type=concert-pictures&id='+id,
					onComplete: function(jsonObj) {
						addPictures(jsonObj.pictures,el1,el4,id);
					}
				}).send();

				var container = el3.getParent('.slideshow');
				var center = el1;
				center.set('tween', {duration: 'short', transition: Fx.Transitions.Linear});

				el3.addEvent('click', function(e){

					if (activePicture[id] > 1) {
						center.tween('margin-left', (60-(activePicture[id]-2)*650));
						activePicture[id]--;
						el4.removeClass('slideshowLinkInactive');
						if (activePicture[id] == 1) {
							this.addClass('slideshowLinkInactive');
						}
					}
					e.stop();

				});

				el4.addEvent('click', function(e){

					center.setStyle('width',(totalPictures[id]*650)+'px');

					if (activePicture[id] < totalPictures[id]) {

						center.tween('margin-left', (60-activePicture[id]*650));

						activePicture[id]++;
						nextPicture = activePicture[id]+1;
						if (this.getParent('.slideshow').getElementById('p-'+id+'-'+nextPicture)) {
							if (!$('p-'+id+'-'+nextPicture).get('src')) {
								$('p-'+id+'-'+nextPicture).set('src',pictureFiles[id][nextPicture]);
							}
						}

						el3.removeClass('slideshowLinkInactive');
						if (activePicture[id] == totalPictures[id]) {
							this.addClass('slideshowLinkInactive');
						}

					}

					e.stop();

				});

			}

			alreadyOpen[id] = 1;

		},
		onBackground: function(tourTitle, tourInfo){
			tourTitle.getElement('img').setProperty('src', '/layout/images/smallArrowsNormal.png');
			//tourInfo.getElement('.slideshow').set('html', '&nbsp;');
			if (Browser.Engine.trident == true) {
				tourInfo.getElement('.slideshow').setStyle('display','none');
			}
		}
	});

	var addPictures = function(images,el1,el4,id) {

		var length = images.length;
		var count = 0;
		activePicture[id] = 1;
		totalPictures[id] = length;
		if (length <= 1) {
			el4.addClass('slideshowLinkInactive');
		}
		pictureFiles[id] = new Array();

		images.each(function(image) {

			var width = image.width;
			var height = image.height;
			var widthEff = 0;
			var heightEff = 0;
			var propMax = maxWidth/maxHeight;
			var propEff = width/height;

			if (propEff >= propMax) {
				widthEff = Math.min(width,maxWidth);
				heightEff = widthEff/propEff;
			} else {
				heightEff = Math.min(height,maxHeight);
				widthEff = heightEff*propEff;
			}
			widthEff = Math.floor(widthEff);
			heightEff = Math.floor(heightEff);

			count++;
			var imgEl1 = new Element('li', {'class': 'slideshowItem'});
			var imgEl2 = new Element('div', {'class': 'slideshowImageBox'}).inject(imgEl1);
			var imgEl5 = new Element('div', {'class': 'shadowedImage'}).inject(imgEl2);
			imgEl5.setStyle('width',widthEff);
			imgEl5.setStyle('height',heightEff);
			var imgEl3 = new Element('img', {'id': 'p-'+id+'-'+count, 'width': widthEff, 'height': heightEff}).inject(imgEl5);
			var imgEl4 = new Element('div', {'class': 'slideshowTextBox'}).inject(imgEl1);
			imgEl4.set('html', count+'/'+length);
			imgEl1.inject(el1);

			if (count < 3 || length < 20) {
				imgEl3.set('src',image.file);
			} else {
				pictureFiles[id][count] = image.file;
			}

		});

		return length;

	};

});