/**
 * organizes the tutorial for the Spatio Temporal Interface
 * @param {STICore} core the sti core component
 *
 * @constructor
 */
function STITutorial(core){

    this.core = core;
    this.step = 0;

    this.stepTexts = new Array(
    		"<h2>Einleitung</h2><p><i>europeana4D</i> ist eine Internetanwendung, mit der sämtliche Daten angezeigt werden können, die einen räumlichen sowie zeitlichen Bezug haben. <br></p><p><i>Ein Beispiel:</i> Ein Buch hat als zeitliche Information das Jahr der Veröffentlichung und als räumliche Information den Ort der Veröffentlichung. Möchte man einen Überblick über alle Bücher einer Bibliothek haben, so kann man die Kollektion mit <i>europeana4D</i> darstellen. Das folgende Bild zeigt die Verteilung von \"Shakespeare\"-Werken in Europa über Raum und Zeit.</p><p align=\"center\"><img src=\"tutorial/images/snapshot.png\" width=\"75%\"></p>",    		
    		"<h2>Überblick</h2><p>Zunächst gibt es einen kurzen Überbick über den Aufbau von <i>europeana4D</i>. Die elementaren Bestandteile sind eine Karte und eine Zeitleiste. Wenn ein Datensatz geladen wurde, so werden die verschiedenen Datenelemente in einer zusätzlichen Tabelle aufgelistet.</p><p>Starten Sie bitte das Video. Es soll den ersten Eindruck von <i>europeana4D</i> vermitteln.</p><p>Laden Sie anschließend den Datensatz <i>William Shakespeare</i> der Kategorie 'WebOPAC Göttingen'. Jeder Eintrag ist ein Buch der Universitätsbibliothek Göttingen mit seinem Veröffentlichungsjahr und -ort.<br><i>Hinweis:</i> Über den <i>OK</i>-Button gelangen Sie aus dem Tutorial. Danach gelangen Sie über <i>Tutorial >> next</i> zum nächsten Schritt des Tutorials!</p>",
    		"<h2>Die Karte</h2><p>Die Karte verfügt über die bekannten Steuerelemente Vergrößern, Verkleinern und Verschieben. Auf der Karte wird die Verteilung der Datenpunkte über die Welt dargestellt. Jeder Kreis auf der	Karte ist eine Ansammlung von Datenelementen mit gleichem oder ähnlichem Ort. Die Größe eines Punktes gibt die Häufigkeit von Datenpunkten einer Region an.</p><p>Das Video erklärt die wesentlichen Interaktionsmöglichkeiten der Karte. Starten Sie es!</p><p>Probieren Sie anschließend sämtliche Navigationsmöglichkeiten der Karte aus dem Video an ihrem geladenen Datensatz aus. <b>Können Sie herausfinden, wie viele Veröffentlichungen von Shakespeare-Werken es in Hamburg gab?</b></p>",
    		"<h2>Die Karte</h2><p><b>Können Sie herausfinden, wie viele Veröffentlichungen von Shakespeare-Werken es in Hamburg gab?</b> Wie das Bild zeigt, waren es genau 14!</p><p align=\"center\"><img src=\"tutorial/images/hamburg.png\" width=\"75%\"></p>",
    		"<h2>Die Zeitleiste</h2><p>Ein weiteres wesentliches Element ist die Zeitleiste. Auch hier kann man Vergrößern, Verkleinern und Verschieben. Nachdem ein Datensatz geladen wurde, werden die verschiedenen Datenelemente in gleichlange Zeiträume (z.B. Stunde, Tag, Jahr) einsortiert, die als Zeitlinie dargestellt werden. Die Höhe der Zeitlinie spiegelt die Anzahl von Datenelementen innerhalb eines Zeitraumes wieder.</p><p>Das folgende Video erklärt die wesentlichen Interaktionsmöglichkeiten der Zeitleiste.</p><p>Probieren Sie danach die Navigationsmöglichkeiten der Zeitleiste aus dem Video an ihrem geladenen Datensatz aus. <b>In welchem Jahr gab es mehr Veröffentlichungen, 1904 oder 1912?</b></p>",
    	    "<h2>Die Zeitleiste</h2><p><b>In welchem Jahr gab es mehr Veröffentlichungen, 1904 oder 1912?</b> 1904 waren es 31, 1912 waren es 32, demnach ist 1912 die richtige Antwort!</p><p align=\"center\"><img src=\"tutorial/images/1912.png\" width=\"75%\"></p>",
    		"<h2>Teilauswahl von Daten</h2><p>Meist ist die Anzahl von Elementen eines Datensatzes so groß, dass man sie nicht alle betrachten kann. Mit <i>europeana4D</i> hat man die Fähigkeit, Teile der Daten nach geographischen und zeitlichen Eigenschaften auszuwählen, die man sich dann genauer ansehehn kann.</p><p>Die Auswahl einer Teilmenge von Daten hat stets folgende Auswirkungen:<li>Die Menge an Elementen wird kleiner.</li><li>Die Kreise auf der Karte werden neu angeordnet.</li><li>Die Zeitleiste wird neu aufgebaut.</li><li>Die Tabelle enthält nur noch die Elemente der getätigten Auswahl!</li></p><p>Ein wichtiger Hinweis: Über die History (rechts oben) können Sie stets mit dem Zurück-Button zum vorherigen Zustand gelangen. Sie können auch den gesamten Inhalt der Anwendung entfernen, wenn Sie direkt auf History und anschließend auf <i>empty</i> klicken!</p><p>In den folgenden Abschnitten wird ihnen erklärt, wie Sie eine Teilmenge eines Datensatzes auf der Karte und auf der Zeitleiste auswählen können.</p>",
    		"<h2>Selektionen auf der Karte (1)</h2><p>Sie haben die Möglichkeit, einen Teil der Daten in Abhängigkeit der geographischen Lage auf der Karte auszuwählen. Dazu gibt es verschiedene Werkzeuge. Das Video zeigt, wie man eine Auswahl eines einzelnen Kreises oder eines Ortes vornehmen kann.</p><p><b>Wie viele Veröffentlichungen von Shakespeare gab es in Helsinki im Jahr 1923?</b></p>",
    		"<h2>Selektionen auf der Karte (1)</h2><p><b>Wie viele Veröffentlichungen von Shakespeare gab es in Helsinki im Jahr 1923?</b> Es waren 8.</p><p>Nach Auswahl und Eingrenzung des Datensatzes auf den Kreis/die Stadt Helsinki, wird die Zeitleiste neu aufgebaut. Die Einteilung der Zeitleiste ändert sich dabei von 2 Jahren auf 1 Jahr. Schließlich kann man ablesen, dass es 1923 8 Veröffentlichungen waren!</p><p align=\"center\"><img src=\"tutorial/images/helsinki.png\" width=\"75%\"></p>",
    		"<h2>Selektionen auf der Karte (2)</h2><p>Sie sind ebenfalls in der Lage, mehrere Kreise gleichzeitig auszuwählen. Dazu gibt es verschiedene Werkzeuge - die Polygon-, Kreis- und Landauswahl. Das Video zeigt, wie man Gruppen von Kreisen auswählen kann.</p><p><b>Wie viele Veröffentlichungen von Shakespeare gab es zusammen auf den amerikanischen Kontinenten?</b></p>",
    		"<h2>Selektionen auf der Karte (2)</h2><p><b>Wie viele Veröffentlichungen von Shakespeare gab es zusammen auf den amerikanischen Kontinenten?</b> Nach der Selektion der entsprechenden Punkte mit Hilfe des Polygonwerzeuges kann man in der Tabelle ablesen, dass es 157 sind!</p><p align=\"center\"><img src=\"tutorial/images/america.png\" width=\"75%\"></p>",
    		"<h2>Selektionen auf der Zeitleiste</h2><p>Neben der Selektion von Elementen nach geographischer Lage ist auch die Selektion nach einem bestimmten Zeitraum möglich. Es können entweder Zeitpunkte oder ganze Zeiträume festgelegt werden. Das Video zeigt die Selektion auf der Zeitleiste und weitere Interaktionsmechanismen.</p><p><i>Hinweis:</i> Bei einer Auswahl auf der Zeitleiste mit anschließender Verfeinerung (Lupe) verändert sich meist die Skaleneinteilung der Zeitleiste!</p><p>Sie könnten nun in der Lage sein, eine komplexere Aufgabe zu lösen! <b>In welchem Jahrhundert gab es die meisten Veröffentlichungen von Shakespeare-Werken in London, im 18., 19. oder 20 Jahrhundert?</b> <i>Hinweis:</i> Denken Sie auch an das Stichwort 'London'!</p>",
    		"<h2>Selektionen auf der Zeitleiste</h2><p><b>In welchem Jahrhundert gab es die meisten Veröffentlichungen von Shakespeare-Werken in London, im 18., 19. oder 20 Jahrhundert?</b> Das 18. Jahrhundert ist die richtige Lösung.</p><p>Zunächst vergrößert man die Karte soweit, dass man für London nur noch einen Kreis hat. Wählt man nun schrittweise Zeiträume von 1700-1800, 1800-1900 und 1900-2000 erkennt man, dass der Anteil des gefüllten Innenkreises für das 18. Jahrhundert am größten ist (siehe Bild). Man kann auch für jedes Jahrhundert eine Selektion über die Zeit vornehmen und die Anzahl an Elementen für London über die Karte feststellen und vergleichen: 18 Jhd. (325), 19 Jhd. (105), 20 Jhd. (225)</p><p align=\"center\"><img src=\"tutorial/images/18th.png\" width=\"75%\"></p>",
    	    "<h2>Die Tabelle und Selektionen</h2><p>Die Tabelle ist der einzige Ort der Anwendung, an dem man direkten Zugang zu den einzelnen Objekten hat. Es gibt hier die Möglichkeit, sich die vorselektierten Elemente anzusehen und vor der finalen Selektion einzelne Elemente zu entfernen oder hinzuzufügen. Das Video zeigt die Möglichkeiten von Selektion in der Tabelle.</p><p><b>Nutzen Sie nun die Tabelle, um herauszufinden, wie viele Shakespeare-Werke in Italien veröffentlicht wurden.</b></p>", 
    	    "<h2>Die Tabelle und Selektionen</h2><p><b>Nutzen Sie nun die Tabelle, um herauszufinden, wie viele Shakespeare-Werke in Italien veröffentlicht wurden.</b> Es sind genau 5.</p><p>Mit Hilfe der Land- oder Polygonauswahl selektiert man die Punkte vor und anschließend lässt man sich in der Tabelle nur die selektierten Elemente anzeigen.</p><p align=\"center\"><img src=\"tutorial/images/tableSelection.png\" width=\"75%\"></p>", 
    	    "<h2>Mehrere Datensätze</h2><p>Es ist möglich, sich verschiedene Datensätze innerhalb einer Instanz von <i>europeana4D</i> anzusehen. Damit kann man die Daten vergleichen, nach Trends suchen oder auch Abhängigkeiten finden. Das Video zeigt ein Beispiel.</p>",
    	    "<h2>Ein komplexes Beispiel</h2><p>Zum Abschluß des Tutorials gibt es noch ein komplexeres Beispiel zu einem anderen Thema, welches wesentliche Bedienungsszenarien nochmals zeigt.</p><p><b>Beispielfrage: Suchen Sie einen vor 1970 geborenen französischen Fußballspieler, der bei Manchester United gespielt hat und Welt- und Europameister wurde.</b> Das Video erklärt, wie man zur Lösung der Frage kommt.</p><p><b>Versuchen Sie es selbst! Finden Sie einen deutschen Europameister, der bei Real Madrid und beim FC Barcelona gespielt hat!</b></p><p>Ein wichtiger Hinweis: Wenn Sie den gesamten Inhalt der Anwendung löschen wollen, klicken Sie auf History (rechts oben) und anschließend auf <i>empty</i>!</p>",
    	    "<h2>Ende</h2><p>Wir sind sicher, dass Sie in der Lage waren, die richtige Antwort zu finden. Danke, dass Sie sich für <i>europeana4D</i> interessieren. Wir hoffen, das Tutorial konnte einen ausreichenden Einblick in die Funktionalität bieten und demonstrieren, wie nützlich diese Anwendung sein kann.</p>"
    );
    
    this.stepVideos = new Array(null,"overview.flv","map.flv",null,"time.flv",null,null,"mapSelect1.flv",null,"mapSelect2.flv",null,"timeSelect.flv",null,"table.flv",null,"multiple.flv","example.flv",null);
    this.breakpoints = new Array(false,true,true,false,true,false,false,true,false,true,false,true,false,true,false,false,true,true);
    
    this.steps = this.stepTexts.length;
    this.initialize();
    
}

STITutorial.prototype = {

		initialize: function(){
			var tutorial = this;
			var tutorialLinkDiv = document.createElement("div");
			tutorialLinkDiv.setAttribute('class','tutorialLinkDiv');
			this.tutorialLink = document.createElement("a");
			this.tutorialLink.setAttribute('class','tutorialLink');
			this.tutorialLink.innerHTML = "Tutorial >> start";
			this.tutorialLink.onclick = function(){
				tutorial.nextStep();
			}
			tutorialLinkDiv.appendChild(this.tutorialLink);
			document.getElementsByTagName("body")[0].appendChild(tutorialLinkDiv);			
			this.tutorialDiv = document.createElement("div");
			this.tutorialDiv.setAttribute('class','tutorialDiv');						
		},
		
		setLink: function(){
			if( this.step%this.steps == 0 || this.step == 0 ){
				this.tutorialLink.innerHTML = "Tutorial >> start";
			}
			else {
				this.tutorialLink.innerHTML = "Tutorial >> next";
			}
		},
		
		showStep: function(){
			var tutorial = this;
			this.core.lockScreen();
			var s = this.step%this.steps;
			if( s == 0 ){
				s = this.steps;
			}
			this.tutorialDiv.innerHTML = "<h1><i>europeana4D</i> - Tutorial</h1>";
			this.tutorialDiv.innerHTML += this.stepTexts[s-1];
			var video = this.stepVideos[s-1];
			if( video != null ){
				var videoDiv = document.createElement("div");
				videoDiv.id = "player";
				videoDiv.setAttribute('class','video');
				this.tutorialDiv.appendChild(videoDiv);
				flowplayer("player", "tutorial/flowplayer/flowplayer-3.2.7.swf", { 
	   				clip: { 
	       				url: 'tutorial/videos/'+video,
	       				autoPlay: false 
	   				}  
				});
			}
			var tutorialButtons = document.createElement("div");
			tutorialButtons.setAttribute('class','tutorialButtons');			
			var okay = document.createElement("input");
			okay.type = "button";
			if( tutorial.breakpoints[s-1] ){
				okay.value = "OK";
			}
			else {				
				okay.value = "Weiter";				
			}
			okay.style.marginLeft = "auto";
			okay.style.marginRight = "auto";
			okay.onclick = function(){
				if( tutorial.breakpoints[s-1] ){
					tutorial.doneStep();
				}
				else {
					tutorial.nextStep();
				}
			}
			if( this.step > 1 ){
				var back = document.createElement("input");
				back.type = "button";
				back.value = "Zurück";
				back.onclick = function(){
					tutorial.previousStep();
				}
				tutorialButtons.appendChild(back);
			}
			tutorialButtons.appendChild(okay);
			this.tutorialDiv.appendChild(tutorialButtons);
			this.core.lockScreenMessage(this.tutorialDiv);	
			var close = document.createElement("img");
			close.src = "tutorial/images/close.png";
			close.setAttribute('class','closeTutorial');
			close.onclick = function(){
				tutorial.step--;
				tutorial.doneStep();
				tutorial.setLink();
			}
			this.tutorialDiv.appendChild(close);
			this.setLink();
		},
		
		doneStep: function(){
			flowplayer().pause();
			this.core.unlockScreen();
		},
		
		nextStep: function(){
			this.step++;
			this.showStep();
		},
		
		previousStep: function(){
			this.step--;
			this.showStep();
		}

}