/*

	Hi. This is a smart slideshow:
	
	Images with the same classname following the pattern "slide" + number of slideshow
	(start with 0) get grouped together into a nice slideshow. I still have to figure out
	how smart it actually is.
	
*/

var SmartSlides = new Class({
	
	initialize: function() {

		// get all images that have "slide" in class name
		this.allImgs = $$('img[class*=slide]');
		
		// create array to store images in
		this.slideImgs = new Array();
		
		// group images in slideImgs[]
		for (var i=0; i < this.allImgs.length; i++) {
			var id = (this.allImgs[i].className).match(/(slide)(\d+)/)[2];
			this.groupImgs(this.allImgs[i], id);
		};

		// create slide show containers and controls with respective images
		for (var i=0; i < this.slideImgs.length; i++) {
			this.createSlideShow(i);
		};
		
		// prepare slide indicator when all images are loaded
		window.addEvent('load',this.setupSlideIndicator.bind(this));
		
	},
	
	groupImgs: function(img, id) {
		
		// create new aray to group slide show images
		if (!this.slideImgs[id]) {

			// if it does not exist yet, create array
			this.slideImgs[id] = new Array();

			// create #slideShowContainer
			var slideShowContainer = new Element('div', {
				'class': 'slideShowContainer',
				'id': 'slideShow'+id
			});
			slideShowContainer.replaces(img);

			// prevent text selection on #slideShowContainer
			slideShowContainer.onselectstart = function() { return false; } // ie
			slideShowContainer.onmousedown = function() { return false; } // all the other kids

		}

		// push image into array
		this.slideImgs[id].push(img);
		
	},
	
	createSlideShow: function(id) {
		
		var slideCount = this.slideImgs[id].length;

		for (var i=0; i < slideCount; i++) {
			// put images into .slideShowContainer
			$$('.slideShowContainer')[id].appendChild(this.slideImgs[id][i]);
			// hide all images
			this.slideImgs[id][i].addClass('hidden');
		};

		// create slide show controls
		var btnNext = new Element('a', {
			'class': 'btnNextSlide imgrp',
			'title': 'show next image',
			'html': 'next',
			'events': {
				'click': function(){
					this.showImg(id,+1);
				}.bind(this)
			}
		});
		var btnPrev = new Element('a', {
			'class': 'btnPrevSlide imgrp',
			'title': 'show previous image',
			'html': 'previous',
			'events': {
				'click': function(){
					this.showImg(id,-1);
				}.bind(this)
			}
		});

		// create slide indicator
		var slideIndicator = new Element('div', {
			'class': 'slideIndicator',
			'html': '<span class="imgrp">'+ slideCount +' images</span>',
			'styles': {
				'opacity': 0
			}
		});

		// and put it all together
		$$('.slideShowContainer')[id].adopt([btnNext, slideIndicator, btnPrev]);

		// show first image
		this.slideImgs[id][0].toggleClass('hidden');
		this.slideImgs[id].current = 0;

	},
	
	setupSlideIndicator: function() {
		
		var slideIndicators = $$('.slideIndicator');
		
		for (var i=0; i < slideIndicators.length; i++) {
			var slideCount = slideIndicators[i].getParent().getElements('img').length;
			var marginX = ((slideIndicators[i].getParent().getElement('img').getSize().x) - (slideCount * 10)) / 2;
			slideIndicators[i].getElement('span').setStyle('margin','0 ' + marginX + 'px');
			slideIndicators[i].fade('in');
		};
		
	},
	
	showImg: function(slideShowId,direction) {
		
		// set current image position in array & hide current image first
		var currentImg = this.slideImgs[slideShowId].current;
		this.slideImgs[slideShowId][currentImg].setStyle('opacity','1');
		this.slideImgs[slideShowId][currentImg].fade('out');
		this.slideImgs[slideShowId][currentImg].toggleClass('hidden');

		// which image to show?
		var showImgNo = currentImg += direction;

		 // forward direction (and jump back to start)
		if (showImgNo >= this.slideImgs[slideShowId].length)
			showImgNo = 0;

		// backward direction (and jump back to end)
		if (showImgNo < 0)
			showImgNo = this.slideImgs[slideShowId].length-1;

		// show image
		this.slideImgs[slideShowId][showImgNo].setStyle('opacity','0');
		this.slideImgs[slideShowId][showImgNo].fade('in');
		this.slideImgs[slideShowId][showImgNo].toggleClass('hidden');

		// set current image position in array
		this.slideImgs[slideShowId].current = showImgNo;

		// apply change to slide indicator
		var currentSlideIndicator = $$('.slideShowContainer')[slideShowId].getElement('span');
		currentSlideIndicator.setStyle('background-position', showImgNo * 10 + 'px center');
		
	}
	
});