var Programme = new Class({
	Implements: [Options, Events, Log],
	Extends: Page,

	// Constants
	ANIMATION_DURATION: 300,

	// Variables
	genres: [],
	activeFilters: [],
	events: [],
	genresContainer: null,
	eventsContainer: null,
	filtersContainer: null,
	monthContainers: null,

	// Class instances
	
	
	initialize: function( name, element, options )
	{
		this.enableLog();
		//this.disableLog();
		this.log("Programme::initialize(" + name + ", " + element + ", " + options + ")");

		// Invoke parent method
		this.parent( name, element, options );

		this.genresContainer = this.element.getElement('.filter-genre');
		this.eventsContainer = this.element.getElement('.events');
		this.filtersContainer = this.element.getElement('.filters');
		this.filtersContainer.list = this.filtersContainer.getElement('ul');
		this.monthContainers = this.element.getElements('.month');

		// Animation
		this.filtersContainer.fx = new Fx.Reveal(this.filtersContainer, {
			duration: this.ANIMATION_DURATION,
			link: 'cancel',
			transitionOpacity: true
		});

		this.initGenres();
		this.initEvents();


		// Scroll animation
		this.scrollFx = new Fx.Scroll($(document.body), {
			duration: 250,
			transition: Fx.Transitions.Quad.easeOut,
			link: 'cancel',
			axes: 'y',
			wheelStops: false
		});

		// Scroll to top buttons
		this.element.getElements('.scroll-top').addEvent('click', function(event) {
			event.preventDefault();

			this.scrollFx.toTop();
		}.bind(this));


		// Afterglow edit
		if(!this.enableAfterglow)
		{
			this.element.getElement('.switch-sides').addEvent('click', function(event) {
				event.preventDefault();
			}.bind(this));

			this.element.getElement('.switch-sides').addEvent('mouseenter', function(event) {
				event.preventDefault();

				this.getTooltip();
				this.positionTooltip( this.element.getElement('.switch-sides'), {top: 10, left: 20} );

				// Animate
				this.tooltip.fx.start('opacity', 1);
			}.bind(this));

			this.element.getElement('.switch-sides').addEvent('mouseleave', function(event) {
				event.preventDefault();

				// Animate
				if(event.relatedTarget != this.tooltip) this.tooltip.fx.start('opacity', 0);
			}.bind(this));
		}
		else
		{
			this.element.getElement('.switch-sides').setStyle('cursor', 'pointer');
		}
	},

	initGenres: function()
	{
		this.log("Programme::initGenres()");

		this.genresContainer.getElements('li').each(function(element, index) {

			var id = element.get('id').split('-')[1];

			var text;
			if(element.getElement('a'))
			{
				text = element.getElement('a').get('text');
			}
			else
			{
				text = element.getElement('span').get('text');
			}

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

			var title = text.split(' (')[0];
			var amount = 0;
			if(text.contains(' ('))
			{
				var amount = text.split(' (')[1].split(')')[0];
			}
			

			this.log("title: " + title);
			this.log("amount: " + amount);

			var genreData = {index: index, id: id, element: element, text: text, title: title, amount: amount};
			this.genres.include( genreData );

			// Button
			if(!element.hasClass('disabled'))
			{
				element.getElement('a').addEvent('click', function(event) {
					event.preventDefault();

					if(element.hasClass('selected'))
					{
						this.removeFilter(index);
					}
					else
					{
						this.addFilter(index);
					}

				}.bind(this));
			}

		}.bind(this));
	},

	initEvents: function()
	{
		this.log("Programme::initGenres()");

		this.eventsContainer.getElements('li').each(function(element, index) {

			var genreId = element.get('class').split('genre-')[1];

			var eventData = {index: index, genreId: genreId, element: element};
			this.events.include( eventData );

			// Animation
			element.fx = new Fx.Reveal(element, {
				duration: this.ANIMATION_DURATION,
				link: 'cancel',
				transitionOpacity: true
			});


			var eventItem = new EventItem(element);

		}.bind(this));
		
		
		// Months
		this.monthContainers.each(function(month) {

			var header = month.getElement('.header');

			month.fx = new Fx.Reveal(header, {
				duration: this.ANIMATION_DURATION,
				link: 'cancel',
				transitionOpacity: true
			});

		}.bind(this));

	},

	addFilter: function(index)
	{
		this.log("Programme::addFilter(" + index + ")");

		var genreData = this.genres[index];
		genreData.element.addClass('selected');

		// Filter button
		var filterButton = new Element('li', {'text': genreData.title + " (" + genreData.amount + ")", 'id': 'filter-' + genreData.id});
		var removeButton = new Element('a', {'href': '#', 'title': genreData.title});

		filterButton.adopt( removeButton );
		removeButton.addEvent('click', function(event) {
			event.preventDefault();

			this.removeFilter(index);
		}.bind(this));
		
		this.filtersContainer.list.adopt(filterButton);

		// Dimensions
		filterButton.width = filterButton.measure(function() {
			return this.getComputedSize().width;
		});
		filterButton.height = filterButton.measure(function() {
			return this.getComputedSize().height;
		});
		filterButton.margin = filterButton.measure(function() {
			return this.getComputedSize().margin;
		});
		filterButton.padding = filterButton.measure(function() {
			return this.getComputedSize().padding;
		});
//		this.log("filterButton.width: "+ filterButton.width);
//		this.log("filterButton.height: "+ filterButton.height);
//		this.log("filterButton.margin: "+ filterButton.margin);
//		this.log("filterButton.padding: "+ filterButton.padding);

		filterButton.fx = new Fx.Morph(filterButton, {
			duration: 250,
			transition: Fx.Transitions.linear,
			link: 'cancel'
		});
		filterButton.fx.set({
			'height': [0],
			'width': [0],
			'margin': [0],
			'padding': [0]
		});
		filterButton.fx.addEvent('complete', function() {
			filterButton.fadeFx.start(1);
		}.bind(this));

		// Fade
		filterButton.fadeFx = new Fx.Tween(filterButton, {
			duration: 250,
			transition: Fx.Transitions.Quad.easeOut,
			link: 'cancel',
			property: 'opacity'
		});
		filterButton.fadeFx.set(0);
		filterButton.fadeFx.addEvent('complete', function() {

			if(filterButton.getStyle('opacity').toInt() == 0 && filterButton.getStyle('height').toInt() > 0)
			{
				filterButton.fx.start({
					'height': [0],
					'width': [0],
					'margin': [0],
					'padding': [0]
				});
			}
			else if(filterButton.getStyle('height').toInt() == 0)
			{
				filterButton.dispose();
			}
		}.bind(this));

		// Start animation
		filterButton.fx.start({
			'width': [filterButton.width],
			'height': [filterButton.height],
			'margin': [filterButton.margin],
			'padding': [filterButton.padding]
		});

		// Update filters
		this.activeFilters.include(genreData.id);
		//this.log("this.activeFilters.length: "+ this.activeFilters.length);

		if(this.activeFilters.length > 0)
		{
			this.filtersContainer.fx.reveal();
		}

		// Filter events
		this.filter();
	},

	removeFilter: function(index)
	{
		this.log("Programme::removeFilter(" + index + ")");

		var genreData = this.genres[index];
		genreData.element.removeClass('selected');

		// Filter button
		var filterButton = this.filtersContainer.list.getElement('#filter-' + genreData.id);
		filterButton.fadeFx.start(0);

		// Update filters
		this.activeFilters.erase(genreData.id);
		this.log("this.activeFilters.length: "+ this.activeFilters.length);

		if(this.activeFilters.length <= 0)
		{
			this.filtersContainer.fx.dissolve();
		}

		// Filter events
		this.filter();
	},

	filter: function()
	{
		this.log("Programme::filter()");

		this.events.each(function(event, index) {

			this.log("event.genreId: "+ event.genreId);

			// There are filters
			if(this.activeFilters.length > 0)
			{
				if(this.activeFilters.contains(event.genreId))
				{
					event.element.status = "show";
					event.element.fx.reveal();
				}
				else
				{
					event.element.status = "hide";
					event.element.fx.dissolve();
				}
			}
			// No filters: show all events
			else
			{
				event.element.status = "show";
				event.element.fx.reveal();
			}

		}.bind(this));

		// Months
		this.monthContainers.each(function(month) {

			if(month.hasClass('first-child')) return;

			var events = month.getElements('li');

			var hideMonth = true;

			events.each(function(event) {

				this.log("event.status: "+ event.status);

				if(event.status == "show")
				{
					hideMonth = false;
				}

			}.bind(this));

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

			if(hideMonth)
			{
				//month.getElement('.header').hide();
				month.fx.dissolve();
			}
			else
			{
				month.fx.reveal();
			}

		}.bind(this));

		this.setBackgroundHeight.delay(this.ANIMATION_DURATION, this);
	}

});