/**
 * @author patrick
 */
// Glossarbegriffe per JSON laden und ausgeben
var Glossary = new Class({
	options: {
		msg_empty:				"Keine Einträge vorhanden", // Hinweis wenn keine Einträge vorhanden sind
		perPage:				15, // ab dieser Länge wird das Scrollen aktiviert; ein Punkt wird als 14px hoch gerechnet
		url:					"/layout/set/glossary-list-json", // URL für die Glossar-Begriffe in JSON-Form

		scroll: { 				// Einstellungen für das Scrollen
			area:				40, // Sensitiver Bereich
			velocity:			1
		},

		elements: {				// CSS-Kram
			container: {		// Haupt-Div
				id:				"glossaryItems",
				style: {
					height:		200, // entspricht der Höhe des angezeigten Kastens mit den Glossarbegriffen
					overflow:	"hidden"
				}
			},
			list: {				// Liste mit Glossarbegriffen
				id:				"glossary-list",
				style: {
					height:		500
				}
			},
			msg: {				// Box für Nachrichten
				id:				"glossary-msg"
			},

			link: {				// Links bei den einzelnen Glossarbegriffen
				"class":		"glossaryShowLink"
			},

			arrows: {			// Hoch-/Runter-Pfeile
				"selector":		"img.glossary-arrows"
			}
		}
	},


	elements: {
		container: 				null,
		list: 					null,
		msg:					null,
		arrows:					null
	},

	// Ausgelesenes JSON-Objekt
	content: 					null,

	// Scroll-Objekt
	scroll: 					null,


	initialize: function(options) {
		// Optionen mergen
		this.options 			= $merge(this.options, options);

		// Ziel-Liste vorbereiten
		this.elements.container = $(this.options.elements.container.id);
		this.elements.list 		= ($defined($(this.options.elements.list.id))) ? $(this.options.elements.list.id) : new Element("ul", {id: this.options.elements.list.id}).setStyles(this.options.elements.list.style).injectInside(this.elements.container);

		// Scrolling vorbereiten
		this.elements.container.setStyles(this.options.elements.container.style);
		this.scroll				= new Scroller(this.elements.container, {area: this.options.scroll.area, velocity: this.options.scroll.velocity});

		// Hinweis-Box vorbereiten
		this.elements.msg		= new Element("div", {id: this.options.elements.msg.id}).inject(this.options.div, "top");

		// Pfeile vorbereiten (auswählen und verstecken)
		this.elements.arrows	= $$(this.options.elements.arrows.selector);
		this.elements.arrows.each(function(el) { el.setStyle("visibility", "hidden"); });
	},

	// Glossar aufräumen
	clear: function() {
		// Einträge entfernen
		$$("#" + this.options.div + " li").each(function(el) {
			this.elements.list.removeChild(el);
		}.bind(this));

		// Scrolling entfernen
		this.elements.container.removeEvents();

		// Position der Liste zurücksetzen (vom Scrolling)
		this.elements.container.scrollTo(0, 0);

		// Hinweis-Box leeren
		this.elements.msg.setStyle("display", "none");
		this.elements.msg.set("html", "");

		// Pfeile verstecken
		this.elements.arrows.each( function (el) {
			el.setStyle("visibility", "hidden");
		});
	},

	// Glossarbegriffe beginnend mit letter auflisten
	get: function(letter) {
		// Parameter checken
		if (!$defined(letter)) { // Wurde ein Buchstabe ausgewählt?
			return;
		} else if (this.content === null) { // Sind die Begriffe geladen?
			this.clear();
			this.initialize();
			this.getAll(letter);

			return;
		}

		// Aufräumen
		this.clear();

		// Begriffe holen
		var items = this.content[letter.toUpperCase()];

		if (!$defined(items) || items.length <= 0) { // Existieren Begriffe zum aktuellen Buchstaben?
			this.elements.msg.setStyle("display", "block");
			this.elements.msg.set("html", this.options.msg_empty);
			return;
		}

		// Begriffe durchlaufen
		$each(items, function(item){
			// Link vorbereiten
			var link = new Element("a", $merge(this.options.link, {
				"href": item.link
			})).set('html', item.item);

			// LI mit Link hinzufügen
			var li = new Element("li").injectInside(this.elements.list).appendChild(link);
		}, this);

		if (items.length > this.options.perPage) { // Soll Scrollen aktiviert werden?
			// Liste für Scrollen einrichten
			this.elements.list.setStyle("height", 14 * items.length); // ul-Höhe an Anzahl der Elemente anpassen
			this.elements.container.addEvent('mouseover', this.scroll.start.bind(this.scroll));
			this.elements.container.addEvent('mouseout', this.scroll.stop.bind(this.scroll));

			// Pfeile anzeigen
			this.elements.arrows.each( function (el) {
				el.setStyle("visibility", "visible");
			}.bind(this));
		}
	},

	// Liste aller Glossarbegriffe per JSON holen
	getAll: function(letter) {
		// JSON-Request
		/*var request = new Json.Remote(this.options.url, {
			onComplete: function(json) {
				// Inhalt speichern
				this.content = json;

				// Ursprünglich angeforderten Buchstaben anzeigen
				this.get(letter);
			}.bind(this)
		}).send();*/
		var request = new Request.JSON(
		{
		  url: this.options.url,
      onComplete: function(json) {
        // Inhalt speichern
        this.content = json;

        // Ursprünglich angeforderten Buchstaben anzeigen
        this.get(letter);
      }.bind(this)
    }).send();
	}
});