<!--S:Main-->
<style>

.current .bicon {
	z-index: 10;
}

#ib-plan {
	position: relative;
	top: -2px;
	z-index: 9;
}

.ui-widget-header {
	background: none;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-radius: 0px;
}

#tabs.ui-widget-content {
	border: 0px;
}

.iconBrowser .ui-tabs .ui-tabs-panel{
	padding-left: 0px;
	padding-right: 0px;
}

#tabs > ul {
	padding-right: 0px!important;
}

.iconBrowser {
	_position: relative;
}

.iconBrowser .current {
}
.iconBrowser .iconBrowserHolder {
	max-width: 100%;
	max-height: 400px;
	overflow: auto;
}


.iconBrowserHolder a{
	display: inline-block;
	height: 50px;
	width: 50px;
	border: 1px solid #a0a0a0;
	text-align: center;
	line-height: 50px;
	margin-bottom: 9px;
	margin-right: 5px;
	padding-top: 8px;
}

.iconBrowserHolder a span {
	font-size: 32px;
	line-height: 32px;
	margin-right: 0px;
	color: #a0a0a0;
}

.iconBrowserHolder a:hover,
.iconBrowserHolder a.selected {
	background: #4b8df8;
	color: #fff;
	border-color: #4b8df8;
	text-decoration: none!important;
}

.iconBrowserHolder a:hover span,
.iconBrowserHolder a.selected span{
	color: #fff!important;
	text-decoration: none!important;
}

/*
.iconBrowserHolder a:hover {
	border: 1px solid #000;
	text-decoration: none!important;
}
*/

/*
.iconBrowserHolder a:focus span,
.iconBrowserHolder a:active span,
.iconBrowserHolder a:hover span{
	color: #000;
	text-decoration: none;
}*/

.iconBrowserHolder a span.flag {
	vertical-align: baseline;
}

.iconBrowserHolder a span.flag.f16 {
	position: relative;
	top: -3px;
}


.iconBrowser .current {
	margin-top: 10px;
	border-top: 1px solid #a0a0a0;
	padding-top: 10px;
	position: relative;
}

.iconBrowser .current label {
	font-weight: normal;
	display: none;
}

.iconBrowser .current span {
	position: absolute;
	left: 17px;
	height: 29px;
	padding-top: 7px;
	font-size: 16px;
}

.iconBrowser .current span img{
	width: 16px;
	height: 16px;
}


.svgicon img {
	width: 32px;
	height: 32px;
	vertical-align: initial;
}

.iconBrowser .current span.bicon {
	top: 10px;
}

.iconBrowser .current span.f32 + input[type=text] {
	padding-left: 40px!important;
}

.iconBrowser .current span.f32 {
	height: 32px;
	top: 1px;
    left: 15px;
}

.iconBrowser .current button {
	height: 31px;
	padding: 0px 10px;
	font-size: 12px;
	font-weight: normal;
	position: relative;
	top: 0px;
}

.iconBrowser .current button b {
	font-weight: normal;
	position: relative;
	top: -3px;
}


#ib-shortcode,
.iconBrowser .current input[type=text] {
	border: 1px solid #a0a0a0;
	padding-left: 30px;
	width: 276px;
	height: 31px;
}

.iconBrowser #ib-search{
	width: 150px;
	padding-left: 5px;
	float: right;
}

#ib-shortcode {
	width: 300px;
}
</style>


	<div class="iconBrowser">

		<div id="tabs">
		{FONTSLINK}
		{FONTS}
		</div>

		<div class="current">
			{CONTROL}
		</div>
	</div>


<script>
$(".iconBrowserHolder a").click(function(e){ 
	e.preventDefault();

	$(".iconBrowserHolder a").removeClass("selected");
	$(this).addClass("selected");

	if ($(".iconBrowser #ib-plan").length)
		$(".iconBrowser #ib-plan").val($(this).attr("data-title").split("bicon").join("").trim());

	if ($(".iconBrowser #ib-shortcode").length) {
		$(".iconBrowser #ib-shortcode").val($(this).attr("data-shortcode"));
		$('#ib-shortcode').focus();
	}

	$(".iconBrowser .current span").html("");
	$(".iconBrowser .current span").removeAttr('class');
	$(".iconBrowser .current span").attr('class' , "" + $(this).attr("data-title"));

	//svg icons
	if ($(this).attr("data-path") != "") {
		var img = "<img src='" + $(this).attr("data-path") + "' />";
		$(".iconBrowser .current span").append(img);
	}
	return false;
});


$("#ib-search").keyup(function(e) {
	var val = $(this).val().toLowerCase();

	if (val.trim() == "") {
		$("[data-search]").show();
	} else {
		$("[data-search]").each(function(e) {
			var attr = $(this).attr("data-search").toLowerCase();

			if (attr.indexOf(val) != -1) {
				$(this).show();
			} else {
				$(this).hide();
			}
		});
	}
});


//#ib-plan,
$('#ib-shortcode').focus(function() {
	//$(this).select();                       
});

$('#ib-shortcode').click(function() {
	$(this).select();                       
});

$('#ib-shortcode').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

if ($(".iconBrowser a.selected").length) {
	$(".iconBrowser a.selected").trigger("click");
}


{BUTTON}

$(function() {
    $( "#tabs" ).tabs();
});

</script>

	
<!--E:Main-->

<!--S:Script-->
$(".iconBrowser button").click(function(){
	$("{FIELD}").val($("#ib-plan").val());
	$("#dialog").dialog("close");
});
<!--E:Script-->

<!--S:Group-->
			{DATA}
<!--E:Group-->


<!--S:Element-->
			<a href="" class="{CLASS}" data-search="{ICON}" data-shortcode="[{CODE}={ICON}]" data-title="bicon {ICON_CLASS} {ICON}"><span class="{ICON_CLASS} {ICON}"></span></a>
<!--E:Element-->

<!--S:Empty-->

<!--E:Empty-->

<!--S:SvgGroup-->
			{DATA}
<!--E:SvgGroup-->


<!--S:SvgElement-->
			<a href="" class="{CLASS}" data-search="{ICON}" data-shortcode="[{CODE}={ICON}]" data-title="bicon svgicon {ICON}" data-path="{SRC}"><span class="svgicon {ICON}"><img src="{SRC}"/></span></a>
<!--E:SvgElement-->

<!--S:SvgEmpty-->

<!--E:SvgEmpty-->



<!--S:Icomoon--><h2>Icomoon Collection</h2><!--E:Icomoon-->
<!--S:FontAwesome--><h2>Icomoon Collection</h2><!--E:FontAwesome-->




<!--S:FontGroup-->
			{DATA}
<!--E:FontGroup-->

<!--S:FontElement-->
			<div id="tabs-{KEY}">			
				<div class="iconBrowserHolder">
					{ITEMS}
					<div class="clear"></div>
				</div>

			</div>
			<link rel="stylesheet" href="{FILE}">
			<script>$('head').append('<link rel="stylesheet" type="text/css" href="{FILE}">');</script>
<!--E:FontElement-->

<!--S:FontEmpty-->

<!--E:FontEmpty-->

<!--S:FontLinkGroup-->
			<ul>
			{DATA}
					<input type="text" id="ib-search" size="10" placeholder="Search"/>
			</ul>
<!--E:FontLinkGroup-->

<!--S:FontLinkElement-->
				<li><a href="#tabs-{KEY}">{TITLE}</a></li>
<!--E:FontLinkElement-->

<!--S:FontLinkEmpty-->

<!--E:FontLinkEmpty-->



<!--S:ControlText-->
			<label>Selected Icon</label>
			<span></span>
			<input type="text" id="ib-plan" />
			<button><b>Insert</b></button>
<!--E:ControlText-->

<!--S:ControlShortcode-->
			<span></span>
			<input type="text" id="ib-shortcode" readonly/>
<!--E:ControlShortcode-->