var Song = new Class({
	Implements: [Options, Events, Log],
	
	// Variables
	id: null,
	name: null,
	element: null,
	header: null,
	more: null,
	body: null,
	footer: null,
	videoContainer: null,
	thumbnailsWrapper: null,
	thumbnailsContainer: null,
	thumbnailsElement: null,
	addVideoButton: null,
	previousButton: null,
	nextButton: null,
	amount: 0,
	
	currentVideoId: null,
	thumbnails: [],
	
	currentThumbnailIndex: 0,
	visibleThumbnails: 5,
	

	// Class instances
	setlist: null,
	
	
	initialize: function( setlist, element )
	{
		this.enableLog();
		//this.disableLog();
		this.log("Song::initialize(" + setlist + ", " + element + ")");

		// Set variables
		this.setlist = setlist;
		this.element = element;
		this.id = this.element.get('id').replace('song-','');

		this.header = this.element.getElement('.header');
		this.more = this.element.getElement('.more');
		
		this.body = this.more.getElement('.body');
		this.footer = this.more.getElement('.footer');
		
		this.videoContainer = this.body.getElement('.video');
		this.thumbnailsWrapper = this.body.getElement('.thumbnails-wrapper');
		
		this.initThumbnailsContainer();
		
		// Select first thumbnail
		if(this.thumbnails.length > 0) this.selectThumbnail(this.thumbnails[0]);
		
		// Set width
		this.updateThumbnailsElementWidth();
		
		/*
		if(this.thumbnailsWrapper)
		{
			this.thumbnailsContainer = this.thumbnailsWrapper.getElement('.thumbnails');

			//if(this.thumbnailsContainer)
			//{
				this.thumbnailsElement = this.thumbnailsContainer.getElement('ul');

				// Collect thumbnails
				this.thumbnails = this.thumbnailsElement.getElements('li');

				//this.initThumbnails();

				// Select first thumbnail
				this.selectThumbnail(this.thumbnails[0]);
			//}
		}
		*/

		this.amount = this.thumbnails.length;
		this.updateVideoCounter(this.amount);

		this.addVideoButton = this.footer.getElement('.add-video');
		if(this.amount <= 0)
		{
			var addVideoButton = new Element('a', {'href': '#', 'class': 'button add-video', 'title': 'Voeg zelf een video toe', 'text': 'Voeg zelf een video toe'});
			addVideoButton.adopt( new Element('span', {'class': 'icon'}) );
			if(this.videoContainer) this.videoContainer.adopt(addVideoButton);

			this.addVideoButton.hide();
		}

		this.addEvents();
	},

	initThumbnailsContainer: function()
	{
		this.log("Song::initThumbnailsContainer()");

		if(!this.thumbnailsWrapper) return;

		var thumbnailsContainer = this.element.getElement('.thumbnails');
		if(!thumbnailsContainer)
		{
			thumbnailsContainer = new Element('div', {'class': 'thumbnails'});
			this.thumbnailsWrapper.adopt(thumbnailsContainer);
		}
		
		var thumbnailsElement = thumbnailsContainer.getElement('ul');
		if(!thumbnailsElement)
		{
			thumbnailsElement = new Element('ul');
			thumbnailsContainer.adopt(thumbnailsElement);
		}
		
		// Navigation buttons
		var previousButton = this.thumbnailsWrapper.getElement('.navigation.previous');
		if(!previousButton)
		{
			previousButton = new Element('a', {'href': '#', 'class': 'previous navigation', 'title': 'Vorige'});
			this.thumbnailsWrapper.grab(previousButton, 'top');
		}
		previousButton.adopt( new Element('div', {'class': 'disabled'}) );
		
		var nextButton = this.thumbnailsWrapper.getElement('.navigation.next');
		if(!nextButton)
		{
			nextButton = new Element('a', {'href': '#', 'class': 'next navigation', 'title': 'Volgende'});
			this.thumbnailsWrapper.grab(nextButton, 'bottom');
		}
		nextButton.adopt( new Element('div', {'class': 'disabled'}) );

		// Collect thumbnails
		this.thumbnails = thumbnailsElement.getElements('li');
		
		// Save variables
		this.thumbnailsContainer = thumbnailsContainer;
		this.thumbnailsElement = thumbnailsElement;
		this.previousButton = previousButton;
		this.nextButton = nextButton;
		
		// Update navigation
		this.updateThumbnailNavigation();
	},
	
	addEvents: function()
	{
		this.log("Song::addEvents()");

		this.element.addEvent('mouseenter', function() {
			this.element.addClass('hover');
		}.bind(this));
		this.element.addEvent('mouseleave', function() {
			this.element.removeClass('hover');
		}.bind(this));
		
		// Add thumbnail events
		this.thumbnails.each(function(thumbnail) {
			this.addThumbnailEvent(thumbnail);
		}.bind(this));

		// Add event to video buttons
		this.element.getElements('.add-video').addEvent('click', function(event) {
			event.preventDefault();
			
			this.log("fireEvent showVideoUpload " + this.id);
			
			this.setlist.fireEvent('showVideoUpload', [this.id]);
			
			//this.showVideo('BGE4362PsGo');
//			var data = {
//				videoId: 'UzzCthKw_C0',
//				thumbnail: "http://i4.ytimg.com/vi/UzzCthKw_C0/default.jpg",
//				duration: "08.04"
//			};
//			
//			this.addVideo(data);
			
		}.bind(this));
	},

	addVideo: function(data)
	{
		this.log("Song::addVideo(" + data + ")");

		if(!this.thumbnailsContainer) this.createThumbnailsContainer();

		// Add thumbnail
		this.addThumbnail(data.thumbnail, data.videoId, data.duration);
		this.log("after addThumbnail");
		
		// Show video
		this.showVideo(data.videoId);
		this.updateVideoCounter(++this.amount);
		
		// Show footer video button
		this.addVideoButton.show();
	},

	showVideo: function(videoId)
	{
		this.log("Song::showVideo(" + videoId + ")");

		// Check if video is playing
		if(videoId == this.currentVideoId) return;

		this.videoContainer.empty();
		
		var src = 'http://www.youtube.com/embed/' + videoId + '?wmode=transparent&allowfullscreen=true&autoplay=1';
		var iframe = new Element('iframe', {'src': src, 'width': '355', 'height': '232', 'frameborder': '0'})
		this.videoContainer.adopt(iframe);
		
		this.currentVideoId = videoId;
	},
	
	initThumbnails: function()
	{
		this.log("Song::initThumbnails()");

		this.thumbnailNavigation = new ThumbnailNavigation(this.thumbnailsWrapper);
	},
	
	addThumbnail: function(thumbnail, videoId, duration)
	{
		this.log("Song::addThumbnail(" + thumbnail + ", " + videoId + ", " + duration + ")");

		// Add element to DOM
		var element = new Element('li', {'id': videoId});
		element.adopt( new Element('span', {'class': 'duration', 'text': duration}) );
		this.thumbnailsElement.grab(element, 'top');
		
		// Save to thumbnails array
		this.thumbnails.splice(0, 0, element);
		
		// Add events
		this.addThumbnailEvent(element);
		
		// Preload thumbnail
		this.preloadThumbnail(element, thumbnail);
		
		// Select thumbnail
		this.selectThumbnail(element);
		
		// Update thumbnails element width
		this.updateThumbnailsElementWidth();
		
		// Update favorite bar
		if(this.currentThumbnailIndex > 0) 
		{
			this.currentThumbnailIndex = 0;
			this.scrollToThumbnailPosition(1, this.update.bind(this, ['add', favorite]));
		}
	},
	
	addThumbnailEvent: function(thumbnail)
	{
		this.log("Song::addThumbnailEvent(" + thumbnail + ")");

		var video = thumbnail.get('id');

		// First remove click actions
		thumbnail.removeEvents('click');
		thumbnail.removeEvents('mouseenter');
		thumbnail.removeEvents('mouseleave');
		
		// Add action
		thumbnail.addEvent('click', function(event) {
			event.preventDefault();
			
			this.showVideo(video);
			this.selectThumbnail(thumbnail);
		}.bind(this));
		
		// Mouse enter / leave
		thumbnail.addEvent('mouseenter', function() {
			thumbnail.addClass('hover');
		}.bind(this));
		thumbnail.addEvent('mouseleave', function() {
			thumbnail.removeClass('hover');
		}.bind(this));
	},
	
	selectThumbnail: function(thumbnail)
	{
		this.log("Song::selectThumbnail(" + thumbnail + ")");

		this.thumbnails.each(function(element) {
			
			element.removeClass('selected');
			
		}.bind(this));
		
		this.log("addClass element: " + thumbnail);
		thumbnail.addClass('selected');
	},
	
	/*
	 * Scroll thumbnails
	 */
	scrollThumbnails: function(direction)
	{
		this.log("Song::scrollThumbnails(" + direction + ")");
		
		// Update current thumbnail
		this.updateCurrentThumbnailIndex(direction);
		
		var position = this.currentThumbnailIndex + 1;
		
		this.scrollToThumbnailPosition(position);
		
		// Update thumbnail navigation
		this.updateThumbnailNavigation();
	},
	
	/*
	 * Scroll to thumbnail
	 */
	scrollToThumbnailPosition: function(position, onComplete)
	{
		this.log("Song::scrollToThumbnailPosition(" + position + ")");
		
		var thumbnailIndex = position - 1;
		
		this.log("thumbnailIndex: " + thumbnailIndex);
		
		// Make sure left position is negative
		var left = 0;
		this.thumbnails.each(function(element, index) {
			
			if(index < thumbnailIndex)
			{
				var width = element.getDimensions({computeSize: true, styles: ['margin', 'padding', 'border']}).totalWidth;

				this.log("width: "+ width);

				left -= width;
			}
			
		}.bind(this));
		
		var fx = new Fx.Tween(this.thumbnailsElement, {
			duration: 250, 
			transition: Fx.Transitions.Quad.easeOut,
			onComplete: onComplete
		});
		fx.start('left', left);
		
		this.log("this.thumbnailsElement: "+ this.thumbnailsElement);
		this.log("left: "+ left);
	},
	
	/*
	 * Update
	 */
	update: function(action, barFavorite)
	{
		this.log("BarActive::update(" + action + ", " + barFavorite + ")");
		
		// Update navigation
		this.updateThumbnailNavigation();
	},
	
	/*
	 * Update current thumbnail index
	 */
	updateCurrentThumbnailIndex: function(direction)
	{
		this.log("Song::updateCurrentThumbnailIndex(" + direction + ")");
		
		if(direction == 'previous')
		{
			if(this.currentThumbnailIndex > 0)
			{
				this.currentThumbnailIndex--;
			}
		}
		else if(direction == 'next')
		{
			if(this.currentThumbnailIndex + this.visibleThumbnails < this.thumbnails.length)
			{
				this.currentThumbnailIndex++;
			}
		}
	},
	
	/*
	 * Update thumbnails position
	 */
	updatethumbnailsPosition: function()
	{
		this.log("Song::updatethumbnailsPosition()");
		
		var maxThumbnailIndex = this.thumbnails.length - this.visibleThumbnails;
		
		if(this.thumbnails.length >= this.visibleThumbnails)
		{
			if(this.currentThumbnailIndex > maxThumbnailIndex)
			{
				// Update current favorite index
				this.currentThumbnailIndex = maxThumbnailIndex;
				var newThumbnailPosition = maxThumbnailIndex + 1;
				
				this.scrollToThumbnailPosition(newThumbnailPosition, null);
			}
		}
	},
	
	/*
	 * Update Thumbnail navigation
	 */
	updateThumbnailNavigation: function()
	{
		this.log("Song::updateThumbnailNavigation()");
		
		// Previous button
		if(this.currentThumbnailIndex > 0 && this.thumbnails.length > this.visibleThumbnails)
		{
			// Enable
			this.previousButton.removeEvents('click');
			this.previousButton.addEvent('click', function(event) {
				event.preventDefault();

				this.scrollThumbnails('previous');
			}.bind(this));
			
			this.previousButton.removeClass('disabled');
			this.previousButton.getElement('.disabled').hide();
		}
		else
		{
			// Disable
			this.previousButton.addClass('disabled');
			this.previousButton.getElement('.disabled').show();
			
			this.previousButton.removeEvents('click');
			this.previousButton.addEvent('click', function(event) {
				event.preventDefault();
			}.bind(this));
		}
		
		// Next button
		if(this.currentThumbnailIndex + this.visibleThumbnails < this.thumbnails.length)
		{
			// Enable
			this.nextButton.removeEvents('click');
			this.nextButton.addEvent('click', function(event) {
				event.preventDefault();

				this.scrollThumbnails('next');
			}.bind(this));

			this.nextButton.removeClass('disabled');
			this.nextButton.getElement('.disabled').hide();
		}
		else
		{
			// Disable
			this.nextButton.addClass('disabled');
			this.nextButton.getElement('.disabled').show();
			
			this.nextButton.removeEvents('click');
			this.nextButton.addEvent('click', function(event) {
				event.preventDefault();
			}.bind(this));
		}
	},
	
	updateThumbnailsElementWidth: function()
	{
		this.log("Song::updateThumbnailsElementWidth()");
		
		var totalWidth = 0;
		this.thumbnails.each(function(element, index) {
			
			element.removeClass('last-child');
			
			if(index == this.thumbnails.length - 1)
			{
				element.addClass('last-child');
			}
			
			var width = element.getDimensions({computeSize: true, styles: ['margin', 'padding', 'border']}).totalWidth;
			
			this.log("width: "+ width);
			
			totalWidth += width;
			
		}.bind(this));
		
		this.log("totalWidth: "+ totalWidth);
		this.thumbnailsElement.setStyle('width', totalWidth);
	},
	
	/*
	 * Preload thumbnail
	 */
	preloadThumbnail: function(thumbnail, imagePath)
	{
		this.log("Song::preloadThumbnail(" + thumbnail + ", " + imagePath + ")");
		
		// Show image loader
		this.showThumbnailLoadState(thumbnail);
		
		// Set image
		var image = [imagePath];
		
		var loadedImage = new Asset.images(image, 
		{
			onProgress: function(counter, index) 
			{
				//this.log("onProgress: " + counter + ", " + index);
		    }.bind(this),
			onComplete: function() 
			{
				//this.log("onComplete");
				
				var image = loadedImage[0];
				
				// Insert image
				thumbnail.adopt(image);
				
				var imageElement = thumbnail.getElement('img').setStyle('opacity', 0);
				imageElement.fade('in');
				
				// Hide image loader
				this.hideThumbnailLoadState(thumbnail);
		    }.bind(this),
			onAbort: function(counter, index)
			{
				//this.log("onAbort: " + counter + ", " + index);
				
				// Hide image loader
				this.hideThumbnailLoadState(thumbnail);
			}.bind(this),
			onError: function(counter, index)
			{
				//this.log("onError: " + counter + ", " + index);
				
				// Hide image loader
				this.hideThumbnailLoadState(thumbnail);
			}.bind(this)
		});
	},
	
	/*
	 * Show thumbnail load state
	 */
	showThumbnailLoadState: function(thumbnail)
	{
		this.log("PhotoViewer::showThumbnailLoadState()");
		
		var loader = new Element('div', {'class': 'loader'});
		
		if(!thumbnail.getElement('.loader'))
		{
			thumbnail.adopt(loader);
		}

		thumbnail.getElement('.loader').fade('in');
	},
	
	/*
	 * Hide thumbnail load state
	 */
	hideThumbnailLoadState: function(thumbnail)
	{
		this.log("PhotoViewer::hideThumbnailLoadState()");
		
//		thumbnail.getElement('.loader').fade('out');
		thumbnail.getElement('.loader').dispose();
	},

	updateVideoCounter: function(amount)
	{
		this.log("Song::updateVideoCounter(" + amount + ")");

		this.amount = amount;
		this.element.getElements('.counter').set('text', amount);
	},


	getElement: function()
	{
		this.log("Song::getElement()");

		return this.element;
	}

});