//Bilder Vorladen
navImage1 = new Image(); navImage1.src = "fileadmin/images/navi_en_here_hover.gif";
navImage2 = new Image(); navImage2.src = "fileadmin/images/navi_en_reaching_hover.gif";
navImage3 = new Image(); navImage3.src = "fileadmin/images/navi_en_presenting_hover.gif";
navImage4 = new Image(); navImage4.src = "fileadmin/images/navi_en_introducing_hover.gif";
navImage5 = new Image(); navImage5.src = "fileadmin/images/navi_en_informing_hover.gif";
navImage6 = new Image(); navImage6.src = "fileadmin/images/navi_de_amkontaktieren_hover.gif";
navImage7 = new Image(); navImage7.src = "fileadmin/images/navi_de_amgipfel_hover.gif";
navImage8 = new Image(); navImage8.src = "fileadmin/images/navi_de_ampraesentieren_hover.gif";
navImage9 = new Image(); navImage9.src = "fileadmin/images/navi_de_amvorstellen_hover.gif";
navImage10 = new Image(); navImage10.src = "fileadmin/images/navi_de_aminformieren_hover.gif";


$(function() {
    //if (('#jsGallery:visible').length) amgestalten.Gallery.init();

	$('.jsGallery').each(function() {
		var gallery = new amgestalten.Gallery();
		gallery.init($(this));
	});

});

amgestalten = {};
amgestalten.Gallery = function() {};
amgestalten.Gallery.SHORT_INTERVAL = 6000;
amgestalten.Gallery.LONG_INTERVAL = 10000;
amgestalten.Gallery.prototype = {
    init : function(context) {
        this.SHORT_INTERVAL = amgestalten.Gallery.SHORT_INTERVAL;
        this.LONG_INTERVAL = amgestalten.Gallery.LONG_INTERVAL;

        this.context = context;
        this.images = $('img', this.context);
        this.navi = $('#jsGalleryNavi .inner');
        this.index = 0;
        this.interval = this.SHORT_INTERVAL;
        
        
        var maxheight = 0;
        $('img', this.context).each(function() {
        	maxheight = Math.max(maxheight, $(this).height());
        });
        this.height = maxheight;
        
        //set height
        this.context.css({height: this.height});        
        
        //create navilinks
        this.navi.empty();
		
		//abort if only 1 image
		if (this.images.length < 2) return;
		
        for (var i = 0; i< this.images.length; i++) {
            this.navi.append('<a href="#'+i+'">' + (i+1) + '</a>');
        }
        this.naviLinks = $('a', this.navi);
        
        var self = this;
        this.naviLinks.eq(0).addClass('active');
        this.naviLinks.bind('click', function(event) {
            event.preventDefault();
            self.onButtonClicked($(this));
        });
        
        //ImageAnimator animator
        this.animator = new ImageAnimator();
        this.animator.init(this.context, {
            images : this.images
        })

        this.autoPlay();

    },
    onButtonClicked : function(button) {
        var index = button.attr('href').match(/#(\d+)$/)[1];
        var index = parseInt(index, 10);
        var change = index - this.index;
        this.crossFade(change);
        this.stopAutoPlay();
    },
    crossFade : function(change, button) {
        //abort if already animating
        if (this.animator.isAnimating) return;

        this.index = this.animator.getIndex(change);
        this.animator.crossFade(change);
        this.naviLinks.removeClass('active');
        this.naviLinks.eq(this.index).addClass('active');
    },
    autoPlay : function() {
        var self=this;
        clearInterval(this.apInterval);
        this.apInterval = setInterval(function() {
            self.crossFade(1);
        }, this.interval);
    },
    stopAutoPlay : function() {
        clearInterval(this.apInterval);
    },
    switchInterval : function() {
        this.interval = this.interval == this.SHORT_INTERVAL ? this.LONG_INTERVAL : this.SHORT_INTERVAL;
    }
}

ImageAnimator = function() {};
ImageAnimator.FADETIME = 1300;
ImageAnimator.prototype.init = function(context, config) {
    config = config || {};
    this.context = context;
    this.index = 0;
    this.next = config.next || $('.jsNext', context);
    this.prev = config.prev || $('.jsPrev', context);
    this.images = config.images || $('IMG', this.context);

    //hide other images
    this.images.slice(1).hide();

    if (this.images.length > 1) {
        var self=this;
        this.next.bind('click', function(event){
            event.preventDefault();
            self.crossFade(1);
        }).css('cursor', 'pointer');
        this.prev.bind('click', function(event){
            event.preventDefault();
            self.crossFade(-1);
        }).css('cursor', 'pointer');
    } else {
        this.next.hide();
        this.prev.hide();
    }
}

ImageAnimator.prototype.getIndex = function(change) {
    var index = this.index + change;
    if (index >= this.images.length) index = 0;
    if (index < 0) index = this.images.length-1;
    return index;
}

ImageAnimator.prototype.setIndex = function(change) {
    this.index = this.getIndex(change);
}

ImageAnimator.prototype.crossFade = function(direction, callback) {
    
    //abort if animating
    if (this.isAnimating) return;
    
    var fout = this.images.eq(this.index);
    this.setIndex(direction);
    var fin = this.images.eq(this.index);
    
    this.isAnimating = true;
    var self = this;
    fout.fadeOut(ImageAnimator.FADETIME);
    fin.fadeIn(ImageAnimator.FADETIME, function() {
        if (callback) callback.call(self, self.index);
        self.isAnimating = false;
    });
    
}

ImageAnimator.prototype.swap = function(direction) {
    var fout = this.images.eq(this.index);
    this.setIndex(direction);
    var fin = this.images.eq(this.index);
    fin.show();
    fout.hide();
}