// JavaScript Document
window.addEvent('domready', function(){
	
	// Featured images pane
	myFeaturedImages = new FeaturedImages({
		containerId: 'featured-images-basic',
		cssRoot: baseUrl,
		frameOffset: 10
	});
		
		
	// IE6 fix. *cry*	
	if(Browser.Engine.trident4 && DD_belatedPNG)
	{
		DD_belatedPNG.fix('#home-header');
		$$('.image-container').adopt($('home-image-mask'));
		$('home-image-mask').destroy();

		myFeaturedImages.options.frameOffset = 0;

		$('featured-images').setStyles({
			'width': '900px',
			'left': '40px'
		});
		$('home-image-container').setStyle('width', '850px');
		$$('.scroll-pane').setStyles({
			'left': '0',
			'top':  '0'
		});
	}
	
});

/**
 * The main Featured Images class
 * 
 * @return
 */
var FeaturedImages = new Class({
	
	Implements: Options,
	options: {
		containerId: '',
		cssRoot: 	 '',
		frameOffset: 10
	},

	position: 0,
	numImages: null,
	tween: null,
	scrollPane: null,
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.featuredImages = $(this.options.containerId);
		this.featuredImages.set('id', 'featured-images');
		this.setupImages();
	},
	
	setupImages: function(cssRoot)
	{		
		// The original HTML structure is fine
		this.originalImages = this.featuredImages.getElements('div');
		this.numImages = this.originalImages.length;


		// Create the left and right buttons
		this.leftButton = new Element('div', {
			'class': 'navigation-button'
		});
		this.leftButton.adopt(new Element('a', {
			'href': '#'
		}));
		
		this.rightButton = this.leftButton.clone();
		
		this.leftButton.addClass('left');
		this.leftButton.addEvent('click', this.slideRight.bind(this));
		this.rightButton.addClass('right');
		this.rightButton.addEvent('click', this.slideLeft.bind(this));
		
		
		// Setup the image mask
		this.imageMask = new Element('div', {
			'id' : 'home-image-mask',
			'class': 'image-mask'
		});
		
		// The container will contain all the mask and scroll pane
		this.imageContainer = new Element('div', {
			'id' : 'home-image-container',
			'class': 'image-container'
		});
		
		this.scrollPane = new Element('div', {
			'class': 'scroll-pane'
		});
		
		
		// Move the elements to their correct position
		this.featuredImages.adopt(this.leftButton, this.imageContainer, this.rightButton);		
		
		this.imageContainer.adopt(this.imageMask, this.scrollPane);
		
		this.scrollPane.adopt(this.originalImages);
		
		// Replace the small images with larger ones
		this.setupScrollPane();
		
		this.scrollPane.set('tween', { fps: '25', duration: 'long', link: 'cancel' });
		this.leftButton.getElement('a').addClass('inactive');
				
	},
	
	/**
	 * Replaces all of the smaller images with their larger counterparts
	 */
	setupScrollPane: function()
	{
		this.images = this.originalImages.getElements('img');
		
		this.images.each(function(img, index){
			var newSrc = String(img.getProperty('src'));
			newSrc = newSrc.replace('small/', '');
			img.setProperties({
				'src': newSrc,
				'width': 850,
				'height': 382
			});
		});
		
		// Set the width of the scroll pane
		this.scrollPane.setStyle('width', this.images.length * 850);
	},
	
	slideLeft: function(event)
	{
		event.preventDefault();
		this.position = Math.min(this.position + 1, this.numImages - 1);
		var newLocation = this.options.frameOffset - (this.position * 850);
		this.scrollPane.tween('left', newLocation);
		
		if(this.position == this.numImages - 1)
		{
			this.rightButton.getElement('a').addClass('inactive');
		}
		this.leftButton.getElement('a').removeClass('inactive');
	},
	
	slideRight: function(event)
	{
		event.preventDefault();
		this.position = Math.max(this.position - 1, 0);	
		var newLocation = this.options.frameOffset - (this.position * 850);
		this.scrollPane.tween('left', newLocation);
		
		if(this.position == 0)
		{
			this.leftButton.getElement('a').addClass('inactive');
		}
		this.rightButton.getElement('a').removeClass('inactive');
	}
	
});