// jscs:disable
// jshint ignore: start

// Spectrum Colorpicker v1.3.3
// https://github.com/bgrins/spectrum
// Author: Brian Grinstead
// License: MIT

(function( window, $, undefined ) {
	var defaultOpts                      = {

			// Callbacks
			beforeShow: noop,
			move: noop,
			change: noop,
			show: noop,
			hide: noop,

			// Options
			color: false,
			flat: false,
			showInput: false,
			allowEmpty: false,
			showButtons: true,
			clickoutFiresChange: false,
			showInitial: false,
			showPalette: false,
			showPaletteOnly: false,
			showSelectionPalette: true,
			localStorageKey: false,
			appendTo: 'body',
			maxSelectionSize: 7,
			cancelText: 'cancel',
			chooseText: 'choose',
			clearText: 'Clear Color Selection',
			preferredFormat: false,
			className: '', // Deprecated - use containerClassName and replacerClassName instead.
			containerClassName: '',
			replacerClassName: '',
			showAlpha: false,
			theme: 'sp-light',
			palette: [['#ffffff', '#000000', '#ff0000', '#ff8000', '#ffff00', '#008000', '#0000ff', '#4b0082', '#9400d3']],
			selectionPalette: [],
			disabled: false,
			inputText: ''
		}, spectrums                     = [], IE = ! ! /msie/i.exec( window.navigator.userAgent ),
		rgbaSupport                      = (function() {
			function contains( str, substr ) {
				return ! ! ~ ('' + str).indexOf( substr );
			}

			var elem      = document.createElement( 'div' );
			var style     = elem.style;
			style.cssText = 'background-color:rgba(0,0,0,.5)';
			return contains( style.backgroundColor, 'rgba' ) || contains( style.backgroundColor, 'hsla' );
		})(), inputTypeColorSupport      = (function() {
			var colorInput = $( '<input type=\'color\' value=\'#ffffff\' />' )[0];
			return colorInput.type === 'color' && colorInput.value !== '#ffffff';
		})(),
		replaceInput                     = ['<div class=\'sp-replacer\'>', '<div class=\'sp-preview\'><div class=\'sp-preview-inner\'></div></div>', '<div class=\'sp-dd\'>&#9660;</div>', //"<div class='sp-dd'>" + opts.inputText + "</div>",
			'</div>'].join( '' ), markup = (function() {

			// IE does not support gradients with multiple stops, so we need to simulate
			//  that for the rainbow slider with 8 divs that each have a single gradient
			var gradientFix = '';
			if ( IE ) {
				for ( var i = 1; i <= 6; i ++ ) {
					gradientFix += '<div class=\'sp-' + i + '\'></div>';
				}
			}

			return ['<div class=\'sp-container sp-hidden\'>', '<div class=\'sp-palette-container\'>', '<div class=\'sp-palette sp-thumb sp-cf\'></div>', '</div>', '<div class=\'sp-picker-container\'>', '<div class=\'sp-top sp-cf\'>', '<div class=\'sp-fill\'></div>', '<div class=\'sp-top-inner\'>', '<div class=\'sp-color\'>', '<div class=\'sp-sat\'>', '<div class=\'sp-val\'>', '<div class=\'sp-dragger\'></div>', '</div>', '</div>', '</div>', '<div class=\'sp-clear sp-clear-display\'>', '</div>', '<div class=\'sp-hue\'>', '<div class=\'sp-slider\'></div>', gradientFix, '</div>', '</div>', '<div class=\'sp-alpha\'><div class=\'sp-alpha-inner\'><div class=\'sp-alpha-handle\'></div></div></div>', '</div>', '<div class=\'sp-input-container sp-cf\'>', '<input class=\'sp-input\' type=\'text\' spellcheck=\'false\'  />', '</div>', '<div class=\'sp-initial sp-thumb sp-cf\'></div>', '<div class=\'sp-button-container sp-cf\'>', '<a class=\'sp-cancel\' href=\'#\'></a>', '<button type=\'button\' class=\'sp-choose\'></button>', '</div>', '</div>', '</div>'].join( '' );
		})();

	function paletteTemplate( p, color, className, tooltipFormat ) {
		var html = [];
		for ( var i = 0; i < p.length; i ++ ) {
			var current = p[i];
			if ( current ) {
				var tiny = tinycolor( current );
				var c    = tiny.toHsl().l < 0.5 ? 'sp-thumb-el sp-thumb-dark' : 'sp-thumb-el sp-thumb-light';
				c += (tinycolor.equals( color, current )) ? ' sp-thumb-active' : '';

				var formattedString = tiny.toString( tooltipFormat || 'rgb' );
				var swatchStyle     = rgbaSupport ? ('background-color:' + tiny.toRgbString()) : 'filter:' + tiny.toFilter();
				html.push( '<span title="' + formattedString + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span></span>' );
			} else {
				var cls = 'sp-clear-display';
				html.push( '<span title="No Color Selected" data-color="" style="background-color:transparent;" class="' + cls + '"></span>' );
			}
		}
		return '<div class=\'sp-cf ' + className + '\'>' + html.join( '' ) + '</div>';
	}

	function hideAll() {
		for ( var i = 0; i < spectrums.length; i ++ ) {
			if ( spectrums[i] ) {
				spectrums[i].hide();
			}
		}
	}

	function instanceOptions( o, callbackContext ) {
		var opts       = $.extend( {}, defaultOpts, o );
		opts.callbacks = {
			'move': bind( opts.move, callbackContext ),
			'change': bind( opts.change, callbackContext ),
			'show': bind( opts.show, callbackContext ),
			'hide': bind( opts.hide, callbackContext ),
			'beforeShow': bind( opts.beforeShow, callbackContext )
		};

		return opts;
	}

	function spectrum( element, o ) {

		var opts                                                                               = instanceOptions( o, element ), flat                                         = opts.flat,
			showSelectionPalette                                                               = opts.showSelectionPalette, localStorageKey = opts.localStorageKey,
			theme                                                                              = opts.theme, callbacks                                                      = opts.callbacks, resize                             = throttle( reflow, 10 ),
			visible                                                                            = false, dragWidth                                                         = 0, dragHeight                                         = 0, dragHelperHeight = 0, slideHeight = 0,
			slideWidth                                                                         = 0, alphaWidth = 0, alphaSlideHelperWidth                              = 0, slideHelperHeight = 0,
			currentHue = 0, currentSaturation = 0, currentValue = 0, currentAlpha = 1, palette = [],
			paletteArray                                                                       = [], paletteLookup = {}, selectionPalette = opts.selectionPalette.slice( 0 ),
			maxSelectionSize                                                                   = opts.maxSelectionSize, draggingClass                            = 'sp-dragging', inputText = opts.inputText,
			shiftMovementDirection                                                             = null;

		var doc                                                                           = element.ownerDocument, body = doc.body, boundElement                    = $( element ),
			disabled                                                                      = false, container = $( markup, doc ).addClass( theme ),
			dragger                                                                       = container.find( '.sp-color' ), dragHelper = container.find( '.sp-dragger' ),
			slider                                                                        = container.find( '.sp-hue' ), slideHelper                             = container.find( '.sp-slider' ),
			alphaSliderInner                                                              = container.find( '.sp-alpha-inner' ), alphaSlider           = container.find( '.sp-alpha' ),
			alphaSlideHelper                                                              = container.find( '.sp-alpha-handle' ), textInput            = container.find( '.sp-input' ),
			paletteContainer                                                              = container.find( '.sp-palette' ),
			initialColorContainer                                                         = container.find( '.sp-initial' ), cancelButton = container.find( '.sp-cancel' ),
			clearButton                                                                   = container.find( '.sp-clear' ), chooseButton = container.find( '.sp-choose' ),
			isInput                                                                       = boundElement.is( 'input' ),
			isInputTypeColor                                                              = isInput && inputTypeColorSupport && boundElement.attr( 'type' ) === 'color',
			shouldReplace                                                                 = isInput && ! flat,
			replacer                                                                      = (shouldReplace) ? $( replaceInput ).addClass( theme ).addClass( opts.className ).addClass( opts.replacerClassName ) : $( [] ),
			offsetElement                                                                 = (shouldReplace) ? replacer : boundElement,
			previewElement                                                                = replacer.find( '.sp-preview-inner' ),
			initialColor                                                                  = opts.color || (isInput && boundElement.val()), colorOnShow     = false,
			preferredFormat                                                               = opts.preferredFormat, currentPreferredFormat = preferredFormat,
			clickoutFiresChange = ! opts.showButtons || opts.clickoutFiresChange, isEmpty = ! initialColor,
			allowEmpty                                                                    = opts.allowEmpty && ! isInputTypeColor;

		if ( inputText !== '' ) {
			var x = $( offsetElement ).find( 'div.sp-dd' );
			x.text( inputText );
		}

		function applyOptions() {

			if ( opts.showPaletteOnly ) {
				opts.showPalette = true;
			}

			if ( opts.palette ) {
				palette       = opts.palette.slice( 0 );
				paletteArray  = Array.isArray( palette[0] ) ? palette : [palette];
				paletteLookup = {};
				for ( var i = 0; i < paletteArray.length; i ++ ) {
					for ( var j = 0; j < paletteArray[i].length; j ++ ) {
						var rgb            = tinycolor( paletteArray[i][j] ).toRgbString();
						paletteLookup[rgb] = true;
					}
				}
			}

			container.toggleClass( 'sp-flat', flat );
			container.toggleClass( 'sp-input-disabled', ! opts.showInput );
			container.toggleClass( 'sp-alpha-enabled', opts.showAlpha );
			container.toggleClass( 'sp-clear-enabled', allowEmpty );
			container.toggleClass( 'sp-buttons-disabled', ! opts.showButtons );
			container.toggleClass( 'sp-palette-disabled', ! opts.showPalette );
			container.toggleClass( 'sp-palette-only', opts.showPaletteOnly );
			container.toggleClass( 'sp-initial-disabled', ! opts.showInitial );
			container.addClass( opts.className ).addClass( opts.containerClassName );

			reflow();
		}

		function initialize() {

			if ( IE ) {
				container.find( '*:not(input)' ).attr( 'unselectable', 'on' );
			}

			applyOptions();

			if ( shouldReplace ) {
				boundElement.after( replacer ).hide();
			}

			if ( ! allowEmpty ) {
				clearButton.hide();
			}

			if ( flat ) {
				boundElement.after( container ).hide();
			} else {

				var appendTo = opts.appendTo === 'parent' ? boundElement.parent() : $( opts.appendTo );
				if ( appendTo.length !== 1 ) {
					appendTo = $( 'body' );
				}

				appendTo.append( container );
			}

			updateSelectionPaletteFromStorage();

			offsetElement.on( 'click.spectrum touchstart.spectrum', function( e ) {
				if ( ! disabled ) {
					toggle();
				}

				e.stopPropagation();

				if ( ! $( e.target ).is( 'input' ) ) {
					e.preventDefault();
				}
			} );

			if ( boundElement.is( ':disabled' ) || (opts.disabled === true) ) {
				disable();
			}

			// Prevent clicks from bubbling up to document.  This would cause it to be hidden.
			container.on( 'click', stopPropagation );

			// Handle user typed input
			textInput.on( 'change', setFromTextInput );
			textInput.on( 'paste', function() {
				setTimeout( setFromTextInput, 1 );
			} );
			textInput.on( 'keydown', function( e ) {
				if ( e.keyCode == 13 ) {
					setFromTextInput();
				}
			} );

			cancelButton.text( opts.cancelText );
			cancelButton.on( 'click.spectrum', function( e ) {
				e.stopPropagation();
				e.preventDefault();
				hide( 'cancel' );
			} );

			clearButton.attr( 'title', opts.clearText );
			clearButton.on( 'click.spectrum', function( e ) {
				e.stopPropagation();
				e.preventDefault();
				isEmpty = true;
				move();

				if ( flat ) {
					//for the flat style, this is a change event
					updateOriginalInput( true );
				}
			} );

			chooseButton.text( opts.chooseText );
			chooseButton.on( 'click.spectrum', function( e ) {
				e.stopPropagation();
				e.preventDefault();

				if ( isValid() ) {
					updateOriginalInput( true );
					hide();
				}
			} );

			draggable( alphaSlider, function( dragX, dragY, e ) {
				currentAlpha = (dragX / alphaWidth);
				isEmpty      = false;
				if ( e.shiftKey ) {
					currentAlpha = Math.round( currentAlpha * 10 ) / 10;
				}

				move();
			}, dragStart, dragStop );

			draggable( slider, function( dragX, dragY ) {
				currentHue = parseFloat( dragY / slideHeight );
				isEmpty    = false;
				if ( ! opts.showAlpha ) {
					currentAlpha = 1;
				}
				move();
			}, dragStart, dragStop );

			draggable( dragger, function( dragX, dragY, e ) {

				// shift+drag should snap the movement to either the x or y axis.
				if ( ! e.shiftKey ) {
					shiftMovementDirection = null;
				} else if ( ! shiftMovementDirection ) {
					var oldDragX     = currentSaturation * dragWidth;
					var oldDragY     = dragHeight - (currentValue * dragHeight);
					var furtherFromX = Math.abs( dragX - oldDragX ) > Math.abs( dragY - oldDragY );

					shiftMovementDirection = furtherFromX ? 'x' : 'y';
				}

				var setSaturation = ! shiftMovementDirection || shiftMovementDirection === 'x';
				var setValue      = ! shiftMovementDirection || shiftMovementDirection === 'y';

				if ( setSaturation ) {
					currentSaturation = parseFloat( dragX / dragWidth );
				}
				if ( setValue ) {
					currentValue = parseFloat( (dragHeight - dragY) / dragHeight );
				}

				isEmpty = false;
				if ( ! opts.showAlpha ) {
					currentAlpha = 1;
				}

				move();

			}, dragStart, dragStop );

			if ( ! ! initialColor ) {
				set( initialColor );

				// In case color was black - update the preview UI and set the format
				// since the set function will not run (default color is black).
				updateUI();
				currentPreferredFormat = preferredFormat || tinycolor( initialColor ).format;

				addColorToSelectionPalette( initialColor );
			} else {
				updateUI();
			}

			if ( flat ) {
				show();
			}

			function palletElementClick( e ) {
				if ( e.data && e.data.ignore ) {
					set( $( this ).data( 'color' ) );
					move();
				} else {
					set( $( this ).data( 'color' ) );
					move();
					updateOriginalInput( true );
					hide();
				}

				return false;
			}

			var paletteEvent = IE ? 'mousedown.spectrum' : 'click.spectrum touchstart.spectrum';
			paletteContainer.on( paletteEvent, '.sp-thumb-el', palletElementClick );
			initialColorContainer.on( paletteEvent, '.sp-thumb-el:nth-child(1)', {ignore: true}, palletElementClick );
		}

		function updateSelectionPaletteFromStorage() {

			if ( localStorageKey && window.localStorage ) {

				// Migrate old palettes over to new format.  May want to remove this eventually.
				try {
					var oldPalette = window.localStorage[localStorageKey].split( ',#' );
					if ( oldPalette.length > 1 ) {
						delete window.localStorage[localStorageKey];
						$.each( oldPalette, function( i, c ) {
							addColorToSelectionPalette( c );
						} );
					}
				} catch ( e ) {
				}

				try {
					selectionPalette = window.localStorage[localStorageKey].split( ';' );
				} catch ( e ) {
				}
			}
		}

		function addColorToSelectionPalette( color ) {
			if ( showSelectionPalette ) {
				var rgb = tinycolor( color ).toRgbString();
				if ( ! paletteLookup[rgb] && $.inArray( rgb, selectionPalette ) === - 1 ) {
					selectionPalette.push( rgb );
					while ( selectionPalette.length > maxSelectionSize ) {
						selectionPalette.shift();
					}
				}

				if ( localStorageKey && window.localStorage ) {
					try {
						window.localStorage[localStorageKey] = selectionPalette.join( ';' );
					} catch ( e ) {
					}
				}
			}
		}

		function getUniqueSelectionPalette() {
			var unique = [];
			if ( opts.showPalette ) {
				for ( i = 0; i < selectionPalette.length; i ++ ) {
					var rgb = tinycolor( selectionPalette[i] ).toRgbString();

					if ( ! paletteLookup[rgb] ) {
						unique.push( selectionPalette[i] );
					}
				}
			}

			return unique.reverse().slice( 0, opts.maxSelectionSize );
		}

		function drawPalette() {

			var currentColor = get();

			var html = $.map( paletteArray, function( palette, i ) {
				return paletteTemplate( palette, currentColor, 'sp-palette-row sp-palette-row-' + i, opts.preferredFormat );
			} );

			updateSelectionPaletteFromStorage();

			if ( selectionPalette ) {
				html.push( paletteTemplate( getUniqueSelectionPalette(), currentColor, 'sp-palette-row sp-palette-row-selection', opts.preferredFormat ) );
			}

			paletteContainer.html( html.join( '' ) );
		}

		function drawInitial() {
			if ( opts.showInitial ) {
				var initial = colorOnShow;
				var current = get();
				initialColorContainer.html( paletteTemplate( [initial, current], current, 'sp-palette-row-initial', opts.preferredFormat ) );
			}
		}

		function dragStart() {
			if ( dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0 ) {
				reflow();
			}
			container.addClass( draggingClass );
			shiftMovementDirection = null;
			boundElement.trigger( 'dragstart.spectrum', [get()] );
		}

		function dragStop() {
			container.removeClass( draggingClass );
			boundElement.trigger( 'dragstop.spectrum', [get()] );
		}

		function setFromTextInput() {

			var value = textInput.val();

			if ( (value === null || value === '') && allowEmpty ) {
				set( null );
				updateOriginalInput( true );
			} else {
				var tiny = tinycolor( value );
				if ( tiny.ok ) {
					set( tiny );
					updateOriginalInput( true );
				} else {
					textInput.addClass( 'sp-validation-error' );
				}
			}
		}

		function toggle() {
			if ( visible ) {
				hide();
			} else {
				show();
			}
		}

		function show() {
			var event = $.Event( 'beforeShow.spectrum' );

			if ( visible ) {
				reflow();
				return;
			}

			boundElement.trigger( event, [get()] );

			if ( callbacks.beforeShow( get() ) === false || event.isDefaultPrevented() ) {
				return;
			}

			hideAll();
			visible = true;

			$( doc ).on( 'click.spectrum', hide );
			$( window ).on( 'resize.spectrum', resize );
			replacer.addClass( 'sp-active' );
			container.removeClass( 'sp-hidden' );

			reflow();
			updateUI();

			colorOnShow = get();

			drawInitial();
			callbacks.show( colorOnShow );
			boundElement.trigger( 'show.spectrum', [colorOnShow] );
		}

		function hide( e ) {

			// Return on right click
			if ( e && e.type == 'click' && e.button == 2 ) {
				return;
			}

			// Return if hiding is unnecessary
			if ( ! visible || flat ) {
				return;
			}
			visible = false;

			$( doc ).off( 'click.spectrum', hide );
			$( window ).off( 'resize.spectrum', resize );

			replacer.removeClass( 'sp-active' );
			container.addClass( 'sp-hidden' );

			var colorHasChanged = ! tinycolor.equals( get(), colorOnShow );

			if ( colorHasChanged ) {
				if ( clickoutFiresChange && e !== 'cancel' ) {
					updateOriginalInput( true );
				} else {
					revert();
				}
			}

			callbacks.hide( get() );
			boundElement.trigger( 'hide.spectrum', [get()] );
		}

		function revert() {
			set( colorOnShow, true );
		}

		function set( color, ignoreFormatChange ) {
			if ( tinycolor.equals( color, get() ) ) {
				// Update UI just in case a validation error needs
				// to be cleared.
				updateUI();
				return;
			}

			var newColor, newHsv;
			if ( ! color && allowEmpty ) {
				isEmpty = true;
			} else {
				isEmpty  = false;
				newColor = tinycolor( color );
				newHsv   = newColor.toHsv();

				currentHue        = (newHsv.h % 360) / 360;
				currentSaturation = newHsv.s;
				currentValue      = newHsv.v;
				currentAlpha      = newHsv.a;
			}
			updateUI();

			if ( newColor && newColor.ok && ! ignoreFormatChange ) {
				currentPreferredFormat = preferredFormat || newColor.format;
			}
		}

		function get( opts ) {
			opts = opts || {};

			if ( allowEmpty && isEmpty ) {
				return null;
			}

			return tinycolor.fromRatio( {
				h: currentHue, s: currentSaturation, v: currentValue, a: Math.round( currentAlpha * 100 ) / 100
			}, {format: opts.format || currentPreferredFormat} );
		}

		function isValid() {
			return ! textInput.hasClass( 'sp-validation-error' );
		}

		function move() {
			updateUI();

			callbacks.move( get() );
			boundElement.trigger( 'move.spectrum', [get()] );
		}

		function updateUI() {

			textInput.removeClass( 'sp-validation-error' );

			updateHelperLocations();

			// Update dragger background color (gradients take care of saturation and value).
			var flatColor = tinycolor.fromRatio( {h: currentHue, s: 1, v: 1} );
			dragger.css( 'background-color', flatColor.toHexString() );

			// Get a format that alpha will be included in (hex and names ignore alpha)
			var format = currentPreferredFormat;
			if ( currentAlpha < 1 && ! (currentAlpha === 0 && format === 'name') ) {
				if ( format === 'hex' || format === 'hex3' || format === 'hex6' || format === 'name' ) {
					format = 'rgb';
				}
			}

			var realColor = get( {format: format} ), displayColor = '';

			//reset background info for preview element
			previewElement.removeClass( 'sp-clear-display' );
			previewElement.css( 'background-color', 'transparent' );

			if ( ! realColor && allowEmpty ) {
				// Update the replaced elements background with icon indicating no color selection
				previewElement.addClass( 'sp-clear-display' );
			} else {
				var realHex = realColor.toHexString(), realRgb = realColor.toRgbString();

				// Update the replaced elements background color (with actual selected color)
				if ( rgbaSupport || realColor.alpha === 1 ) {
					previewElement.css( 'background-color', realRgb );
				} else {
					previewElement.css( 'background-color', 'transparent' );
					previewElement.css( 'filter', realColor.toFilter() );
				}

				if ( opts.showAlpha ) {
					var rgb       = realColor.toRgb();
					rgb.a         = 0;
					var realAlpha = tinycolor( rgb ).toRgbString();
					var gradient  = 'linear-gradient(left, ' + realAlpha + ', ' + realHex + ')';

					if ( IE ) {
						alphaSliderInner.css( 'filter', tinycolor( realAlpha ).toFilter( {gradientType: 1}, realHex ) );
					} else {
						alphaSliderInner.css( 'background', '-webkit-' + gradient );
						alphaSliderInner.css( 'background', '-moz-' + gradient );
						alphaSliderInner.css( 'background', '-ms-' + gradient );
						// Use current syntax gradient on unprefixed property.
						alphaSliderInner.css( 'background', 'linear-gradient(to right, ' + realAlpha + ', ' + realHex + ')' );
					}
				}

				displayColor = realColor.toString( format );
			}

			// Update the text entry input as it changes happen
			if ( opts.showInput ) {
				textInput.val( displayColor );
			}

			if ( opts.showPalette ) {
				drawPalette();
			}

			drawInitial();
		}

		function updateHelperLocations() {
			var s = currentSaturation;
			var v = currentValue;

			if ( allowEmpty && isEmpty ) {
				//if selected color is empty, hide the helpers
				alphaSlideHelper.hide();
				slideHelper.hide();
				dragHelper.hide();
			} else {
				//make sure helpers are visible
				alphaSlideHelper.show();
				slideHelper.show();
				dragHelper.show();

				// Where to show the little circle in that displays your current selected color
				var dragX = s * dragWidth;
				var dragY = dragHeight - (v * dragHeight);
				dragX     = Math.max( - dragHelperHeight, Math.min( dragWidth - dragHelperHeight, dragX - dragHelperHeight ) );
				dragY     = Math.max( - dragHelperHeight, Math.min( dragHeight - dragHelperHeight, dragY - dragHelperHeight ) );
				dragHelper.css( {
					'top': dragY + 'px', 'left': dragX + 'px'
				} );

				var alphaX = currentAlpha * alphaWidth;
				alphaSlideHelper.css( {
					'left': (alphaX - (alphaSlideHelperWidth / 2)) + 'px'
				} );

				// Where to show the bar that displays your current selected hue
				var slideY = (currentHue) * slideHeight;
				slideHelper.css( {
					'top': (slideY - slideHelperHeight) + 'px'
				} );
			}
		}

		function updateOriginalInput( fireCallback ) {
			var color = get(), displayColor = '', hasChanged = ! tinycolor.equals( color, colorOnShow );

			if ( color ) {
				displayColor = color.toString( currentPreferredFormat );
				// Update the selection palette with the current color
				addColorToSelectionPalette( color );
			}

			if ( isInput ) {
				boundElement.val( displayColor );
			}

			colorOnShow = color;

			if ( fireCallback && hasChanged ) {
				callbacks.change( color );
				boundElement.trigger( 'change', [color] );
			}
		}

		function reflow() {
			dragWidth             = dragger.width();
			dragHeight            = dragger.height();
			dragHelperHeight      = dragHelper.height();
			slideWidth            = slider.width();
			slideHeight           = slider.height();
			slideHelperHeight     = slideHelper.height();
			alphaWidth            = alphaSlider.width();
			alphaSlideHelperWidth = alphaSlideHelper.width();

			if ( ! flat ) {
				container.css( 'position', 'absolute' );
				container.offset( getOffset( container, offsetElement ) );
			}

			updateHelperLocations();

			if ( opts.showPalette ) {
				drawPalette();
			}

			boundElement.trigger( 'reflow.spectrum' );
		}

		function destroy() {
			boundElement.show();
			offsetElement.off( 'click.spectrum touchstart.spectrum' );
			container.remove();
			replacer.remove();
			spectrums[spect.id] = null;
		}

		function option( optionName, optionValue ) {
			if ( optionName === undefined ) {
				return $.extend( {}, opts );
			}
			if ( optionValue === undefined ) {
				return opts[optionName];
			}

			opts[optionName] = optionValue;
			applyOptions();
		}

		function enable() {
			disabled = false;
			boundElement.prop( 'disabled', false );
			offsetElement.removeClass( 'sp-disabled' );
		}

		function disable() {
			hide();
			disabled = true;
			boundElement.prop( 'disabled', true );
			offsetElement.addClass( 'sp-disabled' );
		}

		initialize();

		var spect = {
			show: show,
			hide: hide,
			toggle: toggle,
			reflow: reflow,
			option: option,
			enable: enable,
			disable: disable,
			set: function( c ) {
				set( c );
				updateOriginalInput();
			},
			get: get,
			destroy: destroy,
			container: container
		};

		spect.id = spectrums.push( spect ) - 1;

		return spect;
	}

	/**
	 * checkOffset - get the offset below/above and left/right element depending on screen position
	 * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
	 */
	function getOffset( picker, input ) {
		var extraY      = 0;
		var dpWidth     = picker.outerWidth();
		var dpHeight    = picker.outerHeight();
		var inputHeight = input.outerHeight();
		var doc         = picker[0].ownerDocument;
		var docElem     = doc.documentElement;
		var viewWidth   = docElem.clientWidth + $( doc ).scrollLeft();
		var viewHeight  = docElem.clientHeight + $( doc ).scrollTop();
		var offset      = input.offset();
		offset.top += inputHeight;

		offset.left -= Math.min( offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs( offset.left + dpWidth - viewWidth ) : 0 );

		offset.top -= Math.min( offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs( dpHeight + inputHeight - extraY ) : extraY) );

		return offset;
	}

	/**
	 * noop - do nothing
	 */
	function noop() {

	}

	/**
	 * stopPropagation - makes the code only doing this a little easier to read in line
	 */
	function stopPropagation( e ) {
		e.stopPropagation();
	}

	/**
	 * Create a function bound to a given object
	 * Thanks to underscore.js
	 */
	function bind( func, obj ) {
		var slice = Array.prototype.slice;
		var args  = slice.call( arguments, 2 );
		return function() {
			return func.apply( obj, args.concat( slice.call( arguments ) ) );
		};
	}

	/**
	 * Lightweight drag helper.  Handles containment within the element, so that
	 * when dragging, the x is within [0,element.width] and y is within [0,element.height]
	 */
	function draggable( element, onmove, onstart, onstop ) {
		onmove        = onmove || function() {
		};
		onstart       = onstart || function() {
		};
		onstop        = onstop || function() {
		};
		var doc       = element.ownerDocument || document;
		var dragging  = false;
		var offset    = {};
		var maxHeight = 0;
		var maxWidth  = 0;
		var hasTouch  = ('ontouchstart' in window);

		var duringDragEvents                    = {};
		duringDragEvents['selectstart']         = prevent;
		duringDragEvents['dragstart']           = prevent;
		duringDragEvents['touchmove mousemove'] = move;
		duringDragEvents['touchend mouseup']    = stop;

		function prevent( e ) {
			if ( e.stopPropagation ) {
				e.stopPropagation();
			}
			if ( e.preventDefault ) {
				e.preventDefault();
			}
			e.returnValue = false;
		}

		function move( e ) {
			if ( dragging ) {
				// Mouseup happened outside of window
				if ( IE && document.documentMode < 9 && ! e.button ) {
					return stop();
				}

				var touches = e.originalEvent.touches;
				var pageX   = touches ? touches[0].pageX : e.pageX;
				var pageY   = touches ? touches[0].pageY : e.pageY;

				var dragX = Math.max( 0, Math.min( pageX - offset.left, maxWidth ) );
				var dragY = Math.max( 0, Math.min( pageY - offset.top, maxHeight ) );

				if ( hasTouch ) {
					// Stop scrolling in iOS
					prevent( e );
				}

				onmove.apply( element, [dragX, dragY, e] );
			}
		}

		function start( e ) {
			var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
			var touches    = e.originalEvent.touches;

			if ( ! rightclick && ! dragging ) {
				if ( onstart.apply( element, arguments ) !== false ) {
					dragging  = true;
					maxHeight = $( element ).height();
					maxWidth  = $( element ).width();
					offset    = $( element ).offset();

					$( doc ).on( duringDragEvents );
					$( doc.body ).addClass( 'sp-dragging' );

					if ( ! hasTouch ) {
						move( e );
					}

					prevent( e );
				}
			}
		}

		function stop() {
			if ( dragging ) {
				$( doc ).off( duringDragEvents );
				$( doc.body ).removeClass( 'sp-dragging' );
				onstop.apply( element, arguments );
			}
			dragging = false;
		}

		$( element ).on( 'touchstart mousedown', start );
	}

	function throttle( func, wait, debounce ) {
		var timeout;
		return function() {
			var context   = this, args = arguments;
			var throttler = function() {
				timeout = null;
				func.apply( context, args );
			};
			if ( debounce ) clearTimeout( timeout );
			if ( debounce || ! timeout ) timeout = setTimeout( throttler, wait );
		};
	}

	function log() {/* jshint -W021 */
		if ( window.console ) {
			if ( Function.prototype.bind ) log = Function.prototype.bind.call( console.log, console ); else log = function() {
				Function.prototype.apply.call( console.log, console, arguments );
			};
			log.apply( this, arguments );
		}
	}

	/**
	 * Define a jQuery plugin
	 */
	var dataID    = 'spectrum.id';
	$.fn.spectrum = function( opts, extra ) {

		if ( typeof opts == 'string' ) {

			var returnValue = this;
			var args        = Array.prototype.slice.call( arguments, 1 );

			this.each( function() {
				var spect = spectrums[$( this ).data( dataID )];
				if ( spect ) {
					var method = spect[opts];
					if ( ! method ) {
						throw new Error( 'Spectrum: no such method: \'' + opts + '\'' );
					}

					if ( opts == 'get' ) {
						returnValue = spect.get();
					} else if ( opts == 'container' ) {
						returnValue = spect.container;
					} else if ( opts == 'option' ) {
						returnValue = spect.option.apply( spect, args );
					} else if ( opts == 'destroy' ) {
						spect.destroy();
						$( this ).removeData( dataID );
					} else {
						method.apply( spect, args );
					}
				}
			} );

			return returnValue;
		}

		// Initializing a new instance of spectrum
		return this.spectrum( 'destroy' ).each( function() {
			var options = $.extend( {}, opts, $( this ).data() );
			var spect   = spectrum( this, options );
			$( this ).data( dataID, spect.id );
		} );
	};

	$.fn.spectrum.load      = true;
	$.fn.spectrum.loadOpts  = {};
	$.fn.spectrum.draggable = draggable;
	$.fn.spectrum.defaults  = defaultOpts;

	$.spectrum              = {};
	$.spectrum.localization = {};
	$.spectrum.palettes     = {};

	$.fn.spectrum.processNativeColorInputs = function() {
		if ( ! inputTypeColorSupport ) {
			$( 'input[type=color]' ).spectrum( {
				preferredFormat: 'hex6'
			} );
		}
	};

	// TinyColor v0.9.17
	// https://github.com/bgrins/TinyColor
	// 2013-08-10, Brian Grinstead, MIT License

	(function() {

		var trimLeft = /^[\s,#]+/, trimRight = /\s+$/, tinyCounter = 0, math = Math, mathRound = math.round,
			mathMin                                                                            = math.min, mathMax = math.max, mathRandom                                 = math.random;

		function tinycolor( color, opts ) {

			color = (color) ? color : '';
			opts  = opts || {};

			// If input is already a tinycolor, return itself
			if ( typeof color == 'object' && color.hasOwnProperty( '_tc_id' ) ) {
				return color;
			}

			var rgb                                                = inputToRGB( color );
			var r = rgb.r, g = rgb.g, b = rgb.b, a = rgb.a, roundA = mathRound( 100 * a ) / 100,
				format                                             = opts.format || rgb.format;

			// Don't let the range of [0,255] come back in [0,1].
			// Potentially lose a little bit of precision here, but will fix issues where
			// .5 gets interpreted as half of the total, instead of half of 1
			// If it was supposed to be 128, this was already taken care of by `inputToRgb`
			if ( r < 1 ) {
				r = mathRound( r );
			}
			if ( g < 1 ) {
				g = mathRound( g );
			}
			if ( b < 1 ) {
				b = mathRound( b );
			}

			return {
				ok: rgb.ok, format: format, _tc_id: tinyCounter ++, alpha: a, getAlpha: function() {
					return a;
				}, setAlpha: function( value ) {
					a      = boundAlpha( value );
					roundA = mathRound( 100 * a ) / 100;
				}, toHsv: function() {
					var hsv = rgbToHsv( r, g, b );
					return {h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a};
				}, toHsvString: function() {
					var hsv = rgbToHsv( r, g, b );
					var h   = mathRound( hsv.h * 360 ), s = mathRound( hsv.s * 100 ), v = mathRound( hsv.v * 100 );
					return (a == 1) ? 'hsv(' + h + ', ' + s + '%, ' + v + '%)' : 'hsva(' + h + ', ' + s + '%, ' + v + '%, ' + roundA + ')';
				}, toHsl: function() {
					var hsl = rgbToHsl( r, g, b );
					return {h: hsl.h * 360, s: hsl.s, l: hsl.l, a: a};
				}, toHslString: function() {
					var hsl = rgbToHsl( r, g, b );
					var h   = mathRound( hsl.h * 360 ), s = mathRound( hsl.s * 100 ), l = mathRound( hsl.l * 100 );
					return (a == 1) ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + roundA + ')';
				}, toHex: function( allow3Char ) {
					return rgbToHex( r, g, b, allow3Char );
				}, toHexString: function( allow3Char ) {
					return '#' + this.toHex( allow3Char );
				}, toHex8: function() {
					return rgbaToHex( r, g, b, a );
				}, toHex8String: function() {
					return '#' + this.toHex8();
				}, toRgb: function() {
					return {r: mathRound( r ), g: mathRound( g ), b: mathRound( b ), a: a};
				}, toRgbString: function() {
					return (a == 1) ? 'rgb(' + mathRound( r ) + ', ' + mathRound( g ) + ', ' + mathRound( b ) + ')' : 'rgba(' + mathRound( r ) + ', ' + mathRound( g ) + ', ' + mathRound( b ) + ', ' + roundA + ')';
				}, toPercentageRgb: function() {
					return {
						r: mathRound( bound01( r, 255 ) * 100 ) + '%',
						g: mathRound( bound01( g, 255 ) * 100 ) + '%',
						b: mathRound( bound01( b, 255 ) * 100 ) + '%',
						a: a
					};
				}, toPercentageRgbString: function() {
					return (a == 1) ? 'rgb(' + mathRound( bound01( r, 255 ) * 100 ) + '%, ' + mathRound( bound01( g, 255 ) * 100 ) + '%, ' + mathRound( bound01( b, 255 ) * 100 ) + '%)' : 'rgba(' + mathRound( bound01( r, 255 ) * 100 ) + '%, ' + mathRound( bound01( g, 255 ) * 100 ) + '%, ' + mathRound( bound01( b, 255 ) * 100 ) + '%, ' + roundA + ')';
				}, toName: function() {
					if ( a === 0 ) {
						return 'transparent';
					}

					return hexNames[rgbToHex( r, g, b, true )] || false;
				}, toFilter: function( secondColor ) {
					var hex8String       = '#' + rgbaToHex( r, g, b, a );
					var secondHex8String = hex8String;
					var gradientType     = opts && opts.gradientType ? 'GradientType = 1, ' : '';

					if ( secondColor ) {
						var s            = tinycolor( secondColor );
						secondHex8String = s.toHex8String();
					}

					return 'progid:DXImageTransform.Microsoft.gradient(' + gradientType + 'startColorstr=' + hex8String + ',endColorstr=' + secondHex8String + ')';
				}, toString: function( format ) {
					var formatSet = ! ! format;
					format        = format || this.format;

					var formattedString         = false;
					var hasAlphaAndFormatNotSet = ! formatSet && a < 1 && a > 0;
					var formatWithAlpha         = hasAlphaAndFormatNotSet && (format === 'hex' || format === 'hex6' || format === 'hex3' || format === 'name');

					if ( format === 'rgb' ) {
						formattedString = this.toRgbString();
					}
					if ( format === 'prgb' ) {
						formattedString = this.toPercentageRgbString();
					}
					if ( format === 'hex' || format === 'hex6' ) {
						formattedString = this.toHexString();
					}
					if ( format === 'hex3' ) {
						formattedString = this.toHexString( true );
					}
					if ( format === 'hex8' ) {
						formattedString = this.toHex8String();
					}
					if ( format === 'name' ) {
						formattedString = this.toName();
					}
					if ( format === 'hsl' ) {
						formattedString = this.toHslString();
					}
					if ( format === 'hsv' ) {
						formattedString = this.toHsvString();
					}

					if ( formatWithAlpha ) {
						return this.toRgbString();
					}

					return formattedString || this.toHexString();
				}
			};
		}

		// If input is an object, force 1 into "1.0" to handle ratios properly
		// String input requires "1.0" as input, so 1 will be treated as 1
		tinycolor.fromRatio = function( color, opts ) {
			if ( typeof color == 'object' ) {
				var newColor = {};
				for ( var i in color ) {
					if ( color.hasOwnProperty( i ) ) {
						if ( i === 'a' ) {
							newColor[i] = color[i];
						} else {
							newColor[i] = convertToPercentage( color[i] );
						}
					}
				}
				color = newColor;
			}

			return tinycolor( color, opts );
		};

		// Given a string or object, convert that input to RGB
		// Possible string inputs:
		//
		//     "red"
		//     "#f00" or "f00"
		//     "#ff0000" or "ff0000"
		//     "#ff000000" or "ff000000"
		//     "rgb 255 0 0" or "rgb (255, 0, 0)"
		//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
		//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
		//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
		//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
		//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
		//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
		//
		function inputToRGB( color ) {

			var rgb    = {r: 0, g: 0, b: 0};
			var a      = 1;
			var ok     = false;
			var format = false;

			if ( typeof color == 'string' ) {
				color = stringInputToObject( color );
			}

			if ( typeof color == 'object' ) {
				if ( color.hasOwnProperty( 'r' ) && color.hasOwnProperty( 'g' ) && color.hasOwnProperty( 'b' ) ) {
					rgb    = rgbToRgb( color.r, color.g, color.b );
					ok     = true;
					format = String( color.r ).substr( - 1 ) === '%' ? 'prgb' : 'rgb';
				} else if ( color.hasOwnProperty( 'h' ) && color.hasOwnProperty( 's' ) && color.hasOwnProperty( 'v' ) ) {
					color.s = convertToPercentage( color.s );
					color.v = convertToPercentage( color.v );
					rgb     = hsvToRgb( color.h, color.s, color.v );
					ok      = true;
					format  = 'hsv';
				} else if ( color.hasOwnProperty( 'h' ) && color.hasOwnProperty( 's' ) && color.hasOwnProperty( 'l' ) ) {
					color.s = convertToPercentage( color.s );
					color.l = convertToPercentage( color.l );
					rgb     = hslToRgb( color.h, color.s, color.l );
					ok      = true;
					format  = 'hsl';
				}

				if ( color.hasOwnProperty( 'a' ) ) {
					a = color.a;
				}
			}

			a = boundAlpha( a );

			return {
				ok: ok,
				format: color.format || format,
				r: mathMin( 255, mathMax( rgb.r, 0 ) ),
				g: mathMin( 255, mathMax( rgb.g, 0 ) ),
				b: mathMin( 255, mathMax( rgb.b, 0 ) ),
				a: a
			};
		}

		// Conversion Functions
		// --------------------

		// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
		// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

		// `rgbToRgb`
		// Handle bounds / percentage checking to conform to CSS color spec
		// <http://www.w3.org/TR/css3-color/>
		// *Assumes:* r, g, b in [0, 255] or [0, 1]
		// *Returns:* { r, g, b } in [0, 255]
		function rgbToRgb( r, g, b ) {
			return {
				r: bound01( r, 255 ) * 255, g: bound01( g, 255 ) * 255, b: bound01( b, 255 ) * 255
			};
		}

		// `rgbToHsl`
		// Converts an RGB color value to HSL.
		// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
		// *Returns:* { h, s, l } in [0,1]
		function rgbToHsl( r, g, b ) {

			r = bound01( r, 255 );
			g = bound01( g, 255 );
			b = bound01( b, 255 );

			var max     = mathMax( r, g, b ), min = mathMin( r, g, b );
			var h, s, l = (max + min) / 2;

			if ( max == min ) {
				h = s = 0; // achromatic
			} else {
				var d = max - min;
				s     = l > 0.5 ? d / (2 - max - min) : d / (max + min);
				switch ( max ) {
					case r:
						h = (g - b) / d + (g < b ? 6 : 0);
						break;
					case g:
						h = (b - r) / d + 2;
						break;
					case b:
						h = (r - g) / d + 4;
						break;
				}

				h /= 6;
			}

			return {h: h, s: s, l: l};
		}

		// `hslToRgb`
		// Converts an HSL color value to RGB.
		// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
		// *Returns:* { r, g, b } in the set [0, 255]
		function hslToRgb( h, s, l ) {
			var r, g, b;

			h = bound01( h, 360 );
			s = bound01( s, 100 );
			l = bound01( l, 100 );

			function hue2rgb( p, q, t ) {
				if ( t < 0 ) t += 1;
				if ( t > 1 ) t -= 1;
				if ( t < 1 / 6 ) return p + (q - p) * 6 * t;
				if ( t < 1 / 2 ) return q;
				if ( t < 2 / 3 ) return p + (q - p) * (2 / 3 - t) * 6;
				return p;
			}

			if ( s === 0 ) {
				r = g = b = l; // achromatic
			} else {
				var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
				var p = 2 * l - q;
				r     = hue2rgb( p, q, h + 1 / 3 );
				g     = hue2rgb( p, q, h );
				b     = hue2rgb( p, q, h - 1 / 3 );
			}

			return {r: r * 255, g: g * 255, b: b * 255};
		}

		// `rgbToHsv`
		// Converts an RGB color value to HSV
		// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
		// *Returns:* { h, s, v } in [0,1]
		function rgbToHsv( r, g, b ) {

			r = bound01( r, 255 );
			g = bound01( g, 255 );
			b = bound01( b, 255 );

			var max     = mathMax( r, g, b ), min = mathMin( r, g, b );
			var h, s, v = max;

			var d = max - min;
			s     = max === 0 ? 0 : d / max;

			if ( max == min ) {
				h = 0; // achromatic
			} else {
				switch ( max ) {
					case r:
						h = (g - b) / d + (g < b ? 6 : 0);
						break;
					case g:
						h = (b - r) / d + 2;
						break;
					case b:
						h = (r - g) / d + 4;
						break;
				}
				h /= 6;
			}
			return {h: h, s: s, v: v};
		}

		// `hsvToRgb`
		// Converts an HSV color value to RGB.
		// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
		// *Returns:* { r, g, b } in the set [0, 255]
		function hsvToRgb( h, s, v ) {

			h = bound01( h, 360 ) * 6;
			s = bound01( s, 100 );
			v = bound01( v, 100 );

			var i                                                                        = math.floor( h ), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s),
				mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod];

			return {r: r * 255, g: g * 255, b: b * 255};
		}

		// `rgbToHex`
		// Converts an RGB color to hex
		// Assumes r, g, and b are contained in the set [0, 255]
		// Returns a 3 or 6 character hex
		function rgbToHex( r, g, b, allow3Char ) {

			var hex = [pad2( mathRound( r ).toString( 16 ) ), pad2( mathRound( g ).toString( 16 ) ), pad2( mathRound( b ).toString( 16 ) )];

			// Return a 3 character hex if possible
			if ( allow3Char && hex[0].charAt( 0 ) == hex[0].charAt( 1 ) && hex[1].charAt( 0 ) == hex[1].charAt( 1 ) && hex[2].charAt( 0 ) == hex[2].charAt( 1 ) ) {
				return hex[0].charAt( 0 ) + hex[1].charAt( 0 ) + hex[2].charAt( 0 );
			}

			return hex.join( '' );
		}

		// `rgbaToHex`
		// Converts an RGBA color plus alpha transparency to hex
		// Assumes r, g, b and a are contained in the set [0, 255]
		// Returns an 8 character hex
		function rgbaToHex( r, g, b, a ) {

			var hex = [pad2( convertDecimalToHex( a ) ), pad2( mathRound( r ).toString( 16 ) ), pad2( mathRound( g ).toString( 16 ) ), pad2( mathRound( b ).toString( 16 ) )];

			return hex.join( '' );
		}

		// `equals`
		// Can be called with any tinycolor input
		tinycolor.equals = function( color1, color2 ) {
			if ( ! color1 || ! color2 ) {
				return false;
			}
			return tinycolor( color1 ).toRgbString() == tinycolor( color2 ).toRgbString();
		};
		tinycolor.random = function() {
			return tinycolor.fromRatio( {
				r: mathRandom(), g: mathRandom(), b: mathRandom()
			} );
		};

		// Modification Functions
		// ----------------------
		// Thanks to less.js for some of the basics here
		// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>

		tinycolor.desaturate = function( color, amount ) {
			amount  = (amount === 0) ? 0 : (amount || 10);
			var hsl = tinycolor( color ).toHsl();
			hsl.s -= amount / 100;
			hsl.s   = clamp01( hsl.s );
			return tinycolor( hsl );
		};
		tinycolor.saturate   = function( color, amount ) {
			amount  = (amount === 0) ? 0 : (amount || 10);
			var hsl = tinycolor( color ).toHsl();
			hsl.s += amount / 100;
			hsl.s   = clamp01( hsl.s );
			return tinycolor( hsl );
		};
		tinycolor.greyscale  = function( color ) {
			return tinycolor.desaturate( color, 100 );
		};
		tinycolor.lighten    = function( color, amount ) {
			amount  = (amount === 0) ? 0 : (amount || 10);
			var hsl = tinycolor( color ).toHsl();
			hsl.l += amount / 100;
			hsl.l   = clamp01( hsl.l );
			return tinycolor( hsl );
		};
		tinycolor.darken     = function( color, amount ) {
			amount  = (amount === 0) ? 0 : (amount || 10);
			var hsl = tinycolor( color ).toHsl();
			hsl.l -= amount / 100;
			hsl.l   = clamp01( hsl.l );
			return tinycolor( hsl );
		};
		tinycolor.complement = function( color ) {
			var hsl = tinycolor( color ).toHsl();
			hsl.h   = (hsl.h + 180) % 360;
			return tinycolor( hsl );
		};

		// Combination Functions
		// ---------------------
		// Thanks to jQuery xColor for some of the ideas behind these
		// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>

		tinycolor.triad           = function( color ) {
			var hsl = tinycolor( color ).toHsl();
			var h   = hsl.h;
			return [tinycolor( color ), tinycolor( {
				h: (h + 120) % 360, s: hsl.s, l: hsl.l
			} ), tinycolor( {h: (h + 240) % 360, s: hsl.s, l: hsl.l} )];
		};
		tinycolor.tetrad          = function( color ) {
			var hsl = tinycolor( color ).toHsl();
			var h   = hsl.h;
			return [tinycolor( color ), tinycolor( {
				h: (h + 90) % 360, s: hsl.s, l: hsl.l
			} ), tinycolor( {h: (h + 180) % 360, s: hsl.s, l: hsl.l} ), tinycolor( {
				h: (h + 270) % 360, s: hsl.s, l: hsl.l
			} )];
		};
		tinycolor.splitcomplement = function( color ) {
			var hsl = tinycolor( color ).toHsl();
			var h   = hsl.h;
			return [tinycolor( color ), tinycolor( {
				h: (h + 72) % 360, s: hsl.s, l: hsl.l
			} ), tinycolor( {h: (h + 216) % 360, s: hsl.s, l: hsl.l} )];
		};
		tinycolor.analogous       = function( color, results, slices ) {
			results = results || 6;
			slices  = slices || 30;

			var hsl  = tinycolor( color ).toHsl();
			var part = 360 / slices;
			var ret  = [tinycolor( color )];

			for ( hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; -- results; ) {
				hsl.h = (hsl.h + part) % 360;
				ret.push( tinycolor( hsl ) );
			}
			return ret;
		};
		tinycolor.monochromatic   = function( color, results ) {
			results          = results || 6;
			var hsv          = tinycolor( color ).toHsv();
			var h            = hsv.h, s = hsv.s, v = hsv.v;
			var ret          = [];
			var modification = 1 / results;

			while ( results -- ) {
				ret.push( tinycolor( {h: h, s: s, v: v} ) );
				v = (v + modification) % 1;
			}

			return ret;
		};

		// Readability Functions
		// ---------------------
		// <http://www.w3.org/TR/AERT#color-contrast>

		// `readability`
		// Analyze the 2 colors and returns an object with the following properties:
		//    `brightness`: difference in brightness between the two colors
		//    `color`: difference in color/hue between the two colors
		tinycolor.readability = function( color1, color2 ) {
			var a           = tinycolor( color1 ).toRgb();
			var b           = tinycolor( color2 ).toRgb();
			var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000;
			var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
			var colorDiff   = (Math.max( a.r, b.r ) - Math.min( a.r, b.r ) + Math.max( a.g, b.g ) - Math.min( a.g, b.g ) + Math.max( a.b, b.b ) - Math.min( a.b, b.b ));

			return {
				brightness: Math.abs( brightnessA - brightnessB ), color: colorDiff
			};
		};

		// `readable`
		// http://www.w3.org/TR/AERT#color-contrast
		// Ensure that foreground and background color combinations provide sufficient contrast.
		// *Example*
		//    tinycolor.readable("#000", "#111") => false
		tinycolor.readable = function( color1, color2 ) {
			var readability = tinycolor.readability( color1, color2 );
			return readability.brightness > 125 && readability.color > 500;
		};

		// `mostReadable`
		// Given a base color and a list of possible foreground or background
		// colors for that base, returns the most readable color.
		// *Example*
		//    tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000"
		tinycolor.mostReadable = function( baseColor, colorList ) {
			var bestColor      = null;
			var bestScore      = 0;
			var bestIsReadable = false;
			for ( var i = 0; i < colorList.length; i ++ ) {

				// We normalize both around the "acceptable" breaking point,
				// but rank brightness constrast higher than hue.

				var readability = tinycolor.readability( baseColor, colorList[i] );
				var readable    = readability.brightness > 125 && readability.color > 500;
				var score       = 3 * (readability.brightness / 125) + (readability.color / 500);

				if ( (readable && ! bestIsReadable) || (readable && bestIsReadable && score > bestScore) || ((! readable) && (! bestIsReadable) && score > bestScore) ) {
					bestIsReadable = readable;
					bestScore      = score;
					bestColor      = tinycolor( colorList[i] );
				}
			}
			return bestColor;
		};

		// Big List of Colors
		// ------------------
		// <http://www.w3.org/TR/css3-color/#svg-color>
		var names = tinycolor.names = {
			aliceblue: 'f0f8ff',
			antiquewhite: 'faebd7',
			aqua: '0ff',
			aquamarine: '7fffd4',
			azure: 'f0ffff',
			beige: 'f5f5dc',
			bisque: 'ffe4c4',
			black: '000',
			blanchedalmond: 'ffebcd',
			blue: '00f',
			blueviolet: '8a2be2',
			brown: 'a52a2a',
			burlywood: 'deb887',
			burntsienna: 'ea7e5d',
			cadetblue: '5f9ea0',
			chartreuse: '7fff00',
			chocolate: 'd2691e',
			coral: 'ff7f50',
			cornflowerblue: '6495ed',
			cornsilk: 'fff8dc',
			crimson: 'dc143c',
			cyan: '0ff',
			darkblue: '00008b',
			darkcyan: '008b8b',
			darkgoldenrod: 'b8860b',
			darkgray: 'a9a9a9',
			darkgreen: '006400',
			darkgrey: 'a9a9a9',
			darkkhaki: 'bdb76b',
			darkmagenta: '8b008b',
			darkolivegreen: '556b2f',
			darkorange: 'ff8c00',
			darkorchid: '9932cc',
			darkred: '8b0000',
			darksalmon: 'e9967a',
			darkseagreen: '8fbc8f',
			darkslateblue: '483d8b',
			darkslategray: '2f4f4f',
			darkslategrey: '2f4f4f',
			darkturquoise: '00ced1',
			darkviolet: '9400d3',
			deeppink: 'ff1493',
			deepskyblue: '00bfff',
			dimgray: '696969',
			dimgrey: '696969',
			dodgerblue: '1e90ff',
			firebrick: 'b22222',
			floralwhite: 'fffaf0',
			forestgreen: '228b22',
			fuchsia: 'f0f',
			gainsboro: 'dcdcdc',
			ghostwhite: 'f8f8ff',
			gold: 'ffd700',
			goldenrod: 'daa520',
			gray: '808080',
			green: '008000',
			greenyellow: 'adff2f',
			grey: '808080',
			honeydew: 'f0fff0',
			hotpink: 'ff69b4',
			indianred: 'cd5c5c',
			indigo: '4b0082',
			ivory: 'fffff0',
			khaki: 'f0e68c',
			lavender: 'e6e6fa',
			lavenderblush: 'fff0f5',
			lawngreen: '7cfc00',
			lemonchiffon: 'fffacd',
			lightblue: 'add8e6',
			lightcoral: 'f08080',
			lightcyan: 'e0ffff',
			lightgoldenrodyellow: 'fafad2',
			lightgray: 'd3d3d3',
			lightgreen: '90ee90',
			lightgrey: 'd3d3d3',
			lightpink: 'ffb6c1',
			lightsalmon: 'ffa07a',
			lightseagreen: '20b2aa',
			lightskyblue: '87cefa',
			lightslategray: '789',
			lightslategrey: '789',
			lightsteelblue: 'b0c4de',
			lightyellow: 'ffffe0',
			lime: '0f0',
			limegreen: '32cd32',
			linen: 'faf0e6',
			magenta: 'f0f',
			maroon: '800000',
			mediumaquamarine: '66cdaa',
			mediumblue: '0000cd',
			mediumorchid: 'ba55d3',
			mediumpurple: '9370db',
			mediumseagreen: '3cb371',
			mediumslateblue: '7b68ee',
			mediumspringgreen: '00fa9a',
			mediumturquoise: '48d1cc',
			mediumvioletred: 'c71585',
			midnightblue: '191970',
			mintcream: 'f5fffa',
			mistyrose: 'ffe4e1',
			moccasin: 'ffe4b5',
			navajowhite: 'ffdead',
			navy: '000080',
			oldlace: 'fdf5e6',
			olive: '808000',
			olivedrab: '6b8e23',
			orange: 'ffa500',
			orangered: 'ff4500',
			orchid: 'da70d6',
			palegoldenrod: 'eee8aa',
			palegreen: '98fb98',
			paleturquoise: 'afeeee',
			palevioletred: 'db7093',
			papayawhip: 'ffefd5',
			peachpuff: 'ffdab9',
			peru: 'cd853f',
			pink: 'ffc0cb',
			plum: 'dda0dd',
			powderblue: 'b0e0e6',
			purple: '800080',
			red: 'f00',
			rosybrown: 'bc8f8f',
			royalblue: '4169e1',
			saddlebrown: '8b4513',
			salmon: 'fa8072',
			sandybrown: 'f4a460',
			seagreen: '2e8b57',
			seashell: 'fff5ee',
			sienna: 'a0522d',
			silver: 'c0c0c0',
			skyblue: '87ceeb',
			slateblue: '6a5acd',
			slategray: '708090',
			slategrey: '708090',
			snow: 'fffafa',
			springgreen: '00ff7f',
			steelblue: '4682b4',
			tan: 'd2b48c',
			teal: '008080',
			thistle: 'd8bfd8',
			tomato: 'ff6347',
			turquoise: '40e0d0',
			violet: 'ee82ee',
			wheat: 'f5deb3',
			white: 'fff',
			whitesmoke: 'f5f5f5',
			yellow: 'ff0',
			yellowgreen: '9acd32'
		};

		// Make it easy to access colors via `hexNames[hex]`
		var hexNames = tinycolor.hexNames = flip( names );

		// Utilities
		// ---------

		// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
		function flip( o ) {
			var flipped = {};
			for ( var i in o ) {
				if ( o.hasOwnProperty( i ) ) {
					flipped[o[i]] = i;
				}
			}
			return flipped;
		}

		// Return a valid alpha value [0,1] with all invalid values being set to 1
		function boundAlpha( a ) {
			a = parseFloat( a );

			if ( isNaN( a ) || a < 0 || a > 1 ) {
				a = 1;
			}

			return a;
		}

		// Take input from [0, n] and return it as [0, 1]
		function bound01( n, max ) {
			if ( isOnePointZero( n ) ) {
				n = '100%';
			}

			var processPercent = isPercentage( n );
			n                  = mathMin( max, mathMax( 0, parseFloat( n ) ) );

			// Automatically convert percentage into number
			if ( processPercent ) {
				n = parseInt( n * max, 10 ) / 100;
			}

			// Handle floating point rounding errors
			if ( (math.abs( n - max ) < 0.000001) ) {
				return 1;
			}

			// Convert into [0, 1] range if it isn't already
			return (n % max) / parseFloat( max );
		}

		// Force a number between 0 and 1
		function clamp01( val ) {
			return mathMin( 1, mathMax( 0, val ) );
		}

		// Parse a base-16 hex value into a base-10 integer
		function parseIntFromHex( val ) {
			return parseInt( val, 16 );
		}

		// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
		// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
		function isOnePointZero( n ) {
			return typeof n == 'string' && n.indexOf( '.' ) != - 1 && parseFloat( n ) === 1;
		}

		// Check to see if string passed in is a percentage
		function isPercentage( n ) {
			return typeof n === 'string' && n.indexOf( '%' ) != - 1;
		}

		// Force a hex value to have 2 characters
		function pad2( c ) {
			return c.length == 1 ? '0' + c : '' + c;
		}

		// Replace a decimal with it's percentage value
		function convertToPercentage( n ) {
			if ( n <= 1 ) {
				n = (n * 100) + '%';
			}

			return n;
		}

		// Converts a decimal to a hex value
		function convertDecimalToHex( d ) {
			return Math.round( parseFloat( d ) * 255 ).toString( 16 );
		}

		// Converts a hex value to a decimal
		function convertHexToDecimal( h ) {
			return (parseIntFromHex( h ) / 255);
		}

		var matchers = (function() {

			// <http://www.w3.org/TR/css3-values/#integers>
			var CSS_INTEGER = '[-\\+]?\\d+%?';

			// <http://www.w3.org/TR/css3-values/#number-value>
			var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';

			// Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
			var CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')';

			// Actual matching.
			// Parentheses and commas are optional, but not required.
			// Whitespace can take the place of commas or opening paren
			var PERMISSIVE_MATCH3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';
			var PERMISSIVE_MATCH4 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';

			return {
				rgb: new RegExp( 'rgb' + PERMISSIVE_MATCH3 ),
				rgba: new RegExp( 'rgba' + PERMISSIVE_MATCH4 ),
				hsl: new RegExp( 'hsl' + PERMISSIVE_MATCH3 ),
				hsla: new RegExp( 'hsla' + PERMISSIVE_MATCH4 ),
				hsv: new RegExp( 'hsv' + PERMISSIVE_MATCH3 ),
				hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
				hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
				hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
			};
		})();

		// `stringInputToObject`
		// Permissive string parsing.  Take in a number of formats, and output an object
		// based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
		function stringInputToObject( color ) {

			color     = color.replace( trimLeft, '' ).replace( trimRight, '' ).toLowerCase();
			var named = false;
			if ( names[color] ) {
				color = names[color];
				named = true;
			} else if ( color == 'transparent' ) {
				return {r: 0, g: 0, b: 0, a: 0, format: 'name'};
			}

			// Try to match string input using regular expressions.
			// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
			// Just return an object and let the conversion functions handle that.
			// This way the result will be the same whether the tinycolor is initialized with string or object.
			var match;
			if ( (match = matchers.rgb.exec( color )) ) {
				return {r: match[1], g: match[2], b: match[3]};
			}
			if ( (match = matchers.rgba.exec( color )) ) {
				return {r: match[1], g: match[2], b: match[3], a: match[4]};
			}
			if ( (match = matchers.hsl.exec( color )) ) {
				return {h: match[1], s: match[2], l: match[3]};
			}
			if ( (match = matchers.hsla.exec( color )) ) {
				return {h: match[1], s: match[2], l: match[3], a: match[4]};
			}
			if ( (match = matchers.hsv.exec( color )) ) {
				return {h: match[1], s: match[2], v: match[3]};
			}
			if ( (match = matchers.hex8.exec( color )) ) {
				return {
					a: convertHexToDecimal( match[1] ),
					r: parseIntFromHex( match[2] ),
					g: parseIntFromHex( match[3] ),
					b: parseIntFromHex( match[4] ),
					format: named ? 'name' : 'hex8'
				};
			}
			if ( (match = matchers.hex6.exec( color )) ) {
				return {
					r: parseIntFromHex( match[1] ),
					g: parseIntFromHex( match[2] ),
					b: parseIntFromHex( match[3] ),
					format: named ? 'name' : 'hex'
				};
			}
			if ( (match = matchers.hex3.exec( color )) ) {
				return {
					r: parseIntFromHex( match[1] + '' + match[1] ),
					g: parseIntFromHex( match[2] + '' + match[2] ),
					b: parseIntFromHex( match[3] + '' + match[3] ),
					format: named ? 'name' : 'hex'
				};
			}

			return false;
		}

		// Expose tinycolor to window, does not need to run in non-browser context.
		window.tinycolor = tinycolor;

	})();

	$( function() {
		if ( $.fn.spectrum.load ) {
			$.fn.spectrum.processNativeColorInputs();
		}
	} );

})( window, jQuery );

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		
			<header class="page-header">
				<h1 class="page-title">Mes: <span>septiembre 2016</span></h1>			</header><!-- .page-header -->

			
<article id="post-52" class="post-52 post type-post status-publish format-standard hentry category-decoracion category-fin-de-semana tag-decoracion tag-materiales-economicos">
	<header class="entry-header">
		
		<h2 class="entry-title"><a href="http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/" rel="bookmark">4 Ideas sencillas para hacer tu propio farol patrio</a></h2>	</header><!-- .entry-header -->

	
	
	<div class="entry-content">
		<p>Cuando llega esta época del año, es común ver mamás y papás corriendo para hacer los tradicionales faroles que llevarán sus hijos el 14 de setiembre a la noche de los faroles, no es secreto que a muchos no se nos dá muy bien esto de las manualidades, por lo que hemos venido al rescate!</p>
<p>Te dejamos una recopilación de algunas páginas donde encontrar ideas muy buenas y económicas para hacer de tu farol, un éxito.</p>
<figure id="attachment_53" aria-describedby="caption-attachment-53" style="width: 840px" class="wp-caption alignnone"><img fetchpriority="high" decoding="async" class="wp-image-53 size-large" src="http://materialessanmiguel.com/blog/wp-content/uploads/2016/09/maxresdefault-1-1024x576.jpg" alt="Materiales San Miguel" width="840" height="473" srcset="http://materialessanmiguel.com/blog/wp-content/uploads/2016/09/maxresdefault-1-1024x576.jpg 1024w, http://materialessanmiguel.com/blog/wp-content/uploads/2016/09/maxresdefault-1-300x169.jpg 300w, http://materialessanmiguel.com/blog/wp-content/uploads/2016/09/maxresdefault-1-768x432.jpg 768w, http://materialessanmiguel.com/blog/wp-content/uploads/2016/09/maxresdefault-1-1200x675.jpg 1200w, http://materialessanmiguel.com/blog/wp-content/uploads/2016/09/maxresdefault-1.jpg 1280w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px" /><figcaption id="caption-attachment-53" class="wp-caption-text">Un lindo farol patrio puede hacerse con un sin fin de materiales económicos y al alcance de todos.</figcaption></figure>
<ol>
<li><strong>Farol con papel encerado y chispas de crayones. </strong>La Nación (@nacion) <a href="https://twitter.com/nacion/status/510915987324284928">September 13, 2014</a></li>
</ol>
<p><a href="http://t.co/w7QGly3o4g"><strong>pic.twitter.com/w7QGly3o4g</strong></a></p>
<ol start="2">
<li><strong>Farol hecho con cucháras de plástico. </strong>Perfecto si lo pintás con colores azul y rojo también.</li>
</ol>
<p><a href="https://youtu.be/QTFE2fMyFOk">https://youtu.be/QTFE2fMyFOk</a></p>
<ol start="3">
<li><strong>Farol hecho de cartones de huevos</strong></li>
</ol>
<p><strong> </strong><a href="https://youtu.be/hNh3uQarncY">https://youtu.be/hNh3uQarncY</a></p>
<ol start="4">
<li><strong>Farol para cuando no tenés tiempo de hacer un farol</strong></li>
</ol>
<p><a href="https://youtu.be/6Oq7oHZAu4E">https://youtu.be/6Oq7oHZAu4E</a></p>
<p>Si lo tuyo no es las manualidades ni la arquitectura, esta pequeñita guía estamos seguros que te salvará de cualquier predicamento de última hora. Lo importante es no dejar de celebrar un año más de independencia de nuestro querida Costa Rica.</p>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/d773cb11b19901db6c210503182a083d368cba0e8a43968a94825c2c3faeb6a2?s=49&#038;d=identicon&#038;r=g' srcset='https://secure.gravatar.com/avatar/d773cb11b19901db6c210503182a083d368cba0e8a43968a94825c2c3faeb6a2?s=98&#038;d=identicon&#038;r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/><span class="screen-reader-text">Autor </span> <a class="url fn n" href="http://materialessanmiguel.com/blog/author/will-sancho/">Will Sancho</a></span></span><span class="posted-on"><span class="screen-reader-text">Publicado el </span><a href="http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/" rel="bookmark"><time class="entry-date published updated" datetime="2016-09-07T18:29:39+00:00">7 septiembre, 2016</time></a></span><span class="cat-links"><span class="screen-reader-text">Categorías </span><a href="http://materialessanmiguel.com/blog/category/decoracion/" rel="category tag">Decoración</a>, <a href="http://materialessanmiguel.com/blog/category/fin-de-semana/" rel="category tag">Fin de semana</a></span><span class="tags-links"><span class="screen-reader-text">Etiquetas </span><a href="http://materialessanmiguel.com/blog/tag/decoracion/" rel="tag">decoracion</a>, <a href="http://materialessanmiguel.com/blog/tag/materiales-economicos/" rel="tag">materiales económicos</a></span><span class="comments-link"><a href="http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/#respond">Deja un comentario<span class="screen-reader-text"> en 4 Ideas sencillas para hacer tu propio farol patrio</span></a></span>			</footer><!-- .entry-footer -->
</article><!-- #post-## -->

		</main><!-- .site-main -->
	</div><!-- .content-area -->


	<aside id="secondary" class="sidebar widget-area" role="complementary">
		<section id="search-2" class="widget widget_search"></section>
		<section id="recent-posts-2" class="widget widget_recent_entries">
		<h2 class="widget-title">Entradas recientes</h2>
		<ul>
											<li>
					<a href="http://materialessanmiguel.com/blog/cemento-malo-cemento-bueno-como-saberlo/">Cemento malo, cemento bueno. ¿Cómo saberlo?</a>
									</li>
											<li>
					<a href="http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/">4 Ideas sencillas para hacer tu propio farol patrio</a>
									</li>
											<li>
					<a href="http://materialessanmiguel.com/blog/luces-led-vs-tradicionales/">Luces Led vs Bombillo tradicional</a>
									</li>
											<li>
					<a href="http://materialessanmiguel.com/blog/4-formas-rapidas-de-destaquear-la-caneria-de-la-pila/">4 formás rápidas de destaquear la cañería de la pila.</a>
									</li>
											<li>
					<a href="http://materialessanmiguel.com/blog/como-salvar-nuestros-techos-de-los-aguaceros-guia-practica/">Como salvar nuestros techos de los aguaceros..¡guía práctica!</a>
									</li>
					</ul>

		</section><section id="recent-comments-2" class="widget widget_recent_comments"><h2 class="widget-title">Comentarios recientes</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href="http://materialessanmiguel.com/blog/luces-led-vs-tradicionales/" class="url" rel="ugc">Luces Led vs Tradicionales &#8211; Materiales San Miguel</a></span> en <a href="http://materialessanmiguel.com/blog/porcelanato-vrs-ceramica-cual-es-mejor-para-mi/#comment-6">Porcelanato vrs Cerámica ¿cuál es mejor para mi?</a></li><li class="recentcomments"><span class="comment-author-link"><a href="http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/" class="url" rel="ugc">5 cosas que debes dominar antes de construir tu casa soñada &#8211; Materiales San Miguel</a></span> en <a href="http://materialessanmiguel.com/blog/7-permisos-indispensables-para-construir-en-costa-rica/#comment-5">7 Permisos indispensables para construir en Costa Rica</a></li><li class="recentcomments"><span class="comment-author-link"><a href="http://materialessanmiguel.com/blog/7-permisos-indispensables-para-construir-en-costa-rica/" class="url" rel="ugc">7 Permisos indispensables para construir en Costa Rica &#8211; Materiales San Miguel</a></span> en <a href="http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/#comment-4">5 cosas que debes dominar antes de construir tu casa soñada</a></li><li class="recentcomments"><span class="comment-author-link"><a href="http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/" class="url" rel="ugc">5 cosas que debes dominar antes de construir tu casa soñada &#8211; Materiales San Miguel</a></span> en <a href="http://materialessanmiguel.com/blog/13-cosas-que-debes-saber-antes-de-comprar-un-lote/#comment-3">13 cosas que debes saber antes de comprar un lote</a></li><li class="recentcomments"><span class="comment-author-link"><a href="http://materialessanmiguel.com/blog/13-cosas-que-debes-saber-antes-de-comprar-un-lote/" class="url" rel="ugc">13 cosas que debes saber antes de comprar un lote &#8211; Materiales San Miguel</a></span> en <a href="http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/#comment-2">5 cosas que debes dominar antes de construir tu casa soñada</a></li></ul></section><section id="archives-2" class="widget widget_archive"><h2 class="widget-title">Archivos</h2>
			<ul>
					<li><a href='http://materialessanmiguel.com/blog/2016/10/'>octubre 2016</a></li>
	<li><a href='http://materialessanmiguel.com/blog/2016/09/' aria-current="page">septiembre 2016</a></li>
	<li><a href='http://materialessanmiguel.com/blog/2016/08/'>agosto 2016</a></li>
	<li><a href='http://materialessanmiguel.com/blog/2016/07/'>julio 2016</a></li>
	<li><a href='http://materialessanmiguel.com/blog/2016/06/'>junio 2016</a></li>
			</ul>

			</section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Categorías</h2>
			<ul>
					<li class="cat-item cat-item-2"><a href="http://materialessanmiguel.com/blog/category/construccion/">Construcción</a>
</li>
	<li class="cat-item cat-item-20"><a href="http://materialessanmiguel.com/blog/category/cuidado-y-proteccion/">Cuidado y Protección</a>
</li>
	<li class="cat-item cat-item-8"><a href="http://materialessanmiguel.com/blog/category/decoracion/">Decoración</a>
</li>
	<li class="cat-item cat-item-10"><a href="http://materialessanmiguel.com/blog/category/electricidad/">Electricidad</a>
</li>
	<li class="cat-item cat-item-14"><a href="http://materialessanmiguel.com/blog/category/fin-de-semana/">Fin de semana</a>
</li>
	<li class="cat-item cat-item-1"><a href="http://materialessanmiguel.com/blog/category/sin-categoria/">Sin categoría</a>
</li>
	<li class="cat-item cat-item-11"><a href="http://materialessanmiguel.com/blog/category/sistema-de-aguas/">Sistema de aguas</a>
</li>
			</ul>

			</section><section id="meta-2" class="widget widget_meta"><h2 class="widget-title">Meta</h2>
		<ul>
						<li><a href="http://materialessanmiguel.com/blog/wp-login.php">Acceder</a></li>
			<li><a href="http://materialessanmiguel.com/blog/feed/">Feed de entradas</a></li>
			<li><a href="http://materialessanmiguel.com/blog/comments/feed/">Feed de comentarios</a></li>

			<li><a href="https://es.wordpress.org/">WordPress.org</a></li>
		</ul>

		</section>	</aside><!-- .sidebar .widget-area -->

		</div><!-- .site-content -->

		<footer id="footer">

            <div class="container">

                <div class="row-fluid">



                    <div class="span5">

                        <div class="title_footer">

                            <h1>La mejor <span>calidad, <br>garantía y precios</span>

                            <br>en materiales para construcción.</h1>

							<br>

							<p>Solo vendemos productos de calidad:</p>

							<br>

							<ul class="footer-logos">

								<li><img src="/img/amanco.png"></li>

								<li><img src="/img/metalco.png"></li><br>

								<li><img src="/img/cemex.png"></li>
								
								<li><img src="/img/logo-lanco2.png"></li>

							</ul>

                        </div>

                    </div>



                    <div class="span7">

                        <div class="row-fluid">    

								<!-- Follow Us-->

								<div class="span6">

									<form id="cotiza"> 	

										<h3>COTIZACIÓN EN LÍNEA</h3>

										<div class="input-prepend">

											<label>Nombre (obligatorio)</label>                      

											<input id="nombre" type="text" required="">

										</div>

										<div class="input-prepend">

											<label>Correo (obligatorio)</label>                      

											<input id="correo" type="email" required="">

										</div>

										<div class="input-prepend">

											<label>Teléfono (obligatorio)</label>                      

											<input id="telefono" type="text" required="">

										</div>

										<div class="input-prepend">

											<label>Mensaje (obligatorio)</label>                      

											<textarea id="mensaje" required="" class="textarea"></textarea>

										</div>		

										<div>

											  <input id="send" type="submit" value="Enviar" class="button">

											  <i id="msj" style="display:none;">Enviando...</i>

										</div>	

										<div id="message"></div>										

									</form>									

								</div>

								<!-- End Follow Us-->

                            

                            <!-- Recent links-->

                            <div class="span6 theContact">

                               <h3>CONTÁCTENOS</h3>

                               <ul class="contact_footer">

                                    <li>

                                        <i class="icon-none mail"></i> 

										<a href="mailto:ventas@materialessanmiguel.com">ventas@materialessanmiguel.com</a><br>

										<i class="icon-none hidden"></i> 

										<a href="mailto:info@materialessanmiguel.com">info@materialessanmiguel.com</a><br>

                                        <i class="icon-none phone"></i> <a href="#">2265-5050</a>
                                    </li>


                                    <li class="location">

                                        <i class="icon-none location-map"></i> 

                                        San Juan Abajo<br>

                                        <i class="icon-none hidden"></i>

                                        Santa Barbara, Costa Rica

                                        <i class="icon-none hidden"></i>

                                    </li>                                   
                                </ul>

                            </div>

                            <!-- Contact Us-->

                        </div>  

                    </div>



                </div>

            </div>



            <!-- footer-->

            <div class="coopring">

                <div class="container">

                    <p>© 2015 Materiales San Miguel. Todos los derechos reservados.</p>

                </div>                

            </div>      

            <!-- End footer-->



        </footer><!-- .site-footer -->




	</div><!-- .site-inner -->
</div><!-- .site -->

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/blog/*"},{"not":{"href_matches":["/blog/wp-*.php","/blog/wp-admin/*","/blog/wp-content/uploads/*","/blog/wp-content/*","/blog/wp-content/plugins/*","/blog/wp-content/themes/twentysixteen/*","/blog/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>



        <!--Nav-->

        <script type="text/javascript" src="/js/nav/tinynav.js"></script> 

        <script type="text/javascript" src="/js/nav/superfish.js"></script>                                             

        <!--Totop-->

        <script type="text/javascript" src="/js/totop/jquery.ui.totop.js" ></script>  

        <!--Slide-->

        <script type="text/javascript" src="/js/slide/responsiveslides.js" ></script>              

        <!--flexsilider-->

        <script type="text/javascript" src="/js/carousel/jquery.flexslider.js"></script>            

        <!--Gallery Grid--> 

        <script type="text/javascript" src="/js/gallery/modernizr.custom.26633.js"></script>

        <script type="text/javascript" src="/js/gallery/jquery.gridrotator.js"></script>                                      

        <!-- Bootstrap.js-->

        <script type="text/javascript" src="/js/bootstrap/bootstrap.js"></script>

		<!--Slider

		<script src="js/ninjaVideoPlugin.js" type="text/javascript"></script>

		<script src="js/ninja-slider.js" type="text/javascript"></script>-->

        <!--fUNCTIONS-->

        <script type="text/javascript" src="/js/jquery-func.js"></script>




</body>
</html>