﻿var PopUp = Class.create({
	initialize : function (trigger, pop, options) {
	    if ((! trigger) || (! pop)) { return; }
		this.trigger = trigger;
		this.pop = $(pop);

		this.options = Object.extend({
			modal:  false,
			centered: false,
			fade: false,
			closeSelector:  '.close',
			handleSelector: '.overlay_head',
			enableHover: false,
			delay: 0,
			onOpen:    Prototype.emptyFunction,
			onClose:   Prototype.emptyFunction,
			openClass: ""
		}, options || {});

		PopUp.i = 0;
		PopUp.open = false;
		this.setup();
	},
	setup : function () {
		this.pop.hide();
		if (this.options.enableHover) {
			this.trigger.observe('mouseenter', this.show.bindAsEventListener(this));

		}
		else {
			this.trigger.observe('click', this.open.bindAsEventListener(this));
		}
	},
	show: function (ev) {
		this.trigger.observe('mouseleave', function () {
			if (this.timeout) {
				clearTimeout(this.timeout);
				return;
			}
		}.bind(this));

		this.timeout = setTimeout(this.open.bind(this), this.options.delay);
	},
	open : function (ev) {
		document.observe('pop:keepOpen',  function () {
			Event.stopObserving(document, 'click', this.close_listener);

		}.bind(this));

		// allow only one popup opened at a time
		if (PopUp.open) {
			PopUp.open.close(false);
		}
		PopUp.open = this;

		document.fire("pop:active");
		this.toTop();
		this.trigger.addClassName("active");

		// close button(s)
		this.pop.select(this.options.closeSelector).each(function (el) {
			el.observe('click', this.close.bind(this));
		}.bind(this));

		// draggable handle
		this.pop.select(this.options.handleSelector).each(function (el) {
			this.draggable = new Draggable(this.pop, { handle: this.handle, starteffect: false, endeffect: false });
		}.bind(this));

		// close pop if user clicks anywhere in document
		this.close_listener = this.close.bindAsEventListener(this);
		Event.observe(document, 'click', this.close_listener);
		document.observe('pop:close',  this.close_listener);

		if (this.options.enableHover) {
			this.pop.observe('mouseleave', this.close_listener);
		}

		this.pop.observe('mouseenter', function () {
			Event.stopObserving(document, 'click', this.close_listener);
		}.bind(this));

		this.pop.observe('mouseleave', function () {
			Event.observe(document, 'click', this.close_listener);
		}.bind(this));

		// modal version
		if (this.options.modal) {
			this.initModalWindow('modal_overlay');
		}

		// centered version
		if (this.options.centered) {
			this.center();
		}

		// fade effect when appearing
		if (this.options.fade) {
			this.pop.appear({duration: 0.2});
		}
		// else just show
		else {
			this.pop.show();
		}

		// add class on display
		this.pop.addClassName(this.options.openClass);

		(this.options.onOpen || Prototype.emptyFunction)();

		if (typeof(ev) === 'object') {
			ev.stop();
		}
	},
	close : function (ev) {

		document.fire("pop:inactive");
		PopUp.open = false;

		this.trigger.removeClassName("active");
		if (this.options.modal) {
			$('modal_overlay').hide();
		}
		if (this.options.fade) {
			this.pop.fade({duration: 0.2});
		}
		else {
			this.pop.hide();
		}

		this.pop.removeClassName(this.options.openClass);

		Event.stopObserving(document, 'click', this.close_listener);
		document.stopObserving('pop:close',  this.close_listener);
		this.pop.stopObserving('mouseenter');
		this.pop.stopObserving('mouseleave');

		(this.options.onClose || Prototype.emptyFunction)();

		if (ev) {
			ev.stop();
		}
	},
	initModalWindow: function (el) {
		$(el).setStyle({
			height: $$('body').first().getHeight() + "px",
			zIndex: 100
		});

		$(el).show();
	},
	toTop: function () {
		PopUp.i += 1;
		this.pop.style.zIndex = PopUp.i + 1000;
		this.pop.show();
	},
	center: function () {
		if (this.hasBeenCentered) {
			return;
		}
		var w, h, pw, ph, ws;
		w = this.pop.offsetWidth;
		h = this.pop.offsetHeight;
		Position.prepare();
		ws = this.getWindowSize();
		pw = ws[0];
		ph = ws[1];
		this.pop.setStyle({
			top: (ph / 2) - (h / 2) +  Position.deltaY + "px",
			left: (pw / 2) - (w / 2) +  Position.deltaX + "px"
		});
		//this.hasBeenCentered = true;
	},
	getWindowSize: function (w) {
		w = w ? w : window;
		var width, height;
		width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
		height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
		return [width, height];
	},
	toggleSelects: function () {
		if (Prototype.Browser.IE6) {
			$$('select').each(function (e) {
				$(e).toggle();
			});
		}
	}
});

var Navigation = Class.create({
	initialize: function (container) {
		this.container = $(container);
		this.menus = this.container.select('.megadrop');
		this.togglers = this.container.select('#main_nav li.menu');

		if ((this.togglers.length > 0) && (this.menus.length > 0)) {
			this.setup();
		}
	},
	setup: function () {
		this.togglers.each(function (el, i) {
			pop = new PopUp(el, this.menus[i], {enableHover: true, delay: 150, openClass: "active"});
		}.bind(this));
	}
});

function globalDomReady() {
	// cache background images in ie6 to prevent multiple http requests
	if(('megadrop')){

	}
	if (Prototype.Browser.IE6) {
		try {
			document.execCommand('BackgroundImageCache', false, true);
		} catch (e) {}
	}

	/* main navigation */
	if ($('main_nav')) {
		new Navigation('container');
	}
	/* help popup */
	var triggerHelpDrop = $('trigger_help_drop');
	var helpDrop = $('help_drop');
	if (triggerHelpDrop && helpDrop) {
		new PopUp(triggerHelpDrop, helpDrop);
	}
}

