/**
 *
 * Spacegallery
 * Author: Stefan Petre www.eyecon.ro
 * 
 */

(function($){
	EYE.extend({
		
		spacegallery: {
			
			//default options (many options are controled via CSS)
			defaults: {
				border: 6, // border arround the image
				perspective: 140, // perpective height
				minScale: 0.2, // minimum scale for the image in the back
				duration: 800, // aimation duration
				loadingClass: null, // CSS class applied to the element while looading images
				before: function(){return false},
				after: function(){return false}
			},
			
			animated: false,
			
			//position images
			positionImages: function(el) {
				var top = 0;
				EYE.spacegallery.animated = false;
				$(el)
					.find('a')
						.removeClass(el.spacegalleryCfg.loadingClass)
						.end()
					.find('img')
						.removeAttr('height')
						.each(function(nr){
							var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];
							$(this)
								.css({
									top: el.spacegalleryCfg.tops[nr] + 'px',
									marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
									opacity: 1 - el.spacegalleryCfg.asins[nr]
								})
								.attr('width', parseInt(newWidth));
							this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
							this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
							this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
							this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
							this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
							this.spacegallery.current = el.spacegalleryCfg.asins[nr];
							this.spacegallery.width = newWidth;
						})
			},
			
			//animate to nex image
			next: function(e) {
				if (EYE.spacegallery.animated === false) {
					EYE.spacegallery.animated = true;
					var el = this.parentNode;
					el.spacegalleryCfg.before.apply(el);
					$(el)
						.css('spacegallery', 0)
						.animate({
							spacegallery: 100
						},{
							easing: 'easeOut',
							duration: el.spacegalleryCfg.duration,
							complete: function() {
								$(el)
									.find('img:last')
									.prependTo(el);
								EYE.spacegallery.positionImages(el);
								el.spacegalleryCfg.after.apply(el);
							},
							step: function(now) {
								$('img', this)
									.each(function(nr){
										var newWidth, top, next;
										if (nr + 1 == el.spacegalleryCfg.images) {
											top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
											newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
											$(this)
												.css({
													top: top + 'px',
													opacity: 0.7 - now/100,
													marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
												})
												.attr('width', newWidth);
										} else {
											next = this.spacegallery.current - this.spacegallery.increment * now /100;
											newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
											$(this).css({
												top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
												opacity: 1 - next,
												marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
											})
											.attr('width', newWidth);
										}
									});
							}
						});
				}
					
				this.blur();
				return false;
			},
			
			autoNext: function(el) {
				
				if (EYE.spacegallery.animated === false) {
					EYE.spacegallery.animated = true;
					el.spacegalleryCfg.before.apply(el); // run the "before" function
					$(el)
						.css('spacegallery', 0)
						.animate({
							spacegallery: 100
						},{
							easing: 'easeOut',
							duration: el.spacegalleryCfg.duration,
							complete: function() { // after animation is complete, move the front image to the back
								$(el)
									.find('img:last') // find the last image in this div
									.prependTo(el); // and stick it at the beginning
								EYE.spacegallery.positionImages(el); // run "position images"
								el.spacegalleryCfg.after.apply(el); //run the "after" function
							},
							step: function(now) {
								$('img', this)
									.each(function(nr){
										var newWidth, top, next;
										if (nr + 1 == el.spacegalleryCfg.images) {
											top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
											newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
											$(this)
												.css({
													top: top + 'px',
													opacity: 0.7 - now/100,
													marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
												})
												.attr('width', newWidth);
										} else {
											next = this.spacegallery.current - this.spacegallery.increment * now /100;
											newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
											$(this).css({
												top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
												opacity: 1 - next,
												marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
											})
											.attr('width', newWidth);
										}
									});
							}
						});
				}
					
				return false;
			},
			
			//constructor
			init: function(opt) {
				opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
				return this.each(function(){
					var el = this;
					if ($(el).is('.spacegallery')) {
						$('<a href="#"></a>')
							.appendTo(this)
							.addClass(opt.loadingClass)
							.bind('click', EYE.spacegallery.next);
						el.spacegalleryCfg = opt;
						el.spacegalleryCfg.images = el.getElementsByTagName('img').length;
						el.spacegalleryCfg.loaded = 0;
						el.spacegalleryCfg.asin = Math.asin(1);
						el.spacegalleryCfg.asins = {};
						el.spacegalleryCfg.tops = {};
						el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
						var top = 0;
						$('img', el)
							.each(function(nr){
								var imgEl = new Image();
								var elImg = this;
								el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
								top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
								el.spacegalleryCfg.tops[nr] = top;
								elImg.spacegallery = {};
								imgEl.src = this.src;
								if (imgEl.complete) {
									el.spacegalleryCfg.loaded ++;
									elImg.spacegallery.origWidth = imgEl.width;
									elImg.spacegallery.origHeight = imgEl.height
								} else {
									imgEl.onload = function() {
										el.spacegalleryCfg.loaded ++;
										elImg.spacegallery.origWidth = imgEl.width;
										elImg.spacegallery.origHeight = imgEl.height
										if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
										
											EYE.spacegallery.positionImages(el);
										}
									};
								}
							});
						el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
						el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
						if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
							EYE.spacegallery.positionImages(el);
							setInterval(function() { EYE.spacegallery.autoNext(el); }, 4000);
						}
					}
				});
			}
		}
	});
	
	$.fn.extend({
	
		/**
		 * Create a space gallery
		 * @name spacegallery
		 * @description create a space gallery
		 * @option	int			border			Images' border. Default: 6
		 * @option	int			perspective		Perpective height. Default: 140
		 * @option	float		minScale		Minimum scale for the image in the back. Default: 0.2
		 * @option	int			duration		Animation duration. Default: 800
		 * @option	string		loadingClass	CSS class applied to the element while looading images. Default: null
		 * @option	function	before			Callback function triggered before going to the next image
		 * @option	function	after			Callback function triggered after going to the next image
		 */
		spacegallery: EYE.spacegallery.init
	});
	$.extend($.easing,{
		easeOut:function (x, t, b, c, d) {
			return -c *(t/=d)*(t-2) + b;
		}
	});
})(jQuery);