// JavaScript Document
/* Arrays enthalten die Pfade zu den Bildern der einzelnen Projekte */
/* Pfade zu großen Bildern von Projekt 1 */
var bilder1 = ['bilder/gross_01/gross_01.jpg', 'bilder/gross_01/gross_02.jpg', 'bilder/gross_01/gross_03.jpg'];
/* Bilder Projekt 2*/
var bilder2 = ['bilder/gross_02/gross_01.jpg', 'bilder/gross_02/gross_02.jpg', 'bilder/gross_02/gross_03.jpg', 'bilder/gross_02/gross_04.jpg'];
/* Bilder Projekt 3*/
var bilder3 = ['bilder/gross_03/gross_01.jpg', 'bilder/gross_03/gross_02.jpg', 'bilder/gross_03/gross_03.jpg', 'bilder/gross_03/gross_04.jpg', 'bilder/gross_03/gross_05.jpg'];
/* Bilder Projekt 4*/
var bilder4 = ['bilder/gross_04/gross_01.jpg', 'bilder/gross_04/gross_02.jpg'];
/* Bilder Projekt 5 - hier bei Bedarf weiteres Array ergänzen (Code von oben kopieren und Pfade anpassen. Die Variable muss entsprechend bilder5 heißen */

/* jeweils das erste Bild soll schon vorausgeladen werden */
var vorausbilder= ['bilder/gross_01/gross_01.jpg', 'bilder/gross_02/gross_01.jpg','bilder/gross_03/gross_01.jpg', 'bilder/gross_04/gross_01.jpg'];
var b = [];
var anzahl = vorausbilder.length;

    for (var i = 0; i < anzahl; i++) {
       b[i] = new Image();
       b[i].src = vorausbilder[i];
    }


$(function() {
  $('.bildbeschriftung h4').css('cursor', 'pointer');  
  $('.bildbeschriftung h4').click(function() { 
    var projektnummer = $(this).parent().attr("id");    
	projektnummer = projektnummer.replace(/projekt/,'');
    //$("#projekt"+projektnummer + " h4").html('Weitere Ansichten');
	
	var erstesbild = "bilder/gross_0"+projektnummer+"/gross_01.jpg";
	var bildid = "#bn"+projektnummer;
	$(bildid).attr('src', erstesbild);
	$("#projekt"+projektnummer + " h4").addClass('aktuell');
	
	
    wechsel(0, projektnummer);
	$('#bn'+projektnummer).addClass('grbild');
	var navigation = '#projekt' + projektnummer + ' .navi';
	var navzurueck = navigation + ' .zurueck';
    $(navigation).show();
	$(navzurueck).css('color', 'white');
  });
  $('.zurueck').click(function() {
    var projektnummer = $(this).parent().parent().attr('id');
	projektnummer = projektnummer.replace(/projekt/,'');
    wechsel(-1,  projektnummer);
  });
  $('.vor').click(function() {
     var projektnummer = $(this).parent().parent().attr('id');
	projektnummer = projektnummer.replace(/projekt/,'');
    wechsel(1, projektnummer);
  });

   var counter = 0;
  /* Bildwechsel-Funktion */
  
  function wechsel(richtung, pn) {
    var bilder = eval("bilder"+pn);
	var bild = "bild"+pn;
    var anzahl = bilder.length;
    if (richtung == 0 ) {
      counter=0;
    }
    if ((richtung == -1) && (counter > 0))
          counter--;
    if ((richtung == 1) && (counter < anzahl - 1))
          counter++;
    if (counter > (anzahl-1)) {
     counter = 0;
     }
     $('#' + bild).attr('src', bilder[counter]);
     var anzeige = counter +1;
	 if (counter ==0) {
		var navzurueck = '#projekt' + pn + ' .navi .zurueck';
		$(navzurueck).css('color', 'white');
	}
	else {
		var navzurueck = '#projekt' + pn + ' .navi .zurueck';
		$(navzurueck).css('color', '#999');
	}
	if (counter == anzahl-1) {
		var navvor = '#projekt' + pn + ' .navi .vor';
		$(navvor).css('color', 'white');
	}
	else {
		var navvor = '#projekt' + pn + ' .navi .vor';
		$(navvor).css('color', '#999');
	}
	 var meineid = "#projekt" + pn + ' .position';
     $( meineid).html(anzeige + '/' + anzahl);
   }

});