//setup the namespace
if (typeof crumbs == "undefined" || !crumbs) {
    var crumbs = {};
}

crumbs.Modal.TagCloud = Class.create(crumbs.Modal, {
	/**
	 * Constructor
	 */
	initialize: function (filter) {
		this.containerId = "tagcloud-modal";
		this.windowIsShowing = false;
		this.filterTags = null;
		this.autocompleteInput = null;
		this.indicator = null;
		this.filterTagContainer = null;

		this.autocomplete = null;
		this.autocompleteUrl = "/multitag/search/index/";
		this.autocompleteContainerClass = "autocomplete-container";

		this.searchSubmit = null;

		this.filter = filter;
		this.button = $(this.filter.getButton());
		var windowPos = this.button.cumulativeOffset();
		/* Magic numbers! Moves the modal up and left a bit more than natural */
		windowPos[0] += this.button.getDimensions().width - 8;
		windowPos[1] -= 20;

		var options = {
			className: "tagcloud-modal",
			top: windowPos[1],
			left: windowPos[0],
			width: 410,
			height: 275,
			zIndex: 1000,
			showEffect: Effect.Appear,
			hideEffect: Effect.Fade,
			destroyOnClose: false
		};

		// set Object options
		var myOptions = Object.clone(this.options);
		for (var i in options) {
			myOptions[i] = options[i];
		}
		this.eventLoadComplete = this.attachJavascripts.bindAsEventListener(this);
		myOptions['showEffectOptions'] = { afterFinish: this.eventLoadComplete, duration: 0.2 };

		this.window = new Window(this.containerId, myOptions);
	},

	initAutocomplete: function () {
		if (!this.autocomplete) {
			var selector = "." + this.autocompleteContainerClass + " input.auto-input";
			var autocompleteInputs = $(this.containerId).select(selector);
			this.autocompleteInput = autocompleteInputs[0];
			this.autocompleteInput.identify();
			
			Event.observe(this.autocompleteInput, "focus", this.autocompleteInputFocus.bindAsEventListener(this));

			//this.autocompleteContainer = $$(selector + " div.auto-results")[0];
			this.autocompleteContainer = $(this.containerId).select("div.auto-results");
			this.autocompleteContainer = this.autocompleteContainer[0];
			this.autocompleteContainer.identify();

			indicatorId = this.getIndicator().id;
			
			var options = {
				frequency: 0.7,
				minChars: 3,
				indicator: indicatorId,
				afterUpdateElement: function (input, li) {
					input.setAttribute("for", li.getAttribute("for"));
				}
			};
			this.autocomplete = new Ajax.Autocompleter(this.autocompleteInput.id, this.autocompleteContainer.id, this.autocompleteUrl, options);
		}
	},

	autocompleteInputFocus: function (event) {
		if (!parseInt(this.autocompleteInput.getAttribute("dirty"))) {
			this.autocompleteInput.setAttribute("dirty", 1);
			this.autocompleteInput.value = "";
		}
	},

	initSearch: function () {
		if (!this.searchSubmit) {
			this.searchSubmit = $$("#" + this.containerId + " .pager-tag-submit")[0];
			Event.observe(this.searchSubmit, "click", this.searchSubmitEvent.bindAsEventListener(this));
		}
	},

	searchSubmitEvent: function (event) {
		var elm = Event.element(event);
		this.filter._addTag(this.autocompleteInput);
		this.autocompleteInput.value = "";
		this.autocompleteInput.setAttribute("for", "");
	},

	getEmptyListContent: function (element) {
		var div = document.createElement("div");
		div.innerHTML = "Click a tag to narrow down the results.";
		return div;
	},

	setInitialContent: function (contentEl) {
		this.window.getContent().innerHTML = "";

		this.filterTagContainer = $(document.createElement("div"));
		this.filterTagContainer.appendChild(this.getEmptyListContent());
		this.window.getContent().appendChild(this.filterTagContainer);

		this.window.getContent().appendChild(contentEl);
	},

	setFilterTags: function(filterTags) {
		this.filterTagContainer.innerHTML = "";
		if (!filterTags.childNodes.length) {  // Add the 'Click to ...' help text back
			filterTags = this.getEmptyListContent();
		}
		this.filterTags = filterTags;
		this.filterTagContainer.appendChild(this.filterTags);
	},

	showModal: function () {
		this.window.show();
		/**
		 * Other functions previously found here moved to attachJavascripts()
		 * This is needed to trigger the JS functionality after the window is
		 * sure to exist.
		 */
	},

	showIndicator: function () {
		if (ind = this.getIndicator()) 
			ind.show();
	},

	hideIndicator: function () {
		if (ind = this.getIndicator()) 
			ind.hide();
	},

	getIndicator: function () {
		if (this.indicator)
			return this.indicator;
		else {
			myparent = $(this.containerId);
			if (myparent) {
				var divs = myparent.select("div.auto-loading");
				this.indicator = divs[0];
				this.indicator.identify();
				return this.indicator;
			}
			return null;
		}
		return null;
	},

	/**
	 * Not supported for this modal type.
	 */
	load: function() {
		return false;
	},
	
	attachJavascripts: function(event) {
		$(this.containerId + "_content").setStyle({width: "auto", height: '255px'});
		this.initAutocomplete();
		this.initSearch();
	}
});