var SlideShow = Class.create({
	
	initialize: function(slider)
	{
		this.Slider = slider; 									// horizontal moving images container
		this.Data = false; 										// array of images to show
		this.Folder = false;									// folder to load images from
		this.slideSize = 'large';								// size of the images in the slide
		this.defaultWidth = 900;								// default width of empty slide elements
		this.sliderOffset = parseInt(this.Slider.style.left);	// pixels scrolled
		this.currentSlide = false;								// currently clicked slide
		$('next').observe('click', this.slideToNext.bind(this));
		$('prev').observe('click', this.slideToPrevious.bind(this));
	},
	
	createSlides: function()									//	CREATE A SLIDE FOR EVERY IMAGE IN THE DATA ARRAY
	{
		this.reset();											// reset any current slideshow
		var Slider = this.Slider;
		var i = 0;
		var f = this.Folder;
		var d = this.Data;
		var w = this.defaultWidth;
		d.each(function(item) {
			var slide = new Element('div', { 'id': 's' + i, 'style': 'width: ' + w + 'px; height: 600px;' });
			Slider.insert(slide);
			slide.addClassName('slide');
			i++;
		});
		this.currentSlide = this.Slider.childElements()[0];						// set the first slide as current slide
		this.currentSlide.addClassName('active');
		this.fillSlides();
		$$('.sizes')[0].appear(2);												// load images for all slides in the viewport
	},
	
	fillSlides: function()														// LOAD ALL IMAGES INSIDE THE SLIDESHOW VIEWPORT
	{
		var folder = this.Folder;												// current folder to load images from
		var data = this.Data;
		var size = this.slideSize;
		var viewportWidth = document.viewport.getDimensions().width;			// viewport width
		var slides = this.Slider.childElements();
		
		slides.each(function(item){												// look in every slide if it is viewable
			if (item.childElements().length == 0 && item.viewportOffset().left < (viewportWidth - 20) && data)
			{	// if no image is loaded and is in the viewport and there slidehow data is set, load the image
				
				var file = data[Number(item.id.substr(1))];
				var imgSrc = '/img/' + folder + '/' + size + file + '.jpg';
				
				var loader = new Image();
				loader.src = imgSrc;
				
				var img = new Element('img', { 'src': loader.src, 'alt': '', 'style': 'display:none', 'id': data[Number(item.id.substr(1))] });
				if (size == 'large')
				{
					img.observe('click', this.slideTo.bind(this));
				}
				else
				{
					img.observe('click', this.magnify.bind(this));
				}
				
				var spinner = new Element('img', { 'src': '/img/ajaxloader.gif', 'alt': 'loading photo', 'class': 'spinner' });
				item.insert(spinner);
				
				if (size == 'large')
				{
					var overlay = new Element('div');
					overlay.addClassName('overlay');
					overlay.observe('click', this.slideTo.bind(this));
					var index = new Element('div');
					var indexFromId = Number(item.id.substr(1)) + 1;
					index.innerHTML = indexFromId + '/' + data.length;
				}
				
				
				loader.onload = function()
				{
					item.down(0).remove();
					item.insert(img);
					if (size == 'large')
					{	
						item.insert(index);
						index.addClassName('index');
						item.insert(overlay);
						Cufon.refresh();
					}	
					img.appear( {
						afterFinish: function() { item.setStyle({ width: 'auto', height: 'auto' }) }
					});
				};
			}
		}.bind(this));
		
	},
	
	slideTo: function(e)
	{
		this.slideToSlide(Event.element(e).up(0));
	},
	
	slideToPrevious: function()
	{
		if (this.currentSlide.previous())
			this.slideToSlide(this.currentSlide.previous());
	},
	
	slideToNext: function()
	{
		if (this.currentSlide.next())
			this.slideToSlide(this.currentSlide.next());
	},
	
	slideToSlide: function(image)														// SLIDESHOW MOVING
	{
		this.currentSlide.removeClassName('active');
		var me = image;																// clicked slide
		if (me == this.currentSlide)
		{
			me = me.next();
		}
		var gap = 80;
		if (me.previousSiblings().length == 0) gap = 20;
		var slideshowOffset = $('slideshowWrapper').viewportOffset().left + gap;	// left slideshow stop point
		
		if (me != this.currentSlide)												// if not the current slide is clicked
		{
			var myOffset = me.viewportOffset().left;
			var movement = ( (myOffset - slideshowOffset) * -1 );					// movement to the left in pixels
			this.currentSlide = me;													// set the current slide
			this.currentSlide.addClassName('active');
			new Effect.Move(this.Slider, {											// move slider
				x: movement,
				y: 0,
				mode: 'relative',
				transition: Effect.Transitions.sinoidal,
				duration: 2.0,
				afterFinish: this.fillSlides.bind(this)
			});
		}
		
	},
	
	magnify: function(e)
	{
		// this.loading.show();
		var loading = new Element('img', { src: '/img/ajaxloader.gif', style: 'position: absolute; top: 10px; left: 10px' });
		var previewImageSrc = '/img/' + this.Folder + '/large' + Event.element(e).id + '.jpg';
		var previewContainer = new Element('div', { id: 'preview', style: 'position: absolute; top: 0px; right: 0; bottom: 0; left: 242px; background-color: #fff; z-index: 100;' });
		var closeButton = new Element('div', { style: 'position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: url(/img/close.png) no-repeat top left; z-index: 1000; cursor: pointer; cursor: hand;' });
		$$('body')[0].insert(previewContainer);
		previewContainer.insert(closeButton);
		previewContainer.insert(loading);
			
		var loader = new Image();
		loader.src = previewImageSrc;
		var previewImage = new Element('img', { src: loader.src, style: 'margin: 60px 0 0 20px' });
		loader.onload = function()
		{
			previewContainer.insert(previewImage);
			loading.remove();
		}.bind(this)
		
		previewContainer.observe('click', function() {
			previewContainer.remove();
		});
		
		
	},

	
	changeSize: function(size, defaultWidth)														// CHANGE THE IMAGE SIZE
	{
		var wrapper = $$('body')[0];
		if (size == 'small' && this.sliderSize != 'small')
		{
			wrapper.addClassName('small');
			$('prev').hide();
			$('next').hide();
			$('small').hide();
			$('large').show();
		}
		else if (size == 'large' && this.sliderSize != 'large')
		{
			wrapper.removeClassName('small');
			$('prev').show();
			$('next').show();
			$('small').show();
			$('large').hide();
		}
		
		this.defaultWidth = defaultWidth;
		this.slideSize = size;
		if (this.Data)
		{
			this.createSlides();
		}
	},
	
	setDefaultWidth: function(width)												// SETT THE DEFAULT WIDTH OF EMPTY SLIDES
	{
		this.defaultWidth = width;
	},
	
	reset: function()																// RESET THE SLIDESHOW
	{
		this.Slider.update('');
		this.Slider.style.left = 0;
	}
	
});