if (!FsNet) var FsNet = { };

FsNet.SlideShow = Class.create({
  initialize: function(slideElement) {
		this.slideElement = slideElement;
		
		// enable background image caching in IE
		if (Prototype.Browser.IE) {
			this.setBackgroundImageCache(true);
			Event.observe(window, 'unload', this.setBackgroundImageCache.bind(this, false));
		}
		
		this.populateData();
		
		if (this.galleryData.length > 0) {
			this.constructFrame();
			this.constructPreview();
			
			this.currentImageNumber = -1;
			this.showImage(0, true);
		}
	},

	populateData: function() {
		this.galleryData = [];
		currentArrayPlace = 0;
		data = this.galleryData;
		this.slideElement.getElementsBySelector('div.slideshowimage').each(function(el) {
			var descriptionElement = el.getElementsBySelector('p.description');
			var titleElement = el.getElementsBySelector('h3');
			if (descriptionElement.size() == 0) {
				description = "";
			} else {
				description = descriptionElement.first().innerHTML;
			}
			elementDict = {
				number: 			currentArrayPlace,
				image:				el.getElementsBySelector('span.full')[0].innerHTML,
				thumbnail: 			el.getElementsBySelector('span.thumbnail')[0].innerHTML,
				download: 			el.getElementsBySelector('span.download')[0].innerHTML,
				title: 				el.getElementsBySelector('h3')[0].innerHTML,
				description:		description
			};
			data[currentArrayPlace] = elementDict;
			currentArrayPlace++;
		});
		this.galleryData = data;
	},
	
	constructFrame: function() {
		this.fullImageBActive = false;
		
		var frame = Builder.node('div', {className: 'frame'});
		
		this.fullImageA = Builder.node('div', {className: 'fullimage'});
		Element.setStyle(this.fullImageA, {
				'backgroundImage': "url('" + this.galleryData[0].image + "')",
				'opacity': '0'
			});
		frame.appendChild(this.fullImageA);
		
		this.fullImageB = Builder.node('div', {className: 'fullimage'});
		if (this.galleryData.size() > 1) {
			Element.setStyle(this.fullImageB, {
					'backgroundImage': "url('" + this.galleryData[1].image + "')",
					'opacity': '0'
				});
		} else {
			Element.setStyle(this.fullImageB, {
				'backgroundImage': "url('" + this.galleryData[0].image + "')",
				'opacity': '0'
			});
		}
		frame.appendChild(this.fullImageB);

		this.previousLink = Builder.node('a', {className: 'previous'});
		Element.setStyle(this.previousLink, {'opacity': '0.3'});
		frame.appendChild(this.previousLink);
		Event.observe(this.previousLink, 'mouseover', this.previousOver.bindAsEventListener(this));
		Event.observe(this.previousLink, 'mouseout', this.previousOut.bindAsEventListener(this));
		Event.observe(this.previousLink, 'click', this.previousClick.bindAsEventListener(this));
		
		this.nextLink = Builder.node('a', {className: 'next'});
		Element.setStyle(this.nextLink, {'opacity': '0.3'});
		frame.appendChild(this.nextLink);
		Event.observe(this.nextLink, 'mouseover', this.nextOver.bindAsEventListener(this));
		Event.observe(this.nextLink, 'mouseout', this.nextOut.bindAsEventListener(this));
		Event.observe(this.nextLink, 'click', this.nextClick.bindAsEventListener(this));
		
		this.titleSlider = Builder.node('div', {className: 'title'});
		this.titleSlider.appendChild(Builder.node('span', {className: 'titletext'}));
		this.titleSlider.appendChild(Builder.node('p', {className: 'description'}));
		this.titleSlider.appendChild(Builder.node('a', {className: 'download', target: '_blank', href: '#'}));
		frame.appendChild(this.titleSlider);
		
		this.slideElement.insertBefore(frame, this.slideElement.firstChild);
	},
	
	constructPreview: function() {
		this.previewImages = [];
		var preview = Builder.node('div', {className: 'preview'});
		for(i=0; i<this.galleryData.length; i++) {
			var innerNode = Builder.node('div', {className: 'innerpreviewimage'});
			Element.setStyle(innerNode, {
					'backgroundImage': "url('" + this.galleryData[i].thumbnail + "')",
					'opacity': '0.5'
				});
			Event.observe(innerNode, 'mouseover',	this.previewOver.bindAsEventListener(this,i));
			Event.observe(innerNode, 'mouseout',	this.previewOut.bindAsEventListener(this,i));
			Event.observe(innerNode, 'click',			this.previewClick.bindAsEventListener(this,i));
			
			var node = Builder.node('div', {className: 'previewimage'});
			node.appendChild(innerNode);
			
			this.previewImages[i] = node;
			preview.appendChild(node);
		}
		preview.appendChild(Builder.node('div', {style: 'clear: left;'}));
		this.slideElement.insertBefore(preview, this.slideElement.firstChild.nextSibling);
	},
	
	showImage: function(number, updatePreview) {
		if (number != this.currentImageNumber) {
			// title
			this.hideTitle();
			
			// preview image
			if (this.currentImageNumber >= 0) {
				this.previewInactive(this.currentImageNumber);
			}
			if (updatePreview) {
				this.previewActive(number);
			}
			Element.removeClassName(this.previewImages[this.currentImageNumber], 'active');
			Element.addClassName(this.previewImages[number], 'active');
			
			// full image
			if (this.fullImageBActive) {
				Element.setStyle(this.fullImageA, {
						'backgroundImage': "url('" + this.galleryData[number].image + "')",
						'opacity': 1
					});
				new Effect.Opacity(this.fullImageB, {duration: 0.5, from: 1, to: 0, queue: {position: 'end', scope: 'frame', limit: 2}});
				this.fullImageBActive = false;
			} else {
				Element.setStyle(this.fullImageB, {
						'backgroundImage': "url('" + this.galleryData[number].image + "')"
					});
				new Effect.Opacity(this.fullImageB, {duration: 0.5, from: 0, to: 1, queue: {position: 'end', scope: 'frame', limit: 2}});
				this.fullImageBActive = true;
			}
			
			// title
			this.showTitle.bind(this, number).delay(1);
			
			this.currentImageNumber = number;
		}
	},
	
	showTitle: function(number) {
		this.titleSlider.firstChild.innerHTML = this.galleryData[number].title;
		if (!this.galleryData[number].description.empty()) {
			this.titleSlider.getElementsByTagName('p')[0].show();
		} else {
			this.titleSlider.getElementsByTagName('p')[0].hide();
		}
		this.titleSlider.getElementsByTagName('p')[0].innerHTML = this.galleryData[number].description;
		this.titleSlider.lastChild.href = this.galleryData[number].download;
		Effect.Appear(this.titleSlider, {duration: 0.5, to: 0.7, queue: {position: 'end', scope: 'title'}});
	},
	
	hideTitle: function() {
		var queue = Effect.Queues.get('title');
		queue.each(function(effect) { effect.cancel(); });
		Element.setStyle(this.titleSlider, {'opacity': 0});
	},
	
	previewActive: function(number) {
		new Effect.Opacity(this.previewImages[number].firstChild, {duration: 0.5, from: 0.5, to: 1.0, queue: {position: 'end', scope: 'scope_preview'+number}});
	},
	
	previewInactive: function(number) {
		var queue = Effect.Queues.get('scope_preview'+number);
		queue.each(function(effect) { effect.cancel(); });
		new Effect.Opacity(this.previewImages[number].firstChild, {duration: 0.5, from: 1.0, to: 0.5, queue: {position: 'end', scope: 'scope_preview'+number}});
	},
	
	previewOver: function(e, number) {
		if (number != this.currentImageNumber) {
			this.previewActive(number);
		}
	},
	
	previewOut: function(e, number) {
		if (number != this.currentImageNumber) {
			this.previewInactive(number);
		}
	},
	
	previewClick: function(e, number) {
		this.showImage(number, false);
	},
	
	previousOver: function(e) {
		Element.setStyle(this.previousLink, {'opacity': 1});
	},
	
	previousOut: function(e) {
		Element.setStyle(this.previousLink, {'opacity': 0.3});
	},
	
	previousClick: function(e) {
		if (this.currentImageNumber - 1 >= 0) {
			this.showImage(this.currentImageNumber - 1, true);
		} else {
			this.showImage(this.galleryData.length - 1, true);
		}
	},
	
	nextOver: function(e) {
		Element.setStyle(this.nextLink, {'opacity': 1});
	},
	
	nextOut: function(e) {
		Element.setStyle(this.nextLink, {'opacity': 0.3});
	},
	
	nextClick: function(e) {
		if (this.currentImageNumber + 1 < this.galleryData.length) {
			this.showImage(this.currentImageNumber + 1, true);
		} else {
			this.showImage(0, true);
		}
	},
	
	setBackgroundImageCache: function(value) {
		try { 
			document.execCommand('BackgroundImageCache', false, value); 
		} catch(e) {
			
		}
	}
});