text: /**
   * selectFx.js v1.0.0
   * http://www.codrops.com
   *
   * Licensed under the MIT license.
   * http://www.opensource.org/licenses/mit-license.php
   * 
   * Copyright 2014, Codrops
   * http://www.codrops.com
   */
  ;( function( window ) {
  	
  	'use strict';
  
  	/**
  	 * based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
  	 */
  	function hasParent( e, p ) {
  		if (!e) return false;
  		var el = e.target||e.srcElement||e||false;
  		while (el && el != p) {
  			el = el.parentNode||false;
  		}
  		return (el!==false);
  	};
  	
  	/**
  	 * extend obj function
  	 */
  	function extend( a, b ) {
  		for( var key in b ) { 
  			if( b.hasOwnProperty( key ) ) {
  				a[key] = b[key];
  			}
  		}
  		return a;
  	}
  
  	/**
  	 * SelectFx function
  	 */
  	function SelectFx( el, options ) {	
  		this.el = el;
  		this.options = extend( {}, this.options );
  		extend( this.options, options );
  		this._init();
  	}
  
  	/**
  	 * SelectFx options
  	 */
  	SelectFx.prototype.options = {
  		// if true all the links will open in a new tab.
  		// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select element
  		newTab : true,
  		// when opening the select element, the default placeholder (if any) is shown
  		stickyPlaceholder : true,
  		// callback when changing the value
  		onChange : function( val ) { return false; }
  	}
  
  	/**
  	 * init function
  	 * initialize and cache some vars
  	 */
  	SelectFx.prototype._init = function() {
  		// check if we are using a placeholder for the native select box
  		// we assume the placeholder is disabled and selected by default
  		var selectedOpt = this.el.querySelector( 'option[selected]' );
  		this.hasDefaultPlaceholder = selectedOpt && selectedOpt.disabled;
  
  		// get selected option (either the first option with attr selected or just the first option)
  		this.selectedOpt = selectedOpt || this.el.querySelector( 'option' );
  
  		// create structure
  		this._createSelectEl();
  
  		// all options
  		this.selOpts = [].slice.call( this.selEl.querySelectorAll( 'li[data-option]' ) );
  		
  		// total options
  		this.selOptsCount = this.selOpts.length;
  		
  		// current index
  		this.current = this.selOpts.indexOf( this.selEl.querySelector( 'li.cs-selected' ) ) || -1;
  		
  		// placeholder elem
  		this.selPlaceholder = this.selEl.querySelector( 'span.cs-placeholder' );
  
  		// init events
  		this._initEvents();
  	}
  
  	/**
  	 * creates the structure for the select element
  	 */
  	SelectFx.prototype._createSelectEl = function() {
  		var self = this, options = '', createOptionHTML = function(el) {
  			var optclass = '', classes = '', link = '';
  
  			if( el.selectedOpt && !this.foundSelected && !this.hasDefaultPlaceholder ) {
  				classes += 'cs-selected ';
  				this.foundSelected = true;
  			}
  			// extra classes
  			if( el.getAttribute( 'data-class' ) ) {
  				classes += el.getAttribute( 'data-class' );
  			}
  			// link options
  			if( el.getAttribute( 'data-link' ) ) {
  				link = 'data-link=' + el.getAttribute( 'data-link' );
  			}
  
  			if( classes !== '' ) {
  				optclass = 'class="' + classes + '" ';
  			}
  
  			return '<li ' + optclass + link + ' data-option data-value="' + el.value + '"><span>' + el.textContent + '</span></li>';
  		};
  
  		[].slice.call( this.el.children ).forEach( function(el) {
  			if( el.disabled ) { return; }
  
  			var tag = el.tagName.toLowerCase();
  
  			if( tag === 'option' ) {
  				options += createOptionHTML(el);
  			}
  			else if( tag === 'optgroup' ) {
  				options += '<li class="cs-optgroup"><span>' + el.label + '</span><ul>';
  				[].slice.call( el.children ).forEach( function(opt) {
  					options += createOptionHTML(opt);
  				} )
  				options += '</ul></li>';
  			}
  		} );
  
  		var opts_el = '<div class="cs-options"><ul>' + options + '</ul></div>';
  		this.selEl = document.createElement( 'div' );
  		this.selEl.className = this.el.className;
  		this.selEl.tabIndex = this.el.tabIndex;
  		this.selEl.innerHTML = '<span class="cs-placeholder">' + this.selectedOpt.textContent + '</span>' + opts_el;
  		this.el.parentNode.appendChild( this.selEl );
  		this.selEl.appendChild( this.el );
  	}
  
  	/**
  	 * initialize the events
  	 */
  	SelectFx.prototype._initEvents = function() {
  		var self = this;
  
  		// open/close select
  		this.selPlaceholder.addEventListener( 'click', function() {
  			self._toggleSelect();
  		} );
  
  		// clicking the options
  		this.selOpts.forEach( function(opt, idx) {
  			opt.addEventListener( 'click', function() {
  				self.current = idx;
  				self._changeOption();
  				// close select elem
  				self._toggleSelect();
  			} );
  		} );
  
  		// close the select element if the target it´s not the select element or one of its descendants..
  		document.addEventListener( 'click', function(ev) {
  			var target = ev.target;
  			if( self._isOpen() && target !== self.selEl && !hasParent( target, self.selEl ) ) {
  				self._toggleSelect();
  			}
  		} );
  
  		// keyboard navigation events
  		this.selEl.addEventListener( 'keydown', function( ev ) {
  			var keyCode = ev.keyCode || ev.which;
  
  			switch (keyCode) {
  				// up key
  				case 38:
  					ev.preventDefault();
  					self._navigateOpts('prev');
  					break;
  				// down key
  				case 40:
  					ev.preventDefault();
  					self._navigateOpts('next');
  					break;
  				// space key
  				case 32:
  					ev.preventDefault();
  					if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
  						self._changeOption();
  					}
  					self._toggleSelect();
  					break;
  				// enter key
  				case 13:
  					ev.stopPropagation();
  					ev.preventDefault();
  					if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
  						self._changeOption();
  						self._toggleSelect();
  					}
  					break;
  				// esc key
  				case 27:
  					ev.preventDefault();
  					if( self._isOpen() ) {
  						self._toggleSelect();
  					}
  					break;
  			}
  		} );
  	}
  
  	/**
  	 * navigate with up/down keys
  	 */
  	SelectFx.prototype._navigateOpts = function(dir) {
  		if( !this._isOpen() ) {
  			this._toggleSelect();
  		}
  
  		var tmpcurrent = typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;
  		
  		if( dir === 'prev' && tmpcurrent > 0 || dir === 'next' && tmpcurrent < this.selOptsCount - 1 ) {
  			// save pre selected current - if we click on option, or press enter, or press space this is going to be the index of the current option
  			this.preSelCurrent = dir === 'next' ? tmpcurrent + 1 : tmpcurrent - 1;
  			// remove focus class if any..
  			this._removeFocus();
  			// add class focus - track which option we are navigating
  			classie.add( this.selOpts[this.preSelCurrent], 'cs-focus' );
  		}
  	}
  
  	/**
  	 * open/close select
  	 * when opened show the default placeholder if any
  	 */
  	SelectFx.prototype._toggleSelect = function() {
  		// remove focus class if any..
  		this._removeFocus();
  		
  		if( this._isOpen() ) {
  			if( this.current !== -1 ) {
  				// update placeholder text
  				this.selPlaceholder.textContent = this.selOpts[ this.current ].textContent;
  			}
  			classie.remove( this.selEl, 'cs-active' );
  		}
  		else {
  			if( this.hasDefaultPlaceholder && this.options.stickyPlaceholder ) {
  				// everytime we open we wanna see the default placeholder text
  				this.selPlaceholder.textContent = this.selectedOpt.textContent;
  			}
  			classie.add( this.selEl, 'cs-active' );
  		}
  	}
  
  	/**
  	 * change option - the new value is set
  	 */
  	SelectFx.prototype._changeOption = function() {
  		// if pre selected current (if we navigate with the keyboard)...
  		if( typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ) {
  			this.current = this.preSelCurrent;
  			this.preSelCurrent = -1;
  		}
  
  		// current option
  		var opt = this.selOpts[ this.current ];
  
  		// update current selected value
  		this.selPlaceholder.textContent = opt.textContent;
  		
  		// change native select element´s value
  		this.el.value = opt.getAttribute( 'data-value' );
  
  		// remove class cs-selected from old selected option and add it to current selected option
  		var oldOpt = this.selEl.querySelector( 'li.cs-selected' );
  		if( oldOpt ) {
  			classie.remove( oldOpt, 'cs-selected' );
  		}
  		classie.add( opt, 'cs-selected' );
  
  		// if there´s a link defined
  		if( opt.getAttribute( 'data-link' ) ) {
  			// open in new tab?
  			if( this.options.newTab ) {
  				window.open( opt.getAttribute( 'data-link' ), '_blank' );
  			}
  			else {
  				window.location = opt.getAttribute( 'data-link' );
  			}
  		}
  
  		// callback
  		this.options.onChange( this.el.value );
  	}
  
  	/**
  	 * returns true if select element is opened
  	 */
  	SelectFx.prototype._isOpen = function(opt) {
  		return classie.has( this.selEl, 'cs-active' );
  	}
  
  	/**
  	 * removes the focus class from the option
  	 */
  	SelectFx.prototype._removeFocus = function(opt) {
  		var focusEl = this.selEl.querySelector( 'li.cs-focus' )
  		if( focusEl ) {
  			classie.remove( focusEl, 'cs-focus' );
  		}
  	}
  
  	/**
  	 * add to global namespace
  	 */
  	window.SelectFx = SelectFx;
  
  } )( window );