var SliderGallery = Class.create(
{
	initialize: function(gallery)
	{
		this.loadedImages = new Array();
	
		this.gallery = gallery;
		
		this.maxImageWidth = 200;
		
		this.start();
	},
	
	start: function()
	{
		this.container = this.gallery.getElementsBySelector('.sliderItems')[0];
		this.containerWidth = 0;
		
		this.build();
	},
	
	build: function()
	{
		this.gallery.setStyle({overflow: 'hidden', position: 'relative'});
		this.container.setStyle({width: '0', overflow: 'hidden', position: 'relative', left: 0 + 'px'});
		
		this.buildTrackHandle();
		this.buildContent();
		
		this.buildOverlayBubble();
	},
	
	buildTrackHandle: function()
	{
		this.trackArrowLeft = new Element('div', {className: 'sliderTrackArrowLeft'}).observe('click', this.arrowLeftClick.bindAsEventListener(this));
		this.trackArrowRight = new Element('div', {className: 'sliderTrackArrowRight'}).observe('click', this.arrowRightClick.bindAsEventListener(this));
		this.track = new Element('div', {className: 'sliderTrack'});
		
		this.handle = new Element('div', {className: 'sliderHandle'});
		this.handleInvisible = new Element('div', {className: 'sliderHandleInvisible'});
		
		this.track.appendChild(this.handle);
		this.track.appendChild(this.handleInvisible);
		
		this.gallery.appendChild(this.trackArrowLeft);
		this.gallery.appendChild(this.track);
		this.gallery.appendChild(this.trackArrowRight);
		
		this.slider = new Control.Slider(this.handleInvisible, this.track, {
			onSlide: this.handleMove.bindAsEventListener(this),
			onChange: this.handleMove.bindAsEventListener(this, true),
			range: $R(0,100)
		});
	},
	
	buildLabels: function()
	{
		this.labels = new Array();
		
		this.labels[this.labels.length] = new Element('span').setStyle({left: '30px'}).update('Products');
		this.labels[this.labels.length] = new Element('span').setStyle({left: '731px'}).update('Materials');
		
		for (var i=0; i<this.labels.length; i++)
		{
			this.labels[i].addClassName('label' + (i+1));
			this.labels[i].observe('click', this.handleJump.bindAsEventListener(this, i));
		
			this.track.appendChild(this.labels[i]);
		}
	},
	
	buildContent: function()
	{
		this.images = this.container.getElementsBySelector('img');
		
		if (this.images.length == 0)
		{
			this.buildContainers();
		}
		else
		{
			this.buildLabels();
			this.buildImages();
		}
	},
	
	buildContainers: function()
	{
		this.itemContainers = this.container.getElementsBySelector('li a');
		
		this.containerWidth = 0;
		
		for (var i=0; i<this.itemContainers.length; i++)
		{
			this.containerWidth += this.itemContainers[i].getWidth() + 10;
			this.calculateContainerHeight(this.itemContainers[i]);
		}
		
		this.setContainerWidth();
	},
	
	buildImages: function()
	{
		this.images = this.container.getElementsBySelector('img');
		
		for (var i=0; i<this.images.length; i++)
		{
			this.images[i].observe('load', this.calculateContainerWidth.bindAsEventListener(this, i));
			this.images[i].src = this.images[i].src;
			
			this.calculateContainerWidth(null, i);
		}
	},
	
	buildOverlayBubble: function()
	{
		this.bubble = new Element('div', {className: 'sliderOverlayBubble'}).update('Scroll to see more...').hide();
		this.gallery.appendChild(this.bubble);
		
		new PeriodicalExecuter(function(pe)
		{
			this.bubble.appear({to: 0.99, duration: 1});
		    pe.stop();
		    new PeriodicalExecuter(function(pe)
    		{
		    	this.removeBubble();
    		    pe.stop();
    		}.bind(this), 5);
		}.bind(this), 2);
	},
	
	calculateContainerWidth: function(event, i)
	{
		if (!this.loadedImages[i])
		{
			var imageSrc = this.images[i].src;
			
			var image = new Image();
			image.src = imageSrc;
			
			if (image.width != 0)
			{
				this.containerWidth += (image.width + 35);
				this.setContainerWidth();
				this.loadedImages[i] = true;
			}
		}
	},
	
	calculateContainerHeight: function(container)
	{
		var text = container.getElementsBySelector('span')[0];
		var textHeight = text.getHeight();
		var containerHeight = 93;
		
		var calc = (containerHeight / 2) - (textHeight / 2);
		
		text.setStyle({paddingTop: calc + 'px'});
	},
	
	setContainerWidth: function()
	{
		this.container.setStyle({width: (parseInt(this.containerWidth) + 10) + 'px'});
	},
	
	handleMove: function(value, animate)
	{
		this.handle.setStyle({left: this.handleInvisible.getStyle('left')});
	
		var leftValue = (value / this.slider.maximum) * 100;
		leftValue = isNaN(leftValue) ? 0 : leftValue;

		var destination = ((Math.round(leftValue) / 100) * (this.container.getWidth() - this.gallery.getWidth()));
		
		destination = destination < 0 ? 0 + 'px' : destination + 'px';
		
		if (animate)
		{
			new Effect.Morph(this.container, {
				style: 'left: -' + destination,
				duration: 0.5,
				transition: Effect.Transitions.sinoidal
			});
		}
		else
		{
			this.container.setStyle({left: '-' + destination});
		}
		
		if (this.bubble)
		{
			this.removeBubble();
		}
	},
	
	handleJump: function(event, labelIndex)
	{		
		var label = event.element();
		var labelLeft = parseInt(label.getStyle('left').replace('px', ''));
		
		var labelOffset = 0;
		
		for (var i=0; i<labelIndex; i++)
		{
			labelOffset += this.labels[i].getWidth();
		}
		
		var handleLeft = (((labelLeft + labelOffset) - ((this.handle.getWidth() / 2)) + (label.getWidth() / 2)) / (this.track.getWidth() - this.handle.getWidth()) * 100);
	
		this.slider.setValue(handleLeft);
	},
	
	arrowLeftClick: function(event)
	{
		this.slider.setValue(this.slider.value - 25);
	},
	
	arrowRightClick: function()
	{
		this.slider.setValue(this.slider.value + 25);
	},
	
	removeBubble: function()
	{
		this.bubble.fade({duration: 1, afterFinish: function()
		{
			this.bubble.remove();
		}.bind(this)});
	}
});

document.observe('dom:loaded', function()
{
	var galleries = new Array();
	
	$$('.sliderGallery').each(function(gallery)
	{
		galleries[galleries.length] = new SliderGallery(gallery);
	});
});