var VideoGallery = Class.create( {
	VideoGalleryDivClassName : 'video_gallery_div',
	VideoContainerClassName : 'video_container',
	ScrollingVideoContainerClassName : 'scrolling_video_container',
	VideoClassName : 'video',
	SeeAllDivClassName : 'see_all_div',

	initialize : function(videoGalleryDiv, artistsPage) {
		this.Title = new Element('h1').update('Videos');
		this.VideoGalleryDiv = $(videoGalleryDiv).addClassName(this.VideoGalleryDivClassName);
		this.ScrollingVideoContainer = new Element('div').addClassName(this.ScrollingVideoContainerClassName);
		this.VideoContainer = new Element('div').addClassName(this.VideoContainerClassName).insert(this.ScrollingVideoContainer);
		this.ScrollIndex = 0;
		
		this.ScrollUpAnchor = new Element('a').writeAttribute({href:''}).update('&#x25b2').observe('click', function(event) {
			event.stop();
			
			var videos = this.ScrollingVideoContainer.select('.video');
			var height;
			var marginTop = this.ScrollingVideoContainer.getStyle('margin-top');
			marginTop = parseInt(marginTop.substring(0, marginTop.indexOf('px')));
			
			if (this.ScrollIndex > 0) {
				height = videos[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.ScrollingVideoContainer.setStyle({
				marginTop: marginTop + 'px'
			});
		}.bind(this)).addClassName('disabled');
		
		this.ScrollDownAnchor = new Element('a').writeAttribute({href:''}).update('&#x25bc').observe('click', function(event) {
			event.stop();
			
			var videos = this.ScrollingVideoContainer.select('.video');
			var height;
			var marginTop = this.ScrollingVideoContainer.getStyle('margin-top');
			marginTop = parseInt(marginTop.substring(0, marginTop.indexOf('px')));
			
			if (this.ScrollIndex < videos.length - 5) {
				height = videos[this.ScrollIndex].getHeight();
				marginTop -= height;
				
				if (this.ScrollUpAnchor.hasClassName('disabled')) {
					this.ScrollUpAnchor.removeClassName('disabled');
				}
				
				this.ScrollIndex++;
			}
			
			if (this.ScrollIndex == videos.length - 5 && !this.ScrollDownAnchor.hasClassName('disabled')) {
				this.ScrollDownAnchor.addClassName('disabled');
			}
			
			this.ScrollingVideoContainer.setStyle({
				marginTop: marginTop + 'px'
			});
		}.bind(this));
		
		this.SeeAllDiv = new Element('div').addClassName(this.SeeAllDivClassName).insert(this.ScrollUpAnchor).insert(this.ScrollDownAnchor).hide();
		this.VideoGalleryDiv.insert(this.Title).insert(this.VideoContainer).insert(this.SeeAllDiv);
		this.ArtistsPage = artistsPage;
		this.VideoCount = 0;
		
		this.LoadVideos(this.ArtistsPage.Artist.videos);
	},

	AddVideo : function(video) {
		var shortenedName = video.video_name;
		shortenedName = shortenedName.length > 20 ? shortenedName.substring(0, 20) + '...' : shortenedName;
		
		var videoNameAnchor = new Element('a').update(shortenedName).addClassName('video_name_anchor').writeAttribute({
			href: video.video_location,
			title: video.video_name
		});
		
		var videoWrapper = new Element('div').addClassName('video');
		
		videoWrapper.insert(videoNameAnchor);
		this.ScrollingVideoContainer.insert(videoWrapper);
		
		this.VideoCount++;

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