<fieldset class="fwdrl">
	<p id="tips"><?php esc_html_e('All form fields are required.', 'fwdrl'); ?></p>
</fieldset>

<form class="form fwdrl" action="" method="post">
	<div id="tabs">
	  	<ul class="menu">
			<?php $iconsPath = $this->_dir_url . "content/icons/" ?>
		    <li><a href="#tab1"><img src=<?php echo esc_url($iconsPath) . "tab1-icon.png" ?>><span><?php esc_html_e('Main settings', 'fwdrl'); ?></span></a></li>
		    <li><a href="#tab2"><img src=<?php echo esc_url($iconsPath) . "flickr-icon.png" ?>><span><?php esc_html_e('Share window settings', 'fwdrl'); ?></span></a></li>
		    <li><a href="#tab3"><img src=<?php echo esc_url($iconsPath) . "tab2-icon.png" ?>><span><?php esc_html_e('Thumbnails settings', 'fwdrl'); ?></span></a></li>
			<li><a href="#tab4"><img src=<?php echo esc_url($iconsPath) . "tab3-icon.png" ?>><span><?php esc_html_e('Caption settings', 'fwdrl'); ?></span></a></li>
		    <li><a href="#tab5"><img src=<?php echo esc_url($iconsPath) . "tab4-icon.png" ?>><span><?php esc_html_e('Video and Audio player settings', 'fwdrl'); ?></span></a></li>
	  	</ul>

	  	<div id="tab1" class="tab">
			<table>	
				<tr>
		    		<td>
		    			<label for="mediaSelector"><?php esc_html_e('Media selector:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="mediaSelector" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Media selector for the static type, multiple selectors can be set separated by comma for example... .fwdrel, .my-selector, .grid etc.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="rightClickContextMenu"><?php esc_html_e('Right-click context menu:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="rightClickContextMenu" class="ui-corner-all">
							<option value="developer"><?php esc_html_e('developer', 'fwdrl'); ?></option>
							<option value="disabled"><?php esc_html_e('disabled', 'fwdrl'); ?></option>
							<option value="default"><?php esc_html_e('default', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('If "developer" the right click context menu will be the developer link "Made by FWD". If "disabled" the right click context menu will be disabled completely. If "default" the right click context menu will be the browser default.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="useDeepLinking"><?php esc_html_e('Use deeplinking:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useDeepLinking" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Enable/disable history in the browser (deeplink) when opening/navigating/closing a gallery.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="useVectorIcons"><?php esc_html_e('Use vector skin:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useVectorIcons" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Enable or disable the vector skin. If set to yes instead of using the graphics/png icons the lightbox will use vector-based icons. Please note that visually the skinlooks exactly the same as the graphics/png icons.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="buttonsAlignment"><?php esc_html_e('Buttons alignment:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="buttonsAlignment" class="ui-corner-all">
							<option value="in"><?php esc_html_e('in', 'fwdrl'); ?></option>
							<option value="out"><?php esc_html_e('out', 'fwdrl'); ?></option>
							<option value="top"><?php esc_html_e('top', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Lightbox buttons position/alignment.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="mediaLazyLoading"><?php esc_html_e('Media lazy loading:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="mediaLazyLoading" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Lazy loading for all images including video posters, this is useful if you don\'t want the user to wait for the images to load, instead as soon as the lightbox is opened the images will be loaded in the background.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="useDrag"><?php esc_html_e('Use drag:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useDrag" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Enable or disable the lightbox item drag. This applies to boght touch and desktop.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="useAsModal"><?php esc_html_e('Use as modal:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useAsModal" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="showSlideShowButton"><?php esc_html_e('Show slidewhow buttton:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showSlideShowButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showSlideShowAnimation"><?php esc_html_e('Show slideshow animation:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showSlideShowAnimation" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="slideShowAutoPlay"><?php esc_html_e('Slideshow autoplay:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="slideShowAutoPlay" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="slideShowAutoStop"><?php esc_html_e('Slideshow autostop:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="slideShowAutoStop" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('If set to yes and the slideshow is playing, when the lightbox will get to the last item the slideshow will stop.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="slideShowDelay"><?php esc_html_e('Slideshow delay:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="slideShowDelay" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Slideshow delay in seconds.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
			</table>
			
			<table>	
				<tr>
		    		<td>
		    			<label for="slideShowBkColor"><?php esc_html_e('Slideshow animation background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="slideShowBkColor" class="text ui-widget-content ui-corner-all">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="slideShowFillColor"><?php esc_html_e('Slideshow animation fill color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="slideShowFillColor" class="text ui-widget-content ui-corner-all">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="useKeyboard"><?php esc_html_e('Use keyboard:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useKeyboard" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Enable or disable keyboard support. RIGHT-KEY - go to the next item, LEFT-KEY - go to the previous item plus video keyboard...', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="useDoubleClick"><?php esc_html_e('Use double click:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useDoubleClick" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Enable or disable double click to maximize/minimize the lightbox item, this only applies to images.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showCloseButton"><?php esc_html_e('Show close button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showCloseButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showFullscreenButton"><?php esc_html_e('Show fullscreen button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showFullscreenButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showZoomButton"><?php esc_html_e('Show zoom button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showZoomButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showCounter"><?php esc_html_e('Show conter:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showCounter" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Show or hide the counter. The counter shows the current viewed item number and total items number.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showNextAndPrevBtns"><?php esc_html_e('Show next and prev button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showNextAndPrevBtns" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="hideButtonsOnDrag"><?php esc_html_e('Hide buttons on drag:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="hideButtonsOnDrag" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('When the lightbox item is dragged and hold, after a second the buttons (next button, prev button, close button etc...) opacity will decrease. This only applies if the button\'s alignment is set to in.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="maxZoom"><?php esc_html_e('Maximum zoom:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="maxZoom" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('A number that represents the zoom value for the image when it is maximized, 1 represents the default size.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="buttonsHideDelay"><?php esc_html_e('Buttons hide delay:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="buttonsHideDelay" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('A float number that represents the time in seconds until the buttons will hide after a period of user inactivity, for example, to hide the buttons after six seconds after the user stopped using the lightbox (move mouse or touch screen) set this option to 6.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="defaultItemWidth"><?php esc_html_e('Default item width:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="defaultItemWidth" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The lightbox item default width in px for all types except images.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    </table>

		    <table>
		    	<tr>
		    		<td>
		    			<label for="defaultItemHeight"><?php esc_html_e('Default item height:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="defaultItemHeight" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The lightbox item default height in px for all types except images.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="itemOffsetHeight"><?php esc_html_e('Item offset height:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="itemOffsetHeight" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Offset/gap in px for the lightbox items when buttons are positioned in or out.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="itemOffsetHeightButtonsTop"><?php esc_html_e('Offset for buttons when aligned top:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="itemOffsetHeightButtonsTop"  class="text ui-widget-content ui-corner-all">
		    			<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Offset/gap in px for the buttons when alligned top.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="spaceBetweenBtns"><?php esc_html_e('Space between buttons:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="spaceBetweenBtns" class="text ui-widget-content ui-corner-all">
		    			<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Space between button in px.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="buttonsOffsetIn"><?php esc_html_e('Buttons offset in:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="buttonsOffsetIn" class="text ui-widget-content ui-corner-all">
		    			<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Space/gap between the buttons and the main lightbox item.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="buttonsOffsetOut"><?php esc_html_e('Buttons offset out:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="buttonsOffsetOut" class="text ui-widget-content ui-corner-all">
		    			<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Space/gap between the buttons and the and window left or right side.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="itemBorderSize"><?php esc_html_e('Item border size:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="itemBorderSize" class="text ui-widget-content ui-corner-all">
		    			<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Item border size in px.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="itemBackgroundColor"><?php esc_html_e('Item background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="itemBackgroundColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="itemBorderColor"><?php esc_html_e('Item border color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="itemBorderColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="preloaderBkColor"><?php esc_html_e('Preloader background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="preloaderBkColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="preloaderFillColor"><?php esc_html_e('Preloader fill color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="preloaderFillColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="backgroundColor"><?php esc_html_e('Main lightbox background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="backgroundColor" />
		    		</td>
		    	</tr>
		    </table>
		</div>

		<div id="tab2" class="tab">
			<table>	
				<tr>
		    		<td>
		    			<label for="shareButtons"><?php esc_html_e('Share buttons:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="shareButtons" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Social share buttons separated by comma "facebook", "twitter", "linkedin", "tumblr", "pinterest", "reddit", "buffer", "digg", "blogger". Leave this empty to remove the share button.', 'fwdrl'); ?> ">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="shareText"><?php esc_html_e('Share window text', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="shareText" class="text ui-widget-content ui-corner-all">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="sharedURL"><?php esc_html_e('Share URL type', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="sharedURL" class="ui-corner-all">
							<option value="deeplink"><?php esc_html_e('deeplink', 'fwdrl'); ?></option>
							<option value="page"><?php esc_html_e('page', 'fwdrl'); ?></option>
							<option value="media"><?php esc_html_e('media', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="shareMainBackgroundColor"><?php esc_html_e('Share main background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="shareMainBackgroundColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="shareBackgroundColor"><?php esc_html_e('Share window background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="shareBackgroundColor" />
		    		</td>
		    	</tr>
		    </table>
		</div>
	
		<div id="tab3" class="tab">
			<table>
				<tr>
					<td>
						<label for="showThumbnails"><?php esc_html_e('Show thumbnails:', 'fwdrl'); ?></label>
					</td>
					<td>
						<select id="showThumbnails" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<label for="showThumbnailsIcon"><?php esc_html_e('Show thumbnails play icon:', 'fwdrl'); ?></label>
					</td>
					<td>
						<select id="showThumbnailsIcon" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
					</td>
				</tr>
				
				<tr>
		    		<td>
		    			<label for="thumbnailsHeight"><?php esc_html_e('Thumbnails height:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="thumbnailsHeight"  class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The thumbnail height in px, please make sure that you are saving your thumbnails images to the height sepecified in this option.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
					<td>
						<label for="thumbnailsOverlayColor"><?php esc_html_e('Thumbnails overlay color:', 'fwdrl'); ?></label>
					</td>
					<td>
						<input type="text" id="thumbnailsOverlayColor" class="text ui-widget-content ui-corner-all">
					</td>
				</tr>
				<tr>
		    		<td>
		    			<label for="thumbnailsBorderSize"><?php esc_html_e('Thumbnails border size:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="thumbnailsBorderSize" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The thumbnail border size in px.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				<tr>
					<td>
						<label for="thumbnailsBorderColor"><?php esc_html_e('Thumbnails border color:', 'fwdrl'); ?></label>
					</td>
					<td>
						<input type="text" id="thumbnailsBorderColor" class="text ui-widget-content ui-corner-all">
					</td>
				</tr>
				<tr>
		    		<td>
		    			<label for="spaceBetweenThumbnailsAndItem"><?php esc_html_e('Space between thumbnails and item:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="spaceBetweenThumbnailsAndItem" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The space/gap between the thumbnails and the lightbox item.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
					<td>
						<label for="spaceBetweenThumbnails"><?php esc_html_e('Space between thumbnails:', 'fwdrl'); ?></label>
					</td>
					<td>
						<input type="text" id="spaceBetweenThumbnails" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The space/gap between the thumbnails in px.', 'fwdrl'); ?>">
					</td>
				</tr>
			</table>
		</div>
		
		<div id="tab4" class="tab">
			<table>
				<tr>
		    		<td>
		    			<label for="caption"><?php esc_html_e('Use caption:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="caption" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Disable or enable the caption globally for all items.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="captionPosition"><?php esc_html_e('Caption position:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="captionPosition" class="ui-corner-all">
							<option value="topin"><?php esc_html_e('top-in', 'fwdrl'); ?></option>
							<option value="bottomin"><?php esc_html_e('bottom-in', 'fwdrl'); ?></option>
							<option value="bottomout"><?php esc_html_e('bottom-out', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="showCaptionOnSmallScreens"><?php esc_html_e('Show caption on small screens:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showCaptionOnSmallScreens" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Show or hide caption on small screens.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="animateCaption"><?php esc_html_e('Animate caption:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="animateCaption" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>


				<tr>
		    		<td>
		    			<label for="captionAnimationType"><?php esc_html_e('Caption animation type:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="captionAnimationType" class="ui-corner-all">
							<option value="opacity">opacity</option>
							<option value="motion">motion</option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The type of animation of the item caption when it appears.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
			</table>
		</div>

		<div id="tab5" class="tab">
			<table>	
				<tr>
		    		<td>
		    			<label for="useVideo"><?php esc_html_e('Use video:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="useVideo" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Always set this to no if you don\'t use video.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
				
				<tr>
		    		<td>
		    			<label for="fillEntireScreenWithPoster"><?php esc_html_e('Fill entire video screen:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="fillEntireScreenWithPoster" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Fill the video screen poster to cover the entire video screen viewport.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="volume"><?php esc_html_e('Volume:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="volume" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('A float number from 0 to 1 that represents the video/audio volume.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="videoAutoPlay"><?php esc_html_e('Video autoplay:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="videoAutoPlay" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Video/audio autoplay only when the lightbox is opened.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="videoAutoPlayText"><?php esc_html_e('Video autoplay unmute text:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
						<input type="text" id="videoAutoPlayText" class="text ui-widget-content ui-corner-all">
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="nextVideoAutoPlay"><?php esc_html_e('Next video autoplay:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="nextVideoAutoPlay" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Video/audio autoplay for the next or previous item, when the lightbox item is changed.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showLogo"><?php esc_html_e('Show logo:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showLogo" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="logoPath"><?php esc_html_e('Logo path:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="logoPath" class="text ui-widget-content ui-corner-all">
		    			<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Add the logo path from the media library or an extrnal URL. If no path is added the logo path will be taken directly from the lightbox video skin folder.', 'fwdrl'); ?>">
		    			<button id="uvp_logo_image_btn"><?php esc_html_e('Add Image', 'fwdrl'); ?></button>
						
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="logoLink"><?php esc_html_e('Logo link:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="logoLink" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The URL of the page to open when the logo is clicked.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showControllerWhenVideoIsStopped"><?php esc_html_e('Show video controler by default:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showControllerWhenVideoIsStopped" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Show the video/audio controller (play, pause, scrubber, etc) when the video is stopped and not playing.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showDefaultControllerForVimeo"><?php esc_html_e('Show default controler for Vimeo:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showDefaultControllerForVimeo" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('Use the default EVP controller (play, pause, scrubber, etc) for Vimeo videos.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showScrubberWhenControllerIsHidden"><?php esc_html_e('Show scrubber when controler is hidden:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showScrubberWhenControllerIsHidden" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showRewindButton"><?php esc_html_e('Show rewind button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showRewindButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
			</table>

			<table>
				<tr>
		    		<td>
		    			<label for="showVolumeButton"><?php esc_html_e('Show volume button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showVolumeButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="showTime"><?php esc_html_e('Show time:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showTime" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="timeColor"><?php esc_html_e('Time color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="timeColor" />
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="showChromecastButton"><?php esc_html_e('Show Chromecast button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showChromecastButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="showPlaybackRateButton"><?php esc_html_e('Show playbackrate button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showPlaybackRateButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showQualityButton"><?php esc_html_e('Show Youtube quality button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showQualityButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showFullScreenButton"><?php esc_html_e('Show fullscreen button:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showFullScreenButton" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="showScrubberToolTipLabel"><?php esc_html_e('Show scrubbers tooltips:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<select id="showScrubberToolTipLabel" class="ui-corner-all">
							<option value="true"><?php esc_html_e('yes', 'fwdrl'); ?></option>
							<option value="false"><?php esc_html_e('no', 'fwdrl'); ?></option>
						</select>
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="thumbnailsPreviewWidth"><?php esc_html_e('Thumbnails preview window width:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="thumbnailsPreviewWidth" class="text ui-widget-content ui-corner-all">
						<img class="img-tooltip" src="<?php echo esc_url($toolTipImgSrc); ?>" title="<?php esc_html_e('The thumbnails window preview width in px. The height is set automatically to keep a correct ratio.', 'fwdrl'); ?>">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="thumbnailsPreviewBackgroundColor"><?php esc_html_e('Thumbnails preview window background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="thumbnailsPreviewBackgroundColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="thumbnailsPreviewLabelBackgroundColor"><?php esc_html_e('Thumbnails preview window label background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="thumbnailsPreviewLabelBackgroundColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="thumbnailsPreviewLabelFontColor"><?php esc_html_e('Thumbnails preview window font color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="thumbnailsPreviewLabelFontColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="youtubeQualityButtonNormalColor"><?php esc_html_e('Youtube quality button normal color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="youtubeQualityButtonNormalColor" />
		    		</td>
		    	</tr>
			</table>

			<table>
				<tr>
		    		<td>
		    			<label for="youtubeQualityButtonSelectedColor"><?php esc_html_e('Youtube quality button selected color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="youtubeQualityButtonSelectedColor" />
		    		</td>
		    	</tr>
				<tr>
		    		<td>
		    			<label for="scrubbersToolTipLabelBackgroundColor"><?php esc_html_e('Scrubbers tooltips background color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="scrubbersToolTipLabelBackgroundColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="scrubbersToolTipLabelFontColor"><?php esc_html_e('Scrubbers tooltips font color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="scrubbersToolTipLabelFontColor" />
		    		</td>
		    	</tr>
		    	
		    	<tr>
		    		<td>
		    			<label for="audioVisualizerLinesColor"><?php esc_html_e('Audio visualizer lines color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="audioVisualizerLinesColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="audioVisualizerCircleColor"><?php esc_html_e('Audio visualizer circle color:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input id="audioVisualizerCircleColor" />
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="skipToVideoText"><?php esc_html_e('Skip to video text:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="skipToVideoText" class="text ui-widget-content ui-corner-all">
		    		</td>
		    	</tr>
		    	<tr>
		    		<td>
		    			<label for="skipToVideoButtonText"><?php esc_html_e('Skip to video button text:', 'fwdrl'); ?></label>
		    		</td>
		    		<td>
		    			<input type="text" id="skipToVideoButtonText" class="text ui-widget-content ui-corner-all">
		    		</td>
		    	</tr>
			</table>
		</div>
	
	</div>
	
	<input type="hidden" id="settings_data" name="settings_data" value="">
	<input id="update_btn" type="submit" name="submit" value="<?php esc_html_e('Update Settings', 'fwdrl'); ?>" />
	<input id="reset_btn" type="submit" name="submit" value="<?php esc_html_e('Reset Settings', 'fwdrl'); ?>" />
	
	<?php wp_nonce_field("fwdrl_general_settings_update", "fwdrl_general_settings_nonce"); ?>
</form>

<?php if(!(empty($msg))): ?>
<div class='fwd-updated'>
	<p class="fwd-updated-p">
		<?php echo esc_html($msg); ?>
	</p>
</div>
<?php endif; ?>