var HgArtistMenu = new Class({

	initialize: function(element)
	{
		this.$_element = $(element);
		this.$_container = element.getElement('.Container');
		this.$_view = this.$_container.getElement('.View');
		this.$_columns = this.$_view.getElements('.Column');
		this.$_artists = this.$_columns[0].getElements('.Artist');
		
		
		this.$_element.setStyle('display', 'block');
		
		if (this.$_container.hasClass('Floating'))
			this.$_element.setStyle('position', 'absolute');
		
		
		var
			itemCount = this.$_artists.length,
			colCount = this.$_columns.length,
			rowCount = Math.floor(itemCount / colCount),
			remainder = itemCount % colCount,
			currentColumn = 0;
		
		for (var i = 0, r = 0; i < itemCount; i++, r++)
		{
			if (r > 0 && (r % (rowCount + (remainder > 0 ? 1 : 0)) == 0))
			{
				if (remainder > 0)
					remainder--;
			
				currentColumn++;					
				r = 0;
			}
			
			this.$_artists[i].injectInside(this.$_columns[currentColumn]);
		}	
			
		var columnHeight = this.$_columns[0].getSize().scrollSize.y;
		
		this.$_columns[0].setStyle('height', columnHeight);
		this.$_view.setStyle('height', columnHeight + 10);
		this.$_container.setStyle('height', this.$_view.getSize().scrollSize.y);
		
		this.$_effects = {
			'Close'	: new Fx.Styles(this.$_container, {
				transition	: Fx.Transitions.Quad.easeIn,
				duration	: 250
			}),
			
			'Open'	: new Fx.Styles(this.$_container, {
				transition	: Fx.Transitions.Quad.easeOut,
				duration	: 200
			})
		};
		
		this.$_tab = new Element('a')
			.setProperties({
				'title'	: 'Artist Menu'
			})
			.addClass('Tab Trigger')
			.addClass('HiddenText')
			.setStyle('opacity', .53)
			.injectTop(this.$_element)
		;
		
		this.$_element.getElements('.Trigger')
			.addEvent('click', this._OnTabClick.bindWithEvent(this))
		;
		
		
		if (!this.$_container.hasClass('Open'))
			this.Close(true);
		else
			this.Open(true);
	},
	
	Close: function(instant)
	{
		this.$_effects['Open'].stop();
		
		var styles = {
			'height'	: 0,
			'opacity'	: 0
		};
		
		if (instant)
			this.$_container.setStyles(styles);
		else
			this.$_effects['Close'].start(styles);
		
		this.$_open = false;
		this.$_tab.removeClass('TabOpen').setStyle('opacity',.53);
		
		return this;
	},
	
	Open: function(instant)
	{
		this.$_effects['Close'].stop();
		
		var styles = {
			'height'	: this.$_view.getSize().scrollSize.y,
			'opacity'	: 1
		};
			
		if (instant)
			this.$_container.setStyles(styles);
		else
			this.$_effects['Open'].start(styles);
		
		this.$_open = true;
		this.$_tab.addClass('TabOpen').setStyle('opacity',1);
		
		return this;
	},
	
	Toggle: function()
	{
		return this.$_open ? this.Close() : this.Open();
	},
	
	_OnTabClick: function(e)
	{
		e.stop();
		return this.Toggle();
	}
});

window.addEvent('domready', function()
{
	$artistBanner = $('ArtistBanner');
	
	if ($artistBanner)
	{
		$artistBanner.getElement('.Overlay').setStyles({
			'opacity': .53,
			'background-color':'white'
		});
		
		$artistBanner.getElement('h1').setStyles({
			'opacity':.9999
		});
	}
	
	var elements = $$('.ArtistMenu');
	
	for (var i = 0, len = elements.length; i < len; i++)
	{
		new HgArtistMenu(elements[i]);
	}
});