var Setlist = new Class({
	Implements: [Options, Events, Log],
	
	// Variables
	element: null,
	event: null,
	emptyStateContainer: null,
	songs: [],
	setlist: null,
	addForm: null,
	interfaceShown: false,
	songsOrder: null,

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

		// Variables
		this.element = element;
		this.event = event;
		this.application = new Application();
		
		this.emptyStateContainer = this.element.getElement('.empty-state');
		this.setlistActions = this.element.getElement('.setlist-actions');
		
		this.addSongFormElement = this.setlistActions.getElement('.add-song-form');
		this.actionsElement = this.setlistActions.getElement('.actions');
		
		this.log("this.setlistActions: " + this.setlistActions);
		this.log("this.addSongFormElement: " + this.addSongFormElement);
		this.log("this.actionsElement: " + this.actionsElement);

		if(this.emptyStateContainer)
		{
			this.initEmptyState();
		}
		else
		{
			this.initInterface();
		}
		
		// Always init add song form
		this.initAddForm();
		
		// Setlist actions
		this.log("debug voor initSetlistActions()");
		this.initSetlistActions();
		this.log("debug na initSetlistActions()");
	},
	
	initEmptyState: function()
	{
		this.log("Setlist::initEmptyState()");
		
		this.addSongFormElement.show();
		this.actionsElement.hide();
	},
	
	initInterface: function(keepAddForm)
	{
		this.log("Setlist::initInterface(" + keepAddForm + ")");
		
		// Remove empty state
		if(this.emptyStateContainer) this.emptyStateContainer.dispose();
		
		if(this.element.getElement('.setlist'))
		{
			this.setlistElement = this.element.getElement('.setlist');
		}
		else
		{
			this.setlistElement = new Element('ul', {'class': 'setlist'});
			this.setlistActions.grab(this.setlistElement, 'before');
		}
		
		if(!keepAddForm)
		{
			this.addSongFormElement.hide();
			this.actionsElement.show();
		}
		
		this.initSongs();
		
		this.interfaceShown = true;
	},

	initSongs: function()
	{
		this.log("Setlist::initSongs()");

		if(this.setlistElement)
		{
			var songElements = this.setlistElement.getElements('.setlist-song');

			this.setlist = new Sortables(this.setlistElement, {
				clone: true,
				revert: {
					duration: 100,
					transition: Fx.Transitions.Quad.easeOut
				},
				dragOptions: {
					precalculate: true
				},
				opacity: .5
			});
			this.setlist.addEvent('start', function(element, clone) {

				this.log("order start: " + element);

				clone.addClass('highlight');
				clone.setStyle('z-index', 10000);

			}.bind(this));
			this.setlist.addEvent('sort', function(element, clone) {
				this.log("order sort: " + element);
			}.bind(this));
			this.setlist.addEvent('complete', function(element) {

				this.log("order complete: " + element);
				
				this.saveOrder();

			}.bind(this));

			this.setlist.attach();
			
			// Save order
			this.songsOrder = this.getOrder();

			songElements.each(function(element, index) {
				var song = new Song(this, element);

				// Add to list
				this.songs.include(song);
			}.bind(this));
			
			var togglers = this.setlistElement.getElements('li .header');
			var elements = this.setlistElement.getElements('li .more');
			var options = {
				opacity: false,
				alwaysHide: true,
				initialDisplayFx: false
			};
			
			this.log("togglers: "+ togglers.length);
			this.log("elements: "+ elements.length);
			
			this.setlistAccordion = new Fx.Accordion(togglers, elements, options);
		}
	},
	
	initAddForm: function()
	{
		this.log("Setlist::initAddForm()");

		this.log("debug 1");
		
		var options = {
			showLoader: true,
			allowStatus: true,
			formErrorMessage: {
				allow: true,
				container: this.addSongFormElement.getElement('.form-message-container'),
				allowClose: false
			}
		};

		this.log("debug 2");

		var handlers = {
			onRequest: this.onAddSongRequest.bind(this),
			onSuccess: this.onAddSongSuccess.bind(this),
			onFailure: this.onAddSongFailure.bind(this)
		};

		this.log("debug 3");

		var elementOptions = {
			hintText: 'Vul hier de titel van het gespeelde nummer in'
		};
		
		this.log("debug 4");
		
		var requestUrl = this.application.getConfig().requestPath.afterglow.setlist.addSong;

		this.log("debug 5");

		var form = new JsonForm(this.addSongFormElement.getElement('form'), requestUrl, handlers, options);

		this.log("debug 6");

		var titleElement = new FormElement(form, 'title', elementOptions);
		titleElement.addValidation(Form.REGEX_NAME, 'Vul de titel van het nummer in');
		form.addElement(titleElement);

		this.log("debug 7");

		// Add buttons
		var submitButton = new FormSubmitButton(form, '.submit', {showLoader: true});
		form.addButton(submitButton);

		this.log("debug 8");

		// Add to form
		form.addValue('event_id', this.event.id);

		this.log("debug 9");

		// Save form
		this.addForm = form;
		
		this.log("debug 10");
		
		this.addSongFormElement.getElement('.cancel').addEvent('click', function(event) {
			event.preventDefault();
			
			this.actionsElement.show();
			this.addSongFormElement.hide();
		}.bind(this));
		
		this.log("debug 11");
		
//		this.addForm.addEvent('onSubmit', function() {
//			// Track event
//			this.application.trackEvent('check', 'add - submit', this.hash);
//		}.bind(this));
	},
	
	initSetlistActions: function()
	{
		this.log("Setlist::initSetlistActions()");

		this.element.getElement('.add-song').addEvent('click', function(event) {
			event.preventDefault();
			
			this.actionsElement.hide();
			this.addSongFormElement.show();
		}.bind(this));
	},
	
	addSong: function(id, title)
	{
		this.log("Setlist::addSong(" + id + ", " + title + ")");

		// Check if interface is initialized
		if(!this.interfaceShown) this.initInterface(true);
	
		var element = new Element('li', {'class': 'setlist-song', 'id': 'song-' + id});
		
		var header = new Element('div', {'class': 'header'});
		header.adopt( new Element('span', {'class': 'title', 'text': title}) );
		header.adopt( new Element('span', {'class': 'counter', 'text': '0'}) );

		var more = new Element('div', {'class': 'more'});
		var body = new Element('div', {'class': 'body'});
		
		body.adopt( new Element('h4', {'html': 'Videos (<span class="amount">0</span>)'}) );
		body.adopt( new Element('div', {'class': 'video'}) );
		body.adopt( new Element('div', {'class': 'thumbnails-wrapper'}) );
		
		var footer = new Element('div', {'class': 'footer'});
		footer.adopt( new Element('a', {'href': '#', 'class': 'button add-video', 'text': 'Voeg een video toe', 'title': 'Voeg zelf een video toe'}) );
		
		more.adopt(body);
		more.adopt(footer);
		
		element.adopt(header);
		element.adopt(more);

		this.setlistElement.adopt(element);

		// Add to list
		var song = new Song(this, element);
		this.songs.include(song);

		// Add to sortable
		this.setlist.addItems(element);
		
		// Add to accordion
		this.setlistAccordion.addSection(header, more);
		more.setStyle('height', 0);
	},
	
	saveOrder: function()
	{
		this.log("Setlist::saveOrder()");
		
		var order = this.getOrder().toString();
		
		this.log("this.songsOrder: " + this.songsOrder);
		this.log("order: " + order);
		
		if(this.songsOrder.toString() != order.toString())
		{
			this.log("niet gelijk aan elkaar");
			var params = new Object();
			params.event_id = this.event.id;
			params.order = order.toString();

			var requestData = {
				url: this.application.getConfig().requestPath.afterglow.setlist.changeSongOrder,
				params: params/*,
				onRequest: this.onRequest.bind(this),
				onSuccess: this.onSuccess.bind(this),
				onFailure: this.onFailure.bind(this),
				onException: this.onException.bind(this)*/
			}

			this.application.request(requestData);
			
			// Save order
			this.songsOrder = order;
		}
	},
	
	getOrder: function()
	{
		this.log("Setlist::getOrder()");
		
		var order = [];

		this.setlist.serialize(false, function(element, index) {
			
			//this.log(index + " element: " + element.get('class'));
			
			if(element.get('id'))
			{
				var id = element.get('id').replace('song-','');
				order.include(id);
			}
		}.bind(this));
		
		return order;
	},
	
	
	/*
	 * Add video to song
	 */
	onAddVideoToSong: function(data)
	{
		this.log("List::onAddVideoToSong(" + data + ")");

		var songId = data.song_id;
		
		this.log("songId: "+ songId);

		this.songs.each(function(song) {
			
			this.log("song.id: " + song.id);
			
			if(song.id == songId)
			{
				song.addVideo(data);
			}
			
		}.bind(this));
	},
	
	/*
	 * Retrieve results handlers
	 */
	onAddSongRequest: function()
	{
		this.log("List::onAddSongRequest()");

	},

	onAddSongSuccess: function(response)
	{
		this.log("List::onAddSongSuccess(" + response + ")");

		if(response.success)
		{
			// Add song to interface
			this.addSong(response.song_id, response.title);
			
			// Reset input
			this.addForm.reset();
			
			if(this.addForm.elements[0].hint)
			{
				this.addForm.elements[0].hint.hide();
			}
		}
		else
		{
			// Errors
		}
	},

	onAddSongFailure: function(xhr)
	{
		this.log("List::onAddSongFailure(" + xhr + ")");
		
	}

});