/* Thierische Consult JavaScript */

var currentImg      = 0;
var activeImg       = 1;
var imageDivs;
var imageNumbers;
var serviceFaded    = false;
var impressumFaded  = true;

/*
Class: TCP
  Thierische Consult Project class, used for the project gallery

Note:
  static class
*/

var TCP = {
    
  /*
  Property: initProject
    Initialize a project page, load image containers into imageDivs
      
  Arguments:
    imageClass  - CSS class that marks the elements containing project images
  */
  
  initProject: function(imageClass) {
    
    this.nextImg           = $('nextImg');
    this.prevImg           = $('prevImg');
    this.slideshowStarted  = false;
    imageDivs              = $('image_container').getElements(imageClass); 
    imageNumbers           = $('img_nav').getElements('a.show_image.number');
    
    imageDivs.each(function(img) { img.setStyle('opacity', 0); });
    imageDivs[0].setStyle('opacity', 1);
    
    imageNumbers.each(function(img) { img.setStyle('display', 'none'); });
    for (count = 1; count < imageDivs.length; count++) {
      imageNumbers[count].setStyle('display', 'block');
    }
    
    this.nextImg.setStyle('display', 'none');
    this.prevImg.setStyle('display', 'none');
    if (imageDivs.length > 1) {
      imageNumbers[0].setStyle('display', 'block');
      this.nextImg.setStyle('display', 'block');
      this.prevImg.setStyle('display', 'block');
    }
    
    $('img_' + activeImg).toggleClass('active');
    
    this.nextImg.addEvent('click', function(event) {
    	$clear(this.periodical);
      this.showNext();
    }.bind(this));
    this.prevImg.addEvent('click', function(event) {
    	$clear(this.periodical);
      this.showPrevious();
    }.bind(this));
  },

  /*
  Property: initService
    Initialize a service page, load image containers into imageDivs, special handling of service info
      
  Arguments:
    imageClass  - CSS class that marks the elements containing project images
  */
  
  initService: function(imageClass, hideInfoLink) {
    
    this.hideInfoLink      = hideInfoLink || false;
    this.nextImg           = $('nextImg');
    this.prevImg           = $('prevImg');
    this.slideshowStarted  = false;
    imageDivs              = $('image_container').getElements(imageClass); 
    imageNumbers           = $('img_nav').getElements('a.show_image.number');
    
    imageDivs.each(function(img) { img.setStyle('opacity', 0); });
    imageDivs[0].setStyle('opacity', 1);
    
    imageNumbers.each(function(img) { img.setStyle('display', 'none'); });
    for (count = 1; count < imageDivs.length; count++) {
      imageNumbers[count].setStyle('display', 'block');
    }
    
    this.nextImg.setStyle('display', 'none');
    this.prevImg.setStyle('display', 'none');
    if (imageDivs.length > 1) {
      imageNumbers[0].setStyle('display', 'block');
      this.nextImg.setStyle('display', 'block');
      this.prevImg.setStyle('display', 'block');
    }
    
    $('img_' + activeImg).toggleClass('active');
    
    this.nextImg.addEvent('click', function(event) {
    	$clear(this.periodical);
      this.showNext();
    }.bind(this));
    this.prevImg.addEvent('click', function(event) {
    	$clear(this.periodical);
      this.showPrevious();
    }.bind(this));
    
    if (this.hideInfoLink) {
      $('img_0').setStyle('display', 'none');
    }
  },
  
  /*
  Property: initSlideshow
    Initialize a slideshow, load image containers into imageDivs
      
  Arguments:
    imageClass  - CSS class that marks the elements containing project images
  */
  
  initSlideshow: function(imageClass) {
    
    this.slideshowStarted  = true;
    imageDivs              = $('image_container').getElements(imageClass); 
    
    imageDivs.each(function(img) { img.setStyle('opacity', 0); });
    imageDivs[0].setStyle('opacity', 1);
  },

  /*
  Property: fadeImage
    Fade between images loaded into imageDivs
      
  Arguments:
    duration  - fading duration
    next      - end alpha value (0, 1) of the next image in the imageDivs list
    prev      - end alpha value (0, 1) of the previous image in the imageDivs list
  */

  fadeImage: function(duration, next, prev) {
    var fadeNext = imageDivs[currentImg].effect('opacity', {duration: duration});
    
    if (currentImg == 0) {
      var fadePrev = imageDivs[imageDivs.length - 1].effect('opacity', {duration: duration});
    } else {
      var fadePrev = imageDivs[currentImg - 1].effect('opacity', {duration: duration});
    }

    fadePrev.start(prev);
  	fadeNext.start(next);
  }, 

  /*
  Property: startSlideshow
    Start a project slideshow, simply calling showNext periodically
  */

  startSlideshow: function() {
    this.showNext(1000);
  	this.periodical = (function() { this.showNext(1000) }.bind(this)).periodical(7000);
  }, 

  /*
  Property: showNumber
    Fade to a specific image in the array
      
  Arguments:
    number    - array image number
    duration  - fading duration
  */
  
  showNumber: function(number, duration) {
    
    if (number != 'info') {
      currentImg = number-1;
      timing = duration || 350;

      for (count = 0; count < imageDivs.length; count++) {
        if (count != currentImg) {
          var showNrFade = imageDivs[count].effect('opacity', {duration: timing});
          showNrFade.start(0); 
        } else {
          var showNrFade = imageDivs[count].effect('opacity', {duration: timing});
          showNrFade.start(1); 
        }
      }

      this.changeActiveNumber(currentImg + 1);
      //$('gallery-status').innerHTML = "Bild " + (currentImg + 1) + " von " + imageDivs.length;
    } else if (number == 'info') {
      if (!window.ie) {
        var fadeServiceText = $('service_text').effect('opacity', {duration: 350});
      	if (serviceFaded) {
      	  fadeServiceText.start(1);
      	  serviceFaded = false;
      	} else {
      	  fadeServiceText.start(0);
      	  serviceFaded = true;
    	  }
  	  }
  	  else {
      	if (serviceFaded) {
      	  $('service_text').setStyles({'opacity': 1, 'display': 'block'});
          $('service_text').setStyles({'background': 'none', 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'./images/text-block-bg.png\')'});
      	  serviceFaded = false;
      	} else {
      	  $('service_text').setStyles({'opacity': 0, 'display': 'none'});
      	  serviceFaded = true;
    	  }
  	  }
      $('img_0').toggleClass('active');
    }
  }, 

  /*
  Property: showNext
    Fade to the next image in the image list
      
  Arguments:
    duration  - fading duration
  */
  
  showNext: function(duration) {
    timing = duration || 350;
    currentImg += 1;
    if (currentImg == imageDivs.length) {
      currentImg = 0;
    }
    this.fadeImage(timing, '1', '0');
    this.changeActiveNumber(currentImg + 1);
    //$('gallery-status').innerHTML = "Bild " + (currentImg + 1) + " von " + imageDivs.length;
  }, 

  /*
  Property: showPrevious
    Fade to the previous image in the image list
      
  Arguments:
    duration  - fading duration
  */
  
  showPrevious: function(duration) {
    timing = duration || 350;
    this.fadeImage(timing, '0', '1');
    
    if (currentImg == 0) {
      currentImg = imageDivs.length - 1;
    } else {
      currentImg -= 1;
    }
    this.changeActiveNumber(currentImg + 1);
    //$('gallery-status').innerHTML = "Bild " + (currentImg + 1) + " von " + imageDivs.length;
  },

  /*
  Property: changeActiveNumber
    Toggle Class of previously and currently selected image
      
  Arguments:
    number  - the new image to set active
  */
  
  changeActiveNumber: function(number) {
    if ($('img_' + activeImg)) {
      $('img_' + activeImg).toggleClass('active');
      $('img_' + number).toggleClass('active');
      activeImg = number;
      //$('gallery-status').innerHTML = "Bild " + (currentImg + 1) + " von " + imageDivs.length;
    }
  },
  
  /*
  Property: showInfo
    Show additional project info
  */
  
  showInfo: function() {
    var fadeInfo = $('info_fader' ).effect('opacity', {duration: 500});
    fadeInfo.start(1);
  },

  /*
  Property: hideInfo
    Hide additional project info
  */
  
  hideInfo: function() {
    var fadeInfo = $('info_fader' ).effect('opacity', {duration: 500});
    fadeInfo.start(0);
  },
  
  /*
  Property: showImpressum
    Show impressum
  */
  
  showImpressum: function() {
    var fadeImpressum = $('info_impressum' ).effect('opacity', {duration: 500});
    fadeImpressum.start(1);
  },

  /*
  Property: hideImpressum
    Hide impressum
  */
  
  hideImpressum: function() {
    var fadeImpressum = $('info_impressum' ).effect('opacity', {duration: 500});
    fadeImpressum.start(0);
  },

  /*
  Property: toggleImpressum
    Toggle impressum
  */
  
  toggleImpressum: function() {
    if (impressumFaded == true) {
      var fadeImpressum = $('info_impressum').effect('opacity', {duration: 500});
      var fadeImpressumOverlay = $('impressum_hider').effect('opacity', {duration: 500});
      fadeImpressum.start(1);
      fadeImpressumOverlay.start(0.85);
      impressumFaded = false;
    } else if (impressumFaded == false) {
      var fadeImpressum = $('info_impressum').effect('opacity', {duration: 500});
      var fadeImpressumOverlay = $('impressum_hider').effect('opacity', {duration: 500});
      fadeImpressum.start(0);
      fadeImpressumOverlay.start(0);
      impressumFaded = true;
    }
  },
  
  /*
  Property: slideToDiv
    Toggle Class of previously and currently selected image
      
  Arguments:
    number  - the new image to set active
  */
  
  slideToDiv: function(number) {
    
    var scroll = new Fx.Scroll('slide_div', {
    	wait: false,
    	duration: 2500,
    	offset: {'x': 0, 'y': 0},
    	transition: Fx.Transitions.Quad.easeInOut
    });

    scroll.toElement('content1');
  }
   
}