/**
 * EZ Illustration
 * post frontend
 *
 * (c) EZdesign.de
 *
 * Author:   Timo Besenreuther
 * Created:  2009-04-27
 * Modified: 2009-05-11
 */

$(document).ready(function() {
	EzIllustrationFePost.load();
});


var EzIllustrationFePost = {
	
	/**
	 * configuration
	 */
	
	config: {
		idart: 0,
		images: [],
		totalImages: 0,
		currentImage: 0,
		timeoutLength: 10000,
		imageContainer: null,
		descriptionContainer: null,
		descriptionInnerContainer: null,
		descriptionHeadContainer: null,
		descriptionTextContainer: null,
		fadeLength: 500,
		controls: null,
		paused: false,
		showNext: false,
		animating: false
	},
	
	
	/**
	 * load configuration from server
	 */
	
	load: function() {
		// get configuration
		$.post('includes/ezajax/ezajax.php', {
			'module': 'ezillustration',
			'subdir': 'frontends/post/classes',
			'class' : 'ezillustrationfepost',
			'method': 'ajaxGetConfig',
			'idart' : EzIllustrationFePost.config.idart
		}, function(response) {
			EzIllustrationFePost.config.images = response;
			EzIllustrationFePost.config.totalImages = response.length;
			EzIllustrationFePost.init();
		}, 'json');
	},
	
	
	/**
	 * inizialization
	 */
	
	init: function() {
		EzIllustrationFePost.config.imageContainer = $('#illustration');
		EzIllustrationFePost.config.descriptionContainer = $('#illustration_text_container');
		EzIllustrationFePost.config.descriptionInnerContainer = $('#illustration_text');
		EzIllustrationFePost.config.descriptionHeadContainer = $('#illustration_fehead');
		EzIllustrationFePost.config.descriptionTextContainer = $('#illustration_fedesc');
		EzIllustrationFePost.config.controls = EzIllustrationFeControlsBox;
		if (EzIllustrationFePost.config.totalImages > 1) {
			EzIllustrationFePost.config.controls.init();
			EzIllustrationFePost.setNextImgTimeout();
		}
		// description
		EzIllustrationFePost.config.descriptionContainer.css({
			height: '0px',
			marginTop: '297px'
		}).show();
		var innerHeight = EzIllustrationFePost.config.descriptionInnerContainer.outerHeight()+5;
		if (innerHeight > 20) {
			EzIllustrationFePost.config.descriptionContainer.show().animate({
				height: innerHeight + 'px',
				marginTop: (298 - innerHeight) + 'px'
			}, EzIllustrationFePost.config.fadeLength);
		}
	},
	
	
	/**
	 * set timeout for next image
	 */
	
	setNextImgTimeout: function() {
		if (EzIllustrationFePost.config.paused == false) {
			EzIllustrationFePost.config.timeout = window.setTimeout(function() {
				EzIllustrationFePost.next();
			}, EzIllustrationFePost.config.timeoutLength);
		}
	},
	
	
	/**
	 * show next image
	 */
	
	next: function() {
		var c = EzIllustrationFePost.config;
		if (c.currentImage + 1 >= c.totalImages) {
			EzIllustrationFePost.show(0);
		} else {
			EzIllustrationFePost.show(c.currentImage + 1);
		}
	},
	
	
	/**
	 * show previous image
	 */
	
	prev: function() {
		var c = EzIllustrationFePost.config;
		if (c.currentImage == 0) {
			EzIllustrationFePost.show(c.totalImages - 1);
		} else {
			EzIllustrationFePost.show(c.currentImage - 1);
		}
	},
	
	
	/**
	 * show an image
	 * @param	int		index
	 */
	
	show: function(i) {
		var c = EzIllustrationFePost.config;
		if (c.animating) {
			c.showNext = i;
		} else {
			window.clearTimeout(c.timeout);
			c.currentImage = i;
			var img = new Image;
			img.onload = function() {
				EzIllustrationFePost.transition(this.src);
			}
			img.src = c.images[c.currentImage].image;
		}
	},
	
	
	/**
	 * image transition
	 * @param	string	new image name
	 */
	
	transition: function(newImage) {
		var c = EzIllustrationFePost.config;
		c.animating = true;
		c.controls.update();
		var oldImage = c.imageContainer.find('img:first').css('zIndex', 52);
		c.imageContainer.append($('<img src="'+newImage+'" />').css('zIndex', 51));
		var nextImgFn = function() {
			oldImage.fadeOut(c.fadeLength, function() {
				$(this).remove();
				var c = EzIllustrationFePost.config;
				var afterTransition = function() {
					c.animating = false;
					if (c.showNext != false) {
						var show = c.showNext;
						c.showNext = false;
						EzIllustrationFePost.show(show);
					} else {
						EzIllustrationFePost.setNextImgTimeout();
					}
				};
				if (c.images[c.currentImage].head != '' || c.images[c.currentImage].description != '') {
					c.descriptionHeadContainer.html(c.images[c.currentImage].head);
					c.descriptionTextContainer.html(c.images[c.currentImage].description);
					c.descriptionContainer.show();
					var innerHeight = c.descriptionInnerContainer.outerHeight()+5;
					c.descriptionContainer.show().animate({
						height: innerHeight+'px',
						marginTop: (298-innerHeight)+'px'
					}, c.fadeLength, function() {
						afterTransition();
					});
				} else {
					afterTransition()
				}
			});
		};
		if (c.descriptionContainer.is(':visible')) {
			c.descriptionContainer.animate({
				height: '1px',
				marginTop: '297px'
			}, c.fadeLength, function() {
				$(this).hide();
				nextImgFn();
			});
		} else {
			nextImgFn();
		}
	}
	
};


/**
 * controls:
 * current image no
 * one circle for each image, clickable
 * pause function
 */

var EzIllustrationFeControlsBox = {
	
	// dom references
	imageNo:     null,
	playPause:   null,
	container:   null,
	next:        null,
	prev:        null,
	
	
	/**
	 * initalize
	 */
	
	init: function() {
		var c = EzIllustrationFePost.config;
		
		this.imageNo = $('#illustration_imgno');
		
		// pause
		this.playPause = $('#illustration_pause').click(function() {
			$(this).blur();
			EzIllustrationFeControlsBox.pause();
			return false;
		});
		
		// next
		this.next = $('#illustration_next').click(function() {
			$(this).blur();
			EzIllustrationFePost.next();
			return false;
		});
		
		// prev
		this.next = $('#illustration_prev').click(function() {
			$(this).blur();
			EzIllustrationFePost.prev();
			return false;
		});
		
		// update and show controls
		this.update();
		this.container = $('#illustration_controls').fadeIn();
	},
	
	
	/**
	 * pause
	 */
	
	pause: function() {
		if (EzIllustrationFePost.config.paused == false) {
			// pause
			EzIllustrationFePost.config.paused = true;
			this.playPause.html('abspielen').removeClass('playing').addClass('paused');
		} else {
			// play
			this.playPause.html('anhalten').removeClass('paused').addClass('playing');
			EzIllustrationFePost.config.paused = false;
			EzIllustrationFePost.next();
		}
	},
	
	
	/**
	 * upadte status
	 */
	
	update: function() {
		var c = EzIllustrationFePost.config;
		
		this.imageNo.html('Bild '+(c.currentImage+1)+' von '+c.totalImages);
		
	}
	
};