var MooToolsVersion = MooTools.version.substr(0,3).toFloat();

window.addEvent('domready', function() {
	$('contentContainer').getElements('div.toolbar').each(function(toolbar) {
		toolbar.getElements('select').addEvent('change', function() {
			this.getParent('form').submit();
		});
		toolbar.getElement('input[type=submit]').destroy();
	});

	$('contentContainer').getElements('.ellipsis').each(function(el) {
		if (inner = el.getElement(':first-child')) {
			var container = el.getSize();
			var content = inner.getSize();

			if (content.y - 2 > container.y || content.x > container.x) {
				el.setStyle('position','relative');
				new Element('div', {'html':'…'}).inject(el).setStyles({
					'position': 'absolute',
					'bottom': 0,
					'right': 0
				});
				el.set('title', inner.get('html'))
				new Tips(el, {'fixed':true,'offset':{'y':35}});
			}
		}
	})

	if ($('billing:region')) {
		if ($('billing:country_code').getElement('option:selected').value == 'gb')
			$('billing:regionGB').removeClass('hidden');
		else
			$('billing:region').removeClass('hidden');

		$('billing:country_code').addEvent('change', function() {
			if ($('billing:country_code').getElement('option:selected').value == 'gb') {
				$('billing:regionGB').removeClass('hidden');
				$('billing:region').addClass('hidden');
			} else {
				$('billing:regionGB').addClass('hidden');
				$('billing:region').removeClass('hidden');
			}
		});
	}

	if ($('shipping:region')) {
		if ($('shipping:country_code').getElement('option:selected').value == 'gb')
			$('shipping:regionGB').removeClass('hidden');
		else
			$('shipping:region').removeClass('hidden');

		$('shipping:country_code').addEvent('change', function() {
			if ($('shipping:country_code').getElement('option:selected').value == 'gb') {
				$('shipping:regionGB').removeClass('hidden');
				$('shipping:region').addClass('hidden');
			} else {
				$('shipping:regionGB').addClass('hidden');
				$('shipping:region').removeClass('hidden');
			}
		});
	}

	if ($('cardTypes')) {
		$('card:cvv').setProperty('autocomplete', 'off');
		$('card:number').setProperty('autocomplete', 'off');

		$('cardTypes').getElements('input').addEvent('click', function() {
			var cardSelected = $('cardTypes').getElement('input:checked');

			$('cardTypes').getParent('ul').removeClass('hideLI');

			switch (cardSelected.value) {
				case 'visa':
				case 'delta':
				case 'mastercard':
				case 'electron':
					$('card:startdate').getParent('div.field').getElement('label').removeClass('required');
					$('card:issue').getParent('li').addClass('hidden');
					$('card:cvv').getParent('li').removeClass('hidden');
					break;
				case 'maestro':
				case 'solo':
					$('card:startdate').getParent('div.field').getElement('label').addClass('required');
					$('card:issue').getParent('li').removeClass('hidden');
					$('card:cvv').getParent('li').addClass('hidden');
					break;
			}
		})
	}

	if ($('vouchers')) {
		$('vouchers').getElements('span.voucherInfo').each(function(el) {
			var voucher = JSON.decode(el.get('text'));
			var infoText = '';
			if (voucher.type == 'gift') {
				infoText += 'Gift Voucher ';
			} else if (voucher.type == 'special') {
				infoText += 'Promotional Discount ';
			} else if (voucher.type == 'offer') {
				infoText += 'Special Offer ';
			}

			infoText += ' code: ' + voucher.code + '<br/>';

			if (voucher.value)
				infoText += 'Discount of <strong>&pound;' + (voucher.value / 100).fixed(2) + '</strong>' + (voucher.original ? ' (original value &pound;' + (voucher.original / 100).fixed(2) + ')' : '') + '.<br/>';

			if (voucher.percent)
				infoText += 'Discount of <strong>' + voucher.percent + '%</strong><br/>';

			if (voucher.limited)
				infoText += 'Limited to one voucher of this type per order.<br/>';

			if (voucher.min)
				infoText += 'Basket value must be &pound;' + (voucher.min / 100).fixed(2) + ' or over.<br/>';

			var popout = new Element('div', {
				'class': 'popout',
				'html': infoText,
				'styles': {
					'width': 300,
					'min-height': 50
				}
			}).inject($('page'));
			new Element('span').inject(popout, 'top');

			el.removeClass('hidden');

			popout.position({
				'relativeTo':el,
				'position': 'topLeft',
				'offset': {'x': 20, 'y': -4}
			}).setStyle('opacity',0);

			el.addEvents({
				'mouseover': function() {
					popout.fade('in');
				},
				'mouseout': function() {
					popout.fade('out');
				}
			}).setStyle('cursor','pointer');
		});
	}

	if ($('giftCardForm')) {
		if ($('method:post'))
			$('method:post').addEvent('change', function() {
				if ($('emailField')) $('emailField').addClass('hidden');
				if ($('postField')) $('postField').removeClass('hidden');
				if ($('printField')) $('printField').addClass('hidden');
			});
		if ($('method:email'))
			$('method:email').addEvent('change', function() {
				if ($('emailField')) $('emailField').removeClass('hidden');
				if ($('postField')) $('postField').addClass('hidden');
				if ($('printField')) $('printField').addClass('hidden');
			});
		if ($('method:print'))
			$('method:print').addEvent('change', function() {
				if ($('emailField')) $('emailField').addClass('hidden');
				if ($('postField')) $('postField').addClass('hidden');
				if ($('printField')) $('printField').removeClass('hidden');
			});

		function checkGiftForm() {
			// Ensures the required fields are checked
			var valid = true
			$('giftCardForm').getElements('li').removeClass('error');
			if ($('method:print') || $('method:email') || $('method:print')) {
				if (!$('giftCardForm').getElement('input[name=method]:checked')) {
					valid = false;
				}
				if ($('amount').value.toFloat() <= 0) valid = false;
				if ($('to').value.trim() == '') valid = false;
				if ($('from').value.trim() == '') valid = false;
			}
			if (valid)
				$('submit').set('disabled', '');
			else
				$('submit').set('disabled', 'disabled');

			return valid;
		}

		checkGiftForm();

		$('giftCardForm').getElements('input').addEvents({
			'change': checkGiftForm,
			'keyup': checkGiftForm
		})
	}

	if ($('shippingOptions')) {
		$('shippingOptions').getElements('div.shippingOption').each(function(elem) {
			if (elem.getElement('p.description'))
				new Element('a', {
					'text': 'More info...',
					'events' : {
						'click': function() {
							var description = elem.getElement('p.description span');
							if (description.hasClass('hidden'))
								description.removeClass('hidden');
							else
								description.addClass('hidden');
						}
					}
				}).inject(elem.getElement('label'), 'after').setStyle('cursor','help');
		});

		var regions = {};
		$('shippingOptions').getElements('.region').each(function(el) {
			regions = $merge(regions, JSON.decode('{"' + el.get('text').toLowerCase() + '":"' + el.get('title') + '"}'));
		});
		var selectBox = new Element('select', {
			'class': 'shippingRegion'
		}).inject($('shippingOptions').getElement('.inner h2'), 'after')

		$each(regions, function(description,region) {
			new Element('option', {
				'value': region,
				'text': description
			}).inject(selectBox);
		})
		$('shippingOptions').getElements('div.regions').dispose();

		selectBox.addEvent('change', function() {
			$('shippingOptions').getElements('.shippingOption').addClass('hidden');
			if ($('shippingOptions').getElements('.' + this.getSelected().get('value'))) {
				$('shippingOptions').getElements('.' + this.getSelected().get('value')).removeClass('hidden');
				$('shippingOptions').getElement('.' + this.getSelected().get('value') + ' input').set('checked','checked');
			}
		}).fireEvent('change');
	}

	new Zoomer();

	if ($('floatingBasket')) {
		var olSlow = new Fx.Slide($('floatingBasket').getElement('ol'), {duration: 550})
		var olFast = new Fx.Slide($('floatingBasket').getElement('ol'), {duration: 150})
		olFast.hide();
		$('floatingBasket').getElement('ol').removeClass('hidden')
		$('expandBasket').addEvent('click', function() {
			if (this.hasClass('expand')) {
				this.removeClass('expand').addClass('collapse');
				olFast.slideIn();
			} else {
				this.removeClass('collapse').addClass('expand');
				olSlow.slideOut();
			}
		}).setStyle('cursor','pointer');
	}

	if ($('checkoutProgress')) {
		$('checkoutProgress').getElements('dt span').each(function(span) {
			if (span.getParent().getNext('dd')) {
				var slider = new Fx.Slide(span.getParent().getNext('dd'), {duration: 350});
				slider.hide();
				span.addEvent('click', function() {
					if (this.hasClass('expand')) {
						this.removeClass('expand').addClass('collapse');
						slider.slideIn();
					} else {
						this.removeClass('collapse').addClass('expand');
						slider.slideOut();
					}
				}).setStyle('cursor','pointer');
			}
		});
	}

	if ($('contentContainer').getElements('div.required')) {
		var scope = '';
		if (!$('contentContainer').getElement('.productInformation')) {
			scope = new Elements();

			$('contentContainer').getElements('div.required').each(function(el) {
				scope.push(el.getParent('form'))
			})
		} else {
			scope = $('contentContainer').getElements('.productInformation form');
		}

		scope.addEvent('submit', function(e) {
			var hasMandatory = true;

			$('contentContainer').getElements('div.required').each(function(el) {
				var value;
				var thisElement, elementType;
				if (el.getElement('input')) {
					thisElement = el.getElement('input');
					elementType = thisElement.get('type');
				} else if (el.getElement('select')) {
					thisElement = el.getElement('select');
					elementType = 'select';
				} else if (el.getElement('textarea')) {
					thisElement = el.getElement('textarea');
					elementType = 'textarea';
				}

				switch(elementType) {
					case 'checkbox':
					case 'radio':
						value = el.getElement('input:checked');
						if (value)
							value = value.get('value')
						break;
					case 'text':
					case 'textarea':
						value = thisElement.get('value');
						break;
					case 'select':
						value = thisElement.getSelected().get('value');
						break;
				}

				if (value == null || value == '' || !value) {
					el.addClass('error');
					hasMandatory = false;
				} else {
					el.removeClass('error');
				}
			});

			if (hasMandatory === false) {
				e.preventDefault();
				if ($('contentContainer').getElement('.productInformation'))
					new Fx.Scroll(window).toElement($('contentContainer').getElement('div.required.error'))
				else
					new Fx.Scroll(window).toElement($('contentContainer').getElement('div.required.error').getParent('li'))
			}
		});
	}
})

Number.implement({
	fixed: function(to) {
		return this.toFloat().toFixed(to).toString();
	}
});

var Zoomer = new Class({
	Implements: [Events, Options],

	'options': {
		'track': {
			'bar': 'track',
			'handle': 'handle',
			'zoomOut': 'zoomOut',
			'zoomIn': 'zoomIn'
		},
		'hover': {
			'tag': 'hover',
			'container': 'productDetails',
			'fadeColour': 'rgb(255,255,255)',
			'fadeOpacity': 0.7
		},
		'enlarge': {
			'tag': 'a',
			'classes': 'remooz'
		},
		'image': 'image',
		'moreImages': 'moreImages'
	},

	'track': null,
	'hover': null,
	'enlarge': null,

	'image': null,
	'moreImages': null,

	'baseImage': null,
	'loading': null,


	initialize: function(options) {
		this.setOptions(options);

		if (!$(this.options.image))
			return false;

		this.image = $(this.options.image);

		this.moreImages = $(this.options.moreImages);

		this.prepareMoreImages();

		/*
		 * We need to store the original base image
		 */
		this.baseImage = new URI(this.image.get('src')).get('directory').split('/');
		this.loading = new Element('div', {
			'styles': {
				'position': 'absolute',
				'width': '100%',
				'height': '100%',
				'top': '0px',
				'left': '0px',
				'background': 'rgb(255,255,255) url(/ico/twirler.gif) no-repeat center center',
				'display': 'none'
			},
			'opacity': 0.5
		}).inject(this.image, 'before');
		if (this.image.getParent().getStyle('position') == 'static')
			this.image.getParent().setStyle('position', 'relative');

		if ($(this.options.track.bar))
			this.track = this.options.track;
		if ($(this.options.hover.tag))
			this.hover = this.options.hover;
		this.enlarge = $('contentContainer').getElements(this.options.enlarge.tag + '.' + this.options.enlarge.classes);

		if (this.track)
			this.establishTrack();
		if (this.hover)
			this.establishHover();
		if (this.enlarge)
			this.establishEnlarge();
	},

	/**
	 * Changes the image being zoomed
	 */
	changeImage: function(newImage) {
		var a;
		if (newImage.get('tag') == 'a') {
			a = newImage;
			newImage = newImage.getElement('img');
		} else {
			a = newImage.getParent('a');
		}

		this.baseImage[this.baseImage.length - 2] = newImage.get('alt');

		if (this.track) {
			this.loadImage(newImage.get('src').replace('-thumb.jpg', '-max.jpg'), newImage.get('src').replace('-thumb.jpg', ''))
			this.image.setStyles({
				'top': '0px',
				'left': '0px'
			});
			this.track.zoomer.set(0);
		} else {
			this.loadImage(this.baseImage.join('/'), newImage.get('src').replace('-thumb.jpg', ''));
		}

		if (this.enlarge) {
			this.image.getParent('div').getElements('a.remooz').removeEvents().set('href', newImage.get('src').replace('-thumb.jpg', '-full.jpg'))
			ReMooz.assign(this.image.getParent('div').getElements('a.remooz'));
		}

		this.loading.setStyle('display', 'block');
	},

	/**
	 * Establishes the track slider function
	 */
	establishTrack: function() {
		this.image.store('defaultWidth', this.image.get('width').toInt());
		this.image.store('defaultHeight', this.image.get('height').toInt());
		this.image.setStyles({
			'cursor': 'move',
			'position': 'absolute'
		});

		this.track.zoomer = new Slider($(this.track.bar), $(this.track.handle), {
			'range': [this.image.get('width').toInt(), 1000],
			'wheel': true,
			'snap':  true,
			'onChange': function(step) {
				this.image.set('width', step);
				this.image.set('height', step);
			}.bind(this)
		});

		this.track.mover = new Drag(this.image, {
			'limit': this.image.getParent('p')
		});

		$(this.track.zoomIn).addEvent('click', function() {
			this.track.zoomer.set(this.track.zoomer.step + 100);
		}.bind(this));

		$(this.track.zoomOut).addEvent('click', function() {
			this.track.zoomer.set(this.track.zoomer.step - 100);
		}.bind(this));

		this.loadImage($('fullImage').get('value') + '-max.jpg', $('fullImage').get('value'));
	},

	loadImage: function(newSRC, fullImageValue) {
		this.loading.setStyle('display','block');

		new Asset.image(newSRC, {
			'onLoad': function(image) {
				this.image.set('src', image.get('src'));
				$('fullImage').set('value', fullImageValue);
				this.loading.setStyle('display','none');
			}.bind(this)
		});
	},

	/**
	 * Establises the hover function
	 */
	establishHover: function() {
		$(this.hover.container).setStyle('position', 'relative');


		var sizeInfo = {
			'image': {
				'width': this.image.get('width').toInt(),
				'height': this.image.get('height').toInt()
			},
			'bigImage': {
				'width': 1000,
				'height': 1000,
				'theoryWidth': 1000,
				'theoryHeight': 1000
			},
			'bigBox': {
				'width': $(this.hover.container).getCoordinates().width,
				'height': window.getCoordinates().bottom - $(this.hover.container).getCoordinates().top - 25
			},
			'lens': {
				'width': 0,
				'height': 0
			},
			'ratio': {
				'x': 0,
				'y': 0
			}
		}

		this.hover.bigBox = new Element('div', {
			'class': 'fullsize',
			'styles': {
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				'width': sizeInfo.bigBox.width + 'px',
				'height': sizeInfo.bigBox.height + 'px',
				'background-color': 'rgb(255,255,255)',
				'border': '1px solid rgb(196,198,200)',
				'z-indez': 9999
			}
		}).inject($(this.hover.container),'top').fade('hide');


		sizeInfo.lens.width = (sizeInfo.bigBox.width * (sizeInfo.image.width / sizeInfo.bigImage.width)).toInt();
		sizeInfo.lens.height = (sizeInfo.bigBox.height * (sizeInfo.image.height / sizeInfo.bigImage.height)).toInt();

		sizeInfo.ratio.x = (sizeInfo.bigImage.width - sizeInfo.bigBox.width) / sizeInfo.lens.width;
		sizeInfo.ratio.y = (sizeInfo.bigImage.height - sizeInfo.bigBox.height) / sizeInfo.lens.height;

		sizeInfo.ratio = {
			'x': sizeInfo.bigImage.width / sizeInfo.bigBox.width,
			'y': sizeInfo.bigImage.height / sizeInfo.bigBox.height
		}

		sizeInfo.bigImage.theoryWidth = (((sizeInfo.image.width ) / sizeInfo.image.width) * sizeInfo.bigImage.width).toInt();
		sizeInfo.bigImage.theoryHeight = (((sizeInfo.image.height ) / sizeInfo.image.height) * sizeInfo.bigImage.height).toInt();
		sizeInfo.ratio = {
			'x': sizeInfo.bigImage.theoryWidth / sizeInfo.image.width,
			'y': sizeInfo.bigImage.theoryHeight / sizeInfo.image.height
		}


		this.hover.lens = new Element('div', {
			'class': 'hoverLens',
			'styles': {
				'background-color': 'rgb(255,255,255)',
				'border': '1px solid rgb(0,0,0)',
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				'width': sizeInfo.lens.width + 'px',
				'height': sizeInfo.lens.height + 'px',
				'display': 'none',
				'z-index': 100
			}
		}).inject(this.image, 'after');

		this.hover.mousetrap = new Element('div', {
			'class': 'mousetrap',
			'styles': {
				'background-color': 'rgb(255,255,255)',
				'z-index': 999,
				'display': 'block',
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				'width': sizeInfo.image.width + 'px',
				'height': sizeInfo.image.height + 'px'
			},
			'opacity': 0.01 /* IE hack */
		}).inject(this.image.getParent(), 'after');

		this.hover.fadeBox = new Element('div', {
			'class': 'fadeBox',
			'styles': {
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				'width': sizeInfo.image.width + 'px',
				'height': sizeInfo.image.height + 'px',
				'background-color': this.hover.fadeColour
			}
		}).inject(this.hover.lens, 'after').fade('hide');

		this.image.getParent().setStyles({
			'position':'relative',
			'display': 'block'
		});

		this.image.getParent().getParent().setStyles({
			'position': 'relative',
			'z-index': 99
		}).addClass('wrap');

		this.hover.sizeInfo = sizeInfo;

		this.hover.mousetrap.addEvents({
			'mouseenter': function() {
				this.hover.fadeBox.fade(this.hover.fadeOpacity);
				this.hover.bigBox.fade(1);
				this.hover.lens.setStyles({
					'display': 'block',
					'background-image': 'url(' + this.image.get('src') + ')',
					'background-repeat': 'no-repeat',
					'background-position': '-1px -1px'
				});
				this.hover.bigBox.setStyles({
					'background-repeat': 'no-repeat',
					'background-position': '0px 0px'
				});


				if (this.hover.bigBox.getStyle('background-image') != 'url(' + $('fullImage').get('value') + '-max.jpg)') {
					this.hover.bigBox.setStyle('background-image', 'url(/ico/twirler.gif)');
					new Asset.image($('fullImage').get('value') + '-max.jpg', {
						'onLoad': function(image) {
							this.hover.bigBox.setStyle('background-image', 'url(' + image.get('src') + ')');
						}.bind(this)
					});
				}
				this.hover.lens.setStyle('display','block');
			}.bind(this),
			'mouseleave': function() {
				this.hover.fadeBox.fade(0);
				this.hover.bigBox.fade(0);
				this.hover.lens.setStyle('display','none');
			}.bind(this),
			'mousemove': function(e) {
				var pos = {
					'mouse': {
						'x': 0,
						'y': 0
					},
					'lens': {
						'top': 0,
						'left': 0,
						'bgX': 0,
						'bgY': 0
					},
					'big': {
						'x': 0,
						'y': 0
					}
				}

				if (!e.event.layerY) {
					/* IE */
					if (!this.hover.imageBox)
						this.hover.imageBox = this.image.getParent().getCoordinates();

					pos.mouse.y = e.page.y - this.hover.imageBox.top;
					pos.mouse.x = e.page.x - this.hover.imageBox.left;

				} else {
					/* FF */
					pos.mouse.y = e.event.layerY;
					pos.mouse.x = e.event.layerX;
				}

				pos.lens.top = pos.mouse.y - (this.hover.sizeInfo.lens.height / 2);
				pos.lens.left = pos.mouse.x - (this.hover.sizeInfo.lens.width / 2);
				pos.lens.bgY = (pos.lens.top * -1) - 1;
				pos.lens.bgX = (pos.lens.left * -1) - 1;

				/*
				 * Move the lens image
				 */
				this.hover.lens.setStyles({
					'top': pos.lens.top + 'px',
					'left': pos.lens.left + 'px',
					'background-position': pos.lens.bgX.toInt() + 'px ' + pos.lens.bgY.toInt() + 'px'
				});
				/*
				 * Move the big image
				 */
				this.hover.bigBox.setStyles({
					'background-position': (pos.lens.bgX * this.hover.sizeInfo.ratio.x).toInt() + 'px ' + (pos.lens.bgY * this.hover.sizeInfo.ratio.y).toInt() + 'px',
					'z-index': 9999
				})
			}.bind(this)
		});
	},

	prepareMoreImages: function() {
		if (this.moreImages) {
			var currentImage = new URI(this.image.get('src')).get('directory').split('/');

			this.moreImages.getElements('a').each(function(el) {
				el.addEvent('click', function() {
					this.changeImage(el);
				}.bind(this))
				currentImage[currentImage.length - 2] = el.getElement('img').get('alt');
				Asset.image(currentImage.join('/'));
				//log('loading: ' + currentImage.join('/'));
			}.bind(this));

		}
	},

	establishEnlarge: function() {
		if (MooToolsVersion >= 1.3) {
			Function.attempt(function() {
				if (ReMooz) {
					this.enlarge.each(function(el) {
						new ReMooz(el, {
							'centered': true
						});
					});
				}
			}.bind(this), function() {
				this.enlarge.each(function(el) {
					el.addEvent('click', function(e) {
						var e = new Event(e);
						e.stop();
						window.open(el.get('href'));
					});
				});
			}.bind(this));
		} else {
			$try(function() {
				if (ReMooz) {
					this.enlarge.each(function(el) {
						new ReMooz(el, {
							'centered': true
						});
					});
				}
			}.bind(this), function() {
				this.enlarge.each(function(el) {
					el.addEvent('click', function(e) {
						var e = new Event(e);
						e.stop();
						window.open(el.get('href'));
					});
				});
			}.bind(this));
		}
	}
});


// Returns an object based on a passed key and value.
//
// Object.make('myKey', 'myValue')
//
// Would return {myKey: myValue}
Object.extend('create', function(key, value) {
	if (typeOf(value) == 'string')
		value = '"' + value + '"'
	if (typeOf(value) == 'object')
		value = JSON.encode(value);
	var temp = '{"' + key + '":' + value + '}';

	return JSON.decode(temp);
});