var AlbumGallery = Class.create(VideoGallery, {
	AlbumGalleryDivClassName : 'album_gallery_div',
	AlbumContainerClassName : 'album_container',
	ScrollingAlbumContainerClassName : 'scrolling_album_container',
	AlbumClassName : 'album',
	AlbumNameClassName : 'album_name_anchor',
	SeeAllDivClassName : 'see_all_div',

	initialize : function(albumGalleryDiv, artistsPage) {
		this.Title = new Element('h1').update('Albums');
		this.AlbumGalleryDiv = $(albumGalleryDiv).addClassName(this.AlbumGalleryDivClassName);
		this.ScrollingAlbumContainer = new Element('div').addClassName(this.ScrollingAlbumContainerClassName);
		this.AlbumContainer = new Element('div').addClassName(this.AlbumContainerClassName).insert(this.ScrollingAlbumContainer);
		this.ScrollIndex = 0;
		
		this.ScrollUpAnchor = new Element('a').writeAttribute({href:''}).update('&#x25b2').observe('click', function(event) {
			event.stop();
			
			var albums = this.ScrollingAlbumContainer.select('.album');
			var height;
			var marginTop = this.ScrollingAlbumContainer.getStyle('margin-top');
			marginTop = parseInt(marginTop.substring(0, marginTop.indexOf('px')));
			
			if (this.ScrollIndex > 0) {
				height = albums[this.ScrollIndex - 1].getHeight();
				marginTop += height;
				
				if (this.ScrollDownAnchor.hasClassName('disabled')) {
					this.ScrollDownAnchor.removeClassName('disabled');
				}
				
				this.ScrollIndex--;
			} else {
				marginTop = 0;
			}
			
			if (this.ScrollIndex == 0 && !this.ScrollUpAnchor.hasClassName('disabled')) {
				this.ScrollUpAnchor.addClassName('disabled');
			}
			
			this.ScrollingAlbumContainer.setStyle({
				marginTop: marginTop + 'px'
			});
		}.bind(this)).addClassName('disabled');
		
		this.ScrollDownAnchor = new Element('a').writeAttribute({href:''}).update('&#x25bc').observe('click', function(event) {
			event.stop();
			
			var albums = this.ScrollingAlbumContainer.select('.album');
			var height;
			var marginTop = this.ScrollingAlbumContainer.getStyle('margin-top');
			marginTop = parseInt(marginTop.substring(0, marginTop.indexOf('px')));
			
			if (this.ScrollIndex < albums.length - 5) {
				height = albums[this.ScrollIndex].getHeight();
				marginTop -= height;
				
				if (this.ScrollUpAnchor.hasClassName('disabled')) {
					this.ScrollUpAnchor.removeClassName('disabled');
				}
				
				this.ScrollIndex++;
			}
			
			if (this.ScrollIndex == albums.length - 5 && !this.ScrollDownAnchor.hasClassName('disabled')) {
				this.ScrollDownAnchor.addClassName('disabled');
			}
			
			this.ScrollingAlbumContainer.setStyle({
				marginTop: marginTop + 'px'
			});
		}.bind(this));
		
		this.SeeAllDiv = new Element('div').addClassName(this.SeeAllDivClassName).insert(this.ScrollUpAnchor).insert(this.ScrollDownAnchor).hide();
		this.AlbumGalleryDiv.insert(this.Title).insert(this.AlbumContainer).insert(this.SeeAllDiv);
		this.ArtistsPage = artistsPage;
		this.AlbumCount = 0;
		
		this.AddAlbums(this.ArtistsPage.Artist.albums);
	},

	AddAlbum : function(album) {
		var albumNameAnchor = new Element('a').update(album.name).addClassName(this.AlbumNameClassName);
		
		if (album.location != '') {
			albumNameAnchor.href = album.location;
			albumNameAnchor.target = '_blank';
		} else {
			albumNameAnchor.href = '#';
		}
		
		albumNameAnchor.title = album.name;
		
		var albumWrapper = new Element('div').addClassName('album');
		
		albumWrapper.insert(albumNameAnchor);
		this.ScrollingAlbumContainer.insert(albumWrapper);
		
		this.AlbumCount++;

		if (this.AlbumCount > 4) {
			/*var height = this.VideoContainer.getHeight();
			this.VideoContainer.writeAttribute({
				style: 'height:' + height + 'px;'
			}).addClassName('overflow_y');*/
			this.AlbumContainer.addClassName('overflow_hidden').setStyle({
				height: this.AlbumContainer.getHeight() + 'px'
			});
			this.SeeAllDiv.show();
		}
	},
	
	AddAlbums : function(albums) {
		for (var i = 0; i < albums.length; i++) {
			this.AddAlbum(albums[i]);
		}
	}
});