<!--S:Main-->
{FA}
{IM}

<style>

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

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

.iconBrowser {
	_position: relative;
}

.iconBrowser .current {
}
.iconBrowser .iconBrowserHolder {
	max-width: 620px;
	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: 5px;
	margin-right: 5px;
	padding-top: 8px;
}

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

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

.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;
}


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

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

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

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


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

#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"));

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

	$(".iconBrowser .current span").removeAttr('class');
	$(".iconBrowser .current span").attr('class' , "icomoon " + $(this).attr("data-title"));
	return false;
});



$('input[type=text]').focus(function() {
	$(this).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-shortcode="{SHORTCODE}{ICON}]" data-title="{ICON_CLASS} {ICON}"><span class="{ICON_CLASS} {ICON}"></span></a>
<!--E:Element-->


<!--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}
			</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" readonly/>
			<button>Insert</button>
<!--E:ControlText-->

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