diff --git a/css/theme-minimal/jcf.css b/css/theme-minimal/jcf.css
index 3105d53..a3f57e8 100755
--- a/css/theme-minimal/jcf.css
+++ b/css/theme-minimal/jcf.css
@@ -1,383 +1,383 @@
-/* radio */
-.jcf-radio {
-	vertical-align: middle;
-	display: inline-block;
-	position: relative;
-	overflow: hidden;
-	cursor: default;
-	background: #fff;
-	border: 1px solid #777;
-	border-radius: 9px;
-	margin: 0 3px 0 0;
-	height: 16px;
-	width: 16px;
-}
-.jcf-radio span{
-	display:none;
-	position:absolute;
-	top:3px;
-	left:3px;
-	right:3px;
-	bottom:3px;
-	background:#777;
-	border-radius:100%;
-}
-.jcf-radio input[type="radio"] {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	border: 0;
-	margin: 0;
-	left: 0;
-	top: 0;
-}
-.jcf-radio.jcf-checked span {display:block;}
-
-/* checkbox */
-.jcf-checkbox {
-	vertical-align: middle;
-	display: inline-block;
-	position: relative;
-	overflow: hidden;
-	cursor: default;
-	background: #fff;
-	border: 1px solid #777;
-	margin: 0 3px 0 0;
-	height: 16px;
-	width: 16px;
-}
-.jcf-checkbox span{
-	position:absolute;
-	display:none;
-	height:4px;
-	width:8px;
-	top:50%;
-	left:50%;
-	margin:-7px 0 0 -6px;
-	border:3px solid #777;
-	border-width:0 0 3px 3px;
-	-moz-transform: rotate(-45deg);
-	-ms-transform: rotate(-45deg);
-	-webkit-transform: rotate(-45deg);
-	transform: rotate(-45deg);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
-}
-:root .jcf-checkbox span {margin:-4px 0 0 -5px;}
-.jcf-checkbox input[type="checkbox"] {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	border: 0;
-	margin: 0;
-	left: 0;
-	top: 0;
-}
-.jcf-checkbox.jcf-checked span{display:block;}
-
-/* button */
-.jcf-button {
-	display: inline-block;
-	vertical-align: top;
-	position: relative;
-	overflow: hidden;
-	border: 1px solid #777;
-	background: #fff;
-	margin: 0 10px 10px 0;
-	padding: 5px 10px;
-}
-.jcf-button .jcf-real-element {
-	position: absolute;
-	min-height: 100%;
-	min-width: 100%;
-	outline: none;
-	opacity: 0;
-	padding: 0;
-	margin: 0;
-	border: 0;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	top: 0;
-}
-
-/* file */
-.jcf-file {
-	display: inline-block;
-	white-space: nowrap;
-	position: relative;
-	overflow: hidden;
-	background: #fff;
-}
-.jcf-file .jcf-real-element {
-	position: absolute;
-	font-size: 200px;
-	height: 200px;
-	margin: 0;
-	right: 0;
-	top: 0;
-}
-.jcf-file .jcf-fake-input {
-	display: inline-block;
-	text-overflow:ellipsis;
-	white-space: nowrap;
-	vertical-align: top;
-	overflow: hidden;
-	border: 1px solid #777;
-	padding: 0 8px;
-	font-size: 13px;
-	line-height: 28px;
-	height: 28px;
-	width: 125px;
-}
-.jcf-file .jcf-upload-button {
-	display: inline-block;
-	vertical-align: top;
-	white-space: nowrap;
-	overflow: hidden;
-	border: 1px solid #777;
-	margin: 0 0 0 -1px;
-	padding: 0 10px;
-	line-height: 28px;
-	height: 28px;
-}
-
-/* scrollbars */
-.jcf-scrollable-wrapper {
-	box-sizing: content-box;
-	position: relative;
-}
-.jcf-scrollbar-vertical {
-	position: absolute;
-	cursor: default;
-	background: #e3e3e3;
-	width: 14px;
-	bottom: 0;
-	right: 0;
-	top: 0;
-}
-.jcf-scrollbar-vertical .jcf-scrollbar-dec,
-.jcf-scrollbar-vertical .jcf-scrollbar-inc {
-	background: #bbb;
-	height: 14px;
-	width: 14px;
-	left: 0;
-	top: 0;
-}
-.jcf-scrollbar-vertical .jcf-scrollbar-inc {
-	top: auto;
-	bottom: 0;
-}
-.jcf-scrollbar-vertical .jcf-scrollbar-handle {
-	background: #888;
-	height: 1px;
-	width: 14px;
-}
-.jcf-scrollbar-horizontal {
-	position: absolute;
-	background: #e3e3e3;
-	right: auto;
-	top: auto;
-	left: 0;
-	bottom: 0;
-	width: 1px;
-	height: 14px;
-}
-.jcf-scrollbar-horizontal .jcf-scrollbar-dec,
-.jcf-scrollbar-horizontal .jcf-scrollbar-inc {
-	display: inline-block;
-	vertical-align: top;
-	overflow: hidden;
-	background: #bbb;
-	height: 14px;
-	width: 14px;
-}
-.jcf-scrollbar-horizontal .jcf-scrollbar-inc {
-	left: auto;
-	right: 0;
-}
-.jcf-scrollbar-horizontal .jcf-scrollbar-slider {
-	display: inline-block;
-	position: relative;
-	height: 14px;
-}
-.jcf-scrollbar-horizontal .jcf-scrollbar-handle {
-	position: absolute;
-	background: #888;
-	height: 14px;
-}
-.jcf-scrollbar.jcf-inactive .jcf-scrollbar-handle {
-	visibility: hidden;
-}
-.jcf-scrollbar.jcf-inactive .jcf-scrollbar-dec, 
-.jcf-scrollbar.jcf-inactive .jcf-scrollbar-inc {
-	background: #e3e3e3;
-}
-
-/* select */
-.jcf-select {
-	display: inline-block;
-	vertical-align: top;
-	position: relative;
-	border: 1px solid #777;
-	background: #fff;
-	margin: 0 0 12px;
-	min-width: 150px;
-	height: 26px;
-}
-.jcf-select select {
-	z-index: 1;
-	left: 0;
-	top: 0;
-}
-.jcf-select .jcf-select-text {
-	text-overflow:ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	cursor: default;
-	display: block;
-	font-size: 13px;
-	line-height: 26px;
-	margin: 0 35px 0 8px;
-}
-.jcf-select .jcf-select-opener {
-	position: absolute;
-	text-align: center;
-	background: #aaa;
-	width: 26px;
-	bottom: 0;
-	right: 0;
-	top: 0;
-}
-body > .jcf-select-drop {
-	position: absolute;
-	margin: -1px 0 0;
-	z-index: 9999;
-}
-body > .jcf-select-drop.jcf-drop-flipped {
-	margin: 1px 0 0;
-}
-.jcf-select .jcf-select-drop {
-	position: absolute;
-	margin-top: 0px;
-	z-index: 9999;
-	top: 100%;
-	left: -1px;
-	right: -1px;
-}
-.jcf-select .jcf-drop-flipped {
-	bottom: 100%;
-	top: auto;
-}
-.jcf-select-drop .jcf-select-drop-content {
-	border: 1px solid #f00;
-}
-
-/* multiple select styles */
-.jcf-list-box {
-	overflow: hidden;
-	display: inline-block;
-	border: 1px solid #b8c3c9;
-	min-width: 200px;
-	margin: 0 15px;
-}
-/* select options styles */
-.jcf-list {
-	display: inline-block;
-	vertical-align: top;
-	position: relative;
-	background: #fff;
-	line-height: 14px;
-	font-size: 12px;
-	width: 100%;
-}
-.jcf-list .jcf-list-content {
-	vertical-align: top;
-	display: inline-block;
-	overflow: auto;
-	width: 100%;
-}
-.jcf-list ul {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.jcf-list ul li {
-	overflow: hidden;
-	display: block;
-}
-.jcf-list .jcf-overflow {
-	overflow: auto;
-}
-.jcf-list .jcf-option {
-	white-space: nowrap;
-	overflow: hidden;
-	cursor: default;
-	display: block;
-	padding: 5px 9px;
-	color: #656565;
-	height: 1%;
-}
-.jcf-list .jcf-disabled {
-	background: #fff !important;
-	color: #aaa !important;
-}
-.jcf-select-drop .jcf-hover,
-.jcf-list-box .jcf-selected {
-	background: #e6e6e6;
-	color: #000;
-}
-.jcf-list .jcf-optgroup-caption {
-	white-space: nowrap;
-	font-weight: bold;
-	display: block;
-	padding: 5px 9px;
-	cursor: default;
-	color: #000;
-}
-.jcf-list .jcf-optgroup .jcf-option {
-	padding-left: 30px;
-}
-
-/* other styles */
-.jcf-textarea {
-	border: 1px solid #b8c3c9;
-	box-sizing: content-box;
-	display: inline-block;
-	position: relative;
-}
-.jcf-textarea .jcf-scrollbar-horizontal {
-	display: none;
-	height: 0;
-}
-.jcf-textarea textarea {
-	padding: 8px 10px;
-	border: none;
-	margin: 0;
-}
-.jcf-textarea .jcf-resize {
-	position: absolute;
-	text-align: center;
-	cursor: se-resize;
-	background: #e3e3e3;
-	font-weight: bold;
-	line-height: 15px;
-	text-indent: 1px;
-	font-size: 12px;
-	height: 15px;
-	width: 14px;
-	bottom: 0;
-	right: 0;
-}
-.jcf-textarea .jcf-resize:before {
-	border: 1px solid #000;
-	border-width: 0 1px 1px 0;
-	display: block;
-	margin: 4px 0 0 3px;
-	width: 6px;
-	height: 6px;
-	content: '';
-}
-
-/* common styles */
-.jcf-disabled {background: #ddd !important;}
+/* radio */
+.jcf-radio {
+	vertical-align: middle;
+	display: inline-block;
+	position: relative;
+	overflow: hidden;
+	cursor: default;
+	background: #fff;
+	border: 1px solid #777;
+	border-radius: 9px;
+	margin: 0 3px 0 0;
+	height: 16px;
+	width: 16px;
+}
+.jcf-radio span{
+	display:none;
+	position:absolute;
+	top:3px;
+	left:3px;
+	right:3px;
+	bottom:3px;
+	background:#777;
+	border-radius:100%;
+}
+.jcf-radio input[type="radio"] {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	border: 0;
+	margin: 0;
+	left: 0;
+	top: 0;
+}
+.jcf-radio.jcf-checked span {display:block;}
+
+/* checkbox */
+.jcf-checkbox {
+	vertical-align: middle;
+	display: inline-block;
+	position: relative;
+	overflow: hidden;
+	cursor: default;
+	background: #fff;
+	border: 1px solid #777;
+	margin: 0 3px 0 0;
+	height: 16px;
+	width: 16px;
+}
+.jcf-checkbox span{
+	position:absolute;
+	display:none;
+	height:4px;
+	width:8px;
+	top:50%;
+	left:50%;
+	margin:-7px 0 0 -6px;
+	border:3px solid #777;
+	border-width:0 0 3px 3px;
+	-moz-transform: rotate(-45deg);
+	-ms-transform: rotate(-45deg);
+	-webkit-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+}
+:root .jcf-checkbox span {margin:-4px 0 0 -5px;}
+.jcf-checkbox input[type="checkbox"] {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	margin: 0;
+	left: 0;
+	top: 0;
+}
+.jcf-checkbox.jcf-checked span{display:block;}
+
+/* button */
+.jcf-button {
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	overflow: hidden;
+	border: 1px solid #777;
+	background: #fff;
+	margin: 0 10px 10px 0;
+	padding: 5px 10px;
+}
+.jcf-button .jcf-real-element {
+	position: absolute;
+	min-height: 100%;
+	min-width: 100%;
+	outline: none;
+	opacity: 0;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	top: 0;
+}
+
+/* file */
+.jcf-file {
+	display: inline-block;
+	white-space: nowrap;
+	position: relative;
+	overflow: hidden;
+	background: #fff;
+}
+.jcf-file .jcf-real-element {
+	position: absolute;
+	font-size: 200px;
+	height: 200px;
+	margin: 0;
+	right: 0;
+	top: 0;
+}
+.jcf-file .jcf-fake-input {
+	display: inline-block;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	vertical-align: top;
+	overflow: hidden;
+	border: 1px solid #777;
+	padding: 0 8px;
+	font-size: 13px;
+	line-height: 28px;
+	height: 28px;
+	width: 125px;
+}
+.jcf-file .jcf-upload-button {
+	display: inline-block;
+	vertical-align: top;
+	white-space: nowrap;
+	overflow: hidden;
+	border: 1px solid #777;
+	margin: 0 0 0 -1px;
+	padding: 0 10px;
+	line-height: 28px;
+	height: 28px;
+}
+
+/* scrollbars */
+.jcf-scrollable-wrapper {
+	box-sizing: content-box;
+	position: relative;
+}
+.jcf-scrollbar-vertical {
+	position: absolute;
+	cursor: default;
+	background: #e3e3e3;
+	width: 14px;
+	bottom: 0;
+	right: 0;
+	top: 0;
+}
+.jcf-scrollbar-vertical .jcf-scrollbar-dec,
+.jcf-scrollbar-vertical .jcf-scrollbar-inc {
+	background: #bbb;
+	height: 14px;
+	width: 14px;
+	left: 0;
+	top: 0;
+}
+.jcf-scrollbar-vertical .jcf-scrollbar-inc {
+	top: auto;
+	bottom: 0;
+}
+.jcf-scrollbar-vertical .jcf-scrollbar-handle {
+	background: #888;
+	height: 1px;
+	width: 14px;
+}
+.jcf-scrollbar-horizontal {
+	position: absolute;
+	background: #e3e3e3;
+	right: auto;
+	top: auto;
+	left: 0;
+	bottom: 0;
+	width: 1px;
+	height: 14px;
+}
+.jcf-scrollbar-horizontal .jcf-scrollbar-dec,
+.jcf-scrollbar-horizontal .jcf-scrollbar-inc {
+	display: inline-block;
+	vertical-align: top;
+	overflow: hidden;
+	background: #bbb;
+	height: 14px;
+	width: 14px;
+}
+.jcf-scrollbar-horizontal .jcf-scrollbar-inc {
+	left: auto;
+	right: 0;
+}
+.jcf-scrollbar-horizontal .jcf-scrollbar-slider {
+	display: inline-block;
+	position: relative;
+	height: 14px;
+}
+.jcf-scrollbar-horizontal .jcf-scrollbar-handle {
+	position: absolute;
+	background: #888;
+	height: 14px;
+}
+.jcf-scrollbar.jcf-inactive .jcf-scrollbar-handle {
+	visibility: hidden;
+}
+.jcf-scrollbar.jcf-inactive .jcf-scrollbar-dec, 
+.jcf-scrollbar.jcf-inactive .jcf-scrollbar-inc {
+	background: #e3e3e3;
+}
+
+/* select */
+.jcf-select {
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	border: 1px solid #777;
+	background: #fff;
+	margin: 0 0 12px;
+	min-width: 150px;
+	height: 26px;
+}
+.jcf-select select {
+	z-index: 1;
+	left: 0;
+	top: 0;
+}
+.jcf-select .jcf-select-text {
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	cursor: default;
+	display: block;
+	font-size: 13px;
+	line-height: 26px;
+	margin: 0 35px 0 8px;
+}
+.jcf-select .jcf-select-opener {
+	position: absolute;
+	text-align: center;
+	background: #aaa;
+	width: 26px;
+	bottom: 0;
+	right: 0;
+	top: 0;
+}
+body > .jcf-select-drop {
+	position: absolute;
+	margin: -1px 0 0;
+	z-index: 9999;
+}
+body > .jcf-select-drop.jcf-drop-flipped {
+	margin: 1px 0 0;
+}
+.jcf-select .jcf-select-drop {
+	position: absolute;
+	margin-top: 0px;
+	z-index: 9999;
+	top: 100%;
+	left: -1px;
+	right: -1px;
+}
+.jcf-select .jcf-drop-flipped {
+	bottom: 100%;
+	top: auto;
+}
+.jcf-select-drop .jcf-select-drop-content {
+	border: 1px solid #f00;
+}
+
+/* multiple select styles */
+.jcf-list-box {
+	overflow: hidden;
+	display: inline-block;
+	border: 1px solid #b8c3c9;
+	min-width: 200px;
+	margin: 0 15px;
+}
+/* select options styles */
+.jcf-list {
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	background: #fff;
+	line-height: 14px;
+	font-size: 12px;
+	width: 100%;
+}
+.jcf-list .jcf-list-content {
+	vertical-align: top;
+	display: inline-block;
+	overflow: auto;
+	width: 100%;
+}
+.jcf-list ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.jcf-list ul li {
+	overflow: hidden;
+	display: block;
+}
+.jcf-list .jcf-overflow {
+	overflow: auto;
+}
+.jcf-list .jcf-option {
+	white-space: nowrap;
+	overflow: hidden;
+	cursor: default;
+	display: block;
+	padding: 5px 9px;
+	color: #656565;
+	height: 1%;
+}
+.jcf-list .jcf-disabled {
+	background: #fff !important;
+	color: #aaa !important;
+}
+.jcf-select-drop .jcf-hover,
+.jcf-list-box .jcf-selected {
+	background: #e6e6e6;
+	color: #000;
+}
+.jcf-list .jcf-optgroup-caption {
+	white-space: nowrap;
+	font-weight: bold;
+	display: block;
+	padding: 5px 9px;
+	cursor: default;
+	color: #000;
+}
+.jcf-list .jcf-optgroup .jcf-option {
+	padding-left: 30px;
+}
+
+/* other styles */
+.jcf-textarea {
+	border: 1px solid #b8c3c9;
+	box-sizing: content-box;
+	display: inline-block;
+	position: relative;
+}
+.jcf-textarea .jcf-scrollbar-horizontal {
+	display: none;
+	height: 0;
+}
+.jcf-textarea textarea {
+	padding: 8px 10px;
+	border: none;
+	margin: 0;
+}
+.jcf-textarea .jcf-resize {
+	position: absolute;
+	text-align: center;
+	cursor: se-resize;
+	background: #e3e3e3;
+	font-weight: bold;
+	line-height: 15px;
+	text-indent: 1px;
+	font-size: 12px;
+	height: 15px;
+	width: 14px;
+	bottom: 0;
+	right: 0;
+}
+.jcf-textarea .jcf-resize:before {
+	border: 1px solid #000;
+	border-width: 0 1px 1px 0;
+	display: block;
+	margin: 4px 0 0 3px;
+	width: 6px;
+	height: 6px;
+	content: '';
+}
+
+/* common styles */
+.jcf-disabled {background: #ddd !important;}
 .jcf-focus, .jcf-focus * {border-color: #f00 !important;}
\ No newline at end of file
diff --git a/index.html b/index.html
index 62929b5..eccd676 100755
--- a/index.html
+++ b/index.html
@@ -1,279 +1,279 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta name="viewport" content="width=device-width, maximum-scale=1.0">
-	<meta charset="utf-8">
-	<title>JavaScript Custom Forms</title>
-
-	<!-- jcf scripts and styles -->
-	<link rel="stylesheet" href="css/theme-minimal/jcf.css">
-	<script src="js/jquery-1.11.1.js"></script>
-	<script src="js/jcf.js"></script>
-	<script src="js/jcf.file.js"></script>
-	<script src="js/jcf.radio.js"></script>
-	<script src="js/jcf.button.js"></script>
-	<script src="js/jcf.select.js"></script>
-	<script src="js/jcf.checkbox.js"></script>
-	<script src="js/jcf.textarea.js"></script>
-	<script src="js/jcf.scrollable.js"></script>
-	<script>
-		$(function() {
-			jcf.replaceAll();
-		});
-	</script>
-
-	<!-- demo page styles -->
-	<link rel="stylesheet" href="css/demo.css">
-	<!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
-</head>
-<body>
-<main role="main">
-
-	<section class="intro">
-		<h1>JavaScript Custom Forms</h1>
-		<p>This library allows crossbrowser form elements customization using CSS.</p>
-		<p>Supported elements are following: <strong>select, checkbox, radio, file input, textarea and scrollbars</strong> (and more coming)</p>
-		
-	</section>
-
-	<section class="demo-selects">
-		<h2>&lt;select&gt;</h2>
-		<p>Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.</p>
-		<div class="col">
-			<div class="row">
-				<select data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
-					<option value="v1">Custom drop in &lt;body&gt;</option>
-					<option value="v2">Option 1</option>
-					<option value="v3">Option 2</option>
-					<option value="v4">Option 3</option>
-					<option value="v5">Option 4</option>
-					<optgroup label="test">
-						<option value="v6">Option 5</option>
-						<option value="v7">Option 6</option>
-					</optgroup>
-					<option value="v7">Option 7</option>
-					<option value="v8">Option 8</option>
-					<option value="v9" disabled>Option 9 (disabled)</option>
-					<option value="v10" disabled>Option 10 (disabled)</option>
-					<option value="v11">Option 11</option>
-					<option value="v12">Option 12</option>
-					<option value="v13">Option 13</option>
-					<option value="v14">Option 14</option>
-					<option value="v15">Option 15</option>
-					<option value="v16">Option 16</option>
-					<option value="v17">Option 17</option>
-					<option value="v18">Option 18</option>
-					<option value="v19">Option 19</option>
-					<option value="v20">Option 20</option>
-					<option value="v21">Option 21</option>
-					<option value="v22">Option 22</option>
-					<option value="v23">Option 23</option>
-					<option value="v24">Option 24</option>
-					<optgroup label="last 26">
-						<option value="v25">Option 25</option>
-						<option value="v26">Option 26</option>
-					</optgroup>
-				</select>
-			</div>
-			<div class="row">
-				<select class="custom color" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "fakeDropInBody": false, "useCustomScroll": false}'>
-					<option value="v1">Custom drop in area</option>
-					<option class="color red" value="v2">Option 1</option>
-					<option class="color green" value="v3">Option 2</option>
-					<option class="color blue" value="v3">Option 3</option>
-					<option value="v3">Option 4</option>
-					<option value="v3">Option 5</option>
-				</select>
-			</div>
-			<div class="row">
-				<select>
-					<option value="v1">Native dropdown</option>
-					<option value="v2">Option 1</option>
-					<option value="v3">Option 2</option>
-					<option value="v3">Option 3</option>
-					<option value="v3">Option 4</option>
-					<option value="v3">Option 5</option>
-				</select>
-			</div>
-			<div class="row">
-				<select class="present" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
-					<option class="hideme">Select gift !</option>
-					<option data-image="images/test-icon1.png" value="v4">Woo!</option>
-					<option data-image="images/test-icon2.png" value="v5">Haaa!</option>
-					<option data-image="images/test-icon3.png" value="v6">Boom?</option>
-				</select>
-			</div>
-			<div class="row">
-				<select disabled="disabled">
-					<option value="v4">Option 1</option>
-					<option value="v5" selected>Disabled select</option>
-				</select>
-			</div>
-		</div>
-		<div class="col">
-			<div class="row">
-				<select size="6">
-					<optgroup label="Test group1">
-						<option value="v1">Option 1</option>
-						<option value="v2">Option 2</option>
-						<option value="v3" selected>Option 3</option>
-					</optgroup>
-					<option value="v4">Option 4</option>
-					<option value="v5">Option 5</option>
-					<optgroup label="Test group2">
-						<option value="v6">Option 6</option>
-						<option value="v7" disabled>Option 7 (disabled)</option>
-						<option value="v8">Option 8</option>
-						<option value="v9">Option 9</option>
-					</optgroup>
-					<option value="v10">Option 10</option>
-					<option value="v11">Option 11</option>
-				</select>
-				<select class="multitest" size="7" multiple>
-					<option>Option 1</option>
-					<option>Option 2</option>
-					<option>Option 3</option>
-					<option>Option 4</option>
-					<option>Option 5</option>
-					<optgroup label="Test group3">
-						<option>Option 6</option>
-						<option selected>Option 7</option>
-						<option selected>Option 8</option>
-						<option>Option 9</option>
-					</optgroup>
-					<option>Option 10</option>
-					<option>Option 11</option>
-					<option>Option 12</option>
-					<option>Option 13</option>
-					<option>Option 14</option>
-					<option>Option 15</option>
-					<option>Option 16</option>
-					<option>Option 17</option>
-					<option>Option 18</option>
-					<option>Option 19</option>
-					<option>Option 20</option>
-					<option>Option 21</option>
-					<option>Option 22</option>
-					<option>Option 23</option>
-				</select>
-			</div>
-		</div>
-	</section>
-
-	<section class="demo-checkboxes">
-		<h2>Checkboxes and radios</h2>
-		<p>Focused and pressed states are also handled.</p>
-		<div class="col">
-			<div class="row">
-				<input type="checkbox" id="chk1" />
-				<label title="Unchecked state" for="chk1">Unchecked</label>
-			</div>	
-			<div class="row">
-				<input type="checkbox" checked="checked" id="chk2" />
-				<label title="Checked state" for="chk2">Checked</label>
-			</div>
-			<div class="row">
-				<input type="checkbox" disabled="disabled" id="chk3" />
-				<label title="Checked state" for="chk3">Disabled</label>
-			</div>
-			<div class="row">
-				<input type="checkbox" disabled="disabled" checked="checked" id="chk4" />
-				<label title="Checked state" for="chk4">Disabled checked</label>
-			</div>
-		</div>
-		<div class="col">
-			<div class="row">
-				<input type="radio" name="rtest" id="rad1" />
-				<label for="rad1" title="Unchecked state">Unchecked</label>
-			</div>
-			<div class="row">
-				<input type="radio" name="rtest" checked="checked" id="rad2" data-jcf='{"wrapNative": true}' />
-				<label for="rad2" title="Checked state">Checked</label>
-			</div>
-			<div class="row">
-				<input type="radio" name="rtest" disabled="disabled" checked="checked" id="rad3" />
-				<label for="rad3" title="Disabled state">Disabled</label>
-			</div>
-		</div>
-	</section>
-
-	<section class="demo-file">
-		<h2>File input</h2>
-		<p>Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.</p>
-		<div class="row">
-			<label>Normal:</label>
-			<input type="file">
-		</div>
-		<div class="row">
-			<label>Custom:</label>
-			<input type="file" data-jcf='{"buttonText": "Custom button", "placeholderText": "Custom placeholder"}'>
-		</div>
-		<div class="row">
-			<label>Disabled:</label>
-			<input type="file" disabled>
-		</div>	
-	</section>
-
-	<section class="demo-scrollbars">
-		<h2>Scrollbars</h2>
-		<p>Scrollbars can be either vertical or horizontal. Nested scrollbars are supported. Can be applied on textarea.</p>
-		<div class="col">
-			<div class="test jcf-scrollable">
-				<img src="images/test.png" width="512" height="512" alt="" />
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!</p>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!</p>
-			</div>
-		</div>
-		<div class="col">
-			<textarea cols="40" rows="10">
-	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-	Aspernatur saepe nostrum quas enim, tenetur unde ut.
-
-	Eum aspernatur, sunt enim ea magni repellat debitis, sequi recusandae temporibus explicabo minus eaque.
-	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, fuga modi tempora id voluptatibus, nostrum quae nihil quam dignissimos praesentium et totam repudiandae sequi magnam numquam reprehenderit animi ea.
-			
-			END.</textarea>
-		</div>
-	</section>
-
-	<section class="browser-support">
-		<h2>Browser support</h2>
-		<p>The script was tested in the following browsers:</p>
-		<ul>
-			<li>Internet Explorer 8+</li>
-			<li>Firefox</li>
-			<li>Chrome</li>
-			<li>Safari</li>
-			<li>Opera</li>
-			<li>Windows RT Tablets</li>
-			<li>Android 4+</li>
-			<li>iOS7+</li>
-		</ul>
-	</section>
-
-	<section class="usage">
-		<h2>Usage</h2>
-		<p>The script requires <a href="http://jquery.com/">jQuery</a> to work properly. To add script in your page simply attach core file - <code>jcf.js</code> and some of modules you want to use for customization:</p>
-		<pre>
-&lt;script src="js/jquery-1.11.1.js"&gt;&lt;/script&gt;
-&lt;script src="js/jcf.js"&gt;&lt;/script&gt;
-&lt;script src="js/jcf.select.js"&gt;&lt;/script&gt;
-&lt;script src="js/jcf.radio.js"&gt;&lt;/script&gt;
-&lt;script src="js/jcf.checkbox.js"&gt;&lt;/script&gt;</pre>
-		<p>When the page is loaded all you have to do is simply call the function:</p>
-		<pre>
-$(function() {
-	jcf.replaceAll();
-});</pre>
-	</section>
-
-	<section class="licence">
-		<h2>License</h2>
-		<p>This script is licensed under the <a href="LICENSE.txt">MIT License</a></p>
-		<p>Copyright 2014 <a href="http://psd2html.com/jcf">PSD2HTML.com</a></p>
-	</section>
-
-</main>
-
-</body>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, maximum-scale=1.0">
+	<meta charset="utf-8">
+	<title>JavaScript Custom Forms</title>
+
+	<!-- jcf scripts and styles -->
+	<link rel="stylesheet" href="css/theme-minimal/jcf.css">
+	<script src="js/jquery-1.11.1.js"></script>
+	<script src="js/jcf.js"></script>
+	<script src="js/jcf.file.js"></script>
+	<script src="js/jcf.radio.js"></script>
+	<script src="js/jcf.button.js"></script>
+	<script src="js/jcf.select.js"></script>
+	<script src="js/jcf.checkbox.js"></script>
+	<script src="js/jcf.textarea.js"></script>
+	<script src="js/jcf.scrollable.js"></script>
+	<script>
+		$(function() {
+			jcf.replaceAll();
+		});
+	</script>
+
+	<!-- demo page styles -->
+	<link rel="stylesheet" href="css/demo.css">
+	<!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
+</head>
+<body>
+<main role="main">
+
+	<section class="intro">
+		<h1>JavaScript Custom Forms</h1>
+		<p>This library allows crossbrowser form elements customization using CSS.</p>
+		<p>Supported elements are following: <strong>select, checkbox, radio, file input, textarea and scrollbars</strong> (and more coming)</p>
+		
+	</section>
+
+	<section class="demo-selects">
+		<h2>&lt;select&gt;</h2>
+		<p>Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.</p>
+		<div class="col">
+			<div class="row">
+				<select data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
+					<option value="v1">Custom drop in &lt;body&gt;</option>
+					<option value="v2">Option 1</option>
+					<option value="v3">Option 2</option>
+					<option value="v4">Option 3</option>
+					<option value="v5">Option 4</option>
+					<optgroup label="test">
+						<option value="v6">Option 5</option>
+						<option value="v7">Option 6</option>
+					</optgroup>
+					<option value="v7">Option 7</option>
+					<option value="v8">Option 8</option>
+					<option value="v9" disabled>Option 9 (disabled)</option>
+					<option value="v10" disabled>Option 10 (disabled)</option>
+					<option value="v11">Option 11</option>
+					<option value="v12">Option 12</option>
+					<option value="v13">Option 13</option>
+					<option value="v14">Option 14</option>
+					<option value="v15">Option 15</option>
+					<option value="v16">Option 16</option>
+					<option value="v17">Option 17</option>
+					<option value="v18">Option 18</option>
+					<option value="v19">Option 19</option>
+					<option value="v20">Option 20</option>
+					<option value="v21">Option 21</option>
+					<option value="v22">Option 22</option>
+					<option value="v23">Option 23</option>
+					<option value="v24">Option 24</option>
+					<optgroup label="last 26">
+						<option value="v25">Option 25</option>
+						<option value="v26">Option 26</option>
+					</optgroup>
+				</select>
+			</div>
+			<div class="row">
+				<select class="custom color" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "fakeDropInBody": false, "useCustomScroll": false}'>
+					<option value="v1">Custom drop in area</option>
+					<option class="color red" value="v2">Option 1</option>
+					<option class="color green" value="v3">Option 2</option>
+					<option class="color blue" value="v3">Option 3</option>
+					<option value="v3">Option 4</option>
+					<option value="v3">Option 5</option>
+				</select>
+			</div>
+			<div class="row">
+				<select>
+					<option value="v1">Native dropdown</option>
+					<option value="v2">Option 1</option>
+					<option value="v3">Option 2</option>
+					<option value="v3">Option 3</option>
+					<option value="v3">Option 4</option>
+					<option value="v3">Option 5</option>
+				</select>
+			</div>
+			<div class="row">
+				<select class="present" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
+					<option class="hideme">Select gift !</option>
+					<option data-image="images/test-icon1.png" value="v4">Woo!</option>
+					<option data-image="images/test-icon2.png" value="v5">Haaa!</option>
+					<option data-image="images/test-icon3.png" value="v6">Boom?</option>
+				</select>
+			</div>
+			<div class="row">
+				<select disabled="disabled">
+					<option value="v4">Option 1</option>
+					<option value="v5" selected>Disabled select</option>
+				</select>
+			</div>
+		</div>
+		<div class="col">
+			<div class="row">
+				<select size="6">
+					<optgroup label="Test group1">
+						<option value="v1">Option 1</option>
+						<option value="v2">Option 2</option>
+						<option value="v3" selected>Option 3</option>
+					</optgroup>
+					<option value="v4">Option 4</option>
+					<option value="v5">Option 5</option>
+					<optgroup label="Test group2">
+						<option value="v6">Option 6</option>
+						<option value="v7" disabled>Option 7 (disabled)</option>
+						<option value="v8">Option 8</option>
+						<option value="v9">Option 9</option>
+					</optgroup>
+					<option value="v10">Option 10</option>
+					<option value="v11">Option 11</option>
+				</select>
+				<select class="multitest" size="7" multiple>
+					<option>Option 1</option>
+					<option>Option 2</option>
+					<option>Option 3</option>
+					<option>Option 4</option>
+					<option>Option 5</option>
+					<optgroup label="Test group3">
+						<option>Option 6</option>
+						<option selected>Option 7</option>
+						<option selected>Option 8</option>
+						<option>Option 9</option>
+					</optgroup>
+					<option>Option 10</option>
+					<option>Option 11</option>
+					<option>Option 12</option>
+					<option>Option 13</option>
+					<option>Option 14</option>
+					<option>Option 15</option>
+					<option>Option 16</option>
+					<option>Option 17</option>
+					<option>Option 18</option>
+					<option>Option 19</option>
+					<option>Option 20</option>
+					<option>Option 21</option>
+					<option>Option 22</option>
+					<option>Option 23</option>
+				</select>
+			</div>
+		</div>
+	</section>
+
+	<section class="demo-checkboxes">
+		<h2>Checkboxes and radios</h2>
+		<p>Focused and pressed states are also handled.</p>
+		<div class="col">
+			<div class="row">
+				<input type="checkbox" id="chk1" />
+				<label title="Unchecked state" for="chk1">Unchecked</label>
+			</div>	
+			<div class="row">
+				<input type="checkbox" checked="checked" id="chk2" />
+				<label title="Checked state" for="chk2">Checked</label>
+			</div>
+			<div class="row">
+				<input type="checkbox" disabled="disabled" id="chk3" />
+				<label title="Checked state" for="chk3">Disabled</label>
+			</div>
+			<div class="row">
+				<input type="checkbox" disabled="disabled" checked="checked" id="chk4" />
+				<label title="Checked state" for="chk4">Disabled checked</label>
+			</div>
+		</div>
+		<div class="col">
+			<div class="row">
+				<input type="radio" name="rtest" id="rad1" />
+				<label for="rad1" title="Unchecked state">Unchecked</label>
+			</div>
+			<div class="row">
+				<input type="radio" name="rtest" checked="checked" id="rad2" data-jcf='{"wrapNative": true}' />
+				<label for="rad2" title="Checked state">Checked</label>
+			</div>
+			<div class="row">
+				<input type="radio" name="rtest" disabled="disabled" checked="checked" id="rad3" />
+				<label for="rad3" title="Disabled state">Disabled</label>
+			</div>
+		</div>
+	</section>
+
+	<section class="demo-file">
+		<h2>File input</h2>
+		<p>Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.</p>
+		<div class="row">
+			<label>Normal:</label>
+			<input type="file">
+		</div>
+		<div class="row">
+			<label>Custom:</label>
+			<input type="file" data-jcf='{"buttonText": "Custom button", "placeholderText": "Custom placeholder"}'>
+		</div>
+		<div class="row">
+			<label>Disabled:</label>
+			<input type="file" disabled>
+		</div>	
+	</section>
+
+	<section class="demo-scrollbars">
+		<h2>Scrollbars</h2>
+		<p>Scrollbars can be either vertical or horizontal. Nested scrollbars are supported. Can be applied on textarea.</p>
+		<div class="col">
+			<div class="test jcf-scrollable">
+				<img src="images/test.png" width="512" height="512" alt="" />
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!</p>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, facilis, similique voluptates ut assumenda ea ex vero suscipit possimus nihil animi unde dolore in sint error quod consequatur modi!</p>
+			</div>
+		</div>
+		<div class="col">
+			<textarea cols="40" rows="10">
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+	Aspernatur saepe nostrum quas enim, tenetur unde ut.
+
+	Eum aspernatur, sunt enim ea magni repellat debitis, sequi recusandae temporibus explicabo minus eaque.
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, fuga modi tempora id voluptatibus, nostrum quae nihil quam dignissimos praesentium et totam repudiandae sequi magnam numquam reprehenderit animi ea.
+			
+			END.</textarea>
+		</div>
+	</section>
+
+	<section class="browser-support">
+		<h2>Browser support</h2>
+		<p>The script was tested in the following browsers:</p>
+		<ul>
+			<li>Internet Explorer 8+</li>
+			<li>Firefox</li>
+			<li>Chrome</li>
+			<li>Safari</li>
+			<li>Opera</li>
+			<li>Windows RT Tablets</li>
+			<li>Android 4+</li>
+			<li>iOS7+</li>
+		</ul>
+	</section>
+
+	<section class="usage">
+		<h2>Usage</h2>
+		<p>The script requires <a href="http://jquery.com/">jQuery</a> to work properly. To add script in your page simply attach core file - <code>jcf.js</code> and some of modules you want to use for customization:</p>
+		<pre>
+&lt;script src="js/jquery-1.11.1.js"&gt;&lt;/script&gt;
+&lt;script src="js/jcf.js"&gt;&lt;/script&gt;
+&lt;script src="js/jcf.select.js"&gt;&lt;/script&gt;
+&lt;script src="js/jcf.radio.js"&gt;&lt;/script&gt;
+&lt;script src="js/jcf.checkbox.js"&gt;&lt;/script&gt;</pre>
+		<p>When the page is loaded all you have to do is simply call the function:</p>
+		<pre>
+$(function() {
+	jcf.replaceAll();
+});</pre>
+	</section>
+
+	<section class="licence">
+		<h2>License</h2>
+		<p>This script is licensed under the <a href="LICENSE.txt">MIT License</a></p>
+		<p>Copyright 2014 <a href="http://psd2html.com/jcf">PSD2HTML.com</a></p>
+	</section>
+
+</main>
+
+</body>
 </html>
\ No newline at end of file
diff --git a/js/jcf.checkbox.js b/js/jcf.checkbox.js
index ea37bb1..19ce94d 100755
--- a/js/jcf.checkbox.js
+++ b/js/jcf.checkbox.js
@@ -1,167 +1,167 @@
-/*!
- * JavaScript Custom Forms : Checkbox Module
- *
- * Copyright 2014 PSD2HTML (http://psd2html.com)
- * Released under the MIT license (LICENSE.txt)
- * 
- * Version: 1.0.2
- */
-;(function($, window) {
-	'use strict';
-
-	jcf.addModule({
-		name: 'Checkbox',
-		selector: 'input[type="checkbox"]',
-		options: {
-			wrapNative: true,
-			checkedClass: 'jcf-checked',
-			uncheckedClass: 'jcf-unchecked',
-			labelActiveClass: 'jcf-label-active',
-			fakeStructure: '<span class="jcf-checkbox"><span></span></span>'
-		},
-		matchElement: function(element) {
-			return element.is(':checkbox');
-		},
-		init: function(options) {
-			this.initStructure();
-			this.attachEvents();
-			this.refresh();
-		},
-		initStructure: function() {
-			// prepare structure
-			this.doc = $(document);
-			this.realElement = $(this.options.element);
-			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
-			this.labelElement = this.getLabelFor();
-
-			if(this.options.wrapNative) {
-				// wrap native checkbox inside fake block
-				this.realElement.appendTo(this.fakeElement).css({
-					position: 'absolute',
-					height: '100%',
-					width: '100%',
-					opacity: 0,
-					margin: 0
-				});
-			} else {
-				// just hide native checkbox
-				this.realElement.addClass(this.options.hiddenClass);
-			}
-		},
-		attachEvents: function() {
-			// add event handlers
-			this.realElement.on({
-				focus: this.onFocus,
-				click: this.onRealClick
-			});
-			this.fakeElement.on('click', this.onFakeClick);
-			this.fakeElement.on('jcf-pointerdown', this.onPress);
-		},
-		onRealClick: function(e) {
-			// just redraw fake element (setTimeout handles click that might be prevented)
-			var self = this;
-			this.savedEventObject = e;
-			setTimeout(function() {
-				self.refresh();
-			}, 0);
-		},
-		onFakeClick: function(e) {
-			// skip event if clicked on real element inside wrapper
-			if(this.options.wrapNative && this.realElement.is(e.target)) {
-				return;
-			}
-
-			// toggle checked class
-			if(!this.realElement.is(':disabled')) {
-				delete this.savedEventObject;
-				this.stateChecked = this.realElement.prop('checked');
-				this.realElement.prop('checked', !this.stateChecked);
-				this.fireNativeEvent(this.realElement, 'click');
-				if(this.savedEventObject && this.savedEventObject.isDefaultPrevented()) {
-					this.realElement.prop('checked', this.stateChecked);
-				} else {
-					this.fireNativeEvent(this.realElement, 'change');
-				}
-				delete this.savedEventObject;
-			}
-		},
-		onFocus: function() {
-			if(!this.pressedFlag || !this.focusedFlag) {
-				this.focusedFlag = true;
-				this.fakeElement.addClass(this.options.focusClass);
-				this.realElement.on('blur', this.onBlur);
-			}
-		},
-		onBlur: function() {
-			if(!this.pressedFlag) {
-				this.focusedFlag = false;
-				this.fakeElement.removeClass(this.options.focusClass);
-				this.realElement.off('blur', this.onBlur);
-			}
-		},
-		onPress: function(e) {
-			if(!this.focusedFlag && e.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-			this.pressedFlag = true;
-			this.fakeElement.addClass(this.options.pressedClass);
-			this.doc.on('jcf-pointerup', this.onRelease);
-		},
-		onRelease: function(e) {
-			if(this.focusedFlag && e.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-			this.pressedFlag = false;
-			this.fakeElement.removeClass(this.options.pressedClass);
-			this.doc.off('jcf-pointerup', this.onRelease);
-		},
-		getLabelFor: function() {
-			var parentLabel = this.realElement.closest('label'),
-				elementId = this.realElement.prop('id');
-
-			if(!parentLabel.length && elementId) {
-				parentLabel = $('label[for="' + elementId + '"]');
-			}
-			return parentLabel.length ? parentLabel : null;
-		},
-		refresh: function() {
-			// redraw custom checkbox
-			var isChecked = this.realElement.is(':checked'),
-				isDisabled = this.realElement.is(':disabled');
-
-			this.fakeElement.toggleClass(this.options.checkedClass, isChecked)
-							.toggleClass(this.options.uncheckedClass, !isChecked)
-							.toggleClass(this.options.disabledClass, isDisabled);
-
-			if(this.labelElement) {
-				this.labelElement.toggleClass(this.options.labelActiveClass, isChecked);
-			}
-		},
-		destroy: function() {
-			// restore structure
-			if(this.options.wrapNative) {
-				this.realElement.insertBefore(this.fakeElement).css({
-					position: '',
-					width: '',
-					height: '',
-					opacity: '',
-					margin: ''
-				});
-			} else {
-				this.realElement.removeClass(this.options.hiddenClass);
-			}
-
-			// removing element will also remove its event handlers
-			this.fakeElement.off('jcf-pointerdown', this.onPress);
-			this.fakeElement.remove();
-
-			// remove other event handlers
-			this.doc.off('jcf-pointerup', this.onRelease);
-			this.realElement.off({
-				focus: this.onFocus,
-				click: this.onRealClick
-			});
-		}
-	});
-
+/*!
+ * JavaScript Custom Forms : Checkbox Module
+ *
+ * Copyright 2014 PSD2HTML (http://psd2html.com)
+ * Released under the MIT license (LICENSE.txt)
+ * 
+ * Version: 1.0.2
+ */
+;(function($, window) {
+	'use strict';
+
+	jcf.addModule({
+		name: 'Checkbox',
+		selector: 'input[type="checkbox"]',
+		options: {
+			wrapNative: true,
+			checkedClass: 'jcf-checked',
+			uncheckedClass: 'jcf-unchecked',
+			labelActiveClass: 'jcf-label-active',
+			fakeStructure: '<span class="jcf-checkbox"><span></span></span>'
+		},
+		matchElement: function(element) {
+			return element.is(':checkbox');
+		},
+		init: function(options) {
+			this.initStructure();
+			this.attachEvents();
+			this.refresh();
+		},
+		initStructure: function() {
+			// prepare structure
+			this.doc = $(document);
+			this.realElement = $(this.options.element);
+			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
+			this.labelElement = this.getLabelFor();
+
+			if(this.options.wrapNative) {
+				// wrap native checkbox inside fake block
+				this.realElement.appendTo(this.fakeElement).css({
+					position: 'absolute',
+					height: '100%',
+					width: '100%',
+					opacity: 0,
+					margin: 0
+				});
+			} else {
+				// just hide native checkbox
+				this.realElement.addClass(this.options.hiddenClass);
+			}
+		},
+		attachEvents: function() {
+			// add event handlers
+			this.realElement.on({
+				focus: this.onFocus,
+				click: this.onRealClick
+			});
+			this.fakeElement.on('click', this.onFakeClick);
+			this.fakeElement.on('jcf-pointerdown', this.onPress);
+		},
+		onRealClick: function(e) {
+			// just redraw fake element (setTimeout handles click that might be prevented)
+			var self = this;
+			this.savedEventObject = e;
+			setTimeout(function() {
+				self.refresh();
+			}, 0);
+		},
+		onFakeClick: function(e) {
+			// skip event if clicked on real element inside wrapper
+			if(this.options.wrapNative && this.realElement.is(e.target)) {
+				return;
+			}
+
+			// toggle checked class
+			if(!this.realElement.is(':disabled')) {
+				delete this.savedEventObject;
+				this.stateChecked = this.realElement.prop('checked');
+				this.realElement.prop('checked', !this.stateChecked);
+				this.fireNativeEvent(this.realElement, 'click');
+				if(this.savedEventObject && this.savedEventObject.isDefaultPrevented()) {
+					this.realElement.prop('checked', this.stateChecked);
+				} else {
+					this.fireNativeEvent(this.realElement, 'change');
+				}
+				delete this.savedEventObject;
+			}
+		},
+		onFocus: function() {
+			if(!this.pressedFlag || !this.focusedFlag) {
+				this.focusedFlag = true;
+				this.fakeElement.addClass(this.options.focusClass);
+				this.realElement.on('blur', this.onBlur);
+			}
+		},
+		onBlur: function() {
+			if(!this.pressedFlag) {
+				this.focusedFlag = false;
+				this.fakeElement.removeClass(this.options.focusClass);
+				this.realElement.off('blur', this.onBlur);
+			}
+		},
+		onPress: function(e) {
+			if(!this.focusedFlag && e.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+			this.pressedFlag = true;
+			this.fakeElement.addClass(this.options.pressedClass);
+			this.doc.on('jcf-pointerup', this.onRelease);
+		},
+		onRelease: function(e) {
+			if(this.focusedFlag && e.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+			this.pressedFlag = false;
+			this.fakeElement.removeClass(this.options.pressedClass);
+			this.doc.off('jcf-pointerup', this.onRelease);
+		},
+		getLabelFor: function() {
+			var parentLabel = this.realElement.closest('label'),
+				elementId = this.realElement.prop('id');
+
+			if(!parentLabel.length && elementId) {
+				parentLabel = $('label[for="' + elementId + '"]');
+			}
+			return parentLabel.length ? parentLabel : null;
+		},
+		refresh: function() {
+			// redraw custom checkbox
+			var isChecked = this.realElement.is(':checked'),
+				isDisabled = this.realElement.is(':disabled');
+
+			this.fakeElement.toggleClass(this.options.checkedClass, isChecked)
+							.toggleClass(this.options.uncheckedClass, !isChecked)
+							.toggleClass(this.options.disabledClass, isDisabled);
+
+			if(this.labelElement) {
+				this.labelElement.toggleClass(this.options.labelActiveClass, isChecked);
+			}
+		},
+		destroy: function() {
+			// restore structure
+			if(this.options.wrapNative) {
+				this.realElement.insertBefore(this.fakeElement).css({
+					position: '',
+					width: '',
+					height: '',
+					opacity: '',
+					margin: ''
+				});
+			} else {
+				this.realElement.removeClass(this.options.hiddenClass);
+			}
+
+			// removing element will also remove its event handlers
+			this.fakeElement.off('jcf-pointerdown', this.onPress);
+			this.fakeElement.remove();
+
+			// remove other event handlers
+			this.doc.off('jcf-pointerup', this.onRelease);
+			this.realElement.off({
+				focus: this.onFocus,
+				click: this.onRealClick
+			});
+		}
+	});
+
 }(jQuery, this));
\ No newline at end of file
diff --git a/js/jcf.js b/js/jcf.js
index 41f0ef2..e2f3ed4 100755
--- a/js/jcf.js
+++ b/js/jcf.js
@@ -1,423 +1,423 @@
-/*!
- * JavaScript Custom Forms
- *
- * Copyright 2014 PSD2HTML (http://psd2html.com)
- * Released under the MIT license (LICENSE.txt)
- * 
- * Version: 1.0.2
- */
-;(function (root, factory) {
-	if (typeof define === 'function' && define.amd) {
-		define(['jquery'], factory);
-	} else if (typeof exports === 'object') {
-		module.exports = factory(require('jquery'));
-	} else {
-		root.jcf = factory(jQuery);
-	}
-}(this, function ($) {
-	'use strict';
-
-	// private variables
-	var customInstances = [];
-
-	// default global options
-	var commonOptions = {
-		optionsKey: 'jcf',
-		dataKey: 'jcf-instance',
-		rtlClass: 'jcf-rtl',
-		focusClass: 'jcf-focus',
-		pressedClass: 'jcf-pressed',
-		disabledClass: 'jcf-disabled',
-		hiddenClass: 'jcf-hidden',
-		resetAppearanceClass: 'jcf-reset-appearance',
-		unselectableClass: 'jcf-unselectable'
-	};
-
-	// detect device type
-	var isTouchDevice = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
-		isWinPhoneDevice = /Windows Phone/.test(navigator.userAgent);
-	commonOptions.isMobileDevice = !!(isTouchDevice || isWinPhoneDevice);
-
-	// create global stylesheet if custom forms are used
-	var createStyleSheet = function() {
-		var styleTag = $('<style>').appendTo('head'),
-			styleSheet = styleTag.prop('sheet') || styleTag.prop('styleSheet');
-
-		// crossbrowser style handling
-		var addCSSRule = function(selector, rules, index) {
-			if(styleSheet.insertRule) {
-				styleSheet.insertRule(selector + '{' + rules + '}', index);
-			} else {
-				styleSheet.addRule(selector, rules, index);
-			}
-		};
-
-		// add special rules
-		addCSSRule('.' + commonOptions.hiddenClass, 'position:absolute !important;left:-9999px !important;height:1px !important;width:1px !important;margin:0 !important;border-width:0 !important;-webkit-appearance:none;-moz-appearance:none;appearance:none');
-		addCSSRule('.' + commonOptions.rtlClass + '.' + commonOptions.hiddenClass, 'right:-9999px !important; left: auto !important');
-		addCSSRule('.' + commonOptions.unselectableClass, '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;');
-		addCSSRule('.' + commonOptions.resetAppearanceClass, 'background: none; border: none; -webkit-appearance: none; appearance: none; opacity: 0; filter: alpha(opacity=0);');
-
-		// detect rtl pages
-		var html = $('html'), body = $('body');
-		if(html.css('direction') === 'rtl' || body.css('direction') === 'rtl') {
-			html.addClass(commonOptions.rtlClass);
-		}
-
-		// handle form reset event
-		html.on('reset', function() {
-			setTimeout(function(){
-				api.refreshAll();
-			}, 0);
-		});
-
-		// mark stylesheet as created
-		commonOptions.styleSheetCreated = true;
-	};
-
-	// simplified pointer events handler
-	(function() {
-		var pointerEventsSupported = navigator.pointerEnabled || navigator.msPointerEnabled,
-			touchEventsSupported = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
-			eventList, eventMap = {}, eventPrefix = 'jcf-';
-
-		// detect events to attach
-		if(pointerEventsSupported) {
-			eventList = {
-				pointerover: navigator.pointerEnabled ? 'pointerover' : 'MSPointerOver',
-				pointerdown: navigator.pointerEnabled ? 'pointerdown' : 'MSPointerDown',
-				pointermove: navigator.pointerEnabled ? 'pointermove' : 'MSPointerMove',
-				pointerup: navigator.pointerEnabled ? 'pointerup' : 'MSPointerUp'
-			};
-		} else {
-			eventList = {
-				pointerover: 'mouseover',
-				pointerdown: 'mousedown' + (touchEventsSupported ? ' touchstart' : ''),
-				pointermove: 'mousemove' + (touchEventsSupported ? ' touchmove' : ''),
-				pointerup: 'mouseup' + (touchEventsSupported ? ' touchend' : '')
-			};
-		}
-
-		// create event map
-		$.each(eventList, function(targetEventName, fakeEventList) {
-			$.each(fakeEventList.split(' '), function(index, fakeEventName) {
-				eventMap[fakeEventName] = targetEventName;
-			});
-		});
-
-		// jQuery event hooks
-		$.each(eventList, function(eventName, eventHandlers) {
-			eventHandlers = eventHandlers.split(' ');
-			$.event.special[eventPrefix + eventName] = {
-				setup: function() {
-					var self = this;
-					$.each(eventHandlers, function(index, fallbackEvent) {
-						if(self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);
-						else self['on' + fallbackEvent] = fixEvent;
-					});
-				},
-				teardown: function() {
-					var self = this;
-					$.each(eventHandlers, function(index, fallbackEvent) {
-						if(self.addEventListener) self.removeEventListener(fallbackEvent, fixEvent, false);
-						else self['on' + fallbackEvent] = null;
-					});
-				}
-			};
-		});
-
-		// check that mouse event are not simulated by mobile browsers
-		var lastTouch = null;
-		var mouseEventSimulated = function(e) {
-			var dx = Math.abs(e.pageX - lastTouch.x),
-				dy = Math.abs(e.pageY - lastTouch.y),
-				rangeDistance = 25;
-
-			if (dx <= rangeDistance && dy <= rangeDistance) {
-				return true;
-			}
-		};
-
-		// normalize event
-		var fixEvent = function(e) {
-			var origEvent = e || window.event,
-				touchEventData = null,
-				targetEventName = eventMap[origEvent.type];
-
-			e = $.event.fix(origEvent);
-			e.type = eventPrefix + targetEventName;
-
-			if(origEvent.pointerType) {
-				switch(origEvent.pointerType) {
-					case 2: e.pointerType = 'touch'; break;
-					case 3: e.pointerType = 'pen'; break;
-					case 4: e.pointerType = 'mouse'; break;
-					default: e.pointerType = origEvent.pointerType;
-				}
-			} else {
-				e.pointerType = origEvent.type.substr(0,5); // "mouse" or "touch" word length
-			}
-
-			if(!e.pageX && !e.pageY) {
-				touchEventData = origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent;
-				e.pageX = touchEventData.pageX;
-				e.pageY = touchEventData.pageY;
-			}
-
-			if(origEvent.type === 'touchend') {
-				lastTouch = {x: e.pageX, y: e.pageY};
-			}
-			if(e.pointerType === 'mouse' && lastTouch && mouseEventSimulated(e)) {
-				return;
-			} else {
-				return ($.event.dispatch || $.event.handle).call(this, e);
-			}
-		};
-	}());
-
-	// custom mousewheel/trackpad handler
-	(function() {
-		var wheelEvents = ('onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel DOMMouseScroll').split(' '),
-			shimEventName = 'jcf-mousewheel';
-
-		$.event.special[shimEventName] = {
-			setup: function() {
-				var self = this;
-				$.each(wheelEvents, function(index, fallbackEvent) {
-					if(self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);
-					else self['on' + fallbackEvent] = fixEvent;
-				});
-			},
-			teardown: function() {
-				var self = this;
-				$.each(wheelEvents, function(index, fallbackEvent) {
-					if(self.addEventListener) self.removeEventListener(fallbackEvent, fixEvent, false);
-					else self['on' + fallbackEvent] = null;
-				});
-			}
-		};
-
-		var fixEvent = function(e) {
-			var origEvent = e || window.event;
-			e = $.event.fix(origEvent);
-			e.type = shimEventName;
-		
-			// old wheel events handler
-			if('detail'      in origEvent) { e.deltaY = -origEvent.detail;      }
-			if('wheelDelta'  in origEvent) { e.deltaY = -origEvent.wheelDelta;  }
-			if('wheelDeltaY' in origEvent) { e.deltaY = -origEvent.wheelDeltaY; }
-			if('wheelDeltaX' in origEvent) { e.deltaX = -origEvent.wheelDeltaX; }
-
-			// modern wheel event handler
-			if('deltaY' in origEvent) {
-				e.deltaY = origEvent.deltaY;
-			}
-			if('deltaX' in origEvent) {
-				e.deltaX = origEvent.deltaX;
-			}
-
-			// handle deltaMode for mouse wheel
-			e.delta = e.deltaY || e.deltaX;
-			if (origEvent.deltaMode === 1) {
-				var lineHeight = 16;
-				e.delta *= lineHeight;
-				e.deltaY *= lineHeight;
-				e.deltaX *= lineHeight;
-			}
-
-			return ($.event.dispatch || $.event.handle).call(this, e);
-		};
-	}());
-
-	// extra module methods
-	var moduleMixin = {
-		// provide function for firing native events
-		fireNativeEvent: function(elements, eventName) {
-			$(elements).each(function() {
-				var element = this, eventObject;					
-				if(element.dispatchEvent) {
-					eventObject = document.createEvent('HTMLEvents');
-					eventObject.initEvent(eventName, true, true);
-					element.dispatchEvent(eventObject);
-				} else if(document.createEventObject) {
-					eventObject = document.createEventObject();
-					eventObject.target = element;
-					element.fireEvent('on' + eventName, eventObject);
-				}
-			});
-		},
-		// bind event handlers for module instance (functions beggining with "on")
-		bindHandlers: function() {
-			var self = this;
-			$.each(self, function(propName, propValue) {
-				if(propName.indexOf('on') === 0 && $.isFunction(propValue)) {
-					// dont use $.proxy here because it doesn't create unique handler
-					self[propName] = function() {
-						return propValue.apply(self, arguments);
-					};
-				}
-			});
-		}
-	};
-
-	// public API
-	var api = {
-		modules: {},
-		getOptions: function() {
-			return $.extend({}, commonOptions);
-		},
-		setOptions: function(moduleName, moduleOptions) {
-			if(arguments.length > 1) {
-				// set module options
-				if(this.modules[moduleName]) {
-					$.extend(this.modules[moduleName].prototype.options, moduleOptions);
-				}
-			} else {
-				// set common options
-				$.extend(commonOptions, moduleName);
-			}
-		},
-		addModule: function(proto) {
-			// add module to list
-			var Module = function(options) {
-				// save instance to collection
-				options.element.data(commonOptions.dataKey, this);
-				customInstances.push(this);
-
-				// save options
-				this.options = $.extend({}, commonOptions, this.options, options.element.data(commonOptions.optionsKey), options);
-
-				// bind event handlers to instance
-				this.bindHandlers();
-				
-				// call constructor
-				this.init.apply(this, arguments);
-			};
-
-			// set proto as prototype for new module
-			Module.prototype = proto;
-
-			// add mixin methods to module proto
-			$.extend(proto, moduleMixin);
-			if(proto.plugins) {
-				$.each(proto.plugins, function(pluginName, plugin) {
-					$.extend(plugin.prototype, moduleMixin);
-				});
-			}
-
-			// override destroy method
-			var originalDestroy = Module.prototype.destroy;
-			Module.prototype.destroy = function() {
-				this.options.element.removeData(this.options.dataKey);
-
-				for(var i = customInstances.length - 1; i >= 0; i--) {
-					if(customInstances[i] === this) {
-						customInstances.splice(i, 1);
-						break;
-					}
-				}
-
-				if(originalDestroy) {
-					originalDestroy.apply(this, arguments);
-				}
-			};
-
-			// save module to list
-			this.modules[proto.name] = Module;
-		},
-		getInstance: function(element) {
-			return $(element).data(commonOptions.dataKey);
-		},
-		replace: function(elements, moduleName, customOptions) {
-			var self = this,
-				instance;
-
-			if(!commonOptions.styleSheetCreated) {
-				createStyleSheet();
-			}
-
-			$(elements).each(function() {
-				var moduleOptions,
-					element = $(this);
-
-				instance = element.data(commonOptions.dataKey);
-				if(instance) {
-					instance.refresh();
-				} else {
-					if(!moduleName) {
-						$.each(self.modules, function(currentModuleName, module) {
-							if(module.prototype.matchElement.call(module.prototype, element)) {
-								moduleName = currentModuleName;
-								return false;
-							}
-						});
-					}
-					if(moduleName) {
-						moduleOptions = $.extend({element:element}, customOptions);
-						instance = new self.modules[moduleName](moduleOptions);
-					}
-				}
-			});
-			return instance;
-		},
-		refresh: function(elements) {
-			$(elements).each(function() {
-				var instance = $(this).data(commonOptions.dataKey);
-				if(instance) {
-					instance.refresh();
-				}
-			});
-		},
-		destroy: function(elements) {
-			$(elements).each(function() {
-				var instance = $(this).data(commonOptions.dataKey);
-				if(instance) {
-					instance.destroy();
-				}
-			});
-		},
-		replaceAll: function(context) {
-			var self = this;
-			$.each(this.modules, function(moduleName, module) {
-				$(module.prototype.selector, context).each(function() {
-					self.replace(this, moduleName);
-				});
-			});
-		},
-		refreshAll: function(context) {
-			if(context) {
-				$.each(this.modules, function(moduleName, module) {
-					$(module.prototype.selector, context).each(function() {
-						var instance = $(this).data(commonOptions.dataKey);
-						if(instance) {
-							instance.refresh();
-						}
-					});
-				});
-			} else {
-				for(var i = customInstances.length - 1; i >= 0; i--) {
-					customInstances[i].refresh();
-				}
-			}
-		},
-		destroyAll: function(context) {
-			var self = this;
-			if(context) {
-				$.each(this.modules, function(moduleName, module) {
-					$(module.prototype.selector, context).each(function(index, element) {
-						var instance = $(element).data(commonOptions.dataKey);
-						if(instance) {
-							instance.destroy();
-						}
-					});
-				});
-			} else {
-				while(customInstances.length) {
-					customInstances[0].destroy();
-				}
-			}
-		}
-	};
-
-	return api;
+/*!
+ * JavaScript Custom Forms
+ *
+ * Copyright 2014 PSD2HTML (http://psd2html.com)
+ * Released under the MIT license (LICENSE.txt)
+ * 
+ * Version: 1.0.2
+ */
+;(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory(require('jquery'));
+	} else {
+		root.jcf = factory(jQuery);
+	}
+}(this, function ($) {
+	'use strict';
+
+	// private variables
+	var customInstances = [];
+
+	// default global options
+	var commonOptions = {
+		optionsKey: 'jcf',
+		dataKey: 'jcf-instance',
+		rtlClass: 'jcf-rtl',
+		focusClass: 'jcf-focus',
+		pressedClass: 'jcf-pressed',
+		disabledClass: 'jcf-disabled',
+		hiddenClass: 'jcf-hidden',
+		resetAppearanceClass: 'jcf-reset-appearance',
+		unselectableClass: 'jcf-unselectable'
+	};
+
+	// detect device type
+	var isTouchDevice = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
+		isWinPhoneDevice = /Windows Phone/.test(navigator.userAgent);
+	commonOptions.isMobileDevice = !!(isTouchDevice || isWinPhoneDevice);
+
+	// create global stylesheet if custom forms are used
+	var createStyleSheet = function() {
+		var styleTag = $('<style>').appendTo('head'),
+			styleSheet = styleTag.prop('sheet') || styleTag.prop('styleSheet');
+
+		// crossbrowser style handling
+		var addCSSRule = function(selector, rules, index) {
+			if(styleSheet.insertRule) {
+				styleSheet.insertRule(selector + '{' + rules + '}', index);
+			} else {
+				styleSheet.addRule(selector, rules, index);
+			}
+		};
+
+		// add special rules
+		addCSSRule('.' + commonOptions.hiddenClass, 'position:absolute !important;left:-9999px !important;height:1px !important;width:1px !important;margin:0 !important;border-width:0 !important;-webkit-appearance:none;-moz-appearance:none;appearance:none');
+		addCSSRule('.' + commonOptions.rtlClass + '.' + commonOptions.hiddenClass, 'right:-9999px !important; left: auto !important');
+		addCSSRule('.' + commonOptions.unselectableClass, '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;');
+		addCSSRule('.' + commonOptions.resetAppearanceClass, 'background: none; border: none; -webkit-appearance: none; appearance: none; opacity: 0; filter: alpha(opacity=0);');
+
+		// detect rtl pages
+		var html = $('html'), body = $('body');
+		if(html.css('direction') === 'rtl' || body.css('direction') === 'rtl') {
+			html.addClass(commonOptions.rtlClass);
+		}
+
+		// handle form reset event
+		html.on('reset', function() {
+			setTimeout(function(){
+				api.refreshAll();
+			}, 0);
+		});
+
+		// mark stylesheet as created
+		commonOptions.styleSheetCreated = true;
+	};
+
+	// simplified pointer events handler
+	(function() {
+		var pointerEventsSupported = navigator.pointerEnabled || navigator.msPointerEnabled,
+			touchEventsSupported = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
+			eventList, eventMap = {}, eventPrefix = 'jcf-';
+
+		// detect events to attach
+		if(pointerEventsSupported) {
+			eventList = {
+				pointerover: navigator.pointerEnabled ? 'pointerover' : 'MSPointerOver',
+				pointerdown: navigator.pointerEnabled ? 'pointerdown' : 'MSPointerDown',
+				pointermove: navigator.pointerEnabled ? 'pointermove' : 'MSPointerMove',
+				pointerup: navigator.pointerEnabled ? 'pointerup' : 'MSPointerUp'
+			};
+		} else {
+			eventList = {
+				pointerover: 'mouseover',
+				pointerdown: 'mousedown' + (touchEventsSupported ? ' touchstart' : ''),
+				pointermove: 'mousemove' + (touchEventsSupported ? ' touchmove' : ''),
+				pointerup: 'mouseup' + (touchEventsSupported ? ' touchend' : '')
+			};
+		}
+
+		// create event map
+		$.each(eventList, function(targetEventName, fakeEventList) {
+			$.each(fakeEventList.split(' '), function(index, fakeEventName) {
+				eventMap[fakeEventName] = targetEventName;
+			});
+		});
+
+		// jQuery event hooks
+		$.each(eventList, function(eventName, eventHandlers) {
+			eventHandlers = eventHandlers.split(' ');
+			$.event.special[eventPrefix + eventName] = {
+				setup: function() {
+					var self = this;
+					$.each(eventHandlers, function(index, fallbackEvent) {
+						if(self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);
+						else self['on' + fallbackEvent] = fixEvent;
+					});
+				},
+				teardown: function() {
+					var self = this;
+					$.each(eventHandlers, function(index, fallbackEvent) {
+						if(self.addEventListener) self.removeEventListener(fallbackEvent, fixEvent, false);
+						else self['on' + fallbackEvent] = null;
+					});
+				}
+			};
+		});
+
+		// check that mouse event are not simulated by mobile browsers
+		var lastTouch = null;
+		var mouseEventSimulated = function(e) {
+			var dx = Math.abs(e.pageX - lastTouch.x),
+				dy = Math.abs(e.pageY - lastTouch.y),
+				rangeDistance = 25;
+
+			if (dx <= rangeDistance && dy <= rangeDistance) {
+				return true;
+			}
+		};
+
+		// normalize event
+		var fixEvent = function(e) {
+			var origEvent = e || window.event,
+				touchEventData = null,
+				targetEventName = eventMap[origEvent.type];
+
+			e = $.event.fix(origEvent);
+			e.type = eventPrefix + targetEventName;
+
+			if(origEvent.pointerType) {
+				switch(origEvent.pointerType) {
+					case 2: e.pointerType = 'touch'; break;
+					case 3: e.pointerType = 'pen'; break;
+					case 4: e.pointerType = 'mouse'; break;
+					default: e.pointerType = origEvent.pointerType;
+				}
+			} else {
+				e.pointerType = origEvent.type.substr(0,5); // "mouse" or "touch" word length
+			}
+
+			if(!e.pageX && !e.pageY) {
+				touchEventData = origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent;
+				e.pageX = touchEventData.pageX;
+				e.pageY = touchEventData.pageY;
+			}
+
+			if(origEvent.type === 'touchend') {
+				lastTouch = {x: e.pageX, y: e.pageY};
+			}
+			if(e.pointerType === 'mouse' && lastTouch && mouseEventSimulated(e)) {
+				return;
+			} else {
+				return ($.event.dispatch || $.event.handle).call(this, e);
+			}
+		};
+	}());
+
+	// custom mousewheel/trackpad handler
+	(function() {
+		var wheelEvents = ('onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel DOMMouseScroll').split(' '),
+			shimEventName = 'jcf-mousewheel';
+
+		$.event.special[shimEventName] = {
+			setup: function() {
+				var self = this;
+				$.each(wheelEvents, function(index, fallbackEvent) {
+					if(self.addEventListener) self.addEventListener(fallbackEvent, fixEvent, false);
+					else self['on' + fallbackEvent] = fixEvent;
+				});
+			},
+			teardown: function() {
+				var self = this;
+				$.each(wheelEvents, function(index, fallbackEvent) {
+					if(self.addEventListener) self.removeEventListener(fallbackEvent, fixEvent, false);
+					else self['on' + fallbackEvent] = null;
+				});
+			}
+		};
+
+		var fixEvent = function(e) {
+			var origEvent = e || window.event;
+			e = $.event.fix(origEvent);
+			e.type = shimEventName;
+		
+			// old wheel events handler
+			if('detail'      in origEvent) { e.deltaY = -origEvent.detail;      }
+			if('wheelDelta'  in origEvent) { e.deltaY = -origEvent.wheelDelta;  }
+			if('wheelDeltaY' in origEvent) { e.deltaY = -origEvent.wheelDeltaY; }
+			if('wheelDeltaX' in origEvent) { e.deltaX = -origEvent.wheelDeltaX; }
+
+			// modern wheel event handler
+			if('deltaY' in origEvent) {
+				e.deltaY = origEvent.deltaY;
+			}
+			if('deltaX' in origEvent) {
+				e.deltaX = origEvent.deltaX;
+			}
+
+			// handle deltaMode for mouse wheel
+			e.delta = e.deltaY || e.deltaX;
+			if (origEvent.deltaMode === 1) {
+				var lineHeight = 16;
+				e.delta *= lineHeight;
+				e.deltaY *= lineHeight;
+				e.deltaX *= lineHeight;
+			}
+
+			return ($.event.dispatch || $.event.handle).call(this, e);
+		};
+	}());
+
+	// extra module methods
+	var moduleMixin = {
+		// provide function for firing native events
+		fireNativeEvent: function(elements, eventName) {
+			$(elements).each(function() {
+				var element = this, eventObject;					
+				if(element.dispatchEvent) {
+					eventObject = document.createEvent('HTMLEvents');
+					eventObject.initEvent(eventName, true, true);
+					element.dispatchEvent(eventObject);
+				} else if(document.createEventObject) {
+					eventObject = document.createEventObject();
+					eventObject.target = element;
+					element.fireEvent('on' + eventName, eventObject);
+				}
+			});
+		},
+		// bind event handlers for module instance (functions beggining with "on")
+		bindHandlers: function() {
+			var self = this;
+			$.each(self, function(propName, propValue) {
+				if(propName.indexOf('on') === 0 && $.isFunction(propValue)) {
+					// dont use $.proxy here because it doesn't create unique handler
+					self[propName] = function() {
+						return propValue.apply(self, arguments);
+					};
+				}
+			});
+		}
+	};
+
+	// public API
+	var api = {
+		modules: {},
+		getOptions: function() {
+			return $.extend({}, commonOptions);
+		},
+		setOptions: function(moduleName, moduleOptions) {
+			if(arguments.length > 1) {
+				// set module options
+				if(this.modules[moduleName]) {
+					$.extend(this.modules[moduleName].prototype.options, moduleOptions);
+				}
+			} else {
+				// set common options
+				$.extend(commonOptions, moduleName);
+			}
+		},
+		addModule: function(proto) {
+			// add module to list
+			var Module = function(options) {
+				// save instance to collection
+				options.element.data(commonOptions.dataKey, this);
+				customInstances.push(this);
+
+				// save options
+				this.options = $.extend({}, commonOptions, this.options, options.element.data(commonOptions.optionsKey), options);
+
+				// bind event handlers to instance
+				this.bindHandlers();
+				
+				// call constructor
+				this.init.apply(this, arguments);
+			};
+
+			// set proto as prototype for new module
+			Module.prototype = proto;
+
+			// add mixin methods to module proto
+			$.extend(proto, moduleMixin);
+			if(proto.plugins) {
+				$.each(proto.plugins, function(pluginName, plugin) {
+					$.extend(plugin.prototype, moduleMixin);
+				});
+			}
+
+			// override destroy method
+			var originalDestroy = Module.prototype.destroy;
+			Module.prototype.destroy = function() {
+				this.options.element.removeData(this.options.dataKey);
+
+				for(var i = customInstances.length - 1; i >= 0; i--) {
+					if(customInstances[i] === this) {
+						customInstances.splice(i, 1);
+						break;
+					}
+				}
+
+				if(originalDestroy) {
+					originalDestroy.apply(this, arguments);
+				}
+			};
+
+			// save module to list
+			this.modules[proto.name] = Module;
+		},
+		getInstance: function(element) {
+			return $(element).data(commonOptions.dataKey);
+		},
+		replace: function(elements, moduleName, customOptions) {
+			var self = this,
+				instance;
+
+			if(!commonOptions.styleSheetCreated) {
+				createStyleSheet();
+			}
+
+			$(elements).each(function() {
+				var moduleOptions,
+					element = $(this);
+
+				instance = element.data(commonOptions.dataKey);
+				if(instance) {
+					instance.refresh();
+				} else {
+					if(!moduleName) {
+						$.each(self.modules, function(currentModuleName, module) {
+							if(module.prototype.matchElement.call(module.prototype, element)) {
+								moduleName = currentModuleName;
+								return false;
+							}
+						});
+					}
+					if(moduleName) {
+						moduleOptions = $.extend({element:element}, customOptions);
+						instance = new self.modules[moduleName](moduleOptions);
+					}
+				}
+			});
+			return instance;
+		},
+		refresh: function(elements) {
+			$(elements).each(function() {
+				var instance = $(this).data(commonOptions.dataKey);
+				if(instance) {
+					instance.refresh();
+				}
+			});
+		},
+		destroy: function(elements) {
+			$(elements).each(function() {
+				var instance = $(this).data(commonOptions.dataKey);
+				if(instance) {
+					instance.destroy();
+				}
+			});
+		},
+		replaceAll: function(context) {
+			var self = this;
+			$.each(this.modules, function(moduleName, module) {
+				$(module.prototype.selector, context).each(function() {
+					self.replace(this, moduleName);
+				});
+			});
+		},
+		refreshAll: function(context) {
+			if(context) {
+				$.each(this.modules, function(moduleName, module) {
+					$(module.prototype.selector, context).each(function() {
+						var instance = $(this).data(commonOptions.dataKey);
+						if(instance) {
+							instance.refresh();
+						}
+					});
+				});
+			} else {
+				for(var i = customInstances.length - 1; i >= 0; i--) {
+					customInstances[i].refresh();
+				}
+			}
+		},
+		destroyAll: function(context) {
+			var self = this;
+			if(context) {
+				$.each(this.modules, function(moduleName, module) {
+					$(module.prototype.selector, context).each(function(index, element) {
+						var instance = $(element).data(commonOptions.dataKey);
+						if(instance) {
+							instance.destroy();
+						}
+					});
+				});
+			} else {
+				while(customInstances.length) {
+					customInstances[0].destroy();
+				}
+			}
+		}
+	};
+
+	return api;
 }));
\ No newline at end of file
diff --git a/js/jcf.radio.js b/js/jcf.radio.js
index 9a27fba..060be21 100755
--- a/js/jcf.radio.js
+++ b/js/jcf.radio.js
@@ -1,191 +1,191 @@
-/*!
- * JavaScript Custom Forms : Radio Module
- *
- * Copyright 2014 PSD2HTML (http://psd2html.com)
- * Released under the MIT license (LICENSE.txt)
- * 
- * Version: 1.0.2
- */
-;(function($, window) {
-	'use strict';
-
-	jcf.addModule({
-		name: 'Radio',
-		selector: 'input[type="radio"]',
-		options: {
-			wrapNative: true,
-			checkedClass: 'jcf-checked',
-			uncheckedClass: 'jcf-unchecked',
-			labelActiveClass: 'jcf-label-active',
-			fakeStructure: '<span class="jcf-radio"><span></span></span>'
-		},
-		matchElement: function(element) {
-			return element.is(':radio');
-		},
-		init: function(options) {
-			this.initStructure();
-			this.attachEvents();
-			this.refresh();
-		},
-		initStructure: function() {
-			// prepare structure
-			this.doc = $(document);
-			this.realElement = $(this.options.element);
-			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
-			this.labelElement = this.getLabelFor();
-
-			if(this.options.wrapNative) {
-				// wrap native radio inside fake block
-				this.realElement.prependTo(this.fakeElement).css({
-					position: 'absolute',
-					opacity: 0
-				});
-			} else {
-				// just hide native radio
-				this.realElement.addClass(this.options.hiddenClass);
-			}
-		},
-		attachEvents: function() {
-			// add event handlers
-			this.realElement.on({
-				focus: this.onFocus,
-				click: this.onRealClick
-			});
-			this.fakeElement.on('click', this.onFakeClick);
-			this.fakeElement.on('jcf-pointerdown', this.onPress);
-		},
-		onRealClick: function(e) {
-			// redraw current radio and its group (setTimeout handles click that might be prevented)
-			var self = this;
-			this.savedEventObject = e;
-			setTimeout(function() {
-				self.refreshRadioGroup();
-			}, 0);
-		},
-		onFakeClick: function(e) {
-			// skip event if clicked on real element inside wrapper
-			if(this.options.wrapNative && this.realElement.is(e.target)) {
-				return;
-			}
-
-			// toggle checked class
-			if(!this.realElement.is(':disabled')) {
-				delete this.savedEventObject;
-				this.currentActiveRadio = this.getCurrentActiveRadio();
-				this.stateChecked = this.realElement.prop('checked');
-				this.realElement.prop('checked', true);
-				this.fireNativeEvent(this.realElement, 'click');
-				if(this.savedEventObject && this.savedEventObject.isDefaultPrevented()) {
-					this.realElement.prop('checked', this.stateChecked);
-					this.currentActiveRadio.prop('checked', true);
-				} else {
-					this.fireNativeEvent(this.realElement, 'change');
-				}
-				delete this.savedEventObject;
-			}
-		},
-		onFocus: function() {
-			if(!this.pressedFlag || !this.focusedFlag) {
-				this.focusedFlag = true;
-				this.fakeElement.addClass(this.options.focusClass);
-				this.realElement.on('blur', this.onBlur);
-			}
-		},
-		onBlur: function() {
-			if(!this.pressedFlag) {
-				this.focusedFlag = false;
-				this.fakeElement.removeClass(this.options.focusClass);
-				this.realElement.off('blur', this.onBlur);
-			}
-		},
-		onPress: function(e) {
-			if(!this.focusedFlag && e.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-			this.pressedFlag = true;
-			this.fakeElement.addClass(this.options.pressedClass);
-			this.doc.on('jcf-pointerup', this.onRelease);
-		},
-		onRelease: function(e) {
-			if(this.focusedFlag && e.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-			this.pressedFlag = false;
-			this.fakeElement.removeClass(this.options.pressedClass);
-			this.doc.off('jcf-pointerup', this.onRelease);
-		},
-		getCurrentActiveRadio: function() {
-			return this.getRadioGroup(this.realElement).filter(':checked');
-		},
-		getRadioGroup: function(radio) {
-			// find radio group for specified radio button
-			var name = radio.attr('name'),
-				parentForm = radio.parents('form');
-
-			if(name) {
-				if(parentForm.length) {
-					return parentForm.find('input[name="' + name + '"]');
-				} else {
-					return $('input[name="' + name + '"]:not(form input)');
-				}
-			} else {
-				return radio;
-			}
-		},
-		getLabelFor: function() {
-			var parentLabel = this.realElement.closest('label'),
-				elementId = this.realElement.prop('id');
-
-			if(!parentLabel.length && elementId) {
-				parentLabel = $('label[for="' + elementId + '"]');
-			}
-			return parentLabel.length ? parentLabel : null;
-		},
-		refreshRadioGroup: function() {
-			// redraw current radio and its group
-			this.getRadioGroup(this.realElement).each(function() {
-				jcf.refresh(this);
-			});
-		},
-		refresh: function() {
-			// redraw current radio button
-			var isChecked = this.realElement.is(':checked'),
-				isDisabled = this.realElement.is(':disabled');
-
-			this.fakeElement.toggleClass(this.options.checkedClass, isChecked)
-							.toggleClass(this.options.uncheckedClass, !isChecked)
-							.toggleClass(this.options.disabledClass, isDisabled);
-
-			if(this.labelElement) {
-				this.labelElement.toggleClass(this.options.labelActiveClass, isChecked);
-			}
-		},
-		destroy: function() {
-			// restore structure
-			if(this.options.wrapNative) {
-				this.realElement.insertBefore(this.fakeElement).css({
-					position: '',
-					width: '',
-					height: '',
-					opacity: '',
-					margin: ''
-				});
-			} else {
-				this.realElement.removeClass(this.options.hiddenClass);
-			}
-
-			// removing element will also remove its event handlers
-			this.fakeElement.off('jcf-pointerdown', this.onPress);
-			this.fakeElement.remove();
-
-			// remove other event handlers
-			this.doc.off('jcf-pointerup', this.onRelease);
-			this.realElement.off({
-				blur: this.onBlur,
-				focus: this.onFocus,
-				click: this.onRealClick
-			});
-		}
-	});
-
+/*!
+ * JavaScript Custom Forms : Radio Module
+ *
+ * Copyright 2014 PSD2HTML (http://psd2html.com)
+ * Released under the MIT license (LICENSE.txt)
+ * 
+ * Version: 1.0.2
+ */
+;(function($, window) {
+	'use strict';
+
+	jcf.addModule({
+		name: 'Radio',
+		selector: 'input[type="radio"]',
+		options: {
+			wrapNative: true,
+			checkedClass: 'jcf-checked',
+			uncheckedClass: 'jcf-unchecked',
+			labelActiveClass: 'jcf-label-active',
+			fakeStructure: '<span class="jcf-radio"><span></span></span>'
+		},
+		matchElement: function(element) {
+			return element.is(':radio');
+		},
+		init: function(options) {
+			this.initStructure();
+			this.attachEvents();
+			this.refresh();
+		},
+		initStructure: function() {
+			// prepare structure
+			this.doc = $(document);
+			this.realElement = $(this.options.element);
+			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
+			this.labelElement = this.getLabelFor();
+
+			if(this.options.wrapNative) {
+				// wrap native radio inside fake block
+				this.realElement.prependTo(this.fakeElement).css({
+					position: 'absolute',
+					opacity: 0
+				});
+			} else {
+				// just hide native radio
+				this.realElement.addClass(this.options.hiddenClass);
+			}
+		},
+		attachEvents: function() {
+			// add event handlers
+			this.realElement.on({
+				focus: this.onFocus,
+				click: this.onRealClick
+			});
+			this.fakeElement.on('click', this.onFakeClick);
+			this.fakeElement.on('jcf-pointerdown', this.onPress);
+		},
+		onRealClick: function(e) {
+			// redraw current radio and its group (setTimeout handles click that might be prevented)
+			var self = this;
+			this.savedEventObject = e;
+			setTimeout(function() {
+				self.refreshRadioGroup();
+			}, 0);
+		},
+		onFakeClick: function(e) {
+			// skip event if clicked on real element inside wrapper
+			if(this.options.wrapNative && this.realElement.is(e.target)) {
+				return;
+			}
+
+			// toggle checked class
+			if(!this.realElement.is(':disabled')) {
+				delete this.savedEventObject;
+				this.currentActiveRadio = this.getCurrentActiveRadio();
+				this.stateChecked = this.realElement.prop('checked');
+				this.realElement.prop('checked', true);
+				this.fireNativeEvent(this.realElement, 'click');
+				if(this.savedEventObject && this.savedEventObject.isDefaultPrevented()) {
+					this.realElement.prop('checked', this.stateChecked);
+					this.currentActiveRadio.prop('checked', true);
+				} else {
+					this.fireNativeEvent(this.realElement, 'change');
+				}
+				delete this.savedEventObject;
+			}
+		},
+		onFocus: function() {
+			if(!this.pressedFlag || !this.focusedFlag) {
+				this.focusedFlag = true;
+				this.fakeElement.addClass(this.options.focusClass);
+				this.realElement.on('blur', this.onBlur);
+			}
+		},
+		onBlur: function() {
+			if(!this.pressedFlag) {
+				this.focusedFlag = false;
+				this.fakeElement.removeClass(this.options.focusClass);
+				this.realElement.off('blur', this.onBlur);
+			}
+		},
+		onPress: function(e) {
+			if(!this.focusedFlag && e.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+			this.pressedFlag = true;
+			this.fakeElement.addClass(this.options.pressedClass);
+			this.doc.on('jcf-pointerup', this.onRelease);
+		},
+		onRelease: function(e) {
+			if(this.focusedFlag && e.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+			this.pressedFlag = false;
+			this.fakeElement.removeClass(this.options.pressedClass);
+			this.doc.off('jcf-pointerup', this.onRelease);
+		},
+		getCurrentActiveRadio: function() {
+			return this.getRadioGroup(this.realElement).filter(':checked');
+		},
+		getRadioGroup: function(radio) {
+			// find radio group for specified radio button
+			var name = radio.attr('name'),
+				parentForm = radio.parents('form');
+
+			if(name) {
+				if(parentForm.length) {
+					return parentForm.find('input[name="' + name + '"]');
+				} else {
+					return $('input[name="' + name + '"]:not(form input)');
+				}
+			} else {
+				return radio;
+			}
+		},
+		getLabelFor: function() {
+			var parentLabel = this.realElement.closest('label'),
+				elementId = this.realElement.prop('id');
+
+			if(!parentLabel.length && elementId) {
+				parentLabel = $('label[for="' + elementId + '"]');
+			}
+			return parentLabel.length ? parentLabel : null;
+		},
+		refreshRadioGroup: function() {
+			// redraw current radio and its group
+			this.getRadioGroup(this.realElement).each(function() {
+				jcf.refresh(this);
+			});
+		},
+		refresh: function() {
+			// redraw current radio button
+			var isChecked = this.realElement.is(':checked'),
+				isDisabled = this.realElement.is(':disabled');
+
+			this.fakeElement.toggleClass(this.options.checkedClass, isChecked)
+							.toggleClass(this.options.uncheckedClass, !isChecked)
+							.toggleClass(this.options.disabledClass, isDisabled);
+
+			if(this.labelElement) {
+				this.labelElement.toggleClass(this.options.labelActiveClass, isChecked);
+			}
+		},
+		destroy: function() {
+			// restore structure
+			if(this.options.wrapNative) {
+				this.realElement.insertBefore(this.fakeElement).css({
+					position: '',
+					width: '',
+					height: '',
+					opacity: '',
+					margin: ''
+				});
+			} else {
+				this.realElement.removeClass(this.options.hiddenClass);
+			}
+
+			// removing element will also remove its event handlers
+			this.fakeElement.off('jcf-pointerdown', this.onPress);
+			this.fakeElement.remove();
+
+			// remove other event handlers
+			this.doc.off('jcf-pointerup', this.onRelease);
+			this.realElement.off({
+				blur: this.onBlur,
+				focus: this.onFocus,
+				click: this.onRealClick
+			});
+		}
+	});
+
 }(jQuery, this));
\ No newline at end of file
diff --git a/js/jcf.scrollable.js b/js/jcf.scrollable.js
index d1cb3e4..3d54782 100755
--- a/js/jcf.scrollable.js
+++ b/js/jcf.scrollable.js
@@ -1,587 +1,587 @@
-/*!
- * JavaScript Custom Forms : Scrollbar Module
- *
- * Copyright 2014 PSD2HTML (http://psd2html.com)
- * Released under the MIT license (LICENSE.txt)
- * 
- * Version: 1.0.2
- */
-;(function($, window) {
-	'use strict';
-
-	jcf.addModule({
-		name: 'Scrollable',
-		selector: '.jcf-scrollable',
-		plugins: {
-			ScrollBar: ScrollBar
-		},
-		options: {
-			mouseWheelStep: 150,
-			handleResize: true,
-			alwaysShowScrollbars: false,
-			alwaysPreventMouseWheel: false,
-			scrollAreaStructure: '<div class="jcf-scrollable-wrapper"></div>'
-		},
-		matchElement: function(element) {
-			return element.is('.jcf-scrollable');
-		},
-		init: function(options) {
-			this.initStructure();
-			this.attachEvents();
-			this.rebuildScrollbars();
-		},
-		initStructure: function() {
-			// prepare structure
-			this.doc = $(document);
-			this.win = $(window);
-			this.realElement = $(this.options.element);
-			this.scrollWrapper = $(this.options.scrollAreaStructure).insertAfter(this.realElement);
-
-			// set initial styles
-			this.scrollWrapper.css('position', 'relative');
-			this.realElement.css('overflow', 'hidden');
-			this.vBarEdge = 0;
-		},
-		attachEvents: function() {
-			// create scrollbars
-			var self = this;
-			this.vBar = new ScrollBar({
-				holder: this.scrollWrapper,
-				vertical: true,
-				onScroll: function(scrollTop) {
-					self.realElement.scrollTop(scrollTop);
-				}
-			});
-			this.hBar = new ScrollBar({
-				holder: this.scrollWrapper,
-				vertical: false,
-				onScroll: function(scrollLeft) {
-					self.realElement.scrollLeft(scrollLeft);
-				}
-			});
-
-			// add event handlers
-			this.realElement.on('scroll', this.onScroll);
-			if(this.options.handleResize) {
-				this.win.on('resize orientationchange load', this.onResize);
-			}
-
-			// add pointer/wheel event handlers
-			this.realElement.on('jcf-mousewheel', this.onMouseWheel);
-			this.realElement.on('jcf-pointerdown', this.onTouchBody);
-		},
-		onScroll: function() {
-			this.redrawScrollbars();
-		},
-		onResize: function() {
-			// do not rebuild scrollbars if form field is in focus
-			if(!$(document.activeElement).is(':input')) {
-				this.rebuildScrollbars();
-			}
-		},
-		onTouchBody: function(e) {
-			if(e.pointerType === 'touch') {
-				this.touchData = {
-					scrollTop: this.realElement.scrollTop(),
-					scrollLeft: this.realElement.scrollLeft(),
-					left: e.pageX,
-					top: e.pageY
-				};
-				this.doc.on({
-					'jcf-pointermove': this.onMoveBody,
-					'jcf-pointerup': this.onReleaseBody
-				});
-			}
-		},
-		onMoveBody: function(e) {
-			var targetScrollTop,
-				targetScrollLeft,
-				verticalScrollAllowed = this.verticalScrollActive,
-				horizontalScrollAllowed = this.horizontalScrollActive;
-
-			if(e.pointerType === 'touch') {
-				targetScrollTop = this.touchData.scrollTop - e.pageY + this.touchData.top;
-				targetScrollLeft = this.touchData.scrollLeft - e.pageX + this.touchData.left;
-
-				// check that scrolling is ended and release outer scrolling
-				if(this.verticalScrollActive && (targetScrollTop < 0 || targetScrollTop > this.vBar.maxValue)) {
-					verticalScrollAllowed = false;
-				}
-				if(this.horizontalScrollActive && (targetScrollLeft < 0 || targetScrollLeft > this.hBar.maxValue)) {
-					horizontalScrollAllowed = false;
-				}
-
-				this.realElement.scrollTop(targetScrollTop);
-				this.realElement.scrollLeft(targetScrollLeft);
-
-				if(verticalScrollAllowed || horizontalScrollAllowed) {
-					e.preventDefault();
-				} else {
-					this.onReleaseBody(e);
-				}
-			}
-		},
-		onReleaseBody: function(e) {
-			if(e.pointerType === 'touch') {
-				delete this.touchData;
-				this.doc.off({
-					'jcf-pointermove': this.onMoveBody,
-					'jcf-pointerup': this.onReleaseBody
-				});
-			}
-		},
-		onMouseWheel: function(e) {
-			var currentScrollTop = this.realElement.scrollTop(),
-				currentScrollLeft = this.realElement.scrollLeft(),
-				maxScrollTop = this.realElement.prop('scrollHeight') - this.embeddedDimensions.innerHeight,
-				maxScrollLeft = this.realElement.prop('scrollWidth') - this.embeddedDimensions.innerWidth,
-				extraLeft, extraTop, preventFlag;
-
-			// check edge cases
-			if(!this.options.alwaysPreventMouseWheel) {
-				if(this.verticalScrollActive && e.deltaY) {
-					if(!(currentScrollTop <= 0 && e.deltaY < 0) && !(currentScrollTop >= maxScrollTop && e.deltaY > 0)) {
-						preventFlag = true;
-					}
-				}
-				if(this.horizontalScrollActive && e.deltaX) {
-					if(!(currentScrollLeft <= 0 && e.deltaX < 0) && !(currentScrollLeft >= maxScrollLeft && e.deltaX > 0)) {
-						preventFlag = true;
-					}
-				}
-				if(!this.verticalScrollActive && !this.horizontalScrollActive) {
-					return;
-				}
-			}
-
-			// prevent default action and scroll item
-			if(preventFlag || this.options.alwaysPreventMouseWheel) {
-				e.preventDefault();
-			} else {
-				return;
-			}
-
-			extraLeft = e.deltaX / 100 * this.options.mouseWheelStep;
-			extraTop = e.deltaY / 100 * this.options.mouseWheelStep;
-
-			this.realElement.scrollTop(currentScrollTop + extraTop);
-			this.realElement.scrollLeft(currentScrollLeft + extraLeft);
-		},
-		setScrollBarEdge: function(edgeSize) {
-			this.vBarEdge = edgeSize || 0;
-			this.redrawScrollbars();
-		},
-		saveElementDimensions: function() {
-			this.savedDimensions = {
-				top: this.realElement.width(),
-				left: this.realElement.height()
-			};
-			return this;
-		},
-		restoreElementDimensions: function() {
-			if(this.savedDimensions) {
-				this.realElement.css({
-					width: this.savedDimensions.width,
-					height: this.savedDimensions.height
-				});
-			}
-			return this;
-		},
-		saveScrollOffsets: function() {
-			this.savedOffsets = {
-				top: this.realElement.scrollTop(),
-				left: this.realElement.scrollLeft()
-			};
-			return this;
-		},
-		restoreScrollOffsets: function() {
-			if(this.savedOffsets) {
-				this.realElement.scrollTop(this.savedOffsets.top);
-				this.realElement.scrollLeft(this.savedOffsets.left);
-			}
-			return this;
-		},
-		getContainerDimensions: function() {
-			// save current styles
-			var desiredDimensions,
-				currentStyles,
-				currentHeight,
-				currentWidth;
-
-			if(this.isModifiedStyles) {
-				desiredDimensions = {
-					width: this.realElement.innerWidth() + this.vBar.getThickness(),
-					height: this.realElement.innerHeight() + this.hBar.getThickness()
-				};
-			} else {
-				// unwrap real element and measure it according to CSS
-				this.saveElementDimensions().saveScrollOffsets();
-				this.realElement.insertAfter(this.scrollWrapper);
-				this.scrollWrapper.detach();
-
-				// measure element
-				currentStyles = this.realElement.prop('style');
-				currentWidth = parseFloat(currentStyles.width);
-				currentHeight = parseFloat(currentStyles.height);
-
-				// reset styles if needed
-				if(this.embeddedDimensions && currentWidth && currentHeight) {
-					this.isModifiedStyles |= (currentWidth !== this.embeddedDimensions.width || currentHeight !== this.embeddedDimensions.height);
-					this.realElement.css({
-						overflow: '',
-						width: '',
-						height: ''
-					});
-				}
-
-				// calculate desired dimensions for real element
-				desiredDimensions = {
-					width: this.realElement.outerWidth(),
-					height: this.realElement.outerHeight()
-				};
-
-				// restore structure and original scroll offsets
-				this.scrollWrapper.insertAfter(this.realElement);
-				this.realElement.css('overflow', 'hidden').prependTo(this.scrollWrapper);
-				this.restoreElementDimensions().restoreScrollOffsets();
-			}
-			
-			return desiredDimensions;
-		},
-		getEmbeddedDimensions: function(dimensions) {
-			// handle scrollbars cropping
-			var fakeBarWidth = this.vBar.getThickness(),
-				fakeBarHeight = this.hBar.getThickness(),
-				paddingWidth = this.realElement.outerWidth() - this.realElement.width(),
-				paddingHeight = this.realElement.outerHeight() - this.realElement.height(),
-				resultDimensions;
-
-			if(this.options.alwaysShowScrollbars) {
-				// simply return dimensions without custom scrollbars
-				this.verticalScrollActive = true;
-				this.horizontalScrollActive = true;
-				resultDimensions = {
-					innerWidth: dimensions.width - fakeBarWidth,
-					innerHeight: dimensions.height - fakeBarHeight
-				};
-			} else {
-				// detect when to display each scrollbar
-				this.saveElementDimensions();
-				this.verticalScrollActive = false;
-				this.horizontalScrollActive = false;
-
-				// fill container with full size
-				this.realElement.css({
-					width: dimensions.width - paddingWidth,
-					height: dimensions.height - paddingHeight
-				});
-
-				this.horizontalScrollActive = this.realElement.prop('scrollWidth') > this.containerDimensions.width;
-				this.verticalScrollActive = this.realElement.prop('scrollHeight') > this.containerDimensions.height;
-				
-				this.restoreElementDimensions();
-				resultDimensions = {
-					innerWidth: dimensions.width - (this.verticalScrollActive ? fakeBarWidth : 0),
-					innerHeight: dimensions.height - (this.horizontalScrollActive ? fakeBarHeight : 0)
-				};
-			}
-			$.extend(resultDimensions, {
-				width: resultDimensions.innerWidth - paddingWidth,
-				height: resultDimensions.innerHeight - paddingHeight
-			});
-			return resultDimensions;
-		},
-		rebuildScrollbars: function() {
-			// resize wrapper according to real element styles
-			this.containerDimensions = this.getContainerDimensions();
-			this.embeddedDimensions = this.getEmbeddedDimensions(this.containerDimensions);
-
-			// resize wrapper to desired dimensions
-			this.scrollWrapper.css({
-				width: this.containerDimensions.width,
-				height: this.containerDimensions.height
-			});
-
-			// resize element inside wrapper excluding scrollbar size
-			this.realElement.css({
-				overflow: 'hidden',
-				width: this.embeddedDimensions.width,
-				height: this.embeddedDimensions.height
-			});
-
-			// redraw scrollbar offset
-			this.redrawScrollbars();
-		},
-		redrawScrollbars: function() {
-			var viewSize, maxScrollValue;
-
-			// redraw vertical scrollbar
-			if(this.verticalScrollActive) {
-				viewSize = this.vBarEdge ? this.containerDimensions.height - this.vBarEdge : this.embeddedDimensions.innerHeight;
-				maxScrollValue = this.realElement.prop('scrollHeight') - this.vBarEdge;
-
-				this.vBar.show().setMaxValue(maxScrollValue - viewSize).setRatio(viewSize / maxScrollValue).setSize(viewSize);
-				this.vBar.setValue(this.realElement.scrollTop());
-			} else {
-				this.vBar.hide();
-			}
-
-			// redraw horizontal scrollbar
-			if(this.horizontalScrollActive) {
-				viewSize = this.embeddedDimensions.innerWidth;
-				maxScrollValue = this.realElement.prop('scrollWidth');
-
-				if(maxScrollValue === viewSize) {
-					this.horizontalScrollActive = false;
-				}
-				this.hBar.show().setMaxValue(maxScrollValue - viewSize).setRatio(viewSize / maxScrollValue).setSize(viewSize);
-				this.hBar.setValue(this.realElement.scrollLeft());
-			} else {
-				this.hBar.hide();				
-			}
-
-			// set "touch-action" style rule
-			var touchAction = '';
-			if(this.verticalScrollActive && this.horizontalScrollActive) {
-				touchAction = 'none';
-			} else if(this.verticalScrollActive) {
-				touchAction = 'pan-x';
-			} else if(this.horizontalScrollActive) {
-				touchAction = 'pan-y';
-			}
-			this.realElement.css('touchAction', touchAction);
-		},
-		refresh: function() {
-			this.rebuildScrollbars();
-		},	
-		destroy: function() {
-			// remove event listeners
-			this.win.off('resize orientationchange load', this.onResize);
-			this.realElement.off({
-				'jcf-mousewheel': this.onMouseWheel,
-				'jcf-pointerdown': this.onTouchBody
-			});
-			this.doc.off({
-				'jcf-pointermove': this.onMoveBody,
-				'jcf-pointerup': this.onReleaseBody
-			});
-			
-			// restore structure
-			this.saveScrollOffsets();
-			this.vBar.destroy();
-			this.hBar.destroy();
-			this.realElement.insertAfter(this.scrollWrapper).css({
-				touchAction: '',
-				overflow: '',
-				width: '',
-				height: ''
-			});
-			this.scrollWrapper.remove();
-			this.restoreScrollOffsets();
-		}
-	});
-
-	// custom scrollbar
-	function ScrollBar(options) {
-		this.options = $.extend({
-			holder: null,
-			vertical: true,
-			inactiveClass: 'jcf-inactive',
-			verticalClass: 'jcf-scrollbar-vertical',
-			horizontalClass: 'jcf-scrollbar-horizontal',
-			scrollbarStructure: '<div class="jcf-scrollbar"><div class="jcf-scrollbar-dec"></div><div class="jcf-scrollbar-slider"><div class="jcf-scrollbar-handle"></div></div><div class="jcf-scrollbar-inc"></div></div>',
-			btnDecSelector: '.jcf-scrollbar-dec',
-			btnIncSelector: '.jcf-scrollbar-inc',
-			sliderSelector: '.jcf-scrollbar-slider',
-			handleSelector: '.jcf-scrollbar-handle',
-			scrollInterval: 10,
-			scrollStep: 5
-		}, options);
-		this.init();
-	}
-	$.extend(ScrollBar.prototype, {
-		init: function() {
-			this.initStructure();
-			this.attachEvents();
-		},
-		initStructure: function() {
-			// define proporties
-			this.doc = $(document);
-			this.isVertical = !!this.options.vertical;
-			this.sizeProperty = this.isVertical ? 'height' : 'width';
-			this.fullSizeProperty = this.isVertical ? 'outerHeight' : 'outerWidth';
-			this.invertedSizeProperty = this.isVertical ? 'width' : 'height';
-			this.thicknessMeasureMethod = 'outer' + this.invertedSizeProperty.charAt(0).toUpperCase() + this.invertedSizeProperty.substr(1);
-			this.offsetProperty = this.isVertical ? 'top' : 'left';
-			this.offsetEventProperty = this.isVertical ? 'pageY' : 'pageX';
-
-			// initialize variables
-			this.value = this.options.value || 0;
-			this.maxValue = this.options.maxValue || 0;
-			this.currentSliderSize = 0;
-			this.handleSize = 0;
-
-			// find elements
-			this.holder = $(this.options.holder);
-			this.scrollbar = $(this.options.scrollbarStructure).appendTo(this.holder);
-			this.btnDec = this.scrollbar.find(this.options.btnDecSelector);
-			this.btnInc = this.scrollbar.find(this.options.btnIncSelector);
-			this.slider = this.scrollbar.find(this.options.sliderSelector);
-			this.handle = this.slider.find(this.options.handleSelector);
-
-			// set initial styles
-			this.scrollbar.addClass(this.isVertical ? this.options.verticalClass : this.options.horizontalClass).css({
-				touchAction: this.isVertical ? 'pan-x' : 'pan-y',
-				position: 'absolute'
-			});
-			this.slider.css({
-				position: 'relative'
-			});
-			this.handle.css({
-				touchAction: 'none',
-				position: 'absolute'
-			});
-		},
-		attachEvents: function() {
-			var self = this;
-			this.bindHandlers();
-			this.handle.on('jcf-pointerdown', this.onHandlePress);
-			this.btnDec.add(this.btnInc).on('jcf-pointerdown', this.onButtonPress);
-		},
-		onHandlePress: function(e) {
-			if(e.pointerType === 'mouse' && e.button > 1) {
-				return;
-			} else {
-				e.preventDefault();
-				this.sliderOffset = this.slider.offset()[this.offsetProperty];
-				this.innerHandleOffset = e[this.offsetEventProperty] - this.handle.offset()[this.offsetProperty];
-
-				this.doc.on('jcf-pointermove', this.onHandleDrag);
-				this.doc.on('jcf-pointerup', this.onHandleRelease);
-			}
-		},
-		onHandleDrag: function(e) {
-			e.preventDefault();
-			this.calcOffset = e[this.offsetEventProperty] - this.sliderOffset - this.innerHandleOffset;
-			this.setValue(this.calcOffset / (this.currentSliderSize - this.handleSize) * this.maxValue);
-			this.triggerScrollEvent(this.value);
-		},
-		onHandleRelease: function() {
-			this.doc.off('jcf-pointermove', this.onHandleDrag);
-			this.doc.off('jcf-pointerup', this.onHandleRelease);
-		},
-		onButtonPress: function(e) {
-			var direction;
-			if(e.pointerType === 'mouse' && e.button > 1) {
-				return;
-			} else {
-				e.preventDefault();
-				direction = this.btnDec.is(e.currentTarget) ? -1 : 1;
-				this.startButtonScrolling(direction);
-				this.doc.on('jcf-pointerup', this.onButtonRelease);
-			}
-		},
-		onButtonRelease: function() {
-			this.stopButtonScrolling();
-			this.doc.off('jcf-pointerup', this.onButtonRelease);
-		},
-		startButtonScrolling: function(direction) {
-			var self = this;
-			this.stopButtonScrolling();
-			this.scrollTimer = setInterval(function() {
-				if(direction > 0) {
-					self.value += self.options.scrollStep;
-				} else {
-					self.value -= self.options.scrollStep;
-				}
-				self.setValue(self.value);
-				self.triggerScrollEvent(self.value);
-			}, this.options.scrollInterval);
-		},
-		stopButtonScrolling: function() {
-			clearInterval(this.scrollTimer);
-		},
-		triggerScrollEvent: function(scrollValue) {
-			if(this.options.onScroll) {
-				this.options.onScroll(scrollValue);
-			}
-		},
-		getThickness: function() {
-			return this.scrollbar[this.thicknessMeasureMethod]();
-		},
-		setSize: function(size) {
-			// resize scrollbar
-			var btnDecSize = this.btnDec[this.fullSizeProperty](),
-				btnIncSize = this.btnInc[this.fullSizeProperty]();
-
-			// resize slider
-			this.currentSize = size;
-			this.currentSliderSize = size - btnDecSize - btnIncSize;
-			this.scrollbar.css(this.sizeProperty, size);
-			this.slider.css(this.sizeProperty, this.currentSliderSize);
-			this.currentSliderSize = this.slider[this.sizeProperty]();
-
-			// resize handle
-			this.handleSize = Math.round(this.currentSliderSize * this.ratio);
-			this.handle.css(this.sizeProperty, this.handleSize);
-			this.handleSize = this.handle[this.fullSizeProperty]();
-
-			return this;
-		},
-		setRatio: function(ratio) {
-			this.ratio = ratio;
-			return this;
-		},
-		setMaxValue: function(maxValue) {
-			this.maxValue = maxValue;
-			this.setValue(Math.min(this.value, this.maxValue));
-			return this;
-		},
-		setValue: function(value) {
-			this.value = value;
-			if(this.value < 0) {
-				this.value = 0;
-			} else if(this.value > this.maxValue) {
-				this.value = this.maxValue;
-			}
-			this.refresh();
-		},
-		setPosition: function(styles) {
-			this.scrollbar.css(styles);
-			return this;
-		},
-		hide: function() {
-			this.scrollbar.detach();
-			return this;
-		},
-		show: function() {
-			this.scrollbar.appendTo(this.holder);
-			return this;
-		},
-		refresh: function() {
-			// recalculate handle position
-			if(this.value === 0 || this.maxValue === 0) {
-				this.calcOffset = 0;
-			} else {
-				this.calcOffset = (this.value / this.maxValue) * (this.currentSliderSize - this.handleSize);
-			}
-			this.handle.css(this.offsetProperty, this.calcOffset);
-
-			// toggle inactive classes
-			this.btnDec.toggleClass(this.options.inactiveClass, this.value === 0);
-			this.btnInc.toggleClass(this.options.inactiveClass, this.value === this.maxValue);
-			this.scrollbar.toggleClass(this.options.inactiveClass, this.maxValue === 0);
-		},
-		destroy: function() {
-			//remove event handlers and scrollbar block itself
-			this.btnDec.add(this.btnInc).off('jcf-pointerdown', this.onButtonPress);
-			this.handle.off('jcf-pointerdown', this.onHandlePress);
-			this.doc.off('jcf-pointermove', this.onHandleDrag);
-			this.doc.off('jcf-pointerup', this.onHandleRelease);
-			this.doc.off('jcf-pointerup', this.onButtonRelease);
-			clearInterval(this.scrollTimer);
-			this.scrollbar.remove();
-		}
-	});
-
+/*!
+ * JavaScript Custom Forms : Scrollbar Module
+ *
+ * Copyright 2014 PSD2HTML (http://psd2html.com)
+ * Released under the MIT license (LICENSE.txt)
+ * 
+ * Version: 1.0.2
+ */
+;(function($, window) {
+	'use strict';
+
+	jcf.addModule({
+		name: 'Scrollable',
+		selector: '.jcf-scrollable',
+		plugins: {
+			ScrollBar: ScrollBar
+		},
+		options: {
+			mouseWheelStep: 150,
+			handleResize: true,
+			alwaysShowScrollbars: false,
+			alwaysPreventMouseWheel: false,
+			scrollAreaStructure: '<div class="jcf-scrollable-wrapper"></div>'
+		},
+		matchElement: function(element) {
+			return element.is('.jcf-scrollable');
+		},
+		init: function(options) {
+			this.initStructure();
+			this.attachEvents();
+			this.rebuildScrollbars();
+		},
+		initStructure: function() {
+			// prepare structure
+			this.doc = $(document);
+			this.win = $(window);
+			this.realElement = $(this.options.element);
+			this.scrollWrapper = $(this.options.scrollAreaStructure).insertAfter(this.realElement);
+
+			// set initial styles
+			this.scrollWrapper.css('position', 'relative');
+			this.realElement.css('overflow', 'hidden');
+			this.vBarEdge = 0;
+		},
+		attachEvents: function() {
+			// create scrollbars
+			var self = this;
+			this.vBar = new ScrollBar({
+				holder: this.scrollWrapper,
+				vertical: true,
+				onScroll: function(scrollTop) {
+					self.realElement.scrollTop(scrollTop);
+				}
+			});
+			this.hBar = new ScrollBar({
+				holder: this.scrollWrapper,
+				vertical: false,
+				onScroll: function(scrollLeft) {
+					self.realElement.scrollLeft(scrollLeft);
+				}
+			});
+
+			// add event handlers
+			this.realElement.on('scroll', this.onScroll);
+			if(this.options.handleResize) {
+				this.win.on('resize orientationchange load', this.onResize);
+			}
+
+			// add pointer/wheel event handlers
+			this.realElement.on('jcf-mousewheel', this.onMouseWheel);
+			this.realElement.on('jcf-pointerdown', this.onTouchBody);
+		},
+		onScroll: function() {
+			this.redrawScrollbars();
+		},
+		onResize: function() {
+			// do not rebuild scrollbars if form field is in focus
+			if(!$(document.activeElement).is(':input')) {
+				this.rebuildScrollbars();
+			}
+		},
+		onTouchBody: function(e) {
+			if(e.pointerType === 'touch') {
+				this.touchData = {
+					scrollTop: this.realElement.scrollTop(),
+					scrollLeft: this.realElement.scrollLeft(),
+					left: e.pageX,
+					top: e.pageY
+				};
+				this.doc.on({
+					'jcf-pointermove': this.onMoveBody,
+					'jcf-pointerup': this.onReleaseBody
+				});
+			}
+		},
+		onMoveBody: function(e) {
+			var targetScrollTop,
+				targetScrollLeft,
+				verticalScrollAllowed = this.verticalScrollActive,
+				horizontalScrollAllowed = this.horizontalScrollActive;
+
+			if(e.pointerType === 'touch') {
+				targetScrollTop = this.touchData.scrollTop - e.pageY + this.touchData.top;
+				targetScrollLeft = this.touchData.scrollLeft - e.pageX + this.touchData.left;
+
+				// check that scrolling is ended and release outer scrolling
+				if(this.verticalScrollActive && (targetScrollTop < 0 || targetScrollTop > this.vBar.maxValue)) {
+					verticalScrollAllowed = false;
+				}
+				if(this.horizontalScrollActive && (targetScrollLeft < 0 || targetScrollLeft > this.hBar.maxValue)) {
+					horizontalScrollAllowed = false;
+				}
+
+				this.realElement.scrollTop(targetScrollTop);
+				this.realElement.scrollLeft(targetScrollLeft);
+
+				if(verticalScrollAllowed || horizontalScrollAllowed) {
+					e.preventDefault();
+				} else {
+					this.onReleaseBody(e);
+				}
+			}
+		},
+		onReleaseBody: function(e) {
+			if(e.pointerType === 'touch') {
+				delete this.touchData;
+				this.doc.off({
+					'jcf-pointermove': this.onMoveBody,
+					'jcf-pointerup': this.onReleaseBody
+				});
+			}
+		},
+		onMouseWheel: function(e) {
+			var currentScrollTop = this.realElement.scrollTop(),
+				currentScrollLeft = this.realElement.scrollLeft(),
+				maxScrollTop = this.realElement.prop('scrollHeight') - this.embeddedDimensions.innerHeight,
+				maxScrollLeft = this.realElement.prop('scrollWidth') - this.embeddedDimensions.innerWidth,
+				extraLeft, extraTop, preventFlag;
+
+			// check edge cases
+			if(!this.options.alwaysPreventMouseWheel) {
+				if(this.verticalScrollActive && e.deltaY) {
+					if(!(currentScrollTop <= 0 && e.deltaY < 0) && !(currentScrollTop >= maxScrollTop && e.deltaY > 0)) {
+						preventFlag = true;
+					}
+				}
+				if(this.horizontalScrollActive && e.deltaX) {
+					if(!(currentScrollLeft <= 0 && e.deltaX < 0) && !(currentScrollLeft >= maxScrollLeft && e.deltaX > 0)) {
+						preventFlag = true;
+					}
+				}
+				if(!this.verticalScrollActive && !this.horizontalScrollActive) {
+					return;
+				}
+			}
+
+			// prevent default action and scroll item
+			if(preventFlag || this.options.alwaysPreventMouseWheel) {
+				e.preventDefault();
+			} else {
+				return;
+			}
+
+			extraLeft = e.deltaX / 100 * this.options.mouseWheelStep;
+			extraTop = e.deltaY / 100 * this.options.mouseWheelStep;
+
+			this.realElement.scrollTop(currentScrollTop + extraTop);
+			this.realElement.scrollLeft(currentScrollLeft + extraLeft);
+		},
+		setScrollBarEdge: function(edgeSize) {
+			this.vBarEdge = edgeSize || 0;
+			this.redrawScrollbars();
+		},
+		saveElementDimensions: function() {
+			this.savedDimensions = {
+				top: this.realElement.width(),
+				left: this.realElement.height()
+			};
+			return this;
+		},
+		restoreElementDimensions: function() {
+			if(this.savedDimensions) {
+				this.realElement.css({
+					width: this.savedDimensions.width,
+					height: this.savedDimensions.height
+				});
+			}
+			return this;
+		},
+		saveScrollOffsets: function() {
+			this.savedOffsets = {
+				top: this.realElement.scrollTop(),
+				left: this.realElement.scrollLeft()
+			};
+			return this;
+		},
+		restoreScrollOffsets: function() {
+			if(this.savedOffsets) {
+				this.realElement.scrollTop(this.savedOffsets.top);
+				this.realElement.scrollLeft(this.savedOffsets.left);
+			}
+			return this;
+		},
+		getContainerDimensions: function() {
+			// save current styles
+			var desiredDimensions,
+				currentStyles,
+				currentHeight,
+				currentWidth;
+
+			if(this.isModifiedStyles) {
+				desiredDimensions = {
+					width: this.realElement.innerWidth() + this.vBar.getThickness(),
+					height: this.realElement.innerHeight() + this.hBar.getThickness()
+				};
+			} else {
+				// unwrap real element and measure it according to CSS
+				this.saveElementDimensions().saveScrollOffsets();
+				this.realElement.insertAfter(this.scrollWrapper);
+				this.scrollWrapper.detach();
+
+				// measure element
+				currentStyles = this.realElement.prop('style');
+				currentWidth = parseFloat(currentStyles.width);
+				currentHeight = parseFloat(currentStyles.height);
+
+				// reset styles if needed
+				if(this.embeddedDimensions && currentWidth && currentHeight) {
+					this.isModifiedStyles |= (currentWidth !== this.embeddedDimensions.width || currentHeight !== this.embeddedDimensions.height);
+					this.realElement.css({
+						overflow: '',
+						width: '',
+						height: ''
+					});
+				}
+
+				// calculate desired dimensions for real element
+				desiredDimensions = {
+					width: this.realElement.outerWidth(),
+					height: this.realElement.outerHeight()
+				};
+
+				// restore structure and original scroll offsets
+				this.scrollWrapper.insertAfter(this.realElement);
+				this.realElement.css('overflow', 'hidden').prependTo(this.scrollWrapper);
+				this.restoreElementDimensions().restoreScrollOffsets();
+			}
+			
+			return desiredDimensions;
+		},
+		getEmbeddedDimensions: function(dimensions) {
+			// handle scrollbars cropping
+			var fakeBarWidth = this.vBar.getThickness(),
+				fakeBarHeight = this.hBar.getThickness(),
+				paddingWidth = this.realElement.outerWidth() - this.realElement.width(),
+				paddingHeight = this.realElement.outerHeight() - this.realElement.height(),
+				resultDimensions;
+
+			if(this.options.alwaysShowScrollbars) {
+				// simply return dimensions without custom scrollbars
+				this.verticalScrollActive = true;
+				this.horizontalScrollActive = true;
+				resultDimensions = {
+					innerWidth: dimensions.width - fakeBarWidth,
+					innerHeight: dimensions.height - fakeBarHeight
+				};
+			} else {
+				// detect when to display each scrollbar
+				this.saveElementDimensions();
+				this.verticalScrollActive = false;
+				this.horizontalScrollActive = false;
+
+				// fill container with full size
+				this.realElement.css({
+					width: dimensions.width - paddingWidth,
+					height: dimensions.height - paddingHeight
+				});
+
+				this.horizontalScrollActive = this.realElement.prop('scrollWidth') > this.containerDimensions.width;
+				this.verticalScrollActive = this.realElement.prop('scrollHeight') > this.containerDimensions.height;
+				
+				this.restoreElementDimensions();
+				resultDimensions = {
+					innerWidth: dimensions.width - (this.verticalScrollActive ? fakeBarWidth : 0),
+					innerHeight: dimensions.height - (this.horizontalScrollActive ? fakeBarHeight : 0)
+				};
+			}
+			$.extend(resultDimensions, {
+				width: resultDimensions.innerWidth - paddingWidth,
+				height: resultDimensions.innerHeight - paddingHeight
+			});
+			return resultDimensions;
+		},
+		rebuildScrollbars: function() {
+			// resize wrapper according to real element styles
+			this.containerDimensions = this.getContainerDimensions();
+			this.embeddedDimensions = this.getEmbeddedDimensions(this.containerDimensions);
+
+			// resize wrapper to desired dimensions
+			this.scrollWrapper.css({
+				width: this.containerDimensions.width,
+				height: this.containerDimensions.height
+			});
+
+			// resize element inside wrapper excluding scrollbar size
+			this.realElement.css({
+				overflow: 'hidden',
+				width: this.embeddedDimensions.width,
+				height: this.embeddedDimensions.height
+			});
+
+			// redraw scrollbar offset
+			this.redrawScrollbars();
+		},
+		redrawScrollbars: function() {
+			var viewSize, maxScrollValue;
+
+			// redraw vertical scrollbar
+			if(this.verticalScrollActive) {
+				viewSize = this.vBarEdge ? this.containerDimensions.height - this.vBarEdge : this.embeddedDimensions.innerHeight;
+				maxScrollValue = this.realElement.prop('scrollHeight') - this.vBarEdge;
+
+				this.vBar.show().setMaxValue(maxScrollValue - viewSize).setRatio(viewSize / maxScrollValue).setSize(viewSize);
+				this.vBar.setValue(this.realElement.scrollTop());
+			} else {
+				this.vBar.hide();
+			}
+
+			// redraw horizontal scrollbar
+			if(this.horizontalScrollActive) {
+				viewSize = this.embeddedDimensions.innerWidth;
+				maxScrollValue = this.realElement.prop('scrollWidth');
+
+				if(maxScrollValue === viewSize) {
+					this.horizontalScrollActive = false;
+				}
+				this.hBar.show().setMaxValue(maxScrollValue - viewSize).setRatio(viewSize / maxScrollValue).setSize(viewSize);
+				this.hBar.setValue(this.realElement.scrollLeft());
+			} else {
+				this.hBar.hide();				
+			}
+
+			// set "touch-action" style rule
+			var touchAction = '';
+			if(this.verticalScrollActive && this.horizontalScrollActive) {
+				touchAction = 'none';
+			} else if(this.verticalScrollActive) {
+				touchAction = 'pan-x';
+			} else if(this.horizontalScrollActive) {
+				touchAction = 'pan-y';
+			}
+			this.realElement.css('touchAction', touchAction);
+		},
+		refresh: function() {
+			this.rebuildScrollbars();
+		},	
+		destroy: function() {
+			// remove event listeners
+			this.win.off('resize orientationchange load', this.onResize);
+			this.realElement.off({
+				'jcf-mousewheel': this.onMouseWheel,
+				'jcf-pointerdown': this.onTouchBody
+			});
+			this.doc.off({
+				'jcf-pointermove': this.onMoveBody,
+				'jcf-pointerup': this.onReleaseBody
+			});
+			
+			// restore structure
+			this.saveScrollOffsets();
+			this.vBar.destroy();
+			this.hBar.destroy();
+			this.realElement.insertAfter(this.scrollWrapper).css({
+				touchAction: '',
+				overflow: '',
+				width: '',
+				height: ''
+			});
+			this.scrollWrapper.remove();
+			this.restoreScrollOffsets();
+		}
+	});
+
+	// custom scrollbar
+	function ScrollBar(options) {
+		this.options = $.extend({
+			holder: null,
+			vertical: true,
+			inactiveClass: 'jcf-inactive',
+			verticalClass: 'jcf-scrollbar-vertical',
+			horizontalClass: 'jcf-scrollbar-horizontal',
+			scrollbarStructure: '<div class="jcf-scrollbar"><div class="jcf-scrollbar-dec"></div><div class="jcf-scrollbar-slider"><div class="jcf-scrollbar-handle"></div></div><div class="jcf-scrollbar-inc"></div></div>',
+			btnDecSelector: '.jcf-scrollbar-dec',
+			btnIncSelector: '.jcf-scrollbar-inc',
+			sliderSelector: '.jcf-scrollbar-slider',
+			handleSelector: '.jcf-scrollbar-handle',
+			scrollInterval: 10,
+			scrollStep: 5
+		}, options);
+		this.init();
+	}
+	$.extend(ScrollBar.prototype, {
+		init: function() {
+			this.initStructure();
+			this.attachEvents();
+		},
+		initStructure: function() {
+			// define proporties
+			this.doc = $(document);
+			this.isVertical = !!this.options.vertical;
+			this.sizeProperty = this.isVertical ? 'height' : 'width';
+			this.fullSizeProperty = this.isVertical ? 'outerHeight' : 'outerWidth';
+			this.invertedSizeProperty = this.isVertical ? 'width' : 'height';
+			this.thicknessMeasureMethod = 'outer' + this.invertedSizeProperty.charAt(0).toUpperCase() + this.invertedSizeProperty.substr(1);
+			this.offsetProperty = this.isVertical ? 'top' : 'left';
+			this.offsetEventProperty = this.isVertical ? 'pageY' : 'pageX';
+
+			// initialize variables
+			this.value = this.options.value || 0;
+			this.maxValue = this.options.maxValue || 0;
+			this.currentSliderSize = 0;
+			this.handleSize = 0;
+
+			// find elements
+			this.holder = $(this.options.holder);
+			this.scrollbar = $(this.options.scrollbarStructure).appendTo(this.holder);
+			this.btnDec = this.scrollbar.find(this.options.btnDecSelector);
+			this.btnInc = this.scrollbar.find(this.options.btnIncSelector);
+			this.slider = this.scrollbar.find(this.options.sliderSelector);
+			this.handle = this.slider.find(this.options.handleSelector);
+
+			// set initial styles
+			this.scrollbar.addClass(this.isVertical ? this.options.verticalClass : this.options.horizontalClass).css({
+				touchAction: this.isVertical ? 'pan-x' : 'pan-y',
+				position: 'absolute'
+			});
+			this.slider.css({
+				position: 'relative'
+			});
+			this.handle.css({
+				touchAction: 'none',
+				position: 'absolute'
+			});
+		},
+		attachEvents: function() {
+			var self = this;
+			this.bindHandlers();
+			this.handle.on('jcf-pointerdown', this.onHandlePress);
+			this.btnDec.add(this.btnInc).on('jcf-pointerdown', this.onButtonPress);
+		},
+		onHandlePress: function(e) {
+			if(e.pointerType === 'mouse' && e.button > 1) {
+				return;
+			} else {
+				e.preventDefault();
+				this.sliderOffset = this.slider.offset()[this.offsetProperty];
+				this.innerHandleOffset = e[this.offsetEventProperty] - this.handle.offset()[this.offsetProperty];
+
+				this.doc.on('jcf-pointermove', this.onHandleDrag);
+				this.doc.on('jcf-pointerup', this.onHandleRelease);
+			}
+		},
+		onHandleDrag: function(e) {
+			e.preventDefault();
+			this.calcOffset = e[this.offsetEventProperty] - this.sliderOffset - this.innerHandleOffset;
+			this.setValue(this.calcOffset / (this.currentSliderSize - this.handleSize) * this.maxValue);
+			this.triggerScrollEvent(this.value);
+		},
+		onHandleRelease: function() {
+			this.doc.off('jcf-pointermove', this.onHandleDrag);
+			this.doc.off('jcf-pointerup', this.onHandleRelease);
+		},
+		onButtonPress: function(e) {
+			var direction;
+			if(e.pointerType === 'mouse' && e.button > 1) {
+				return;
+			} else {
+				e.preventDefault();
+				direction = this.btnDec.is(e.currentTarget) ? -1 : 1;
+				this.startButtonScrolling(direction);
+				this.doc.on('jcf-pointerup', this.onButtonRelease);
+			}
+		},
+		onButtonRelease: function() {
+			this.stopButtonScrolling();
+			this.doc.off('jcf-pointerup', this.onButtonRelease);
+		},
+		startButtonScrolling: function(direction) {
+			var self = this;
+			this.stopButtonScrolling();
+			this.scrollTimer = setInterval(function() {
+				if(direction > 0) {
+					self.value += self.options.scrollStep;
+				} else {
+					self.value -= self.options.scrollStep;
+				}
+				self.setValue(self.value);
+				self.triggerScrollEvent(self.value);
+			}, this.options.scrollInterval);
+		},
+		stopButtonScrolling: function() {
+			clearInterval(this.scrollTimer);
+		},
+		triggerScrollEvent: function(scrollValue) {
+			if(this.options.onScroll) {
+				this.options.onScroll(scrollValue);
+			}
+		},
+		getThickness: function() {
+			return this.scrollbar[this.thicknessMeasureMethod]();
+		},
+		setSize: function(size) {
+			// resize scrollbar
+			var btnDecSize = this.btnDec[this.fullSizeProperty](),
+				btnIncSize = this.btnInc[this.fullSizeProperty]();
+
+			// resize slider
+			this.currentSize = size;
+			this.currentSliderSize = size - btnDecSize - btnIncSize;
+			this.scrollbar.css(this.sizeProperty, size);
+			this.slider.css(this.sizeProperty, this.currentSliderSize);
+			this.currentSliderSize = this.slider[this.sizeProperty]();
+
+			// resize handle
+			this.handleSize = Math.round(this.currentSliderSize * this.ratio);
+			this.handle.css(this.sizeProperty, this.handleSize);
+			this.handleSize = this.handle[this.fullSizeProperty]();
+
+			return this;
+		},
+		setRatio: function(ratio) {
+			this.ratio = ratio;
+			return this;
+		},
+		setMaxValue: function(maxValue) {
+			this.maxValue = maxValue;
+			this.setValue(Math.min(this.value, this.maxValue));
+			return this;
+		},
+		setValue: function(value) {
+			this.value = value;
+			if(this.value < 0) {
+				this.value = 0;
+			} else if(this.value > this.maxValue) {
+				this.value = this.maxValue;
+			}
+			this.refresh();
+		},
+		setPosition: function(styles) {
+			this.scrollbar.css(styles);
+			return this;
+		},
+		hide: function() {
+			this.scrollbar.detach();
+			return this;
+		},
+		show: function() {
+			this.scrollbar.appendTo(this.holder);
+			return this;
+		},
+		refresh: function() {
+			// recalculate handle position
+			if(this.value === 0 || this.maxValue === 0) {
+				this.calcOffset = 0;
+			} else {
+				this.calcOffset = (this.value / this.maxValue) * (this.currentSliderSize - this.handleSize);
+			}
+			this.handle.css(this.offsetProperty, this.calcOffset);
+
+			// toggle inactive classes
+			this.btnDec.toggleClass(this.options.inactiveClass, this.value === 0);
+			this.btnInc.toggleClass(this.options.inactiveClass, this.value === this.maxValue);
+			this.scrollbar.toggleClass(this.options.inactiveClass, this.maxValue === 0);
+		},
+		destroy: function() {
+			//remove event handlers and scrollbar block itself
+			this.btnDec.add(this.btnInc).off('jcf-pointerdown', this.onButtonPress);
+			this.handle.off('jcf-pointerdown', this.onHandlePress);
+			this.doc.off('jcf-pointermove', this.onHandleDrag);
+			this.doc.off('jcf-pointerup', this.onHandleRelease);
+			this.doc.off('jcf-pointerup', this.onButtonRelease);
+			clearInterval(this.scrollTimer);
+			this.scrollbar.remove();
+		}
+	});
+
 }(jQuery, this));
\ No newline at end of file
diff --git a/js/jcf.select.js b/js/jcf.select.js
index ab7f837..68d18b6 100755
--- a/js/jcf.select.js
+++ b/js/jcf.select.js
@@ -1,910 +1,910 @@
-/*!
- * JavaScript Custom Forms : Select Module
- *
- * Copyright 2014 PSD2HTML (http://psd2html.com)
- * Released under the MIT license (LICENSE.txt)
- * 
- * Version: 1.0.2
- */
-;(function($, window) {
-	'use strict';
-
-	jcf.addModule({
-		name: 'Select',
-		selector: 'select',
-		options: {
-			element: null
-		},
-		plugins: {
-			ListBox: ListBox,
-			ComboBox: ComboBox,
-			SelectList: SelectList
-		},
-		matchElement: function(element) {
-			return element.is('select');
-		},
-		init: function() {
-			this.element = $(this.options.element);
-			this.createInstance();
-		},
-		isListBox: function() {
-			return this.element.is('[size]:not([jcf-size]), [multiple]');
-		},
-		createInstance: function() {
-			if(this.instance) {
-				this.instance.destroy();
-			}
-			if(this.isListBox()) {
-				this.instance = new ListBox(this.options);
-			} else {
-				this.instance = new ComboBox(this.options);
-			}
-		},
-		refresh: function() {
-			var typeMismatch = (this.isListBox() && this.instance instanceof ComboBox) ||
-								(!this.isListBox() && this.instance instanceof ListBox);
-
-			if(typeMismatch) {
-				this.createInstance();
-			} else {
-				this.instance.refresh();
-			}
-		},
-		destroy: function() {
-			this.instance.destroy();
-		}
-	});
-
-	// combobox module
-	function ComboBox(options) {
-		this.options = $.extend({
-			wrapNative: true,
-			wrapNativeOnMobile: true,
-			fakeDropInBody: true,
-			useCustomScroll: true,
-			flipDropToFit: true,
-			maxVisibleItems: 10,
-			fakeAreaStructure: '<span class="jcf-select"><span class="jcf-select-text"></span><span class="jcf-select-opener"></span></span>',
-			fakeDropStructure: '<div class="jcf-select-drop"><div class="jcf-select-drop-content"></div></div>',
-			optionClassPrefix: 'jcf-option-',
-			selectClassPrefix: 'jcf-select-',
-			dropContentSelector: '.jcf-select-drop-content',
-			selectTextSelector: '.jcf-select-text',
-			dropActiveClass: 'jcf-drop-active',
-			flipDropClass: 'jcf-drop-flipped'
-		}, options);
-		this.init();
-	}
-	$.extend(ComboBox.prototype, {
-		init: function(options) {
-			this.initStructure();
-			this.bindHandlers();
-			this.attachEvents();
-			this.refresh();
-		},
-		initStructure: function() {
-			// prepare structure
-			this.win = $(window);
-			this.doc = $(document);
-			this.realElement = $(this.options.element);
-			this.fakeElement = $(this.options.fakeAreaStructure).insertAfter(this.realElement);
-			this.selectTextContainer = this.fakeElement.find(this.options.selectTextSelector);
-			this.selectText = $('<span></span>').appendTo(this.selectTextContainer);
-			makeUnselectable(this.fakeElement);
-
-			// copy classes from original select
-			this.fakeElement.addClass(getPrefixedClasses(this.realElement.prop('className'), this.options.selectClassPrefix));
-
-			// detect device type and dropdown behavior
-			if(this.options.isMobileDevice && this.options.wrapNativeOnMobile && !this.options.wrapNative) {
-				this.options.wrapNative = true;
-			}
-
-			if(this.options.wrapNative) {
-				// wrap native select inside fake block
-				this.realElement.prependTo(this.fakeElement).css({
-					position: 'absolute',
-					height: '100%',
-					width: '100%'
-				}).addClass(this.options.resetAppearanceClass);
-			} else {
-				// just hide native select
-				this.realElement.addClass(this.options.hiddenClass);
-				this.fakeElement.attr('title', this.realElement.attr('title'));
-				this.fakeDropTarget = this.options.fakeDropInBody ? $('body') : this.fakeElement;
-			}
-		},
-		attachEvents: function() {
-			// delayed refresh handler
-			var self = this;
-			this.delayedRefresh = function() {
-				setTimeout(function() {
-					self.refresh();
-					if(self.list) {
-						self.list.refresh();
-					}
-				}, 1);
-			};
-
-			// native dropdown event handlers
-			if(this.options.wrapNative) {
-				this.realElement.on({
-					focus: this.onFocus,
-					change: this.onChange,
-					click: this.onChange,
-					keydown: this.onChange
-				});
-			} else {
-				// custom dropdown event handlers
-				this.realElement.on({
-					focus: this.onFocus,
-					change: this.onChange,
-					keydown: this.onKeyDown
-				});
-				this.fakeElement.on({
-					'jcf-pointerdown': this.onSelectAreaPress
-				});
-			}
-		},
-		onKeyDown: function(e) {
-			if(e.which === 13) {
-				this.toggleDropdown();
-			} else if(this.dropActive) {
-				this.delayedRefresh();
-			}
-		},
-		onChange: function() {
-			this.refresh();
-		},
-		onFocus: function() {
-			if(!this.pressedFlag || !this.focusedFlag) {
-				this.fakeElement.addClass(this.options.focusClass);
-				this.realElement.on('blur', this.onBlur);
-				this.toggleListMode(true);
-				this.focusedFlag = true;
-			}
-		},
-		onBlur: function() {
-			if(!this.pressedFlag) {
-				this.fakeElement.removeClass(this.options.focusClass);
-				this.realElement.off('blur', this.onBlur);
-				this.toggleListMode(false);
-				this.focusedFlag = false;
-			}
-		},
-		onResize: function() {
-			if(this.dropActive) {
-				this.hideDropdown();
-			}
-		},
-		onSelectDropPress: function() {
-			this.pressedFlag = true;	
-		},
-		onSelectDropRelease: function(e, pointerEvent) {
-			this.pressedFlag = false;
-			if(pointerEvent.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-		},
-		onSelectAreaPress: function(e) {
-			// skip click if drop inside fake element or real select is disabled
-			var dropClickedInsideFakeElement = !this.options.fakeDropInBody && $(e.target).closest(this.dropdown).length;
-			if(dropClickedInsideFakeElement || e.button > 1 || this.realElement.is(':disabled')) {
-				return;
-			}
-
-			// toggle dropdown visibility
-			this.selectOpenedByEvent = e.pointerType;
-			this.toggleDropdown();
-
-			// misc handlers
-			if(!this.focusedFlag) {
-				if(e.pointerType === 'mouse') {
-					this.realElement.focus();
-				} else {
-					this.onFocus(e);
-				}
-			}
-			this.pressedFlag = true;
-			this.fakeElement.addClass(this.options.pressedClass);
-			this.doc.on('jcf-pointerup', this.onSelectAreaRelease);
-		},
-		onSelectAreaRelease: function(e) {
-			if(this.focusedFlag && e.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-			this.pressedFlag = false;
-			this.fakeElement.removeClass(this.options.pressedClass);
-			this.doc.off('jcf-pointerup', this.onSelectAreaRelease);
-		},
-		onOutsideClick: function(e) {
-			var target = $(e.target),
-				clickedInsideSelect = target.closest(this.fakeElement).length || target.closest(this.dropdown).length;
-
-			if(!clickedInsideSelect) {
-				this.hideDropdown();
-			}
-		},
-		onSelect: function() {
-			this.hideDropdown();
-			this.refresh();
-			this.fireNativeEvent(this.realElement, 'change');
-		},
-		toggleListMode: function(state) {
-			if(!this.options.wrapNative) {
-				if(state) {
-					// temporary change select to list to avoid appearing of native dropdown
-					this.realElement.attr({
-						size: 4,
-						'jcf-size': ''
-					});
-				} else {
-					// restore select from list mode to dropdown select
-					if(!this.options.wrapNative) {
-						this.realElement.removeAttr('size jcf-size');
-					}
-				}
-			}
-		},
-		createDropdown: function() {
-			// destroy previous dropdown if needed
-			if(this.dropdown) {
-				this.list.destroy();
-				this.dropdown.remove();
-			}
-
-			// create new drop container
-			this.dropdown = $(this.options.fakeDropStructure).appendTo(this.fakeDropTarget);
-			this.dropdown.addClass(getPrefixedClasses(this.realElement.prop('className'), this.options.selectClassPrefix));
-			makeUnselectable(this.dropdown);
-
-			// set initial styles for dropdown in body
-			if(this.options.fakeDropInBody) {
-				this.dropdown.css({
-					position: 'absolute',
-					top: -9999
-				});
-			}
-
-			// create new select list instance
-			this.list = new SelectList({
-				useHoverClass: true,
-				handleResize: false,
-				alwaysPreventMouseWheel: true,
-				maxVisibleItems: this.options.maxVisibleItems,
-				useCustomScroll: this.options.useCustomScroll,
-				holder: this.dropdown.find(this.options.dropContentSelector),
-				element: this.realElement
-			});
-			$(this.list).on({
-				select: this.onSelect,
-				press: this.onSelectDropPress,
-				release: this.onSelectDropRelease
-			});
-		},
-		repositionDropdown: function() {
-			var selectOffset = this.fakeElement.offset(),
-				selectWidth = this.fakeElement.outerWidth(),
-				selectHeight = this.fakeElement.outerHeight(),
-				dropHeight = this.dropdown.outerHeight(),
-				winScrollTop = this.win.scrollTop(),
-				winHeight = this.win.height(),
-				calcTop, calcLeft, bodyOffset, needFlipDrop = false;
-
-			// check flip drop position
-			if(selectOffset.top + selectHeight + dropHeight > winScrollTop + winHeight && selectOffset.top - dropHeight > winScrollTop) {
-				needFlipDrop = true;
-			}
-
-			if(this.options.fakeDropInBody) {
-				bodyOffset = this.fakeDropTarget.css('position') !== 'static' ? this.fakeDropTarget.offset().top : 0;
-				if(this.options.flipDropToFit && needFlipDrop) {
-					// calculate flipped dropdown position
-					calcLeft = selectOffset.left;
-					calcTop = selectOffset.top - dropHeight - bodyOffset;
-				} else {
-					// calculate default drop position
-					calcLeft = selectOffset.left;
-					calcTop = selectOffset.top + selectHeight - bodyOffset;
-				}
-
-				// update drop styles
-				this.dropdown.css({
-					width: selectWidth,
-					left: calcLeft,
-					top: calcTop
-				});
-			}
-
-			// refresh flipped class
-			this.dropdown.add(this.fakeElement).toggleClass(this.options.flipDropClass, this.options.flipDropToFit && needFlipDrop);
-		},
-		showDropdown: function() {
-			// do not show empty custom dropdown 
-			if(!this.realElement.prop('options').length) {
-				return;
-			}
-
-			// create options list if not created
-			if(!this.dropdown) {
-				this.createDropdown();
-			}
-
-			// show dropdown
-			this.dropActive = true;
-			this.dropdown.appendTo(this.fakeDropTarget);
-			this.fakeElement.addClass(this.options.dropActiveClass);
-			this.refreshSelectedText();
-			this.repositionDropdown();
-			this.list.setScrollTop(this.savedScrollTop);
-			this.list.refresh();
-
-			// add temporary event handlers
-			this.win.on('resize', this.onResize);
-			this.doc.on('jcf-pointerdown', this.onOutsideClick);
-		},
-		hideDropdown: function() {
-			if(this.dropdown) {
-				this.savedScrollTop = this.list.getScrollTop();
-				this.fakeElement.removeClass(this.options.dropActiveClass + ' ' + this.options.flipDropClass);
-				this.dropdown.removeClass(this.options.flipDropClass).detach();
-				this.doc.off('jcf-pointerdown', this.onOutsideClick);
-				this.win.off('resize', this.onResize);
-				this.dropActive = false;
-				if(this.selectOpenedByEvent === 'touch') {
-					this.onBlur();
-				}
-			}
-		},
-		toggleDropdown: function() {
-			if(this.dropActive) {
-				this.hideDropdown();
-			} else {
-				this.showDropdown();
-			}
-		},
-		refreshSelectedText: function() {
-			// redraw selected area
-			var selectedIndex = this.realElement.prop('selectedIndex'),
-				selectedOption = this.realElement.prop('options')[selectedIndex],
-				selectedOptionImage = selectedOption ? selectedOption.getAttribute('data-image') : null,
-				selectedOptionClasses,
-				selectedFakeElement;
-
-			if(!selectedOption) {
-				if(this.selectImage) {
-					this.selectImage.hide();
-				}
-				this.selectText.removeAttr('class').empty();
-			} else if(this.currentSelectedText !== selectedOption.innerHTML || this.currentSelectedImage !== selectedOptionImage) {
-				selectedOptionClasses = getPrefixedClasses(selectedOption.className, this.options.optionClassPrefix);
-				this.selectText.attr('class', selectedOptionClasses).html(selectedOption.innerHTML);
-
-				if(selectedOptionImage) {
-					if(!this.selectImage) {
-						this.selectImage = $('<img>').prependTo(this.selectTextContainer).hide();
-					}
-					this.selectImage.attr('src', selectedOptionImage).show();
-				} else if(this.selectImage) {
-					this.selectImage.hide();
-				}
-
-				this.currentSelectedText = selectedOption.innerHTML;
-				this.currentSelectedImage = selectedOptionImage;
-			}
-		},
-		refresh: function() {
-			// refresh fake select visibility
-			if(this.realElement.prop('style').display === 'none') {
-				this.fakeElement.hide();
-			} else {
-				this.fakeElement.show();
-			}
-
-			// refresh selected text
-			this.refreshSelectedText();
-
-			// handle disabled state
-			this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled'));
-		},	
-		destroy: function() {
-			// restore structure
-			if(this.options.wrapNative) {
-				this.realElement.insertBefore(this.fakeElement).css({
-					position: '',
-					height: '',
-					width: ''
-				}).removeClass(this.options.resetAppearanceClass);
-			} else {
-				this.realElement.removeClass(this.options.hiddenClass);
-				if(this.realElement.is('[jcf-size]')) {
-					this.realElement.removeAttr('size jcf-size');
-				}
-			}
-
-			// removing element will also remove its event handlers
-			this.fakeElement.remove();
-
-			// remove other event handlers
-			this.doc.off('jcf-pointerup', this.onSelectAreaRelease);
-			this.realElement.off({
-				focus: this.onFocus
-			});
-		}
-	});
-
-	// listbox module
-	function ListBox(options) {
-		this.options = $.extend({
-			wrapNative: true,
-			useCustomScroll: true,
-			fakeStructure: '<span class="jcf-list-box"><span class="jcf-list-wrapper"></span></span>',
-			selectClassPrefix: 'jcf-select-',
-			listHolder: '.jcf-list-wrapper'
-		}, options);
-		this.init();
-	}
-	$.extend(ListBox.prototype, {
-		init: function(options) {
-			this.bindHandlers();
-			this.initStructure();
-			this.attachEvents();
-		},
-		initStructure: function() {
-			var self = this;
-			this.realElement = $(this.options.element);
-			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
-			this.listHolder = this.fakeElement.find(this.options.listHolder);
-			makeUnselectable(this.fakeElement);
-
-			// copy classes from original select
-			this.fakeElement.addClass(getPrefixedClasses(this.realElement.prop('className'), this.options.selectClassPrefix));
-			this.realElement.addClass(this.options.hiddenClass);
-
-			this.list = new SelectList({
-				useCustomScroll: this.options.useCustomScroll,
-				holder: this.listHolder,
-				selectOnClick: false,
-				element: this.realElement
-			});
-		},
-		attachEvents: function() {
-			// delayed refresh handler
-			var self = this;
-			this.delayedRefresh = function(e) {
-				if(e && e.keyCode == 16) {
-					// ignore SHIFT key
-					return;
-				} else {
-					clearTimeout(self.refreshTimer);
-					self.refreshTimer = setTimeout(function() {
-						self.refresh();
-					}, 1);
-				}
-			};
-
-			// other event handlers
-			this.realElement.on({
-				focus: this.onFocus,
-				click: this.delayedRefresh,
-				keydown: this.delayedRefresh
-			});
-
-			// select list event handlers
-			$(this.list).on({
-				select: this.onSelect,
-				press: this.onFakeOptionsPress,
-				release: this.onFakeOptionsRelease
-			});
-		},
-		onFakeOptionsPress: function(e, pointerEvent) {
-			this.pressedFlag = true;
-			if(pointerEvent.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-		},
-		onFakeOptionsRelease: function(e, pointerEvent) {
-			this.pressedFlag = false;
-			if(pointerEvent.pointerType === 'mouse') {
-				this.realElement.focus();
-			}
-		},
-		onSelect: function() {
-			this.fireNativeEvent(this.realElement, 'change');
-			this.fireNativeEvent(this.realElement, 'click');
-		},
-		onFocus: function() {
-			if(!this.pressedFlag || !this.focusedFlag) {
-				this.fakeElement.addClass(this.options.focusClass);
-				this.realElement.on('blur', this.onBlur);
-				this.focusedFlag = true;
-			}
-		},
-		onBlur: function() {
-			if(!this.pressedFlag) {
-				this.fakeElement.removeClass(this.options.focusClass);
-				this.realElement.off('blur', this.onBlur);
-				this.focusedFlag = false;
-			}
-		},
-		refresh: function() {
-			this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled'));
-			this.list.refresh();
-		},
-		destroy: function() {
-			this.list.destroy();
-			this.realElement.insertBefore(this.fakeElement).removeClass(this.options.hiddenClass);
-			this.fakeElement.remove();
-		}
-	});
-
-	// options list module
-	function SelectList(options) {
-		this.options = $.extend({
-			holder: null,
-			maxVisibleItems: 10,
-			selectOnClick: true,
-			useHoverClass: false,
-			useCustomScroll: false,
-			handleResize: true,
-			alwaysPreventMouseWheel: false,
-			indexAttribute: 'data-index',
-			cloneClassPrefix: 'jcf-option-',
-			containerStructure: '<span class="jcf-list"><span class="jcf-list-content"></span></span>',
-			containerSelector: '.jcf-list-content',
-			captionClass: 'jcf-optgroup-caption',
-			disabledClass: 'jcf-disabled',
-			optionClass: 'jcf-option',
-			groupClass: 'jcf-optgroup',
-			hoverClass: 'jcf-hover',
-			selectedClass: 'jcf-selected',
-			scrollClass: 'jcf-scroll-active'
-		}, options);
-		this.init();
-	}
-	$.extend(SelectList.prototype, {
-		init: function() {
-			this.initStructure();
-			this.refreshSelectedClass();
-			this.attachEvents();
-		},
-		initStructure: function() {
-			this.element = $(this.options.element);
-			this.indexSelector = '[' + this.options.indexAttribute + ']';
-			this.container = $(this.options.containerStructure).appendTo(this.options.holder);
-			this.listHolder = this.container.find(this.options.containerSelector);
-			this.lastClickedIndex = this.element.prop('selectedIndex');
-			this.rebuildList();
-		},
-		attachEvents: function() {
-			this.bindHandlers();
-			this.listHolder.on('jcf-pointerdown', this.indexSelector, this.onItemPress);
-			this.listHolder.on('jcf-pointerdown', this.onPress);
-
-			if(this.options.useHoverClass) {
-				this.listHolder.on('jcf-pointerover', this.indexSelector, this.onHoverItem);
-			}
-		},
-		onPress: function(e) {
-			$(this).trigger('press', e);
-			this.listHolder.on('jcf-pointerup', this.onRelease);
-		},
-		onRelease: function(e) {
-			$(this).trigger('release', e);
-			this.listHolder.off('jcf-pointerup', this.onRelease);
-		},
-		onHoverItem: function(e) {
-			var hoverIndex = parseFloat(e.currentTarget.getAttribute(this.options.indexAttribute));
-			this.fakeOptions.removeClass(this.options.hoverClass).eq(hoverIndex).addClass(this.options.hoverClass);
-		},
-		onItemPress: function(e) {
-			if(e.pointerType === 'touch' || this.options.selectOnClick) {
-				// select option after "click"
-				this.tmpListOffsetTop = this.list.offset().top;
-				this.listHolder.on('jcf-pointerup', this.indexSelector, this.onItemRelease);
-			} else {
-				// select option immediately
-				this.onSelectItem(e);
-			}
-		},
-		onItemRelease: function(e) {
-			// remove event handlers and temporary data
-			this.listHolder.off('jcf-pointerup', this.indexSelector, this.onItemRelease);
-
-			// simulate item selection
-			if(this.tmpListOffsetTop === this.list.offset().top) {
-				this.listHolder.on('click', this.indexSelector, this.onSelectItem);
-			}
-			delete this.tmpListOffsetTop;
-		},
-		onSelectItem: function(e) {
-			var clickedIndex = parseFloat(e.currentTarget.getAttribute(this.options.indexAttribute)),
-				range;
-
-			// remove click event handler
-			this.listHolder.off('click', this.indexSelector, this.onSelectItem);
-
-			// ignore clicks on disabled options
-			if(e.button > 1 || this.realOptions[clickedIndex].disabled) {
-				return;
-			}
-
-			if(this.element.prop('multiple')) {
-				if(e.metaKey || e.ctrlKey || e.pointerType === 'touch') {
-					// if CTRL/CMD pressed or touch devices - toggle selected option
-					this.realOptions[clickedIndex].selected = !this.realOptions[clickedIndex].selected;
-				} else if(e.shiftKey) {
-					// if SHIFT pressed - update selection
-					range = [this.lastClickedIndex, clickedIndex].sort(function(a, b){
-						return a - b;
-					});
-					this.realOptions.each(function(index, option) {
-						option.selected = (index >= range[0] && index <= range[1]);
-					});
-				} else {
-					// set single selected index
-					this.element.prop('selectedIndex', clickedIndex);
-				}
-			} else {
-				this.element.prop('selectedIndex', clickedIndex);
-			}
-
-			// save last clicked option
-			if(!e.shiftKey) {
-				this.lastClickedIndex = clickedIndex;
-			}
-
-			// refresh classes
-			this.refreshSelectedClass();
-
-			// scroll to active item in desktop browsers
-			if(e.pointerType === 'mouse') {
-				this.scrollToActiveOption();
-			}
-
-			// make callback when item selected
-			$(this).trigger('select');
-		},
-		rebuildList: function() {
-			// rebuild options
-			var self = this,
-				rootElement = this.element[0];
-
-			// recursively create fake options
-			this.storedSelectHTML = rootElement.innerHTML;
-			this.optionIndex = 0;
-			this.list = $(this.createOptionsList(rootElement));
-			this.listHolder.empty().append(this.list);
-			this.realOptions = this.element.find('option');
-			this.fakeOptions = this.list.find(this.indexSelector);
-			this.fakeListItems = this.list.find('.' + this.options.captionClass + ',' + this.indexSelector);
-			delete this.optionIndex;
-
-			// detect max visible items
-			var maxCount = this.options.maxVisibleItems,
-				sizeValue = this.element.prop('size');
-			if(sizeValue > 1) {
-				maxCount = sizeValue;
-			}
-
-			// handle scrollbar
-			var needScrollBar = this.fakeOptions.length > maxCount;
-			this.container.toggleClass(this.options.scrollClass, needScrollBar);
-			if(needScrollBar) {
-				// change max-height
-				this.listHolder.css({
-					maxHeight: this.getOverflowHeight(maxCount),
-					overflow: 'auto'
-				});
-
-				if(this.options.useCustomScroll && jcf.modules.Scrollable) {
-					// add custom scrollbar if specified in options
-					jcf.replace(this.listHolder, 'Scrollable', {
-						handleResize: this.options.handleResize,
-						alwaysPreventMouseWheel: this.options.alwaysPreventMouseWheel
-					});
-					return;
-				}
-			}
-
-			// disable edge wheel scrolling
-			if(this.options.alwaysPreventMouseWheel) {
-				this.preventWheelHandler = function(e) {
-					var currentScrollTop = self.listHolder.scrollTop(),
-						maxScrollTop = self.listHolder.prop('scrollHeight') - self.listHolder.innerHeight(),
-						maxScrollLeft = self.listHolder.prop('scrollWidth') - self.listHolder.innerWidth();
-
-					// check edge cases
-					if((currentScrollTop <= 0 && e.deltaY < 0) || (currentScrollTop >= maxScrollTop && e.deltaY > 0)) {
-						e.preventDefault();
-					}
-				};
-				this.listHolder.on('jcf-mousewheel', this.preventWheelHandler);
-			}
-		},
-		refreshSelectedClass: function() {
-			var self = this,
-				selectedItem,
-				isMultiple = this.element.prop('multiple'),
-				selectedIndex = this.element.prop('selectedIndex');
-
-			if(isMultiple) {
-				this.realOptions.each(function(index, option) {
-					self.fakeOptions.eq(index).toggleClass(self.options.selectedClass, !!option.selected);
-				});
-			} else {
-				this.fakeOptions.removeClass(this.options.selectedClass + ' ' + this.options.hoverClass);
-				selectedItem = this.fakeOptions.eq(selectedIndex).addClass(this.options.selectedClass);
-				if(this.options.useHoverClass) {
-					selectedItem.addClass(this.options.hoverClass);
-				}
-			}
-		},
-		scrollToActiveOption: function() {
-			// scroll to target option
-			var targetOffset = this.getActiveOptionOffset();
-			this.listHolder.prop('scrollTop', targetOffset);
-		},
-		getSelectedIndexRange: function() {
-			var firstSelected = -1, lastSelected = -1;
-			this.realOptions.each(function(index, option) {
-				if(option.selected) {
-					if(firstSelected < 0) {
-						firstSelected = index;
-					}
-					lastSelected = index;
-				}
-			});
-			return [firstSelected, lastSelected];
-		},
-		getChangedSelectedIndex: function() {
-			var selectedIndex = this.element.prop('selectedIndex'),
-				targetIndex;
-
-			if(this.element.prop('multiple')) {
-				// multiple selects handling
-				if(!this.previousRange) {
-					this.previousRange = [selectedIndex, selectedIndex];
-				}
-				this.currentRange = this.getSelectedIndexRange();
-				targetIndex = this.currentRange[this.currentRange[0] !== this.previousRange[0] ? 0 : 1];
-				this.previousRange = this.currentRange;
-				return targetIndex;
-			} else {
-				// single choice selects handling
-				return selectedIndex;
-			}
-		},
-		getActiveOptionOffset: function() {
-			// calc values
-			var dropHeight = this.listHolder.height(),
-				dropScrollTop = this.listHolder.prop('scrollTop'),
-				currentIndex = this.getChangedSelectedIndex(),
-				fakeOption = this.fakeOptions.eq(currentIndex),
-				fakeOptionOffset = fakeOption.offset().top - this.list.offset().top,
-				fakeOptionHeight = fakeOption.innerHeight();
-
-			// scroll list
-			if(fakeOptionOffset + fakeOptionHeight >= dropScrollTop + dropHeight) {
-				// scroll down (always scroll to option)
-				return fakeOptionOffset - dropHeight + fakeOptionHeight;
-			} else if(fakeOptionOffset < dropScrollTop) {
-				// scroll up to option
-				return fakeOptionOffset;
-			}
-		},
-		getOverflowHeight: function(sizeValue) {
-			var item = this.fakeListItems.eq(sizeValue - 1),
-				listOffset = this.list.offset().top,
-				itemOffset = item.offset().top,
-				itemHeight = item.innerHeight();
-
-			return itemOffset + itemHeight - listOffset;
-		},
-		getScrollTop: function() {
-			return this.listHolder.scrollTop();
-		},
-		setScrollTop: function(value) {
-			this.listHolder.scrollTop(value);
-		},
-		createOption: function(option) {
-			var newOption = document.createElement('span');
-			newOption.className = this.options.optionClass;
-			newOption.innerHTML = option.innerHTML;
-			newOption.setAttribute(this.options.indexAttribute, this.optionIndex++);
-
-			var optionImage, optionImageSrc = option.getAttribute('data-image');
-			if(optionImageSrc) {
-				optionImage = document.createElement('img');
-				optionImage.src = optionImageSrc;
-				newOption.insertBefore(optionImage, newOption.childNodes[0]);
-			}
-			if(option.disabled) {
-				newOption.className += ' ' + this.options.disabledClass;
-			}
-			if(option.className) {
-				newOption.className += ' ' + getPrefixedClasses(option.className, this.options.cloneClassPrefix);
-			}
-			return newOption;
-		},
-		createOptGroup: function(optgroup) {
-			var optGroupContainer = document.createElement('span'),
-				optGroupName = optgroup.getAttribute('label'),
-				optGroupCaption, optGroupList;
-
-			// create caption
-			optGroupCaption = document.createElement('span');
-			optGroupCaption.className = this.options.captionClass;
-			optGroupCaption.innerHTML = optGroupName;
-			optGroupContainer.appendChild(optGroupCaption);
-
-			// create list of options
-			if(optgroup.children.length) {
-				optGroupList = this.createOptionsList(optgroup);
-				optGroupContainer.appendChild(optGroupList);
-			}
-
-			optGroupContainer.className = this.options.groupClass;
-			return optGroupContainer;
-		},
-		createOptionContainer: function() {
-			var optionContainer = document.createElement('li');
-			return optionContainer;
-		},
-		createOptionsList: function(container) {
-			var self = this,
-				list = document.createElement('ul');
-
-			$.each(container.children, function(index, currentNode) {
-				var item = self.createOptionContainer(currentNode),
-					newNode;
-
-				switch(currentNode.tagName.toLowerCase()) {
-					case 'option': newNode = self.createOption(currentNode); break;
-					case 'optgroup': newNode = self.createOptGroup(currentNode); break;
-				}
-				list.appendChild(item).appendChild(newNode);
-			});
-			return list;
-		},
-		refresh: function() {
-			// check for select innerHTML changes
-			if(this.storedSelectHTML !== this.element.prop('innerHTML')) {
-				this.rebuildList();
-			}
-
-			// refresh custom scrollbar
-			var scrollInstance = jcf.getInstance(this.listHolder);
-			if(scrollInstance) {
-				scrollInstance.refresh();
-			}
-
-			// scroll active option into view
-			this.scrollToActiveOption();
-
-			// refresh selectes classes
-			this.refreshSelectedClass();
-		},
-		destroy: function() {
-			this.listHolder.off('jcf-mousewheel', this.preventWheelHandler);
-			this.listHolder.off('jcf-pointerdown', this.indexSelector, this.onSelectItem);
-			this.listHolder.off('jcf-pointerover', this.indexSelector, this.onHoverItem);
-			this.listHolder.off('jcf-pointerdown', this.onPress);
-		}
-	});
-
-	// helper functions
-	var getPrefixedClasses = function(className, prefixToAdd) {
-		return className ? className.replace(/[\s]*([\S]+)+[\s]*/gi, prefixToAdd + '$1 ') : '';
-	};
-	var makeUnselectable = (function() {
-		var unselectableClass = jcf.getOptions().unselectableClass;
-		function preventHandler(e) {
-			e.preventDefault();
-		}
-		return function(node) {
-			node.addClass(unselectableClass).on('selectstart', preventHandler);
-		};
-	}());
-
+/*!
+ * JavaScript Custom Forms : Select Module
+ *
+ * Copyright 2014 PSD2HTML (http://psd2html.com)
+ * Released under the MIT license (LICENSE.txt)
+ * 
+ * Version: 1.0.2
+ */
+;(function($, window) {
+	'use strict';
+
+	jcf.addModule({
+		name: 'Select',
+		selector: 'select',
+		options: {
+			element: null
+		},
+		plugins: {
+			ListBox: ListBox,
+			ComboBox: ComboBox,
+			SelectList: SelectList
+		},
+		matchElement: function(element) {
+			return element.is('select');
+		},
+		init: function() {
+			this.element = $(this.options.element);
+			this.createInstance();
+		},
+		isListBox: function() {
+			return this.element.is('[size]:not([jcf-size]), [multiple]');
+		},
+		createInstance: function() {
+			if(this.instance) {
+				this.instance.destroy();
+			}
+			if(this.isListBox()) {
+				this.instance = new ListBox(this.options);
+			} else {
+				this.instance = new ComboBox(this.options);
+			}
+		},
+		refresh: function() {
+			var typeMismatch = (this.isListBox() && this.instance instanceof ComboBox) ||
+								(!this.isListBox() && this.instance instanceof ListBox);
+
+			if(typeMismatch) {
+				this.createInstance();
+			} else {
+				this.instance.refresh();
+			}
+		},
+		destroy: function() {
+			this.instance.destroy();
+		}
+	});
+
+	// combobox module
+	function ComboBox(options) {
+		this.options = $.extend({
+			wrapNative: true,
+			wrapNativeOnMobile: true,
+			fakeDropInBody: true,
+			useCustomScroll: true,
+			flipDropToFit: true,
+			maxVisibleItems: 10,
+			fakeAreaStructure: '<span class="jcf-select"><span class="jcf-select-text"></span><span class="jcf-select-opener"></span></span>',
+			fakeDropStructure: '<div class="jcf-select-drop"><div class="jcf-select-drop-content"></div></div>',
+			optionClassPrefix: 'jcf-option-',
+			selectClassPrefix: 'jcf-select-',
+			dropContentSelector: '.jcf-select-drop-content',
+			selectTextSelector: '.jcf-select-text',
+			dropActiveClass: 'jcf-drop-active',
+			flipDropClass: 'jcf-drop-flipped'
+		}, options);
+		this.init();
+	}
+	$.extend(ComboBox.prototype, {
+		init: function(options) {
+			this.initStructure();
+			this.bindHandlers();
+			this.attachEvents();
+			this.refresh();
+		},
+		initStructure: function() {
+			// prepare structure
+			this.win = $(window);
+			this.doc = $(document);
+			this.realElement = $(this.options.element);
+			this.fakeElement = $(this.options.fakeAreaStructure).insertAfter(this.realElement);
+			this.selectTextContainer = this.fakeElement.find(this.options.selectTextSelector);
+			this.selectText = $('<span></span>').appendTo(this.selectTextContainer);
+			makeUnselectable(this.fakeElement);
+
+			// copy classes from original select
+			this.fakeElement.addClass(getPrefixedClasses(this.realElement.prop('className'), this.options.selectClassPrefix));
+
+			// detect device type and dropdown behavior
+			if(this.options.isMobileDevice && this.options.wrapNativeOnMobile && !this.options.wrapNative) {
+				this.options.wrapNative = true;
+			}
+
+			if(this.options.wrapNative) {
+				// wrap native select inside fake block
+				this.realElement.prependTo(this.fakeElement).css({
+					position: 'absolute',
+					height: '100%',
+					width: '100%'
+				}).addClass(this.options.resetAppearanceClass);
+			} else {
+				// just hide native select
+				this.realElement.addClass(this.options.hiddenClass);
+				this.fakeElement.attr('title', this.realElement.attr('title'));
+				this.fakeDropTarget = this.options.fakeDropInBody ? $('body') : this.fakeElement;
+			}
+		},
+		attachEvents: function() {
+			// delayed refresh handler
+			var self = this;
+			this.delayedRefresh = function() {
+				setTimeout(function() {
+					self.refresh();
+					if(self.list) {
+						self.list.refresh();
+					}
+				}, 1);
+			};
+
+			// native dropdown event handlers
+			if(this.options.wrapNative) {
+				this.realElement.on({
+					focus: this.onFocus,
+					change: this.onChange,
+					click: this.onChange,
+					keydown: this.onChange
+				});
+			} else {
+				// custom dropdown event handlers
+				this.realElement.on({
+					focus: this.onFocus,
+					change: this.onChange,
+					keydown: this.onKeyDown
+				});
+				this.fakeElement.on({
+					'jcf-pointerdown': this.onSelectAreaPress
+				});
+			}
+		},
+		onKeyDown: function(e) {
+			if(e.which === 13) {
+				this.toggleDropdown();
+			} else if(this.dropActive) {
+				this.delayedRefresh();
+			}
+		},
+		onChange: function() {
+			this.refresh();
+		},
+		onFocus: function() {
+			if(!this.pressedFlag || !this.focusedFlag) {
+				this.fakeElement.addClass(this.options.focusClass);
+				this.realElement.on('blur', this.onBlur);
+				this.toggleListMode(true);
+				this.focusedFlag = true;
+			}
+		},
+		onBlur: function() {
+			if(!this.pressedFlag) {
+				this.fakeElement.removeClass(this.options.focusClass);
+				this.realElement.off('blur', this.onBlur);
+				this.toggleListMode(false);
+				this.focusedFlag = false;
+			}
+		},
+		onResize: function() {
+			if(this.dropActive) {
+				this.hideDropdown();
+			}
+		},
+		onSelectDropPress: function() {
+			this.pressedFlag = true;	
+		},
+		onSelectDropRelease: function(e, pointerEvent) {
+			this.pressedFlag = false;
+			if(pointerEvent.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+		},
+		onSelectAreaPress: function(e) {
+			// skip click if drop inside fake element or real select is disabled
+			var dropClickedInsideFakeElement = !this.options.fakeDropInBody && $(e.target).closest(this.dropdown).length;
+			if(dropClickedInsideFakeElement || e.button > 1 || this.realElement.is(':disabled')) {
+				return;
+			}
+
+			// toggle dropdown visibility
+			this.selectOpenedByEvent = e.pointerType;
+			this.toggleDropdown();
+
+			// misc handlers
+			if(!this.focusedFlag) {
+				if(e.pointerType === 'mouse') {
+					this.realElement.focus();
+				} else {
+					this.onFocus(e);
+				}
+			}
+			this.pressedFlag = true;
+			this.fakeElement.addClass(this.options.pressedClass);
+			this.doc.on('jcf-pointerup', this.onSelectAreaRelease);
+		},
+		onSelectAreaRelease: function(e) {
+			if(this.focusedFlag && e.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+			this.pressedFlag = false;
+			this.fakeElement.removeClass(this.options.pressedClass);
+			this.doc.off('jcf-pointerup', this.onSelectAreaRelease);
+		},
+		onOutsideClick: function(e) {
+			var target = $(e.target),
+				clickedInsideSelect = target.closest(this.fakeElement).length || target.closest(this.dropdown).length;
+
+			if(!clickedInsideSelect) {
+				this.hideDropdown();
+			}
+		},
+		onSelect: function() {
+			this.hideDropdown();
+			this.refresh();
+			this.fireNativeEvent(this.realElement, 'change');
+		},
+		toggleListMode: function(state) {
+			if(!this.options.wrapNative) {
+				if(state) {
+					// temporary change select to list to avoid appearing of native dropdown
+					this.realElement.attr({
+						size: 4,
+						'jcf-size': ''
+					});
+				} else {
+					// restore select from list mode to dropdown select
+					if(!this.options.wrapNative) {
+						this.realElement.removeAttr('size jcf-size');
+					}
+				}
+			}
+		},
+		createDropdown: function() {
+			// destroy previous dropdown if needed
+			if(this.dropdown) {
+				this.list.destroy();
+				this.dropdown.remove();
+			}
+
+			// create new drop container
+			this.dropdown = $(this.options.fakeDropStructure).appendTo(this.fakeDropTarget);
+			this.dropdown.addClass(getPrefixedClasses(this.realElement.prop('className'), this.options.selectClassPrefix));
+			makeUnselectable(this.dropdown);
+
+			// set initial styles for dropdown in body
+			if(this.options.fakeDropInBody) {
+				this.dropdown.css({
+					position: 'absolute',
+					top: -9999
+				});
+			}
+
+			// create new select list instance
+			this.list = new SelectList({
+				useHoverClass: true,
+				handleResize: false,
+				alwaysPreventMouseWheel: true,
+				maxVisibleItems: this.options.maxVisibleItems,
+				useCustomScroll: this.options.useCustomScroll,
+				holder: this.dropdown.find(this.options.dropContentSelector),
+				element: this.realElement
+			});
+			$(this.list).on({
+				select: this.onSelect,
+				press: this.onSelectDropPress,
+				release: this.onSelectDropRelease
+			});
+		},
+		repositionDropdown: function() {
+			var selectOffset = this.fakeElement.offset(),
+				selectWidth = this.fakeElement.outerWidth(),
+				selectHeight = this.fakeElement.outerHeight(),
+				dropHeight = this.dropdown.outerHeight(),
+				winScrollTop = this.win.scrollTop(),
+				winHeight = this.win.height(),
+				calcTop, calcLeft, bodyOffset, needFlipDrop = false;
+
+			// check flip drop position
+			if(selectOffset.top + selectHeight + dropHeight > winScrollTop + winHeight && selectOffset.top - dropHeight > winScrollTop) {
+				needFlipDrop = true;
+			}
+
+			if(this.options.fakeDropInBody) {
+				bodyOffset = this.fakeDropTarget.css('position') !== 'static' ? this.fakeDropTarget.offset().top : 0;
+				if(this.options.flipDropToFit && needFlipDrop) {
+					// calculate flipped dropdown position
+					calcLeft = selectOffset.left;
+					calcTop = selectOffset.top - dropHeight - bodyOffset;
+				} else {
+					// calculate default drop position
+					calcLeft = selectOffset.left;
+					calcTop = selectOffset.top + selectHeight - bodyOffset;
+				}
+
+				// update drop styles
+				this.dropdown.css({
+					width: selectWidth,
+					left: calcLeft,
+					top: calcTop
+				});
+			}
+
+			// refresh flipped class
+			this.dropdown.add(this.fakeElement).toggleClass(this.options.flipDropClass, this.options.flipDropToFit && needFlipDrop);
+		},
+		showDropdown: function() {
+			// do not show empty custom dropdown 
+			if(!this.realElement.prop('options').length) {
+				return;
+			}
+
+			// create options list if not created
+			if(!this.dropdown) {
+				this.createDropdown();
+			}
+
+			// show dropdown
+			this.dropActive = true;
+			this.dropdown.appendTo(this.fakeDropTarget);
+			this.fakeElement.addClass(this.options.dropActiveClass);
+			this.refreshSelectedText();
+			this.repositionDropdown();
+			this.list.setScrollTop(this.savedScrollTop);
+			this.list.refresh();
+
+			// add temporary event handlers
+			this.win.on('resize', this.onResize);
+			this.doc.on('jcf-pointerdown', this.onOutsideClick);
+		},
+		hideDropdown: function() {
+			if(this.dropdown) {
+				this.savedScrollTop = this.list.getScrollTop();
+				this.fakeElement.removeClass(this.options.dropActiveClass + ' ' + this.options.flipDropClass);
+				this.dropdown.removeClass(this.options.flipDropClass).detach();
+				this.doc.off('jcf-pointerdown', this.onOutsideClick);
+				this.win.off('resize', this.onResize);
+				this.dropActive = false;
+				if(this.selectOpenedByEvent === 'touch') {
+					this.onBlur();
+				}
+			}
+		},
+		toggleDropdown: function() {
+			if(this.dropActive) {
+				this.hideDropdown();
+			} else {
+				this.showDropdown();
+			}
+		},
+		refreshSelectedText: function() {
+			// redraw selected area
+			var selectedIndex = this.realElement.prop('selectedIndex'),
+				selectedOption = this.realElement.prop('options')[selectedIndex],
+				selectedOptionImage = selectedOption ? selectedOption.getAttribute('data-image') : null,
+				selectedOptionClasses,
+				selectedFakeElement;
+
+			if(!selectedOption) {
+				if(this.selectImage) {
+					this.selectImage.hide();
+				}
+				this.selectText.removeAttr('class').empty();
+			} else if(this.currentSelectedText !== selectedOption.innerHTML || this.currentSelectedImage !== selectedOptionImage) {
+				selectedOptionClasses = getPrefixedClasses(selectedOption.className, this.options.optionClassPrefix);
+				this.selectText.attr('class', selectedOptionClasses).html(selectedOption.innerHTML);
+
+				if(selectedOptionImage) {
+					if(!this.selectImage) {
+						this.selectImage = $('<img>').prependTo(this.selectTextContainer).hide();
+					}
+					this.selectImage.attr('src', selectedOptionImage).show();
+				} else if(this.selectImage) {
+					this.selectImage.hide();
+				}
+
+				this.currentSelectedText = selectedOption.innerHTML;
+				this.currentSelectedImage = selectedOptionImage;
+			}
+		},
+		refresh: function() {
+			// refresh fake select visibility
+			if(this.realElement.prop('style').display === 'none') {
+				this.fakeElement.hide();
+			} else {
+				this.fakeElement.show();
+			}
+
+			// refresh selected text
+			this.refreshSelectedText();
+
+			// handle disabled state
+			this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled'));
+		},	
+		destroy: function() {
+			// restore structure
+			if(this.options.wrapNative) {
+				this.realElement.insertBefore(this.fakeElement).css({
+					position: '',
+					height: '',
+					width: ''
+				}).removeClass(this.options.resetAppearanceClass);
+			} else {
+				this.realElement.removeClass(this.options.hiddenClass);
+				if(this.realElement.is('[jcf-size]')) {
+					this.realElement.removeAttr('size jcf-size');
+				}
+			}
+
+			// removing element will also remove its event handlers
+			this.fakeElement.remove();
+
+			// remove other event handlers
+			this.doc.off('jcf-pointerup', this.onSelectAreaRelease);
+			this.realElement.off({
+				focus: this.onFocus
+			});
+		}
+	});
+
+	// listbox module
+	function ListBox(options) {
+		this.options = $.extend({
+			wrapNative: true,
+			useCustomScroll: true,
+			fakeStructure: '<span class="jcf-list-box"><span class="jcf-list-wrapper"></span></span>',
+			selectClassPrefix: 'jcf-select-',
+			listHolder: '.jcf-list-wrapper'
+		}, options);
+		this.init();
+	}
+	$.extend(ListBox.prototype, {
+		init: function(options) {
+			this.bindHandlers();
+			this.initStructure();
+			this.attachEvents();
+		},
+		initStructure: function() {
+			var self = this;
+			this.realElement = $(this.options.element);
+			this.fakeElement = $(this.options.fakeStructure).insertAfter(this.realElement);
+			this.listHolder = this.fakeElement.find(this.options.listHolder);
+			makeUnselectable(this.fakeElement);
+
+			// copy classes from original select
+			this.fakeElement.addClass(getPrefixedClasses(this.realElement.prop('className'), this.options.selectClassPrefix));
+			this.realElement.addClass(this.options.hiddenClass);
+
+			this.list = new SelectList({
+				useCustomScroll: this.options.useCustomScroll,
+				holder: this.listHolder,
+				selectOnClick: false,
+				element: this.realElement
+			});
+		},
+		attachEvents: function() {
+			// delayed refresh handler
+			var self = this;
+			this.delayedRefresh = function(e) {
+				if(e && e.keyCode == 16) {
+					// ignore SHIFT key
+					return;
+				} else {
+					clearTimeout(self.refreshTimer);
+					self.refreshTimer = setTimeout(function() {
+						self.refresh();
+					}, 1);
+				}
+			};
+
+			// other event handlers
+			this.realElement.on({
+				focus: this.onFocus,
+				click: this.delayedRefresh,
+				keydown: this.delayedRefresh
+			});
+
+			// select list event handlers
+			$(this.list).on({
+				select: this.onSelect,
+				press: this.onFakeOptionsPress,
+				release: this.onFakeOptionsRelease
+			});
+		},
+		onFakeOptionsPress: function(e, pointerEvent) {
+			this.pressedFlag = true;
+			if(pointerEvent.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+		},
+		onFakeOptionsRelease: function(e, pointerEvent) {
+			this.pressedFlag = false;
+			if(pointerEvent.pointerType === 'mouse') {
+				this.realElement.focus();
+			}
+		},
+		onSelect: function() {
+			this.fireNativeEvent(this.realElement, 'change');
+			this.fireNativeEvent(this.realElement, 'click');
+		},
+		onFocus: function() {
+			if(!this.pressedFlag || !this.focusedFlag) {
+				this.fakeElement.addClass(this.options.focusClass);
+				this.realElement.on('blur', this.onBlur);
+				this.focusedFlag = true;
+			}
+		},
+		onBlur: function() {
+			if(!this.pressedFlag) {
+				this.fakeElement.removeClass(this.options.focusClass);
+				this.realElement.off('blur', this.onBlur);
+				this.focusedFlag = false;
+			}
+		},
+		refresh: function() {
+			this.fakeElement.toggleClass(this.options.disabledClass, this.realElement.is(':disabled'));
+			this.list.refresh();
+		},
+		destroy: function() {
+			this.list.destroy();
+			this.realElement.insertBefore(this.fakeElement).removeClass(this.options.hiddenClass);
+			this.fakeElement.remove();
+		}
+	});
+
+	// options list module
+	function SelectList(options) {
+		this.options = $.extend({
+			holder: null,
+			maxVisibleItems: 10,
+			selectOnClick: true,
+			useHoverClass: false,
+			useCustomScroll: false,
+			handleResize: true,
+			alwaysPreventMouseWheel: false,
+			indexAttribute: 'data-index',
+			cloneClassPrefix: 'jcf-option-',
+			containerStructure: '<span class="jcf-list"><span class="jcf-list-content"></span></span>',
+			containerSelector: '.jcf-list-content',
+			captionClass: 'jcf-optgroup-caption',
+			disabledClass: 'jcf-disabled',
+			optionClass: 'jcf-option',
+			groupClass: 'jcf-optgroup',
+			hoverClass: 'jcf-hover',
+			selectedClass: 'jcf-selected',
+			scrollClass: 'jcf-scroll-active'
+		}, options);
+		this.init();
+	}
+	$.extend(SelectList.prototype, {
+		init: function() {
+			this.initStructure();
+			this.refreshSelectedClass();
+			this.attachEvents();
+		},
+		initStructure: function() {
+			this.element = $(this.options.element);
+			this.indexSelector = '[' + this.options.indexAttribute + ']';
+			this.container = $(this.options.containerStructure).appendTo(this.options.holder);
+			this.listHolder = this.container.find(this.options.containerSelector);
+			this.lastClickedIndex = this.element.prop('selectedIndex');
+			this.rebuildList();
+		},
+		attachEvents: function() {
+			this.bindHandlers();
+			this.listHolder.on('jcf-pointerdown', this.indexSelector, this.onItemPress);
+			this.listHolder.on('jcf-pointerdown', this.onPress);
+
+			if(this.options.useHoverClass) {
+				this.listHolder.on('jcf-pointerover', this.indexSelector, this.onHoverItem);
+			}
+		},
+		onPress: function(e) {
+			$(this).trigger('press', e);
+			this.listHolder.on('jcf-pointerup', this.onRelease);
+		},
+		onRelease: function(e) {
+			$(this).trigger('release', e);
+			this.listHolder.off('jcf-pointerup', this.onRelease);
+		},
+		onHoverItem: function(e) {
+			var hoverIndex = parseFloat(e.currentTarget.getAttribute(this.options.indexAttribute));
+			this.fakeOptions.removeClass(this.options.hoverClass).eq(hoverIndex).addClass(this.options.hoverClass);
+		},
+		onItemPress: function(e) {
+			if(e.pointerType === 'touch' || this.options.selectOnClick) {
+				// select option after "click"
+				this.tmpListOffsetTop = this.list.offset().top;
+				this.listHolder.on('jcf-pointerup', this.indexSelector, this.onItemRelease);
+			} else {
+				// select option immediately
+				this.onSelectItem(e);
+			}
+		},
+		onItemRelease: function(e) {
+			// remove event handlers and temporary data
+			this.listHolder.off('jcf-pointerup', this.indexSelector, this.onItemRelease);
+
+			// simulate item selection
+			if(this.tmpListOffsetTop === this.list.offset().top) {
+				this.listHolder.on('click', this.indexSelector, this.onSelectItem);
+			}
+			delete this.tmpListOffsetTop;
+		},
+		onSelectItem: function(e) {
+			var clickedIndex = parseFloat(e.currentTarget.getAttribute(this.options.indexAttribute)),
+				range;
+
+			// remove click event handler
+			this.listHolder.off('click', this.indexSelector, this.onSelectItem);
+
+			// ignore clicks on disabled options
+			if(e.button > 1 || this.realOptions[clickedIndex].disabled) {
+				return;
+			}
+
+			if(this.element.prop('multiple')) {
+				if(e.metaKey || e.ctrlKey || e.pointerType === 'touch') {
+					// if CTRL/CMD pressed or touch devices - toggle selected option
+					this.realOptions[clickedIndex].selected = !this.realOptions[clickedIndex].selected;
+				} else if(e.shiftKey) {
+					// if SHIFT pressed - update selection
+					range = [this.lastClickedIndex, clickedIndex].sort(function(a, b){
+						return a - b;
+					});
+					this.realOptions.each(function(index, option) {
+						option.selected = (index >= range[0] && index <= range[1]);
+					});
+				} else {
+					// set single selected index
+					this.element.prop('selectedIndex', clickedIndex);
+				}
+			} else {
+				this.element.prop('selectedIndex', clickedIndex);
+			}
+
+			// save last clicked option
+			if(!e.shiftKey) {
+				this.lastClickedIndex = clickedIndex;
+			}
+
+			// refresh classes
+			this.refreshSelectedClass();
+
+			// scroll to active item in desktop browsers
+			if(e.pointerType === 'mouse') {
+				this.scrollToActiveOption();
+			}
+
+			// make callback when item selected
+			$(this).trigger('select');
+		},
+		rebuildList: function() {
+			// rebuild options
+			var self = this,
+				rootElement = this.element[0];
+
+			// recursively create fake options
+			this.storedSelectHTML = rootElement.innerHTML;
+			this.optionIndex = 0;
+			this.list = $(this.createOptionsList(rootElement));
+			this.listHolder.empty().append(this.list);
+			this.realOptions = this.element.find('option');
+			this.fakeOptions = this.list.find(this.indexSelector);
+			this.fakeListItems = this.list.find('.' + this.options.captionClass + ',' + this.indexSelector);
+			delete this.optionIndex;
+
+			// detect max visible items
+			var maxCount = this.options.maxVisibleItems,
+				sizeValue = this.element.prop('size');
+			if(sizeValue > 1) {
+				maxCount = sizeValue;
+			}
+
+			// handle scrollbar
+			var needScrollBar = this.fakeOptions.length > maxCount;
+			this.container.toggleClass(this.options.scrollClass, needScrollBar);
+			if(needScrollBar) {
+				// change max-height
+				this.listHolder.css({
+					maxHeight: this.getOverflowHeight(maxCount),
+					overflow: 'auto'
+				});
+
+				if(this.options.useCustomScroll && jcf.modules.Scrollable) {
+					// add custom scrollbar if specified in options
+					jcf.replace(this.listHolder, 'Scrollable', {
+						handleResize: this.options.handleResize,
+						alwaysPreventMouseWheel: this.options.alwaysPreventMouseWheel
+					});
+					return;
+				}
+			}
+
+			// disable edge wheel scrolling
+			if(this.options.alwaysPreventMouseWheel) {
+				this.preventWheelHandler = function(e) {
+					var currentScrollTop = self.listHolder.scrollTop(),
+						maxScrollTop = self.listHolder.prop('scrollHeight') - self.listHolder.innerHeight(),
+						maxScrollLeft = self.listHolder.prop('scrollWidth') - self.listHolder.innerWidth();
+
+					// check edge cases
+					if((currentScrollTop <= 0 && e.deltaY < 0) || (currentScrollTop >= maxScrollTop && e.deltaY > 0)) {
+						e.preventDefault();
+					}
+				};
+				this.listHolder.on('jcf-mousewheel', this.preventWheelHandler);
+			}
+		},
+		refreshSelectedClass: function() {
+			var self = this,
+				selectedItem,
+				isMultiple = this.element.prop('multiple'),
+				selectedIndex = this.element.prop('selectedIndex');
+
+			if(isMultiple) {
+				this.realOptions.each(function(index, option) {
+					self.fakeOptions.eq(index).toggleClass(self.options.selectedClass, !!option.selected);
+				});
+			} else {
+				this.fakeOptions.removeClass(this.options.selectedClass + ' ' + this.options.hoverClass);
+				selectedItem = this.fakeOptions.eq(selectedIndex).addClass(this.options.selectedClass);
+				if(this.options.useHoverClass) {
+					selectedItem.addClass(this.options.hoverClass);
+				}
+			}
+		},
+		scrollToActiveOption: function() {
+			// scroll to target option
+			var targetOffset = this.getActiveOptionOffset();
+			this.listHolder.prop('scrollTop', targetOffset);
+		},
+		getSelectedIndexRange: function() {
+			var firstSelected = -1, lastSelected = -1;
+			this.realOptions.each(function(index, option) {
+				if(option.selected) {
+					if(firstSelected < 0) {
+						firstSelected = index;
+					}
+					lastSelected = index;
+				}
+			});
+			return [firstSelected, lastSelected];
+		},
+		getChangedSelectedIndex: function() {
+			var selectedIndex = this.element.prop('selectedIndex'),
+				targetIndex;
+
+			if(this.element.prop('multiple')) {
+				// multiple selects handling
+				if(!this.previousRange) {
+					this.previousRange = [selectedIndex, selectedIndex];
+				}
+				this.currentRange = this.getSelectedIndexRange();
+				targetIndex = this.currentRange[this.currentRange[0] !== this.previousRange[0] ? 0 : 1];
+				this.previousRange = this.currentRange;
+				return targetIndex;
+			} else {
+				// single choice selects handling
+				return selectedIndex;
+			}
+		},
+		getActiveOptionOffset: function() {
+			// calc values
+			var dropHeight = this.listHolder.height(),
+				dropScrollTop = this.listHolder.prop('scrollTop'),
+				currentIndex = this.getChangedSelectedIndex(),
+				fakeOption = this.fakeOptions.eq(currentIndex),
+				fakeOptionOffset = fakeOption.offset().top - this.list.offset().top,
+				fakeOptionHeight = fakeOption.innerHeight();
+
+			// scroll list
+			if(fakeOptionOffset + fakeOptionHeight >= dropScrollTop + dropHeight) {
+				// scroll down (always scroll to option)
+				return fakeOptionOffset - dropHeight + fakeOptionHeight;
+			} else if(fakeOptionOffset < dropScrollTop) {
+				// scroll up to option
+				return fakeOptionOffset;
+			}
+		},
+		getOverflowHeight: function(sizeValue) {
+			var item = this.fakeListItems.eq(sizeValue - 1),
+				listOffset = this.list.offset().top,
+				itemOffset = item.offset().top,
+				itemHeight = item.innerHeight();
+
+			return itemOffset + itemHeight - listOffset;
+		},
+		getScrollTop: function() {
+			return this.listHolder.scrollTop();
+		},
+		setScrollTop: function(value) {
+			this.listHolder.scrollTop(value);
+		},
+		createOption: function(option) {
+			var newOption = document.createElement('span');
+			newOption.className = this.options.optionClass;
+			newOption.innerHTML = option.innerHTML;
+			newOption.setAttribute(this.options.indexAttribute, this.optionIndex++);
+
+			var optionImage, optionImageSrc = option.getAttribute('data-image');
+			if(optionImageSrc) {
+				optionImage = document.createElement('img');
+				optionImage.src = optionImageSrc;
+				newOption.insertBefore(optionImage, newOption.childNodes[0]);
+			}
+			if(option.disabled) {
+				newOption.className += ' ' + this.options.disabledClass;
+			}
+			if(option.className) {
+				newOption.className += ' ' + getPrefixedClasses(option.className, this.options.cloneClassPrefix);
+			}
+			return newOption;
+		},
+		createOptGroup: function(optgroup) {
+			var optGroupContainer = document.createElement('span'),
+				optGroupName = optgroup.getAttribute('label'),
+				optGroupCaption, optGroupList;
+
+			// create caption
+			optGroupCaption = document.createElement('span');
+			optGroupCaption.className = this.options.captionClass;
+			optGroupCaption.innerHTML = optGroupName;
+			optGroupContainer.appendChild(optGroupCaption);
+
+			// create list of options
+			if(optgroup.children.length) {
+				optGroupList = this.createOptionsList(optgroup);
+				optGroupContainer.appendChild(optGroupList);
+			}
+
+			optGroupContainer.className = this.options.groupClass;
+			return optGroupContainer;
+		},
+		createOptionContainer: function() {
+			var optionContainer = document.createElement('li');
+			return optionContainer;
+		},
+		createOptionsList: function(container) {
+			var self = this,
+				list = document.createElement('ul');
+
+			$.each(container.children, function(index, currentNode) {
+				var item = self.createOptionContainer(currentNode),
+					newNode;
+
+				switch(currentNode.tagName.toLowerCase()) {
+					case 'option': newNode = self.createOption(currentNode); break;
+					case 'optgroup': newNode = self.createOptGroup(currentNode); break;
+				}
+				list.appendChild(item).appendChild(newNode);
+			});
+			return list;
+		},
+		refresh: function() {
+			// check for select innerHTML changes
+			if(this.storedSelectHTML !== this.element.prop('innerHTML')) {
+				this.rebuildList();
+			}
+
+			// refresh custom scrollbar
+			var scrollInstance = jcf.getInstance(this.listHolder);
+			if(scrollInstance) {
+				scrollInstance.refresh();
+			}
+
+			// scroll active option into view
+			this.scrollToActiveOption();
+
+			// refresh selectes classes
+			this.refreshSelectedClass();
+		},
+		destroy: function() {
+			this.listHolder.off('jcf-mousewheel', this.preventWheelHandler);
+			this.listHolder.off('jcf-pointerdown', this.indexSelector, this.onSelectItem);
+			this.listHolder.off('jcf-pointerover', this.indexSelector, this.onHoverItem);
+			this.listHolder.off('jcf-pointerdown', this.onPress);
+		}
+	});
+
+	// helper functions
+	var getPrefixedClasses = function(className, prefixToAdd) {
+		return className ? className.replace(/[\s]*([\S]+)+[\s]*/gi, prefixToAdd + '$1 ') : '';
+	};
+	var makeUnselectable = (function() {
+		var unselectableClass = jcf.getOptions().unselectableClass;
+		function preventHandler(e) {
+			e.preventDefault();
+		}
+		return function(node) {
+			node.addClass(unselectableClass).on('selectstart', preventHandler);
+		};
+	}());
+
 }(jQuery, this));
\ No newline at end of file