var ProgramSearch = {
	_xhr: new Request({
		url: '/program/index',
		//url: '/frontend_dev.php/program/index',
		link: 'cancel',
		onRequest: function () {
			var html = '<div id="content"><p class="loading"><img src="/images/ajax-loader.gif" alt="" />Loading...</p></div>';
			document.id('searchresults').set('html', html);
		},
		onComplete: function (html) {
			document.id('searchresults').set('html', html);
		}
	}),

	_submitBtn: undefined,

	init: function () {
		if (!document.id('program-search')) return;

		$$('#program-search li').addEvent('click', function (e) {
			var elm = $(this);
			var activeOptions;

			//if this is a click on the foldout <li>
			if (elm.hasClass('keywords') || elm.hasClass('locations')) {
				elm.getPrevious().removeClass('active');
				elm.addClass('active');
			} else {
				ProgramSearch.toggle(this);
			}

			if (elm.getParent().getParent().hasClass('foldout')) {
				activeOptions = elm.getParent().getParent().getElements('li.active span');
				elm.getParent().getParent().getPrevious().set('text', activeOptions.get('text').join(', '));

				if (elm.getParent().getParent().getPrevious().get('text') == '') {
					if (elm.getParent().getParent().getParent().hasClass('locations')) {
						ProgramSearch.deselectAll('locations');
						$$('#program-search li.locations').removeClass('active');
						$$('#program-search li.locations')[0].getPrevious().addClass('active')
					} else {
						ProgramSearch.deselectAll('keywords');
						$$('#program-search li.keywords').removeClass('active');
						$$('#program-search li.keywords')[0].getPrevious().addClass('active')
					}

					e.stop();
				}
			}

			if ($(e.target).getParent().hasClass('buttons')) {
				if (elm.hasClass('keywords')) {
					ProgramSearch.deselectAll('keywords');
				} else {
					ProgramSearch.deselectAll('locations');
				}
				elm.getPrevious().addClass('active');
			}

			if (elm.getNext()) {
				//if this is a click on a 'no keywords' or 'no locations' <li>
				if (elm.getNext().hasClass('keywords') || elm.getNext().hasClass('locations')) {
					var deselectWhat = elm.getNext().hasClass('keywords') ? 'keywords' : 'locations';
					ProgramSearch.deselectAll(deselectWhat);
				}
			}

			if ($(e.target).get('tag') != 'button') 
				ProgramSearch._submitBtn.addClass('active');
		});

		//do a search on <enter> on the textfield and <click> on the button
		ProgramSearch._submitBtn = $$('#program-search button')[0];

		ProgramSearch._submitBtn.addEvent('click', function (e) {
			ProgramSearch.doSearch();
		});

		$$('#program-search input').addEvent('keyup', function (e) {
			if (e.key == 'enter')
				ProgramSearch.doSearch();
		});

		$$('li.locations > span', 'li.keywords > span').addEvent('click', function (e) {
			this.getNext('div').toggleClass('show');
			e.stop();
		});

		$$('li.locations > div', 'li.keywords > div').addEvent('mouseleave', function (e) {
			this.toggleClass('show');
		});

		//if the URL contains a hashstring do a search immediatly and set the right <li> elements active
		if (document.location.href.split('#')[1] != undefined) {
			var queryString = document.location.href.split('#')[1];
	  		ProgramSearch.setButtonsActive(queryString);
	  		ProgramSearch.doSearch(queryString);
	  	} else {
			ProgramSearch.doSearch();
		}
	},

	//deselect all keywords or locations
	deselectAll: function (section) {
		if (section != 'keywords' && section != 'locations')
			return;
    
    if (section == 'keywords') 
      var label = 'Click to select styles...';
    else   
		  var label = 'Click to add ' + section + '...';

		$$('#program-search li.' + section, '#program-search li.' + section + ' li.active').removeClass('active');
		$$('#program-search li.' + section + '> span').set('text', label);
	},

	//toggle a selection item active or inactive
	toggle: function (elm) {
		if (elm.getParent().getPrevious() && elm.getParent().getPrevious().get('tag') == 'h2')
			elm.getParent().getElements('li.active').toggleClass('active');
		elm.toggleClass('active');
	},

	doSearch: function (queryString) {
		if (!queryString) {
			var locations = new Array();
			$$('#dashboard ul.locations > li.active div li.active span').each(function (el) {
				locations.push(el.get('text'));
			});

			var keywords = new Array();
			$$('#dashboard ul.keywords > li.active div li.active span').each(function (el) {
				keywords.push(el.get('text'));
			});

			var parameters = {
				program: $$('#dashboard ul.program li.active').get('text')[0],
				days: $$('#dashboard ul.days li.active').get('text')[0],
				locations: locations,
				keywords: keywords,
				query: document.id('program-search-term').get('value')
			}

			queryString = (new Hash(parameters)).toQueryString()
		}

		document.location.href = '#' + queryString;

		ProgramSearch._xhr.send(queryString);
		ProgramSearch._submitBtn.removeClass('active');
	},

	setButtonsActive: function (queryString) {
		//element collections
		var daysSpans     = $$('#program-search ul.days li span');
		var programSpans  = $$('#program-search ul.program li span');
		var searchInput   = $$('#program-search input');
		var keywordSpans  = $$('#program-search ul.keywords li div span');
		var locationSpans = $$('#program-search ul.locations li div span');

		//the different parameters
		var keywords  = new Array()
		var locations = new Array();

		//split the querystring in an array with key/value pairs as string
		var keyValuePairs = decodeURIComponent(queryString).split('&');
		keyValuePairs.each(function (el) {
			if (el == '') return;

			var key   = el.split('=')[0];
			var value = el.split('=')[1];

			if (key.match(/^locations/)) {
				locationSpans.each(function (span) {
					if (span.get('html') == value) {
						ProgramSearch.toggle(span.getParent());
					}

					if (!span.getParent().getParent().getParent().getParent().hasClass('active'))
						ProgramSearch.toggle(span.getParent().getParent().getParent().getParent());
				});

				locations.push(value);

			} else if (key.match(/^keywords/)) {
				keywordSpans.each(function (span) {
					if (span.get('html') == value) {
						ProgramSearch.toggle(span.getParent());
					}

					if (!span.getParent().getParent().getParent().getParent().hasClass('active'))
						ProgramSearch.toggle(span.getParent().getParent().getParent().getParent());
				});

				keywords.push(value);

			} else if (key == 'days') {
				daysSpans.each(function (span) {
					if (span.get('html') == value) {
						ProgramSearch.toggle(span.getParent());
					}
				});

			} else if (key == 'program') {
				programSpans.each(function (span) {
					if (span.get('html') ==  value) {
						ProgramSearch.toggle(span.getParent());
					}
				});

			} else if (key == 'query') {
				searchInput.set('value', value);
			}
		});

		if (locations.length > 0)
			$$('#program-search ul.locations li.locations > span').set('text', locations.join(', '));

		if (keywords.length > 0)
			$$('#program-search ul.keywords li.keywords > span').set('text', keywords.join(', '));
	}
}

window.addEvent('domready', ProgramSearch.init.bind(ProgramSearch));