var Gallery = Class.create ({
	
	initialize: function(container)
	{
		this.gallery = container;
		
		if (!this.gallery) {
			return false;
		}
		
		this.load();
	},
	
	load: function()
	{
		this.gallery.addClassName('loading');
		
		this.images = this.gallery.select('img');
		this.loadedCount = 0;
		
		for(i in this.images) 
		{
			var image = new Image();
			image.observe('load', this.imageLoaded.bind(this));
			image.src = this.images[i].src;
		}
	},
	
	imageLoaded: function()
	{
		if (++this.loadedCount == this.images.size())
		{
			this.gallery.removeClassName('loading');
			this.start();
		}
	},
	
	start: function()
	{
		//remove No JS class
		$$('div.noJS').each(function(container)
		{			
			container.removeClassName("noJS");
		});
		
		this.calculateScrollerHeight();
		this.calculateScrollerContentWidth();
		
		Event.observe(window, "resize", function() {
			this.calculateScrollerHeight();
			this.calculateScrollerContentWidth();
		}.bind(this));
	},
	
	calculateScrollerContentWidth: function()
	{
		var width = 0;
		
		this.gallery.select('img').each(function(container, index)
		{			
			width = width + container.getWidth() + 20;
		}.bind(this));
		
		
		this.gallery.select('div.scrollerContent')[0].setStyle({width: width + "px"});
		width = width - 10;
		
		this.gallery.setStyle({width: width + "px"});
		
		return width;
	},
	
	calculateScrollerHeight: function()
	{
		height = document.viewport.getDimensions().height - 380;
		
		if(height < 200)
		{
			height = 200;
		}
		
		this.gallery.select('div.scrollerContent')[0].setStyle({height: height + "px"});
	}
	
});


document.observe('dom:loaded', function()
{	
	if ($("gallery")) {		
		new Gallery($('gallery'));
	}
});