/*
 * GALLERY
 * Author: Specto.si
 * Mootools version: 1.2.4
 * Script version: 1.0.0
 * Customization: Gorenjski tisk
 * Thumbnail overlay
 * Lines: 117
*/

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

// Number of thumbnails to display
setup['limit'] = 6;

// Main container
setup['main'] = 'jsGalleryMain';
// Navigation container
setup['navigation'] = 'jsGalleryNavigation';
// Left & right arrows
setup['left'] = 'jsGalleryLeft';
setup['right'] = 'jsGalleryRight';
// Thumbnail container
setup['thumbs'] = 'jsGalleryThumbs';
// Signle thumbnail
setup['thumb'] = 'jsGalleryThumb';
// Navigator container
setup['navigator'] = 'jsGalleryNavigator';

/*
 * Class
*/
var Gallery = new Class
({
	/*
	 * Initialize
	 */
	initialize: function(setup)
	{
		// Objects
		this.setup = setup;

		this.thumbs = $(this.setup['thumbs']).getElements('.' + this.setup['thumb']);

		this.numberOfThumbs = this.thumbs.length + 1;

		this.currentPosition = this.setup['limit'];

		this.currentSlide = 1;
		this.previousSlide = 1;

		this.arrowSlide = 1;

		this.previousArrowNumber = 1;

		this.activeImage = $$('#' + this.setup['main'] + ' img');

		this.left = 0;
		this.right = 1;

		$('jsGalleryLoader').setStyle('opacity', '0');

		// Limit number of thumbs
		this.thumbs.each(function(item, index)
		{
			index = (index + 1);

			if(index > this.setup['limit'])
			{
				item.setStyle('display', 'none');

			}

			if(index == this.setup['limit'])
			{
				item.setStyle('width', '75px');
			}

		}.bind(this));

		// Add mouse events to left & right arrows

		$(this.setup['left']).setStyle('opacity', '0.2');
		$(this.setup['right']).setStyle('opacity', '0.9');

		$(this.setup['right']).addEvents(
		{
			'mouseover': function()
			{
				$(this.setup['right']).setStyle('opacity', '1');
			}.bind(this),

			'mouseleave': function()
			{
				$(this.setup['right']).setStyle('opacity', '0.9');
			}.bind(this),

			'click': function()
			{
				this.showNext();
			}.bind(this)
		});

		// Create navigator
		this.numberOfSlides = ((this.numberOfThumbs - 1) / this.setup['limit']);

		this.numberOfSlides = Math.ceil(this.numberOfSlides);

		for(a = 0; a < this.numberOfSlides; a++)
		{
			var element = new Element('div');

		

			if(a == 0)
			{
				element.addClass('active');
			}

			element.inject(this.setup['navigator'], 'bottom');
		}

		
		var elements = $$('#jsGalleryNavigator div');

		elements.each(function(item, index)
		{
			index = index + 1;
			item.addEvent('click', function()
			{
				this.changeSlide(item, index);
			}.bind(this, item, index));
		}.bind(this));
		



		if(this.numberOfSlides == 1)
		{
			$$('#jsGalleryNavigator div').removeProperty('onclick');
			$$('#jsGalleryNavigator div').setStyle('cursor', 'default');
		}

		// Disable right arrow if there is less thumbs than limit
		if(this.currentPosition > this.numberOfThumbs - this.setup['limit'] && this.right == 1)
		{
			$(this.setup['right']).removeEvents('mouseover');
			$(this.setup['right']).removeEvents('mouseleave');
			$(this.setup['right']).removeEvents('click');

			$(this.setup['right']).setStyle('opacity', '0.2');
			$(this.setup['right']).setStyle('cursor', 'default');

			this.right = 0;
		}
    },

	showNext: function(slide)
	{
		if(slide)
		{
			this.currentSlide = slide;
			this.test = this.currentPosition;
			this.currentPosition = slide * this.setup['limit'] - this.setup['limit'];
		}
		else
		{
			this.currentSlide = this.currentSlide + 1;
		}
		
		// Show next set of thumbnails
		this.thumbs.each(function(item, index)
		{

			index = (index + 1);

			if(index <= this.currentPosition)
			{
				item.set('slide', {mode: 'horizontal', duration: 200, onComplete: hide(this, item), transition: Fx.Transitions.linear});
				item.slide('show').slide('out');
			}

			function hide(inherit, item)
			{
				if(index <= inherit.currentPosition - inherit.setup['limit'] && !slide)
				{
					item.setStyle('display', 'none');
				}

				
				if(index <= inherit.currentPosition && slide)
				{
					item.setStyle('display', 'none');
				}


				if(index > inherit.test - inherit.setup['limit'] && index <= inherit.test && slide)
				{
					item.setStyle('display', 'block');
				}
			}

			if(index > this.currentPosition && index <= this.currentPosition + this.setup['limit'])
			{
				item.setStyle('display', 'block');
				item.set('slide', {mode: 'horizontal', duration: 800, transition: 'bounce:out'});
				item.slide('hide').slide('in');

			}

		}.bind(this));

		this.currentPosition = this.currentPosition + this.setup['limit'];
		// if(this.currentPosition > this.numberOfThumbs - this.setup['limit'] && this.right == 1)
		if(this.currentPosition > this.numberOfThumbs && this.right == 1)
		{
			$(this.setup['right']).removeEvents('mouseover');
			$(this.setup['right']).removeEvents('mouseleave');
			$(this.setup['right']).removeEvents('click');

			$(this.setup['right']).setStyle('opacity', '0.2');
			$(this.setup['right']).setStyle('cursor', 'default');

			this.right = 0;
		}

		if(this.currentPosition > this.setup['limit'] && this.left == 0)
		{
			$(this.setup['left']).addEvents(
			{
				'mouseover': function()
				{
					$(this.setup['left']).setStyle('opacity', '1');
				}.bind(this),

				'mouseleave': function()
				{
					$(this.setup['left']).setStyle('opacity', '0.9');
				}.bind(this),

				'click': function()
				{
					this.showPrevious();
				}.bind(this)
			});

			$(this.setup['left']).setStyle('opacity', '0.9');
			$(this.setup['left']).setStyle('cursor', 'pointer');

			this.left = 1;
		}

		if(!slide)
		{
			$$('#' + this.setup['navigator'] + ' div').removeClass('active');

			$$('#' + this.setup['navigator'] + ' div').each(function(item, index)
			{
				index = index + 1;
				
				if(this.currentSlide == index)
				{
					item.addClass('active');
				}
			}.bind(this));
		}

		if(this.arrowSlide != this.currentSlide)
		{
			$('jsGalleryPosition').setStyle('display', 'none');
			$('jsGalleryPosition').morph({opacity: [1, 0]});
		}
		else
		{
			$('jsGalleryPosition').setStyle('display', 'block');
			$('jsGalleryPosition').morph({opacity: [0, 1]});
		}

	},

	showPrevious: function(slide)
	{
		this.previousPosition = this.currentPosition - this.setup['limit'];

		if(slide)
		{
			this.currentSlide = slide;
			this.currentPosition = this.setup['limit'] * slide;
		}
		else
		{
			this.currentSlide = this.currentSlide - 1;
			this.currentPosition = this.currentPosition - this.setup['limit'];
		}

		// Show previous set of thumbnails
		this.thumbs.each(function(item, index)
		{
			index = (index + 1);

			if((index > this.currentPosition && index <= this.currentPosition + this.setup['limit'] && !slide) || (index > this.previousPosition && index <= this.previousPosition + this.setup['limit'] && slide))
			{
				item.set('slide', {mode: 'horizontal', duration: 100, transition: Fx.Transitions.linear});
				item.slide('show').slide('out');
			}

			if(index <= this.currentPosition && index > this.currentPosition - this.setup['limit'])
			{
				item.setStyle('display', 'block');
				item.set('slide', {mode: 'horizontal', duration: 800, transition: 'bounce:out'});
				item.slide('hide').slide('in');
			}

		}.bind(this));

		if(this.currentPosition <= this.setup['limit'])
		{
			$(this.setup['left']).removeEvents('mouseover');
			$(this.setup['left']).removeEvents('mouseleave');
			$(this.setup['left']).removeEvents('click');

			$(this.setup['left']).setStyle('opacity', '0.2');
			$(this.setup['left']).setStyle('cursor', 'default');

			this.left = 0;
		}

		if(this.currentPosition >= this.setup['limit'] && this.right == 0)
		{
			$(this.setup['right']).addEvents(
			{
				'mouseover': function()
				{
					$(this.setup['right']).setStyle('opacity', '1');
				}.bind(this),

				'mouseleave': function()
				{
					$(this.setup['right']).setStyle('opacity', '0.9');
				}.bind(this),

				'click': function()
				{
					this.showNext();
				}.bind(this)
			});

			$(this.setup['right']).setStyle('opacity', '0.9');
			$(this.setup['right']).setStyle('cursor', 'pointer');

			this.right = 1;
		}


		if(!slide)
		{
			$$('#' + this.setup['navigator'] + ' div').removeClass('active');

			$$('#' + this.setup['navigator'] + ' div').each(function(item, index)
			{
				index = index + 1;

				if(this.currentSlide == index)
				{
					item.addClass('active');
				}
			}.bind(this));
		}


		if(this.arrowSlide != this.currentSlide)
		{
			$('jsGalleryPosition').setStyle('display', 'none');
			$('jsGalleryPosition').morph({opacity: [1, 0]});
		}
		else
		{
			$('jsGalleryPosition').setStyle('display', 'block');
			$('jsGalleryPosition').morph({opacity: [0, 1]});
		}


	},

	changeSlide: function(element, slide)
	{
		if(this.previousSlide < slide)
		{
			this.showNext(slide);
		}
		else
		{
			if(this.previousSlide != slide)
			{
				this.showPrevious(slide);
			}
		}

		$$('#' + this.setup['navigator'] + ' div').removeClass('active');
		element.addClass('active');

		this.previousSlide = slide;
	},

	showImage: function(image, navigator)
	{
		
		if(this.currentSlide != 1)
		{
			navigator = navigator - this.setup['limit'] * (this.currentSlide - 1);
		}
		
		var difference = (navigator - this.previousArrowNumber);

		if(difference < 0) { difference = difference - (difference * 2); }

		if(this.previousArrowNumber < navigator)
		{
			this.elementPosition = $('jsGalleryPosition').getStyle('margin-left').toInt() + 80 * difference;
		}
		else
		{
			this.elementPosition = $('jsGalleryPosition').getStyle('margin-left').toInt() - 80 * difference;
		}

		this.arrowSlide = this.currentSlide;

		$('jsGalleryPosition').setStyle('opacity', '0');

		$('jsGalleryPosition').setStyle('display', 'block');

		$('jsGalleryPosition').setStyle('margin-left', this.elementPosition);

		$('jsGalleryPosition').morph({opacity: [0, 1]});

		//$('jsGalleryLoader').setStyle('display', 'block');
		//$('jsGalleryLoader').setStyle('opacity', '1');
		$('jsGalleryLoader').set('morph', {duration: 150, transition: Fx.Transitions.linear});

		(function(){
			$('jsGalleryLoader').morph({opacity: [0, 1]});
		}).delay(150);

		new Fx.Morph($(this.setup['main'], image),
		{
			duration: 300,
			transition: Fx.Transitions.linear
		}).start({ 'opacity': [1, 0] }).chain(function()
		{
			$('jsGalleryImage').dispose();

			new Element('img', {src: image, id: 'jsGalleryImage', alt: ''}).inject('jsGalleryMain', 'bottom');

			new Asset.images(image, {
				onProgress: function()
				{
					
				},
				onComplete: function()
				{

					$('jsGalleryLoader').set('morph', {duration: 150, transition: Fx.Transitions.linear});

					$('jsGalleryLoader').morph({opacity: [1, 0]});

					this.start({ 'opacity': [0, 1] });
					//$('jsGalleryLoader').setStyle('display', 'none');


					//$('jsGalleryLoader').setStyle('opacity', '0');
				}.bind(this)
			});


			/*
			new Asset.image(image, {onLoad: preload.bind(this)(), onComplete: display.bind(this)()});

			function preload()
			{
				$$('#jsGalleryImage').dispose();
				new Element('img', {src: image, id: 'jsGalleryImage', alt: ''}).inject('jsGalleryMain', 'bottom');
			}

			function display()
			{	
				(function()
				{
					this.start({ 'opacity': [0, 1] });
				}).bind(this).delay(100);
			}
			*/



		});

		this.previousArrowNumber = navigator;

	}
});

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

var gallery = gallery;