/*
 * SLIDESHOW
 * Author: Specto.si
 * Mootools version: 1.2.4
 * Script version: 1.0.0
 * Customization: Gorenjski Tisk
 * Customized for overlay
*/

/*
 * Setup
*/
var setup = new Array();

setup['transition']				= 9000;								// Time it takes to switch between slides
setup['container']				= 'slides';							// Global slide container
setup['switcher']				= 'img';							// Single slide container
setup['slideOverlay']			= 'jsSlideshowOverlay';				// Width of the navigation link
setup['slideTitleElement']		= 'jsSlideshowTitleElement';		// Slide title element
setup['slideTitleContainer']	= 'jsSlideshowTitleContainer';		// Slide title container
setup['navigationContainer']	= 'jsSlideshowNavigationContainer';	// Navigation link container
setup['navigationActive']		= 'jsSlideshowNavigationActive';	// Active navigation link
setup['navigationWidth']		= 35;								// Width of the navigation link

/*
 * Class
*/
var Slideshow = new Class
({
	/*
	 * Initialize
	 */
	initialize: function(setup)
	{
		// Objects
		this.setup = setup;
		this.container = $(this.setup['container']);
		this.switcher = this.container.getElements(this.setup['switcher']);
		this.slideTitleElement = $$('.' + this.setup['slideTitleElement']);
		this.slideTitleContainer = $(this.setup['slideTitleContainer']);
		this.slideOverlay = $(this.setup['slideOverlay']);
		this.index = 0;
		this.margin = 0;

		// Locals
		var navigation = [];

		// Create navigation links
		this.switcher.each(function(element, counter)
		{
			navigation.push(new Element('a',
			{
				text: counter + 1,
				href: '#',

				// If it is a first slide make the first navigation link active
				'class': (counter == 0 ? this.setup['navigationActive'] : ''),
				events:
				{
					click: function(element)
					{
						// Prevent default behaviour, stop the slideshow and show the relevant one
						if(element) { element.preventDefault(); }

						slideshow.stop();
						slideshow.show(counter);
					}
				},
				styles:
				{
					// Set the distance between navigation links
					left: ((counter + 1) * (this.setup['navigationWidth']))
				}

			}).inject($(this.setup['navigationContainer'])));

			// Make fist slide visible and hide others
			if(counter > 0) { element.set('opacity', 0); }
		});

		// Resume or pause slideshow on mouseenter and mouseleave event of slideshow container
		this.slideOverlay.addEvents
		({
			mouseenter: function() { slideshow.stop(); },
			mouseleave: function() { slideshow.start(); }
		});

		// Make local navigation an object
		this.navigation = navigation;

		// Set title position & write first entry
		var position = (this.switcher.length + 1) * (this.setup['navigationWidth']);
		this.slideTitleContainer.setStyle('left', position);
		this.slideTitleContainer.set('text', this.slideTitleElement[0].getProperty('title'));

		// Start slideshow
		this.start();
    },

	/*
	 * Start
	 */
	start: function()
	{
		// Create a periodical interval of showing slides
		this.interval = this.show.periodical(this.setup['transition'], this);
	},

	/*
	 * Stop
	 * Clears an interval
	 */
	stop: function() { $clear(this.interval); },

	/*
	 * Show slide
	 */
	show: function(counter)
	{
		// Fade out current slide and make current navigation link unactive
		this.switcher[this.index].fade('out');
		this.navigation[this.index].removeClass(this.setup['navigationActive']);
		this.navigation[this.index].removeClass(this.setup['navigationActive']);

		// Get new slide index
		this.index = ($defined(counter) ? counter : (this.index < this.switcher.length - 1 ? this.index + 1 : 0));

		// Fade in new slide and make new navigation link active
		this.switcher[this.index].fade('in');
		this.navigation[this.index].addClass(this.setup['navigationActive']);
		this.slideTitleContainer.set('text', this.slideTitleElement[this.index].getProperty('title'));

		this.slideOverlay.set('href', this.slideTitleElement[this.index].getProperty('alt'));

	}
});

// Instance
window.addEvent('domready', function()
{
	slideshow = new Slideshow(setup);
});

var slideshow = slideshow;