var AjaxOverlay = new Class({
	Implements: [Options, Events, ToElement],
	
	options: {
		container: 'div',
		alignH: 'center',
		alignV: 'center',
		contentURL: null
	},
	
	anchor: null,
	container: null,
	contentLoading: false,
	contentLoaded: false,
	timeout: null,
	
	initialize: function(anchor, options) {
		this.anchor = $(anchor);
		this.setOptions(options);
		this.setup();
	},
	
	setup: function() {
		var self = this;
		
		this.addEvents({
			contentLoaded: function(data) { self.onContentLoaded(data); }
		});
		
		this.container = $(this.anchor.get('rel'));
		if ( !this.container ) {
			this.container = new Element(this.options.container).inject($(document.body));
		} else {
			// remove the container from the document flow for easier positioning
			this.container.dispose().inject($(document.body));
		}
		
		this.container
			.setStyle('display', 'none')
			.addEvents({
				// add a delay before hiding the overlay
				mouseenter: function() {
					self.timeout = clearTimeout( self.timeout );
				},
				mouseleave: function() {
					self.timeout = setTimeout(function(){ this.hide(); }.bind(this), 800);
				}
			});
	},
	
	show: function() {
		if ( !this.contentLoaded ) {
			this.loadContent();
			return;
		}
		
		this.positionContainer();
		this.container.show();
		this.fireEvent('ready');
	},
	
	loadContent: function() {
		var self = this;
		
		if ( this.contentLoading ) return;
		this.contentLoading = true;
		
		if ( this.options.contentURL == null )
		{
			this.contentLoading = false;
			this.fireEvent('contentLoaded');
		}
		else
		{
			this.anchor.addClass('loading');
			new Request.HTML({
				method: 'get',
				url: this.options.contentURL,
				onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
					self.fireEvent('contentLoaded', responseHTML);
				}
			}).send();
		}
	},
	
	onContentLoaded: function(data) {
		this.contentLoading = false;
		this.contentLoaded = true;
		this.show();
	},
	
	positionContainer: function() {
		var viewport = window.getSize(),
			scroll = window.getScroll(),
			left, top,
			item = this.anchor,
			itemCoords = item.getCoordinates(),
			overlayCoords = this.container.measure(function() {
				return this.getCoordinates();
			});
		
		switch ( this.options.alignH ) {
			case 'center':
				left = itemCoords.left - ( ( overlayCoords.width / 2 ) - ( itemCoords.width / 2 ) );
				break;
			case 'left':
				left = itemCoords.left;
				break;
			case 'right':
				left = itemCoords.right - overlayCoords.width;
				break;
		}
		
		switch ( this.options.alignV ) {
			case 'center':
				top = itemCoords.top - ( ( overlayCoords.height / 2 ) - ( itemCoords.height / 2 ) );
				break;
			case 'top':
				top = itemCoords.top;
				break;
			case 'bottom':
				top = itemCoords.bottom - overlayCoords.height;
				break;
		}
		
		// adjust the position of the overlay so that it fits within the viewport
		if ( left + overlayCoords.width > viewport.x ) {
			left = scroll.x + viewport.x - overlayCoords.width - 30;
		} else if ( left - scroll.x < 0 ) {
			left = scroll.x + 30;
		}
		
		if ( top - scroll.y + overlayCoords.height > viewport.y ) {
			top = scroll.y + viewport.y - overlayCoords.height - 30;
		} else if ( top - scroll.y < 0 ) {
			top = scroll.y + 30;
		}
		
		this.container.setStyles({
			left: left,
			top: top
		});
		
		return this;
	},
	
	createCloseButton: function() {
		return new Element('a', {
				href: '#',
				'class': 'closeButton',
				html: 'close',
				events: {
					click: function(e) {
						e.preventDefault();
						this.container.hide();
					}.bind(this)
				}
			});
	}
});


var NavigationSlider = new Class({
	Implements: [Options],
	
	options: {
		tag: 'div',
		id: 'navigationSlider',
		color: '#999',
		hoverColor: '#999'
	},
	
	container: null,
	slider: null,
	
	initialize: function( el, options ) {
		this.setOptions(options);
		
		this.container = $(el);
		
		this.createSlider();
	},
	
	createSlider: function() {
		var el = $(this.options.id);
		if ( el ) {
			this.slider = el;
		} else {
			this.slider = new Element(this.options.tag, {id: this.options.id}).inject( this.container );
		}
	},
	
	move: function( target ) {
		// stop the slider animation
		if ( this.tween != null ) { this.tween.cancel(); }

		// move the slider element to underneath the currently selected nav item
		var coords = target.getCoordinates( this.container ),
			width = coords.width,
			left = coords.left;
		
		this.tween = new Fx.Morph(this.slider, {
			duration: 'short',
			transition: Fx.Transitions.Sine.easeOut
		}).start({
			'width': width,
			'left': left,
			'background-color': this.options.hoverColor
		});
	},
	
	restore: function( target ) {
		// stop the slider animation
		if ( this.tween != null ) { this.tween.cancel(); }
		
		var width = 0,
			left = 0,
			coords = null;
		
		if ( target ) {
			coords = target.getCoordinates( this.container );
			width = coords.width;
			left = coords.left;
		}
			
		// move the slider element back underneath the currently selected nav item
		// or all the way to the left of the menu if no item is currently selected (i.e. homepage)
		this.tween = new Fx.Morph(this.slider, {
			duration: 'short',
			transition: Fx.Transitions.Sine.easeOut
		}).start({
			'width': width,
			'left': left,
			'background-color': this.options.color
		});
	}
});

var DraggableWindow = new Class({
	Implements: [Options, Events],
	
	options: {
		width: 615
	},
	
	initialize: function(options) {
		var self = this;
		this.setOptions(options);
		this.create();
	},
	
	create: function() {
		var self = this;
		
		this.container = new Element('div', {
			id: this.options.id + 'Container',
			'class': 'draggableWindow',
			styles: {
				left: (window.getCoordinates().width / 2) - 300,
				width: this.options.width
			}
		});
		
		this.toolbar = new Element('div', {
			id: this.options.id + 'Toolbar',
			'class': 'toolbar'
		});
		
		this.closeButton = new Element('a', {
			href: '#',
			html: 'close',
			'class': 'closeButton',
			events: {
				click: function(e) {
					e.preventDefault();
					self.close();
				}
			}
		});
		
		this.content = new Element('div', {
			id: this.options.id + 'Content',
			'class': 'content'
		});
		
		this.container.adopt(this.toolbar.grab(this.closeButton), this.content).inject($(document.body), 'top');
		
		var drag = new Drag(this.container, {
			handle: this.toolbar
		});
		
		this.fireEvent('create');
	},
	
	open: function(args) {
		Tools.hideAllSelects();
		this.container.show();
		this.fireEvent('open', args);
	},
	
	close: function(args) {
		this.container.hide();
		Tools.showAllSelects();
		this.fireEvent('close', args);
	}
});


var ModalWindow = new Class({
	Implements: [Options, Events],
	
	options: {
		duration: 400,
		gap : 20
	},
	
	element: null,
	container: null,
	
	currentUrl: null,
	isOpen: false,
	transitioning: false,
	
	initialize: function(el, options) {
		var self = this;
		
		this.element = $(el);
		if ( !this.element ) return;
		this.container = this.element.getChildren()[0];
		
		this.setOptions(options);
		
		$$('.modalWindowTrigger').addEvent('click:relay(a)', function(e) {
			e.preventDefault();
			self.setModal(this.href);
		});
		
		this.element.addEvent('click:relay(a.modal)', function(e) {
			e.preventDefault();
			self.setModal(this.href);
		});
		
		$$('#modalPanel a.close').addEvent('click', function(e) {
			e.preventDefault();
			self.closePanel();
		});
	},
	
	setModal: function(url) {
		if ( this.transitioning ) return;
		
		if ( url == this.currentUrl ) {
			this.togglePanel();
			return;
		}
		
		this.currentUrl = url;
		this.closePanel();
		this.loadData.bind(this).delay(this.options.duration);
	},
	
	loadData: function () {
		this.container.empty();
		this.element.addClass('loading');
		this.openPanel();
		
		var request = new Request.HTML({
			url: this.currentUrl,
			method: 'get',
			update: 'modalPanelContent',
			onSuccess: function() {
				this.fireEvent('dataLoaded');
				this.element.removeClass('loading');
				this.openPanel();
			}.bind(this)
		}).send();
	},
	
	openPanel: function() {
		this.transitioning = true;
		this.element
			.set('tween', {duration: this.options.duration})
			.tween('height', this.container.getScrollSize().y);
		
		(function(){
			this.fireEvent('open');
			this.transitioning = false;
			this.isOpen = true;
		}).bind(this).delay(this.options.duration);
	},
	
	closePanel: function() {
		this.transitioning = true;
		this.element
			.set('tween', {duration: this.options.duration})
			.tween('height', 0);
		
		(function(){
			this.fireEvent('close');
			this.transitioning = false;
			this.isOpen = false;
		}).bind(this).delay(this.options.duration);
	},
	
	togglePanel: function() {
		if ( this.isOpen ) {
			this.closePanel();
		} else {
			this.openPanel();
		}
	}
});
domReady(function() {
	modalWindow = new ModalWindow('modalPanel');
});




var Bollino = new Class({
	Implements: [Options, ToElement],
	
	element: null,
	
	options: {
		size: 'small',
		container: '',
		position: 'bottom'
	},
	
	initialize: function(options, data) {
		this.setOptions(options);
		if ( typeof(data) != 'undefined' ) {
			this.update(data);
		}
	},
	
	update: function(data) {
		if ( this.element ) this.element.destroy();
		
		if ( data.has_bollino ) {
			this.element = new Element('span', {
				'class': 'bollino bollino-' + this.options.size + data.bollino_class,
				children: [
					new Element('img', {
						src: data.bollino_image,
						alt: ''
					})
				]
			}).inject($(this.options.container), this.options.position);
		}
		return this.toElement();
	}
});




var ProductHighlight = new Class({
	Implements: [Options, ToElement],
	
	element: null,
	
	options: {
		container: '',
		position: 'top'
	},
	
	initialize: function(options, data) {
		this.setOptions(options);
		if ( typeof(data) != 'undefined' ) {
			this.update(data);
		}
	},
	
	update: function(data) {
		if ( this.element ) this.element.destroy();
		
		if ( data.has_highlights ) {
			this.element = new Element('span', {
				'class': 'product-highlight ' + data.highlights_class,
				text: data.highlights_msg
			}).inject($(this.options.container), this.options.position);
		}
		return this.toElement();
	}
});



/*
---

script: Loop.js

description: Runs a class method on a periodical

license: MIT-style license.

authors: Ryan Florence <http://ryanflorence.com>

docs: http://moodocs.net/rpflo/mootools-rpflo/Loop

requires:
- core:1.2.4/'*'

provides: [Loop]

...
*/

var Loop = new Class({

	loopCount: 0,
	isStopped: true,
	isLooping: false,
	loopMethod: $empty,

	setLoop: function(fn,delay){
		if(this.isLooping) {
			this.stopLoop();
			var wasLooping = true;
		} else {
			var wasLooping = false;
		}
		this.loopMethod = fn;
		this.loopDelay = delay || 3000;
		if(wasLooping) this.startLoop();
		return this;
	},

	stopLoop: function() {
		this.isStopped = true;
		this.isLooping = false;
		clearInterval(this.periodical);
		return this;
	},

	startLoop: function(delay) {
		if(this.isStopped){
			var delay = (delay) ? delay : this.loopDelay;
			this.isStopped = false;
			this.isLooping = true;
			this.periodical = this.looper.periodical(delay,this);
		};
		return this;
	},

	resetLoop: function(){
		this.loopCount = 0;
		return this;
	},

	looper: function(){
		this.loopCount++;
		this.loopMethod(this.loopCount);
		return this;
	}

});



var EnhancedInput = new Class({
	
	initialize: function( collection ) {
		var self = this;
		
		collection.each(function(el) {
			self.onBlur(el);
			el.addEvents({
				focus: function() {
					self.onFocus(el);
				},
				blur: function() {
					self.onBlur(el);
				}
			});
			$(el.form).addEvent('submit', function() {
				self.clearOnSubmit(el);
			});
		});
	},
	
	onFocus: function(el) {
		el.removeClass('example');
		if ( el.get('value') == el.get('title') ) {
			el.set('value','');
		}
	},
	
	onBlur: function(el) {
		if ( el.get('value') == '') {
			el.set('value', el.get('title'));
			el.addClass('example');
		}
	},
	
	clearOnSubmit: function(el) {
		if ( el.get('value') == el.get('title') ) {
			el.set('value', '');
		}
	}
});

domReady(function() {
	new EnhancedInput( $$('input.enhanced[type=text]') );
});