var ExtendSortables = Sortables.extend({
	// this fix allows links to be clickable, instead of
	// being overtaken by the drag action
	start: function(event, element){
		if (event.target.tagName != 'A'){
			this.parent(event, element);
		}
	}
});

window.addEvent('domready', function(){
	var nameSearchAjax = "favorites";
	var favoritesCitySearchAjax = new CitySearchAjax({
		name: nameSearchAjax,
		resultAction: resultAction
	});

	var favoritesList = $('favorites-list');
	var log = $('log');
	var results = $(nameSearchAjax + 'SearchResults');
	var favoritesSearchForm = $(nameSearchAjax + 'SearchForm');
	var spinner = $(nameSearchAjax + 'AjaxLoading');
	var myFavorites = prepareFavoritesList();
	// var mySlide = new Fx.Slide(results, {duration: 500, wait: false});
	
	function prepareFavoritesList() {
		return new ExtendSortables(favoritesList, {
			ghost: false,
			handles: '.drag-handle',
			initialize: function(){
				var step = 0;
				this.elements.each(function(element, i){
					element.addClass('favCursorMove');
					removeDeleteButton(element);
					createDeleteButton().injectTop(element);
				});
			},
			onStart: function(element) {
				element.addClass('favMove');
			},
			onComplete: function(element) {
				element.removeClass('favMove');
				notifyServer();
			}
		});
	}
	
	function notifyServer(){
		var url = 'submit.html';
		log.empty().addClass('ajax-loading');
		var ajax = new Ajax(url, {
			method: 'post',
			encoding: false,
			data: {action: 'reorderfavorites', order: ','+myFavorites.serialize(getZipMagicWmo)},
			update: log,
			onComplete: function(){
				log.removeClass('ajax-loading');
				clearLog.delay(3000);
			}
		});
		ajax.request();
	}
	
	function getZipMagicWmo(element, index){
		return element.getProperty('id');
	}
	
	function clearLog(){
		log.empty();
	}
	
	function createDeleteButton(){
		var deleteButton = new Element('span', {
			'events': {
				'click': function(){
					this.getParent().remove();
					notifyServer();
				}
			},
			'class': 'deleteButton'
		});
		deleteButton.setText('');
		return deleteButton;
	}
	
	function removeDeleteButton(parent){
		var button = parent.getElement('.deleteButton');
		if (button){
			button.remove();
		}
	}
	
	function resultAction(place) {
		var li = new Element('li');
		// drilldown results
		if (place.drilldown == true) {
			var url = place.href;
			var div = new Element('div', {'class': 'drilldown'});
			var a = new Element('a', {'id':zipmagicwmo, 'href':url}).setHTML(place.name);
			a.addEvent('click', function(e) {
				new Event(e).stop();
				favoritesCitySearchAjax.doSearch(url);
			});
			a.injectInside(div);
			div.injectInside(li);
		}
		// regular city results
		else {
			var zipmagicwmo = (place.type=='INTLCITY') ? place.zip+'.'+place.wmo : place.zip+'.'+place.magic;
			var div = new Element('div', {'class': 'addButton'});
			var a = new Element('a', {'id':zipmagicwmo, 'href':"#"}).setHTML(place.name);
			prepareAddButton(a, zipmagicwmo);
			a.injectInside(div);
			div.injectInside(li);
		}
		return li;
	}
	
	function prepareAddButton(element, zipmagicwmo) {
		element.addEvent('click', function(e) {
			new Event(e).stop();
			var url = 'submit.html';
			log.empty();
			log.addClass('ajax-loading');
			var newFavorite = createEmptyListItem(zipmagicwmo).injectInside(favoritesList);
			newFavorite.addClass('none');
			
			new Ajax(url, {
				method: 'post',
				encoding: false,
				data: {action: 'addfavorite', place: zipmagicwmo, conditions: 'true'},
				update: newFavorite,
				onComplete: function() {
					newFavorite.removeClass('none');
					log.removeClass('ajax-loading');
					acknowledgeNewFavorite(newFavorite);
					myFavorites = null;
					myFavorites = prepareFavoritesList();
				},
				onFailure: function(e) {
					log.removeClass('ajax-loading');
					alert("Error: ajax request failed");
				}
			}).request();
		});
	}
	
	function createEmptyListItem(id){
		var emptyLI = new Element('li', {
			'id': id
		});
		return emptyLI;
	}
	
	function drilldown(element, i){
		element.addEvent('click', function(e){
			new Event(e).stop();
			var url = element.getProperty('href');
			results.empty();
			mySlide.hide();
			spinner.addClass('ajax-loading');
			
			new Ajax(url, {
				method: 'get',
				encoding: false,
				update: results,
				onComplete: function(){
					spinner.removeClass('ajax-loading');
					results.getElements('li .addButton').each(prepareAddButton);
					results.getElements('li .drilldown').each(drilldown);
					mySlide.slideIn();
				}
			}).request();
		});
	}
	
	function acknowledgeNewFavorite(element){
		var fx = new Fx.Styles(element, {
			duration: 1200,
			wait: false
		});
		fx.start({
			'background-color': ['#666', '#fff'],
			color: ['#ff8', '#000']
		});
		log.empty().setText('Favorite has been added!');
		clearLog.delay(3000);
	}
});