/* Credits: https://github.com/FezVrasta/bootstrap-material-design */
jQuery(document).ready(function($) {
	// Selector to select only not already processed elements
	$.expr[':'].notmdproc = function(obj) {
		if ($(obj).data('mdproc')) {
			return false;
		} else {
			return true;
		}
	};

	function _isChar(evt) {
		if (typeof evt.which === 'undefined') {
			return true;
		} else if (typeof evt.which === 'number' && evt.which > 0) {
			return (!evt.ctrlKey &&
				!evt.metaKey &&
				!evt.altKey &&
				evt.which !== 8 && // backspace 
				evt.which !== 9 && // tab
				evt.which !== 13 && // enter
				evt.which !== 16 && // shift
				evt.which !== 17 && // ctrl
				evt.which !== 20 && // caps lock
				evt.which !== 27 // escape
			);
		}
		return false;
	}

	function _addFormGroupFocus(element) {
		var $element = $(element);
		if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
			$element.closest('.form-group').addClass('is-focused');
		}
	}

	function _toggleDisabledState($element, state) {
		var $target;
		if ($element.hasClass('checkbox-inline') || $element.hasClass('radio-inline')) {
			$target = $element;
		} else {
			$target = $element.closest('.checkbox').length ? $element.closest('.checkbox') : $element.closest('.radio');
		}
		return $target.toggleClass('disabled', state);
	}

	function _toggleTypeFocus($input) {
		var disabledToggleType = false;
		if ($input.is($.material.options.checkboxElements) || $input.is($.material.options.radioElements)) {
			disabledToggleType = true;
		}
		$input.closest('label').hover(function() {
				var $i = $(this).find('input');
				var isDisabled = $i.prop('disabled'); // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
				if (disabledToggleType) {
					_toggleDisabledState($(this), isDisabled);
				}
				if (!isDisabled) {
					_addFormGroupFocus($i); // need to find the input so we can check disablement
				}
			},
			function() {
				_removeFormGroupFocus($(this).find('input'));
			});
	}

	function _removeFormGroupFocus(element) {
		$(element).closest('.form-group').removeClass('is-focused'); // remove class from form-group
	}

	$.material = {
		'options': {
			// These options set what will be started by $.material.init()
			'validate': true,
			'input': true,
			'ripples': true,
			'checkbox': true,
			'togglebutton': true,
			'radio': true,
			'arrive': true,
			'autofill': false,

			'withRipples': [
				'.btn:not(.btn-link)',
				'.card-image',
				'.navbar a:not(.withoutripple)',
				'.dropdown-menu a',
				'.nav-tabs a:not(.withoutripple)',
				'.withripple',
				'.pagination li:not(.active):not(.disabled) a:not(.withoutripple)'
			].join(','),
			'inputElements': 'input.form-control, textarea.form-control, select.form-control',
			'checkboxElements': '.checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]',
			'togglebuttonElements': '.togglebutton > label > input[type=checkbox]',
			'radioElements': '.radio > label > input[type=radio], label.radio-inline > input[type=radio]'
		},
		'checkbox': function(selector) {
			// Add fake-checkbox to material checkboxes
			var $input = $((selector) ? selector : this.options.checkboxElements)
				.filter(':notmdproc')
				.data('mdproc', true)
				.after('<span class="checkbox-material"><span class="check"></span></span>');

			_toggleTypeFocus($input);
		},
		'togglebutton': function(selector) {
			// Add fake-checkbox to material checkboxes
			var $input = $((selector) ? selector : this.options.togglebuttonElements)
				.filter(':notmdproc')
				.data('mdproc', true)
				.after('<span class="toggle"></span>');

			_toggleTypeFocus($input);
		},
		'radio': function(selector) {
			// Add fake-radio to material radios
			var $input = $((selector) ? selector : this.options.radioElements)
				.filter(':notmdproc')
				.data('mdproc', true)
				.after('<span class="circle"></span><span class="check"></span>');

			_toggleTypeFocus($input);
		},
		'input': function(selector) {
			$((selector) ? selector : this.options.inputElements)
				.filter(':notmdproc')
				.data('mdproc', true)
				.each(function() {
					var $input = $(this);

					// Requires form-group standard markup (will add it if necessary)
					var $formGroup = $input.closest('.form-group'); // note that form-group may be grandparent in the case of an input-group
					if ($formGroup.length === 0 && $input.attr('type') !== 'hidden' && !$input.attr('hidden')) {
						$input.wrap('<div class="form-group"></div>');
						$formGroup = $input.closest('.form-group'); // find node after attached (otherwise additional attachments don't work)
					}

					// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
					if ($input.attr('data-hint')) {
						$input.after('<p class="help-block">' + $input.attr('data-hint') + '</p>');
						$input.removeAttr('data-hint');
					}

					// Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
					var legacySizes = {
						'input-lg': 'form-group-lg',
						'input-sm': 'form-group-sm'
					};
					$.each(legacySizes, function(legacySize, standardSize) {
						if ($input.hasClass(legacySize)) {
							$input.removeClass(legacySize);
							$formGroup.addClass(standardSize);
						}
					});

					// Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
					if ($input.hasClass('floating-label')) {
						var placeholder = $input.attr('placeholder');
						$input.attr('placeholder', null).removeClass('floating-label');
						var id = $input.attr('id');
						var forAttribute = '';
						if (id) {
							forAttribute = 'for="' + id + '"';
						}
						$formGroup.addClass('label-floating');
						$input.after('<label ' + forAttribute + 'class="control-label">' + placeholder + '</label>');
					}

					// Set as empty if is empty (damn I must improve this...)
					if ($input.val() === null || $input.val() === 'undefined' || $input.val() === '') {
						$formGroup.addClass('is-empty');
					}

					// Support for file input
					if ($formGroup.find('input[type=file]').length > 0) {
						$formGroup.addClass('is-fileinput');
					}
				});
		},
		'attachInputEventHandlers': function() {
			var validate = this.options.validate;

			$(document)
				.on('keydown paste', '.form-control', function(e) {
					if (_isChar(e)) {
						$(this).closest('.form-group').removeClass('is-empty');
					}
				})
				.on('keyup change', '.form-control', function() {
					var $input = $(this);
					var $formGroup = $input.closest('.form-group');
					var isValid = (typeof $input[0].checkValidity === 'undefined' || $input[0].checkValidity());

					if ($input.val() === '') {
						$formGroup.addClass('is-empty');
					} else {
						$formGroup.removeClass('is-empty');
					}

					// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
					//  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
					//  the form-group on change.
					//
					// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
					//        BUT, I've left it here for backwards compatibility.
					if (validate) {
						if (isValid) {
							$formGroup.removeClass('has-error');
						} else {
							$formGroup.addClass('has-error');
						}
					}
				})
				.on('focus', '.form-control, .form-group.is-fileinput', function() {
					_addFormGroupFocus(this);
				})
				.on('blur', '.form-control, .form-group.is-fileinput', function() {
					_removeFormGroupFocus(this);
				})
				// make sure empty is added back when there is a programmatic value change.
				//  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
				.on('change', '.form-group input', function() {
					var $input = $(this);
					if ($input.attr('type') === 'file') {
						return;
					}

					var $formGroup = $input.closest('.form-group');
					var value = $input.val();
					if (value) {
						$formGroup.removeClass('is-empty');
					} else {
						$formGroup.addClass('is-empty');
					}
				})
				// set the fileinput readonly field with the name of the file
				.on('change', '.form-group.is-fileinput input[type="file"]', function() {
					var $input = $(this);
					var $formGroup = $input.closest('.form-group');
					var value = '';
					$.each(this.files, function(i, file) {
						value += file.name + ', ';
					});
					value = value.substring(0, value.length - 2);
					if (value) {
						$formGroup.removeClass('is-empty');
					} else {
						$formGroup.addClass('is-empty');
					}
					$formGroup.find('input.form-control[readonly]').val(value);
				});
		},
		'ripples': function(selector) {
			$((selector) ? selector : this.options.withRipples).ripples();
		},
		'autofill': function() {
			// This part of code will detect autofill when the page is loading (username and password inputs for example)
			var loading = setInterval(function() {
				$('input[type!=checkbox]').each(function() {
					var $this = $(this);
					if ($this.val() && $this.val() !== $this.attr('value')) {
						$this.trigger('change');
					}
				});
			}, 100);

			// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
			setTimeout(function() {
				clearInterval(loading);
			}, 10000);
		},
		'attachAutofillEventHandlers': function() {
			// Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
			var focused;
			$(document)
				.on('focus', 'input', function() {
					var $inputs = $(this).parents('form').find('input').not('[type=file]');
					focused = setInterval(function() {
						$inputs.each(function() {
							var $this = $(this);
							if ($this.val() !== $this.attr('value')) {
								$this.trigger('change');
							}
						});
					}, 100);
				})
				.on('blur', '.form-group input', function() {
					clearInterval(focused);
				});
		},
		'init': function(options) {
			this.options = $.extend({}, this.options, options);
			var $document = $(document);

			if ($.fn.ripples && this.options.ripples) {
				this.ripples();
			}
			if (this.options.input) {
				this.input();
				this.attachInputEventHandlers();
			}
			if (this.options.checkbox) {
				this.checkbox();
			}
			if (this.options.togglebutton) {
				this.togglebutton();
			}
			if (this.options.radio) {
				this.radio();
			}
			if (this.options.autofill) {
				this.autofill();
				this.attachAutofillEventHandlers();
			}

			if (document.arrive && this.options.arrive) {
				if ($.fn.ripples && this.options.ripples) {
					$document.arrive(this.options.withRipples, function() {
						$.material.ripples($(this));
					});
				}
				if (this.options.input) {
					$document.arrive(this.options.inputElements, function() {
						$.material.input($(this));
					});
				}
				if (this.options.checkbox) {
					$document.arrive(this.options.checkboxElements, function() {
						$.material.checkbox($(this));
					});
				}
				if (this.options.radio) {
					$document.arrive(this.options.radioElements, function() {
						$.material.radio($(this));
					});
				}
				if (this.options.togglebutton) {
					$document.arrive(this.options.togglebuttonElements, function() {
						$.material.togglebutton($(this));
					});
				}

			}
		}
	};

});