'use strict';

/*global window, document, console, jQuery, FORMALIZE, App:true, Locale */


/**
 * @desc Specific application options
 */
App = (function (App, $) {

	App.options = $.extend({}, App.options, {
		timeout: [],
		className: {
			active:		'active',
			hover:		'hover',
			error:		'error'
		},
		cycle: {
			timeout:	4000,
			speed:		500,
			pagerAnchorBuilder: function (idx, slide) {
				return '<li><a href="#' + (idx + 1) + '">' + (idx + 1) + '</a></li>';
			}
		},
		validate: {},
		maphilight: {
			stroke:			false,
			fade:			false,
			fill:			true,
			fillColor:		'B2A729',
			fillOpacity:	1
		}
	});

	return App;

}(typeof App === 'object' ? App : {}, jQuery));


/**
 * @desc Specific application page autoload methods
 */
App = (function (App, $) {

	App.page = $.extend({}, App.page, {
		common: {
			init: function () {
				
				// setup Formalize
				if (typeof FORMALIZE === 'object' && typeof FORMALIZE.go === 'function') {
					FORMALIZE.go();
				}

				// cycle through images in the "supported by" section
				if ($.fn.slideShow && $.fn.cycle) {
					$('#supported ul').slideShow($.extend({}, App.options.cycle), {});
				}

				// default validator options
				if ($.validator) {
					$.validator.setDefaults({
						//submitHandler: function () {},
						errorPlacement: function(label, element) {
							label.insertAfter(element);
						},
						highlight: function (element, errorClass, validClass) {
							var $$, $div;
							$$		= $(element);
							$div	= $$.closest('div');

							$$.add($div).addClass(errorClass).removeClass(validClass);
						},
						unhighlight: function (element, errorClass, validClass) {
							var $$, $div;
							$$		= $(element);
							$div	= $$.closest('div');
							
							$$.add($div).removeClass(errorClass).addClass(validClass);
						}
					});
				}
				
				// validate the join email
				if ($.fn.validate) {
					$('#contact, #join-emil, #comments-add form, #member-contact form').validate($.extend({}, App.options.validate), {});
				}

				// auto-submit box
				$('select.auto, input.auto').bind('change', function (event) {
					$(event.target).closest('form').get(0).submit();
				});

				// toggle nav
				$('ol.toggle > li > a, ul.toggle > li > a').bind('click', function (event) {
					var $$, $li, $ul;

					$$		= $(event.target).closest('a');
					$li		= $$.closest('li');
					$ul		= $li.children('ul');

					if ($ul.is(':hidden')) {
						$li.addClass(App.options.className.active);
						$ul.show();
					}
					else {
						$li.removeClass(App.options.className.active);
						$ul.hide();
					}

					$$.blur();
					event.preventDefault();
				});

				// tooltips
				var $tooltip = $('#tooltip');
				$('area[title]').bind('mouseover mouseout mousemove', {x: -56, y: -18}, function (event, popup) {
					var $$, title = '', offset = {}, css = {};

					$$		= $(event.target);
					title	= $$.data('title');

					if (typeof popup === 'undefined') {
						popup = true;
					}
					
					if (typeof title === 'undefined' || title.length === 0) {
						$$.data('title', $$.attr('title')).removeAttr('title');
					}

					offset	= {
						x:	(typeof event.data.x === 'number') ? parseInt(event.data.x, 10) : 0,
						y:	(typeof event.data.y === 'number') ? parseInt(event.data.y, 10) : 0
					};
					css		= {
						top:	parseInt(event.pageY, 10) + offset.x,
						left:	parseInt(event.pageX, 10) + offset.y
					};

					if ($tooltip.length === 0) {
						$tooltip = $('<div />').attr('id', 'tooltip').hide();
						$tooltip.append($('<p />')).append($('<span />').addClass('point'));
						$tooltip.appendTo('body');
					}

					$tooltip.css(css).children().text(title);

					switch (event.type) {
						case 'mouseover':
						case 'mouseenter':
						case 'mousemove':
							if (popup === true) {
								$tooltip.show();
							}
							break;

						case 'mouseleave':
						case 'mouseout':
							$tooltip.hide();
							break;
					}
				});

			},
			finalize: function () {}
		},

		map: {
			init: function () {
				if ($.fn.maphilight) {
					var $map, $mapImage, $mapAreas, $countries;

					$map		= $('#map');
					$mapImage	= $map.find('img');
					$mapAreas	= $map.find('area');
					$countries	= $map.find('div.countries');

					$mapImage.maphilight($.extend({}, App.options.maphilight), {});

					$countries.bind('mouseover mouseout', function (event) {
						var $$, $li, index;

						$$		= $(event.target).closest('a');
						$li		= $$.closest('li');
						index	= $li.index();

						if($$.length === 1) {
							$mapAreas.eq(index).trigger(event.type, [false]);
						}
					});
				}
			}
		}
	});

	return App;

}(typeof App === 'object' ? App : {}, jQuery));


/**
 * @desc Start the application
 */
if (typeof jQuery !== 'undefined') {
	jQuery.noConflict();
	(function (App, $) {
		$(document).ready(function () {
			App.util.page.start(App.page);
			//App.util.page.fire(App.tracking);
		});
		
	}(typeof App === 'object' ? App : {}, jQuery));
}