/**
 * Player für Bilder ("Diaschau") mit Interaktionsmöglichkeiten
 *
 * Michael Ibsen
 * michael.ibsen@xisio.com
 * http://www.xisio.com
 *
 * 13.4.2010
 * Letzte Änderungen: 
 * 21.9.2010: Bildgröße angepasst
 * 11.5.2010
 *
 */

$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});


$(document).ready(function() {
	
	// Bilderliste
	var arrImages = new Array();
	
	// PDF-Datei mit Zusatzinformationen (optional)
	var strPDFFile = '';

    // Projekttitel und -datum
    var strProjectTitle = '';
    var strProjectDate = '';
    
	// Steuerung	
	var nInterval = 6000; // Umschaltinterval zwischen den Bildern in ms
	var nFadeSpeed = 30; // Dauer eines Einzelschritts bei fadeIn und fadeOut (ms)
	var timerRunning = false;
	var timerFadeOut = false;
	var timerFadeIn = false;
	var gstrImage = '';
	var gstrPun = '';
	var gnPrevPun = -1; // vorhergehendes Wortspiel (verhindern, dass zweimal nacheinander dasselbe kommt)
	var nCurrentImage = 0;
	var nOldImage = 0;
	var nImageCount = 0;
	
    
    // Wortspiele 
    var garrPuns = new Array();
    // Alle Wortspiele werden auf einmal angefordert. Dadurch
    // reduziert sich die Anzahl der Anfragen an den Server
	$.getJSON('fileadmin/scripts/getpun.php?getall=1', function(data) {
		//$('#rp_image_pun').html(data);
		garrPuns = data;
	});

    $('#rp_image_info').hide();
    
    // Get object of URL parameters
	//var allVars = $.getUrlVars();
	
	// Modus: project | idle
	// Im project Modus werden die Bilder eines bestimmten Projekts
	// gezeigt und die Einblendung der Wortspiele fehlt.
	// Im idle Modus werden Bilder aus verschiedenen Projekten gezeigt und 
	// Wortspiele angezeigt.
	var strMode = 'project';

	/**
	 * Schaltet zum nächsten Bild weiter und ruft sich selbst
	 * über setTimeout nach der vorgegebenen Zeit wieder auf.
	 *
	 * @author Michael Ibsen
	 * @date 2010-04-13
	 *
	 */
	var imageRotate = function() {
        // Bilder werden über AJAX in die Liste geladen.
        // Wenn (bereits) Bilder in der Liste sind, zum
        // nächsten Bild weiterschalten:
        if (arrImages.length > 0) {
            // Bild weiterschalten
            nextImage();
        }
        else {
			// imageRotate nach vorgegebenem Interval erneut aufrufen
			timerRunning = setTimeout(imageRotate, nInterval);
        
        }
        
	};

	var mfadeOut = function() {
        
        // fadeOut nur, wenn fadeIn gerade nicht aktiv ist
        if (false == timerFadeIn) {
        
			var opacity = parseFloat($('#rp_image').css('opacity'));
			if (opacity > 0.0) {
				opacity = Math.max(0.0, (opacity - 0.03));
				$('#rp_image').css('opacity', opacity);
				timerFadeOut = setTimeout(mfadeOut, nFadeSpeed);
			}
			else {

				clearTimeout(timerFadeOut);
				timerFadeOut = false;

				// Bild umschalten
				$('#rp_image').css('background-image', gstrImage);
				$('#rp_image_pun').html(gstrPun);

				// fadein starten
				timerFadeIn = setTimeout(mfadeIn, nFadeSpeed);

				// alternativ: sofort einschalten
				//$('#rp_image').css('opacity', 1.0);
			}
		}		
		
	}
	
	var mfadeIn = function() {

        // fadeIn nur, wenn fadeOut gerade nicht aktiv ist
        if (false == timerFadeOut) {
		
			//if (!timerFadeIn) {
			//}

			var opacity = parseFloat($('#rp_image').css('opacity'));
			if (opacity < 1.0) {
				opacity = Math.min(1.0, (opacity + 0.03));
				$('#rp_image').css('opacity', opacity);
				timerFadeIn = setTimeout(mfadeIn, nFadeSpeed);
			}
			else {

				clearTimeout(timerFadeIn);
				timerFadeIn = false;

				clearTimeout(timerFadeOut);
				timerFadeOut = false;

			}
		}
	}
	
	
    /**
     * Schaltet zum nächsten Bild weiter
     *
     * @author Michael Ibsen
     * @date 2010-04-14
     *
     */
    var nextImage = function() {
    	/*
        clearTimeout(timerRunning);
        timerRunning = false;
		*/

        // im idle Modus zufälliges Bild wählen, sonst nächstes.
        // Das geht, weil im idle Modus kein (Zurück-)Blättern möglich ist.
        if ('idle' == strMode) {
            // zufälliges Bild
            nCurrentImage = Math.floor(Math.random() * nImageCount);
            // nie dasselbe zweimal nacheinander; 
            while ( (nImageCount > 1) && (nCurrentImage == nOldImage) ) {
                nCurrentImage = Math.floor(Math.random() * nImageCount);
            }
            //nOldImage = nCurrentImage;        
        }
        else {
            // nächstes Bild
            nCurrentImage = (nOldImage + 1) % nImageCount;
        }
        
        // Bildinformation anzeigen
        // var strImageText = strProjectTitle + ', ' + arrImages[nCurrentImage]['properties']['title'] + ' ' + strProjectDate;
        var strImageText = '';
        if ( (undefined != arrImages[nCurrentImage]['properties']['project_title']) && 
             (undefined != arrImages[nCurrentImage]['properties']['title']) ) {
			// Seitentitel anpassen
			document.title = arrImages[nCurrentImage]['properties']['project_title']; 
			
			// Bildunterschrift setzen
            strImageText = arrImages[nCurrentImage]['properties']['project_title'] + ', ' + arrImages[nCurrentImage]['properties']['title'] + ' ' + arrImages[nCurrentImage]['properties']['project_date'];
        }
        
        
        $('#rp_text').text(strImageText);

        // Hintergrund des Bildelementes (=Bild) tauschen
        var strBGImage = 'url(\'fileadmin/scripts/thumbnail.php?src=../' + arrImages[nCurrentImage]['properties']['path'] + '/' + arrImages[nCurrentImage]['properties']['file'] + '&p=545\')';

		// sanften Übergang erzeugen, indem das Bild zuerst als 
		// Hintergrund des umgebenden DIV-Tags (id="player") gesetzt und
		// die Transparenz des bisherigen Bildes schrittweise auf Null gefahren
		// wird. Erst dann wird das Bild ausgetauscht und die Transparenz wieder auf
		// eins gestellt.
		
        $('#pwrapper').css('background-image', strBGImage);

		gstrImage = strBGImage;
	    
	    // --- Wortspiel ermitteln ---
	    /*
        $.get('fileadmin/scripts/getpun.php', function(data) {
            //$('#rp_image_pun').html(data);
			gstrPun = data;
        });
        */
        var randomnumber = Math.floor(Math.random() * (garrPuns.length + 1));
        // nie dasselbe zweimal nacheinander; 
        // es müssen immer mind. 2 Wortspiele vorhanden sein, sonst while überspringen
		/*
		if (randomnumber == gnPrevPun) {
			alert('Duplicate pun: ' + randomnumber);
		}
		*/
        while ( (garrPuns.length > 1) && (randomnumber == gnPrevPun) ) {
        	randomnumber = Math.floor(Math.random() * (garrPuns.length + 1));
        	//alert('Duplicate pun correction:' + randomnumber);
        }
        gstrPun = garrPuns[randomnumber];
        gnPrevPun = randomnumber;
        
		mfadeOut();
                
        // Bild weiterschalten
        nOldImage = nCurrentImage;
        
        timerRunning = setTimeout(imageRotate, nInterval);
    };

    /**
     * Schaltet zum vorhergehenden Bild zurück
     *
     * @author Michael Ibsen
     * @date 2010-04-14
     *
     */
    var prevImage = function() {
    	/*
        clearTimeout(timerRunning);
        timerRunning = false;
		*/
		
        nCurrentImage = nOldImage - 1;
        if (nCurrentImage < 0) {
            nCurrentImage = nImageCount - 1;
        }

		// Seitentitel anpassen
		document.title = arrImages[nCurrentImage]['properties']['project_title']; 

        // Bildinformation anzeigen
        // var strImageText = strProjectTitle + ', ' + arrImages[nCurrentImage]['properties']['title'] + ' ' + strProjectDate;
        var strImageText = arrImages[nCurrentImage]['properties']['project_title'] + ', ' + arrImages[nCurrentImage]['properties']['title'] + ' ' + arrImages[nCurrentImage]['properties']['project_date'];
        $('#rp_text').text(strImageText);

        // Hintergrund des Bildelementes (=Bild) tauschen
        var strBGImage = 'url(fileadmin/scripts/thumbnail.php?src=../' + arrImages[nCurrentImage]['properties']['path'] + '/' + arrImages[nCurrentImage]['properties']['file'] + '&p=545)';

        //$('#rp_image').css('background-image', strBGImage);

		// sanften Übergang erzeugen, indem das Bild zuerst als 
		// Hintergrund des umgebenden DIV-Tags (id="player") gesetzt und
		// die Transparenz des bisherigen Bildes schrittweise auf Null gefahren
		// wird. Erst dann wird das Bild ausgetauscht und die Transparenz wieder auf
		// eins gestellt.
		
        $('#pwrapper').css('background-image', strBGImage);

		gstrImage = strBGImage;
	    
	    /*
        $.get('fileadmin/scripts/getpun.php', function(data) {
            //$('#rp_image_pun').html(data);
			gstrPun = data;
        });
        */
        var randomnumber = Math.floor(Math.random() * (garrPuns.length + 1))
        // nie dasselbe zweimal nacheinander; 
        // es müssen immer mind. 2 Wortspiele vorhanden sein, sonst while überspringen
        while ( (garrPuns.length > 1) && (randomnumber == gnPrevPun) ) {
        	randomnumber = Math.floor(Math.random() * (garrPuns.length + 1));
        }
        gstrPun = garrPuns[randomnumber];
        gnPrevPun = randomnumber;
        
		mfadeOut();

        // Bild weiterschalten
        nOldImage = nCurrentImage;
        
        timerRunning = setTimeout(imageRotate, nInterval);
    };

    
    /**
     * Daten des Projekts von der BuildingBase holen.
     * 
     * Die gefundenen Bilder werden in die (globale) Liste arrImages
     * übernommen.
     *
     * Im 'idle' Modus werden nur Bilder mit dem project_type 
     * 'photos' in die Liste aufgenommen.
     *
     * @author Michael Ibsen
     * @date 2010-05-18
     *
     */
    var getProject = function(strProjectURI, strMode) {

        // 
        //$.getJSON('fileadmin/scripts/getdata.php?uri=PROJECT_5', function(data) {
        $.getJSON('fileadmin/scripts/getdata.php?uri=' + strProjectURI + '&mode=' + strMode, function(data) {
            if (1 == data.success) {
                // Daten zum Projekt gefunden,
                // Bilder speichern

                // bei jedem Bild werden die Projektdaten "Title", "adate_year" 
                // und "adate_month" (redundant) gespeichert. Jedes Bild erhält
                // damit alle Informationen, die zum Anzeigen benötigt werden.
                // Dadurch kann die Liste Bilder aus mehreren unabhängigen
                // Projekten enthalten.

                // erster Durchlauf: Projektdaten suchen
                $.each(data['instances'], function(entryIndex, entry) {
                    // Bilder hier ignorieren

                    // Projekt und PDF suchen
                    if ('raumwerk:project' == entry['datatype']) {
                        strProjectTitle = entry['properties']['title'];

                        // Seitentitel anpassen
                        //document.title = strProjectTitle; 

                        // Datum, wenn vorhanden
                        if ('' != entry['properties']['adate_year']) {
                            strProjectDate = '[' + entry['properties']['adate_month'] + '/' + entry['properties']['adate_year'] + ']';
                        }

                    }
                    else if ('raumwerk:pdf' == entry['datatype']) {
                        // das einzige vorhandene PDF wird verwendet
                        // PDF, wenn vorhanden und nicht im idle Modus
                        if ( (undefined != entry['properties']['path']) && (undefined != entry['properties']['file']) && ('project' == strMode)) {
                            strPDFFile = 'fileadmin/' + entry['properties']['path'] + '/' + entry['properties']['file'];

                            // Info-Button einschalten, wenn 
                            //$('#rp_image_info').css('display', 'block');
                            $('#rp_image_info').show();
                            $('a#rp_info').attr('href', strPDFFile);
                            //
                            //$('a#rp_info').attr('href', strPDFFile);

                        }
                   }
                });

                // zweiter Durchlauf: Bilder in Liste übernehmen
                $.each(data['instances'], function(entryIndex, entry) {

                    if ('raumwerk:image' == entry['datatype']) {                


                        // im idle Modus nur Bilder berücksichtigen,
                        // bei denen project_type 'plans' ist:
                        if ( (strMode != 'idle') || ('plans' == entry['properties']['project_type']) ) {

                            // Projektinformationen hinzufügen:
                            entry['properties']['project_uri'] = strProjectURI;
                            entry['properties']['project_title'] = strProjectTitle;
                            entry['properties']['project_date'] = strProjectDate;
                            entry['properties']['pdf'] = strPDFFile;

							/*
							// Bild anfordern, damit es in der Anforderungsreihenfolge
							// vorne liegt
							var imgDummy = $.get('fileadmin/scripts/thumbnail.php?src=../projects/' + entry['properties']['path'] + '/' + entry['properties']['file'] + '&p=420');
							*/
							
                            // in Bilderliste einfügen
                            arrImages.push(entry);
                            
                            
                            // alle Bilder in #rp_img_preload laden, um sie in den
                            // Browser-cache zu übernehmen
                            var strPreloadImage = 'fileadmin/scripts/thumbnail.php?src=../' + entry['properties']['path'] + '/' + entry['properties']['file'] + '&p=545'; 
                            // $('#rp_img_preload').css('background-image', strPreloadImage);
                            $('#rp_img_preload').append('<img src="' + strPreloadImage + '" />');
                            
                            
							// erstes Bild sofort einblenden, wenn nicht idle Modus
							if (('idle' != strMode) && (1 == arrImages.length)) {
                                var strFGImage = 'url(\'fileadmin/scripts/thumbnail.php?src=../' + arrImages[0]['properties']['path'] + '/' + arrImages[0]['properties']['file'] + '&p=545\')'; 
								gstrImage = strFGImage;
								//$('#rp_image').css('background-image', strFGImage);
								$('#rp_image').css('opacity', 0.01);
								mfadeOut();
								//alert(nCurrentImage);
							}
                        }
                    }
                });

                nImageCount = arrImages.length;

                // optional: Anzeige eines "Loading" Textes
                //$('#rp_image_pun').css('color', '#6D6C5F');
                //$('#rp_image_pun').text('Loading... ' + nImageCount);

                // Diaschau starten
                // timerRunning = setTimeout(imageRotate, nInterval);
            }
            else {
                // Daten des Projekts konnten nicht geladen werden.
                $('#rp_text').text('Daten konnten nicht geladen werden (' + strProjectURI + ').');
            }
        });
    }

	
	// Getting URL var by its name
	var strProjectURI = $.getUrlVar('puri');
	if (undefined == strProjectURI) {
		strMode = 'idle';

        // Default Startbild zeigen
        // $('#rp_image').css('background-image', 'url(\'fileadmin/images/layout/werkschau_default.jpg\')');
        
        nOldImage = 0;
        nImageCount = 1;
        var arrFirstImage = new Array();
		arrFirstImage['properties'] = new Array();
        arrFirstImage['properties']['file'] = 'werkschau_default.jpg';
        arrFirstImage['properties']['path'] = 'images/layout';
        arrImages.push(arrFirstImage);
		nextImage();

        // Liste aller Projekte mit Bildern vom Server holen:
        // Bedingung "image cnt> 0", also "mind. ein Bild vorhanden"
        var strWhere = 'a:2:{s:4:"type";s:3:"AND";s:10:"conditions";a:1:{i:0;s:12:"image cnt>%200";}}';

        $.getJSON('fileadmin/scripts/getlist.php?curi=project&where=' + strWhere, function(data) {
            // Projekte durchlaufen und Daten und Bilder holen
            $.each(data[0]['children'], function(projectIndex, project) {
                
                // Daten des Projekts von der BuildingBase holen
                getProject(project['uri'], strMode);
            });
        });        
        
		// Pfeile ausschalten
		$('#rp_arrow_left').hide();
		$('#rp_arrow_right').hide();
		
	}
	else {
		// Darstellung eines konkreten Projekts
		
		// Wortspiele aus- und Erklärung einschalten		
        $('#rp_image_pun').css('color', 'transparent');
        $('#rp_image_pun').css('filter', 'alpha(opacity=0)');
        $('#rp_image_pun_center').css('color', 'transparent');
        $('#rp_image_pun_center').css('filter', 'alpha(opacity=0)');

		// Schrift der Erklärung unter dem Bild einschalten
		$('#rp_text').css('color', '#6d6c5f');

		// Pfeile einschalten
		$('#rp_arrow_left').show();
		$('#rp_arrow_right').show();

        // Daten des Projekts von der BuildingBase holen
        getProject(strProjectURI, strMode);
        
	}
		

    
    // Diaschau anhalten, wenn Maus über dem Bild(element)
    // oder über den Pfeilen ist. Die Elemente müssen dafür
    // in HTML die Class "startstop" erhalten.
    $('.startstop').hover(function() {
        clearTimeout(timerRunning);
        timerRunning = false;
        
        
        // bei Mouseover Schrift ausblenden, wenn idle Modus
        if ('idle' == strMode) {
            $('#rp_image_pun').css('color', 'transparent');
            $('#rp_image_pun').css('filter', 'alpha(opacity=0)');
            $('#rp_image_pun_center').css('color', 'transparent');
            $('#rp_image_pun_center').css('filter', 'alpha(opacity=0)');

			// Schrift der Erklärung unter dem Bild einschalten
			$('#rp_text').css('color', '#6d6c5f');
		}
		

		// Cursor über den Pfeilen
		$('#rp_left').css('cursor', 'pointer');
		$('#rp_right').css('cursor', 'pointer');

    }, function() {
        if (!timerRunning) {
            timerRunning = setTimeout(imageRotate, nInterval);
        }

        // Schrift wieder einschalten (weiß), wenn idle Modus
        if ('idle' == strMode) {
            $('#rp_image_pun').css('color', 'white');
            $('#rp_image_pun_center').css('color', 'white');

			// Schrift der Erklärung unter dem Bild ausschalten (weiß auf weiß)
			$('#rp_text').css('color', 'white');
		}
		
		// Cursor über den Pfeilen
		$('#rp_left').css('cursor', 'default');
		$('#rp_right').css('cursor', 'default');
		
        // MSIE kann nicht mit Transparenz umgehen; 
        // das Antialiasing rendert immer gegen die 
        // Hintergrundfarbe und "transparent" wird als schwarz
        // dargestellt. Das führt zu schwarzen Flecken rund um
        // den weißen Text...
        // Mit folgendem Trick wird 'lightgrey' in transparent
        // umgebogen (nur MSIE).
        if ( ('idle' == strMode) && ($.browser.msie) ) {
            $('#rp_image_pun').css('background-color', 'lightgrey');
            $('#rp_image_pun').css('filter', 'chroma(color=lightgrey');
            $('#rp_image_pun_center').css('background-color', 'lightgrey');
            $('#rp_image_pun_center').css('filter', 'chroma(color=lightgrey');
        }
        
    });
        
    if ('idle' == strMode) {
        // Klick auf den Player
        $("#rp_image").click(function() {
            // alert("Don't click this image again!");
            //$(this).empty();
            
            // URI des Projekts, zu dem das aktuelle Bild gehört:
            var strTarget = 'werkschau.html?puri=' + arrImages[nCurrentImage]['properties']['project_uri'];

            // Seitentitel anpassen                        
            window.location.replace(strTarget);

        });
    }    
    
    $("#rp_left").click(function() {
        //clearTimeout(timerRunning);
        //nOldImage = (nOldImage - 2) % nImageCount;
        //$('#rp_text').append(' -> ' + nOldImage);
        
        if ((false == timerFadeIn) && (false == timerFadeOut)) {
			clearTimeout(timerRunning);
			timerRunning = false;

			prevImage();
		}
    });

    $("#rp_right").click(function() {
        //clearTimeout(timerRunning);
        //nOldImage = (nOldImage + 1) % nImageCount;
        //$('#rp_text').append(' -> ' + nOldImage);
        if ((false == timerFadeIn) && (false == timerFadeOut)) {
			clearTimeout(timerRunning);
			timerRunning = false;
			nextImage();
		}
    });

    // Diaschau starten
	//var strFGImage = 'url(\'fileadmin/scripts/thumbnail.php?src=../' + arrImages[nCurrentImage]['properties']['path'] + '/' + arrImages[nCurrentImage]['properties']['file'] + '&p=420\')';		
	//$('#rp_image').css('background-image', strFGImage);
	//$('#rp_image').css('opacity', 0);
	//alert(nCurrentImage);

    // timerRunning = setTimeout(imageRotate, nInterval);
    timerRunning = setTimeout(imageRotate, 0); // beim ersten Start verzögerungslos
    //imageRotate();

});