/** naona.net **/

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

        options: {
                interval: 100
        },

        initialize: function(element, property, options){
                this.setOptions(options);
                this.element = $(element);
                this.property = property;
		this.value = this.getPropertyValue();
                this.start();
        },

	getPropertyValue: function() {
		var value;
		if (this.property instanceof Function) {
			value = this.property.attempt();
		} else {
			value = this.element.get(this.property);
		}

		return value;
	},

        check: function() {
		var value = this.getPropertyValue();
                if (value == this.value) return;
                this.value = value;
                this.fireEvent('onChange', [value]);
        },

        start: function() {
                this.stop();
                this.interval = this.check.periodical(this.options.interval, this);
        },

        stop: function() {
                $clear(this.interval);
        }
});

var MovingBar = new Class({
	Implements: [ Element ],
	options: {},
	footerHeight: 175,
	initialWidth: 0,
	initialize: function(el) {
		this.el = $(el);
		var distance = 0;
		var prevX = 0;
		var prevPrevX = 0;
		var dropped = false;

		this.ev = null;
		var self = this;

		this.inlet = $(el + '_inlet').makeDraggable({
			modifiers: { x: 'left', y: null },
			onStart: function(o) {
				dropped = false;
				distance = 0;
				if (self.ev != null)
					self.ev.cancel();

				document.store('block', true);
			},
			onDrag: function(o) {
				if (!dropped) {
					distance = o.getStyle('left').toInt() - prevX;
					prevX = o.getStyle('left').toInt();
				}
			},

			onComplete: function(o) {
				dropped = true;
				var to = o.getStyle('left').toInt() + distance * 15;
				var dura = 500 + Math.abs(distance * 15);

				var fx = new Fx.Morph(o, {
					link: 'cancel',
					transition: Fx.Transitions.Circ.easeOut,
					duration: dura
				});

				fx.start({ 'left' : to }).chain(function() {
					document.store('block', false);
				});

				self.ev = fx;
			}
		});

		var observer_function = (function() {
			return this.getStyle('left').toInt();
		}).bind(this.inlet.element);

		window.addEvent('load', (function() {
			var l = this.inlet.element.getLast();
			this.initialWidth = (l.getPosition(this.inlet.element).x + l.getSize().x);

			new Observer(this.inlet.element, observer_function, {
				onChange: (function(pos) {
					var last = this.inlet.element.getLast('div');
					var right = (document.body.getSize().x);
					var pos_right = (last.getPosition().x + last.getSize().x);

					if (pos > right) {
						if (this.ev != null)
							this.ev.cancel();

						var fx = new Fx.Morph(this.inlet.element, {
							link: 'cancel',
							transition: Fx.Transitions.Quint.easeOut,
							duration: 4000
						});

						fx.start({'left': right - 400}).chain(function() {
							document.store('block', false);
						});
						this.ev = fx;
					}

					if (pos_right < 0) {
						if (this.ev != null)
							this.ev.cancel();

						var fx = new Fx.Morph(this.inlet.element, {
							link: 'cancel',
							transition: Fx.Transitions.Quint.easeOut,
							duration: 4000
						});

						fx.start({'left': 400 - this.initialWidth}).chain(function() {
							document.store('block', false);
						});
						this.ev = fx;
					}

				}).bind(this),
				interval: 1000
			});

			(function() {
				var a;
				var cen = (document.body.getSize().x / 2).round();
				var anchors = $$('a.anchor');

				anchors.each(function(anchor) {
					if (a == undefined) {
						a = anchor;
						return;
					}

					var pre = Math.abs($(a.name).getPosition().x - cen);
					var next = Math.abs($(anchor.name).getPosition().x - cen);

					if (pre > next) {
						a = anchor;
					}
				});

				var button = a.retrieve('button');
				if (button != null) {
					if (!button.retrieve('active')) {
						anchors.each(function(anchor) {
							anchor.retrieve('button').getElement('img').fireEvent('mouseleave');
						});
						button.getElement('img').fireEvent('mouseenter');
					}
				}
			}).bind(this).periodical(100);

			$$('a.popup').each(function(o) {
				var overlay = document.retrieve('overlay');
				o.store('tip:title', '');
				o.store('tip:text', 'Hold still and click me ...');

				o.addEvent('click', function(ev) {
					ev.stop();
					if (document.retrieve('block')) {
						return;
					}

					var loading;
					var p = new Element('p');
					overlay.adopt(p);

					var load = function() {
						var fx = new Fx.Morph(overlay);
						fx.start({opacity:1}).chain(function() {
							$clear(loading);
							p.destroy();
							img.setStyle('opacity', 0);
							overlay.adopt(img);
							img.fade('in');

							overlay.addEvent('click', function() {
								var fx2 = new Fx.Morph(overlay);
								fx2.start({opacity:0}).chain(function() {
									img.destroy();
								});
							});
						});
					};

					(function() {
						loading = (function() {
							if (this.getSize().x > window.getSize().x) {
								this.set('text', '.');
								return;
							}

							this.set('text', this.get('text') + '.');
						 }).periodical(200, p);
					}).delay(500);

					var img = new Asset.image(o.href, {onload: load});
				});
			});

			//var tips = new Tips('a.popup', {
			//	className: 'tooltip',
			//	onShow: function(tip) {
			//		tip.fade('in');
			//		this.fireEvent('hide', tip, 1000);
			//	},
			//	onHide: function(tip) {
			//		tip.fade('out');
			//	}
			//});

		}).bind(this));
	},

	centerTo: function(pos) {
		if (this.ev != null)
			this.ev.cancel();

		var o = this.inlet.element;

		var fx = new Fx.Morph(o, {
			link: 'cancel',
			transition: Fx.Transitions.Circ.easeOut,
			duration: 400
		});

		var cur = o.getStyle('left').toInt();
		var to = cur - pos + (document.body.getSize().x / 2).round();

		fx.start({'left': to});
		this.ev = fx;
	}
});

var assembleSubNav = function(movingbar) {
	var container = $('subnav');

	$$('a.anchor').each(function(o) {
		var div = new Element('div', { 'class': 'nav-tags' });
		var a = new Element('a', {href: '#'});
		var img = new Element('img', {src: '/images/menus/' + o.name + '.jpg'});
		a.store('active', false);
		o.store('button', a);

		a.adopt(img);
		div.adopt(a);
		container.adopt(div);

		img.addEvents({
			'mouseenter': function(el) {
				if (!a.retrieve('active')) {
					a.store('active', true);
					this.src = this.src.replace(/(.+).jpg$/, '$1_active.jpg');
				}
			},

			'mouseleave': function(el) {
				if (a.retrieve('active')) {
					a.store('active', false);
					img.src = img.src.replace(/(.+)_active.jpg$/, '$1.jpg');
				}
			}
		});

		a.addEvent('click', function(e) {
			e.stop();
			var pos = $(this.name).getPosition().x;
			movingbar.centerTo(pos);
		}.bind(o));
	});
};

window.addEvent('domready', function() {
	var myElement = new MovingBar('moving_bar');

	var body = $(document.body);
	//body.fade('hide');
	var overlay = new Element('div', { 'class': 'modal loading', 'opacity': 0 });
	//var p = new Element('p');
	//overlay.adopt(p);
 	body.adopt(overlay);
	//body.fade('show');

	//var loading;
	//(function() {
	// 	//var counter = 0;
	//	loading = (function() {
	//		if (this.getSize().x > window.getSize().x) {
	//			this.set('text', '.');
	//			p.destroy();
	//			return;
	//		}

	//		this.set('text', this.get('text') + '.');
	//	 }).periodical(200, p);
	//}).delay(500);

	//overlay.set('morph', { duration: 500 } );
	//overlay.morph({'background-color': '#f0f0f0'});

	//window.addEvent('load', (function(overlay) {
	//	var effect = new Fx.Morph(overlay, {duration: 400});
	//	effect.start({opacity: 0}).chain(function() {
	//		//overlay.destroy();
	//		p.destroy();
	//		$clear(loading);
	//	});
	//}).pass(overlay));

	document.store('overlay', overlay);

	$each($$('.menu-items'), function(o) {
		o.addEvents({
			'mouseenter': function(e) {
				if (!o.retrieve('active')) {
					o.store('active', true);
					var img = this.getFirst().getFirst('img');
					img.src = img.src.replace(/(.+).jpg$/, '$1_active.jpg');
				}
			},

			'mouseleave': function(e) {
				if (o.retrieve('active')) {
					o.store('active', false);
					var img = this.getFirst().getFirst('img');
					img.src = img.src.replace(/(.+)_active.jpg$/, '$1.jpg');
				}
			},

			'click': function(e) {
				e.stop(); //Prevents the browser from following the link.
				//var href = this.getChildren('a')[0].href;
				var href = this.getElement('a').href;

				var effect = new Fx.Morph(document.body, {duration: 400});
				effect.start({opacity: 0}).chain(function() {
					window.location = href;
				});
			}
		});

		if ((o.getFirst().href) == window.location.href) {
			o.fireEvent('mouseenter');
			o.removeEvents('mouseenter');
			o.removeEvents('mouseleave');
		}
	});

	assembleSubNav(myElement);

	$$('div.accordion').each(function(o) {
		var acc = new Accordion(o, o.getElements('.toggler'), o.getElements('.accordion-element'), {
			display: 0,
			opacity: true,
			alwaysHide: true,
			onComplete: function() {
				(function(prev) {
				 	if (!this.noanimate) {
						this.display(prev);
					}
				}).delay(2500, this, (this.previous + 1) % this.togglers.length);
			}
		});

		o.addEvent('click', function(e) {
			acc.noanimate = true;
			acc.onComplete = function() {};
		});
	});

	$$('div.move-vertical').each(function(o) {
		var el = o.getElement('div.move-this');
		window.addEvent('load', (function() {
			var move = new Drag.Move(el, {
				modifiers: { y: 'top', x: null }
			});
		}).bind(el));
	});

	$$('.text a[href]').each(function(o) {
		if ((!o.href.match(/mailto:/)) && (!o.href.match(/\/downloads/)) && (!o.hasClass('exclude-effect'))) {
			o.addEvent('click', function(e) {
				e.stop();
				var href = this.href;
				var effect = new Fx.Morph(document.body, {duration: 400});
				effect.start({opacity: 0}).chain(function() {
					window.location = href;
				});
			});
		}
	});
});