ShopCart = new Class({
	Implements: [Options],
	options: {
		duration: 400,
		timeout: 1300,
		align: 'left',
		anchor: null,
		width: 250
	},

	initialize: function(options) {
		this.setOptions(options);
		this.anchor = $(this.options.anchor);
		this.timer = null;
		this.inTransition = false;
		this.ready = false;
		this.locked = false;
		this.opened = false;
		this.curframe = null;
		this.chain = null;

		this.div = new Element('div', {
			id: 'shopCartDiv',
			styles: {
				top: 0,
				left: 0,
				position: 'absolute',
				display: 'none',
				overflow: 'hidden',
				'z-index': 99,
				width: this.options.width
			}
		}).inject(document.body);

		this.divContents = new Element('div', {
			'class': 'shopCartContents'
		}).inject(this.div);

		this.divContents.setStyle('width', this.options.width - (this.divContents.getStyle('padding-left').toInt() * 2));

		this.div.addEvent('mouseleave', this.startHide.bind(this));
		this.anchor.addEvent('mouseout', this.startHide.bind(this));

		this.div.addEvent('mouseenter', this.cancelHide.bind(this));
		this.anchor.addEvent('mouseover', this.cancelHide.bind(this));


		//this.show('x_cart');
	},

	show: function(frame, force, inChain) {
		this.cancelHide();
		if(this.inTransition) return;
		this.inTransition = true;

		if(this.locked) {
			if(force) this.locked = false;
			else return;
		}

		if(!this.opened) {
			if(this.curframe == null) this.showLoading();
			else this.divContents.setStyle('opacity', 0);


			this.div.setStyles({
				height: 1,
				width: 1,
				display: 'block'
			});

			var from = {};
			var to = {};

			switch(this.options.align) {
				case 'right':
					from = {
						top: 	this.anchor.getTop() + this.anchor.getHeight(),
						left:	this.anchor.getLeft() + this.anchor.getWidth() - 1
					};
					to = {
						left:	from.left - this.options.width,
						width:	this.options.width,
						height:	this.div.getScrollHeight()
					};
					break;

				case 'center':
					from = {
						top: 	this.anchor.getTop() + this.anchor.getHeight(),
						left:	this.anchor.getLeft() + (this.anchor.getWidth() / 2)
					};
					to = {
						left:	from.left - (this.options.width / 2),
						width:	this.options.width,
						height:	this.div.getScrollHeight()
					};
					break;

				default:
					from = {
						top: 	this.anchor.getTop() + this.anchor.getHeight(),
						left:	this.anchor.getLeft()
					};
					to = {
						left:	from.left,
						width:	this.options.width,
						height:	this.div.getScrollHeight()
					};
					break;
			};
			
			this.div.setStyles({
				top: from.top,
				left: from.left
			});

			new Fx.Morph(this.div, {
				duration: this.options.duration,
				onComplete: function() {
					this.showFrame(frame, force, inChain);
				}.bind(this)
			}).start({
				height: to.height,
				left: to.left,
				width: to.width
			});
		}
		else {
			this.showFrame(frame, force, inChain);
		}

		this.updateLabels();
	},

	showFrame: function(frame, force, inChain) {
		this.cancelHide();
		//if(!frame) frame = 'x_cart';

		var chain = new Chain().chain(function() {
			if(frame == null) {
				this.showLoading();
			} else if( this.curframe != frame || force ) {
				this.showLoading();

				var request = { url: 'site/shop/'+frame, data: {} };

				switch(frame) {

				};

				if(request.url) {
					new Request({
						url: request.url,
						method: 'post',
						data: request.data,
						onComplete: function(r) {
							this.divContents.setStyle('opacity', 0);
							this.divContents.empty();
							this.divContents.innerHTML = r;
		
							chain.callChain();
						}.bind(this)
					}).send();
				}

			}
			else if(this.opened && this.curframe == frame) {
				this.inTransition = false;
				return;
			}
			else {
				this.divContents.setStyle('opacity', 0);
				chain.callChain();
			}

		}.bind(this)).chain(function() {
			var oldh = this.div.getHeight();
			this.div.setStyle('height', 1);
			var toh = this.div.getScrollHeight();
			this.div.setStyle('height', oldh);
			
			new Fx.Tween(this.div, {
				duration: 300,
				onComplete: function() {
					chain.callChain();
				}.bind(this)
			}).start('height', toh);

		}.bind(this)).chain(function() {
			new Fx.Tween(this.divContents, {
				duration: 250,
				onComplete: function() {
					this.inTransition = false;
					chain.callChain();
				}.bind(this)
			}).start('opacity', 1);

		}.bind(this)).chain(function() {
			if( this.div.getScrollHeight() > this.div.getHeight() ) this.div.setStyle('height', this.div.getScrollHeight());

			chain.callChain();

		}.bind(this)).chain(function() {

			this.curframe = frame;
			this.opened = true;

			switch(frame) {
				case 'x_ship':
				case 'x_zip':
				case 'x_restricted':
				case 'x_coupon':
				case 'x_ship_ok':
					this.locked = true;
					this.cancelHide();
					break;
			};

			if(inChain) inChain.callChain();
		}.bind(this));

		chain.callChain();

		this.inTransition = false;
	},

	showLoading: function() {
		if($('shopCartLoading')) return;
		this.divContents.empty();

		var mtop = ( this.div.getHeight() ) ? (this.div.getHeight() / 2)-30 : 40;
		new Element('img', {
			id: 'shopCartLoading',
			src: 'assets/images/loading.gif',
			styles: {
				display: 'block',
				margin: mtop + 'px auto'
			}
		}).inject(this.divContents);
	},

	send: function(action, data, inChain) {
		this.showLoading();

		new Request({
			url: 'site/shop/'+action,
			method: 'post',
			data: data,
			onComplete: function(r) {

				if(inChain) inChain.callChain();
				else if(action == 'x_zip') {
					if(r.toInt() != 1) this.show('x_restricted', true);
					else this.show('x_ship_ok', true);
				}
				else this.show('x_cart', true);
			}.bind(this)
		}).send();
	},


	startHide: function() {
		if(this.locked) return;
		this.cancelHide();
		this.timer = setTimeout(function() {
			this.hide();
		}.bind(this), this.options.timeout);
	},

	cancelHide: function() {
		clearTimeout(this.timer);
	},

	hide: function() {
		this.cancelHide();
		if(this.inTransition) return;
		if(!this.opened) return;

		var chain = new Chain();
		chain.chain(function() {
			new Fx.Tween(this.divContents, {
				duration: 250,
				onComplete: function() {
					chain.callChain();
				}
			}).start('opacity', 0);

		}.bind(this)).chain(function() {
			toleft = this.anchor.getLeft();
			if(this.options.align == 'right') toleft += this.anchor.getWidth();
			else if(this.options.align == 'center') toleft += (this.anchor.getWidth() / 2);
	
	
			new Fx.Morph(this.div, {
				duration: this.options.duration,
				onStart: function() {
					this.inTransition = true;
				},
				onComplete: function() {
					this.div.setStyle('display', 'none');
					this.opened = false;
					this.locked = false;
					this.inTransition = false;
				}.bind(this)
			}).start({
				height: 1,
				left: toleft,
				width: 1
			});
		}.bind(this));

		chain.callChain();
	},

	addProduct: function(product_id, quantity, effectElement, data) {
		this.cancelHide();

		effectElement = $(effectElement);
		if(effectElement) {
			var clone = effectElement.clone();
			clone.setStyles({
				position: 'absolute',
				top: effectElement.getTop(),
				left: effectElement.getLeft(),
				opacity: .5
			}).inject($(document.body));

			var toLeft = this.anchor.getLeft() + (this.options.width / 2);
			if(this.options.align == 'right') toLeft = this.anchor.getLeft() + (this.anchor.getWidth() / 2) - (this.options.width / 2);
			else if(this.options.align == 'center') toLeft = this.anchor.getLeft() + (this.anchor.getWidth() / 2);

			new Fx.Morph(clone, {
				duration: 200,
				onComplete: function() {
					clone.destroy();
				}
			}).start({
				left: toLeft,
				top: this.anchor.getTop() + this.anchor.getHeight() + (effectElement.getWidth() / 2),
				width: effectElement.getWidth() / 2,
				height: effectElement.getHeight() / 2
			});
		}


		var chain = new Chain();
		chain.chain(function() {
			if(!data) data = {};

			data['product_id'] = product_id;
			data['quantity'] = quantity;

			this.send('x_cart-add', data, chain);
		}.bind(this)).chain(function() {
			this.show('x_cart', true);

		}.bind(this)).callChain();

	},

	updateLabels: function() {
		new Request({
			url: 'site/shop/x_updateLabels',
			method: 'post',
			onComplete: function(r) {
				r = JSON.decode(r);
				$$('.lblCartQty').set('html', r.quantity);
				$$('.lblCartTotal').set('html', r.total);
			}
		}).send();
	}

});



function photoZoom(img, options) {
	img = $(img);
	if(!img || !options.href) return;

	cancelPhotoZoom();
	$$('img.photoZoomImg').each(function(el) {
		photoUnzoom(el);
	});

	options.delay = (options.delay) ? options.delay : 0;

	window.photoZoomTimer = setTimeout(function() {
		var imgLoading = new Element('img', {
			id: 'photoZoomLoading',
			src: 'assets/images/loading-small.gif',
			styles: {
				display: 'block',
				position: 'absolute',
				width: 24,
				height: 24,
				'z-index': 99,
				left: img.getLeft() + (img.getWidth() / 2) - 12,
				top: img.getTop() + (img.getHeight() / 2)
			}
		}).inject($(document.body));
	
	
		var newImg = new Image();
		$(newImg).addEvent('load', function() {
			$(imgLoading).destroy();
	
			var clone = new Element('img', {
				'class': 'photoZoomImg',
				id: 'blah',
				src: newImg.src,
				styles: {
					display: 'block',
					position: 'absolute',
					width: img.getWidth(),
					height: img.getHeight(),
					top: img.getTop(),
					left: img.getLeft(),
					'z-index': 98
				}
			});
			clone.inject($(document.body));
			clone.store('photoZoomImg', img);

			new Fx.Morph(clone, {
				duration: 300,
				onComplete: function() {
					clone.addEvent('mouseout', function() {
						photoUnzoom(this);
					});

				}
			}).start({
				'height': options.height,
				'width': options.width,
				'left': clone.getLeft() - (options.width / 2) + (img.getWidth() / 2),
				'top': clone.getTop() - (options.height / 2) + (img.getHeight() / 2)
			});
		});
		newImg.src = options.href;
	}, options.delay);

}
function photoUnzoom(clone) {
	clone = $(clone);
	var img = $(clone.retrieve('photoZoomImg'));

	if(!img || !clone) return;


	new Fx.Morph(clone, {
		duration: 200,
		onComplete: function() {
			clone.destroy();
		}
	}).start({
		'height': img.getHeight(),
		'width': img.getWidth(),
		'left': img.getLeft(),
		'top': img.getTop()
	});
}

function cancelPhotoZoom() {
	clearTimeout(window.photoZoomTimer);
}