<?php
/**
 * @version		$Id$
 * @author		JoomlaUX
 * @package		Joomla.Site
 * @subpackage	mod_jux_easy_megamenu
 * @copyright	Copyright (C) 2008 - 2018 JoomlaUX. All rights reserved.
 * @license		License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
 */

defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Language\Text;
use Joomla\Filter\OutputFilter;
use Joomla\CMS\Uri\Uri;

if (!class_exists('JoomlaMenuTpl')) {
  class JoomlaMenuTpl
  {
      static $menuType = '';
      static $params = array();
      static $isFrontEnd = false;
      static $_enableBs3 = 0;
      function __construct($menuType, $params, $_enableBs3, $isFrontEnd)
      {
          self::$menuType = $menuType;
          self::$params = $params;
          self::$isFrontEnd = $isFrontEnd;
          self::$_enableBs3 = $_enableBs3;
      }

      static function beginmenu ($vars) {
          $menu = $vars['menu'];
          $options = (array) json_decode($menu->getParam('mega_options', ''), true);
          $animation_class = '';
          $menu_orientation_class = '';

          if(isset($options[self::$menuType])) {
              $option = $options[self::$menuType];
              if($option['menu_orientation'] == 'horizontal')
              {
                  $menu_orientation_class .= ' '.$option['menu_orientation'];
              } else {
                  $menu_orientation_class .= ' '.$option['menu_orientation'];
              }
              $animation_class .= ($option['sm_animation'] != "") ? ' animate '.$option['sm_animation'] : '';
          }

          $data = ' data-type="hover"';
          $animation_duration = $menu->getParam ('animation_duration', 0);
          $cls = ' class="jux-easy-megamenu clearfix jux-collapse'.$menu_orientation_class.$animation_class.'"';
          $data .= ($animation_class != '' && $animation_duration) ? ' data-duration="'.$animation_duration.'"' : '';
          return "<div$cls$data>";
      }

      static function endmenu ($vars) {
          return '</div>';
      }

      static function beginnav ($vars) {
          $item = $vars['item'];
          $menu = $vars['menu'];
          $mobile = $vars['mobile'];
          $cls = '';
          if (!$item) {
              // first nav
              $cls = 'meganav level0';
              if (self::$isFrontEnd){
                  if($mobile) {
                      $cls .= ' jux-nav-mobile';
                  } else {
                      $cls .= ' jux-nav';
                  }
              } else {
                  $cls .= ' sortable-top-item';
              }
              if(!$vars['show_items'] && !$menu->get('_isFrontEnd')) {
                  $cls .= ' hide-items';
              }
          } else {
              $cls .= ' mega-nav';
              $cls .= ' level'.$item->level;
              if (!self::$isFrontEnd){
                $cls .= ' sortable-sub-item';
              }
          }

          if ($cls) $cls = 'class="'.trim($cls).'"';


          return '<ul '.$cls.'>';
      }
      static function endnav ($vars) {
          return '</ul>';
      }

      static function beginmega ($vars) {
          $item = $vars['item'];
          $menu = $vars['menu'];
          $mobile = isset($vars['mobile']) ? $vars['mobile'] : false;
          $setting = $item->setting;
          $sub = $setting['sub'];
          $mobile = $vars['mobile'];
          $cls = 'jux-nav-child '.($item->dropdown ? 'jux-dropdown-menu jux-mega' : 'mega-group-ct');
          if($mobile) {
              $cls .= self::$_enableBs3 == 1 ? ' col-xs-12' : ' span12';
          }
          $style = '';
          $data = '';

          $options = (!empty(self::$params)) ? (array)json_decode($menu->getParam('mega_options', ''), true) : '';
          $option = isset($options[self::$menuType]) ? $options[self::$menuType] : '';

          $align_sub = isset($setting['alignsub']) ? $setting['alignsub'] : 'left';
          if (isset($sub['class'])) {
            $data .= " data-class=\"{$sub['class']}\"";
            $cls .= ' '.$sub['class'];
          }
          if (isset($setting['alignsub']) && $setting['alignsub'] == 'justify') {
              if(!$mobile && !self::$isFrontEnd) {
                  $cls .= self::$_enableBs3 == 1 ? " col-xs-12" : " span12";
              }

              if (isset($sub['width'])) {
                  if(isset($option['menu_orientation']) && $option['menu_orientation'] == 'vertical') {
                      if ($item->dropdown)
                          $style = " style=\"width:{$sub['width']}px\"";
                      if (!self::$isFrontEnd){
                          $data .= " data-width=\"{$sub['width']}\"";
                      }
                  }
              }
          } else {
              if (isset($sub['width'])) {
                  if ($item->dropdown) $style = " style=\"width:{$sub['width']}px\"";
                  if (!self::$isFrontEnd) {
                      $data .= " data-width=\"{$sub['width']}\"";
                  }
              }
              if (isset($sub['class'])) {
                  $cls .= ' '.$sub['class'];
                  $data .= " data-class=\"{$sub['class']}\"";
              }
          }

          if ($cls) $cls = 'class="'.trim($cls).'"';

          if($mobile) {
              $tpl = "<div $cls><div class=\"mega-dropdown-inner\">";
          } else {
              if(self::$isFrontEnd)
                $tpl = "<div $cls $style $data><div class=\"mega-dropdown-inner\">";
            else
                $tpl = "<div $cls $style $data><div class=\"mega-dropdown-inner sortable-juxr\">";
          }
          return $tpl;
      }
      static function endmega ($vars) {
          return '</div></div>';
      }

      static function beginrow ($vars) {
          $rowClass = self::$_enableBs3 == 1 ? 'row' : 'row-fluid row';
          $rowClass .= ' sortable-col';
          return '<div class="row-wrap"><div class="'.$rowClass.'">';
      }
      static function endrow ($vars) {
          return '</div></div>';
      }

      static function begincol ($vars) {
          $mobile = isset($vars['mobile']) ? $vars['mobile'] : false;
          $setting = isset($vars['setting']) ? $vars['setting'] : array();
          $width = isset($setting['width']) ? $setting['width'] : '12';
          $data = "data-width=\"$width\"";
          if(!$mobile) {
              $cls = self::$_enableBs3 == 1 ? "col-xs-12 col-sm-$width" : "span$width";
          } else {
              $cls = "";
          }
          if (isset($setting['position'])) {
              $cls .= " mega-col-module";
              $data .= " data-position=\"{$setting['position']}\"";
          } else {
              $cls .= " mega-col-nav";
          }
          $cls .= " mega-col-block";
          if (isset($setting['class'])) {
              $cls .= " {$setting['class']}";
              $data .= " data-class=\"{$setting['class']}\"";
          }
          if (isset($setting['hidewcol'])) {
              $data .= " data-hidewcol=\"1\"";
              $cls .= " hidden-collapse";
          }

          if($mobile || self::$isFrontEnd) {
              $tpl = "<div class=\"$cls\"><div class=\"mega-inner\">";
          } else {
              $tpl = "<div class=\"$cls\" $data><div class=\"mega-inner\">";
          }

          return $tpl;
      }
      static function endcol ($vars) {
          return '</div></div>';
      }

      static function beginitem ($vars) {
          //$setting = isset($vars['setting']) ? $vars['setting'] : array();
          $item = $vars['item'];
          $menu = $vars['menu'];
          $mobile = $vars['mobile'];
          $setting = $item->setting;
          $cls = $item->class;
          $options = (!empty(self::$params)) ? (array)json_decode($menu->getParam('mega_options', ''), true) : '';
          $option = isset($options[self::$menuType]) ? $options[self::$menuType] : '';

          if ($item->dropdown) {
              $cls .= $item->level == 1 ? 'jux-dropdown' : 'jux-dropdown-submenu';
          }

          if ($item->mega) {
              if(!$mobile) {
                  $cls .= ' jux-mega hasChild';
              }
          }
          if ($item->group) $cls .= ' mega-group';
          if ($item->display == (-1)) $cls .=' display-toggle';
          if(isset($item->isitem)){
              $type = 'item';
          }else{
              $type = 'category';
          }
          $idArr = explode('_',$item->id);
          $id = !$menu->get('_isFrontEnd') ? $item->id : ($idArr[0]);
          $data = "data-id=\"{$id}\" data-type=\"{$type}\" data-level=\"{$item->level}\"";
          if (!$menu->get('_isFrontEnd')){
              $data .= " data-display=\"{$item->display}\"";

          }
          if ($item->group) $data .= " data-group=\"1\"";
          if (isset($setting['class'])) {
              $data .= " data-class=\"{$setting['class']}\"";
              $cls .= " {$setting['class']}";
          }
          $align_sub = isset($setting['alignsub']) ? $setting['alignsub'] : 'left';
          $menuOrientation = isset($option['menu_orientation']) ? $option['menu_orientation'] : 'horizontal';
          if($item->mega) {
              if($menuOrientation == 'horizontal') {
                  $data .= " data-alignsub=\"{$align_sub}\"";
                  $cls .= " mega-align-{$align_sub}";
              } else {
                  if($align_sub == 'center') {
                      $data .= " data-alignsub=\"left\"";
                      $cls .= " mega-align-left";
                  } else {
                      $data .= " data-alignsub=\"{$align_sub}\"";
                      $cls .= " mega-align-{$align_sub}";
                  }
              }

          }
          if (isset($setting['title'])) $data .= " data-title=\"{$setting['title']}\""; else $data .= " data-title=\"{$item->title}\"";
          if (isset($setting['hidesub'])) $data .= " data-hidesub=\"1\"";
          if (isset($setting['sicon'])) $data .= " data-sicon=\"{$setting['sicon']}\"";
          if (isset($setting['imgurl'])) $data .= " data-imgurl=\"{$setting['imgurl']}\"";
          if (isset($setting['xicon'])) $data .= " data-xicon=\"{$setting['xicon']}\"";
          if (isset($setting['caption'])) $data .= " data-caption=\"".htmlspecialchars($setting['caption'])."\"";
          if (isset($setting['hidewcol'])) {
              $data .= " data-hidewcol=\"1\"";
              $cls .= " sub-hidden-collapse";
          }

          $cls .= ' jux-menu-item-'.$item->id;

          if( isset($setting['title']) && $setting['title'] == " " && !isset($setting['caption']) ) {
            $cls .= ' jux-empty-title';
          }
          if ($cls) $cls = 'class="'.trim($cls).'"';

          if(!$menu->get('_isFrontEnd')){
              $li_html = "<li $cls $data>";
          } else {
              $li_html = "<li $cls>";

          }


          return $li_html;
      }
      static function enditem ($vars) {
          $item = $vars['item'];
          $setting = $item->setting;
          return '</li>';
      }
      static function item ($vars) {
          $item = $vars['item'];
          $menu = $vars['menu'];
          $mobile = isset($vars['mobile']) ? $vars['mobile'] : false;
          $options = (!empty($menu)) ? (array) json_decode($menu->getParam('mega_options', ''), true) : '';
          $option = isset($options[self::$menuType]) ? $options[self::$menuType] : '';
          $setting = $item->setting;

          // Note. It is important to remove spaces between elements.
          $vars['class'] = '';
          $vars['title'] = '';
          $vars['dropdown'] = '';
          $vars['caret'] = '';
          $vars['icon'] = '';
          $vars['caption'] = '';
          $align_sub = isset($setting['alignsub']) ? $setting['alignsub'] : 'left';
          $menuOrientation = isset($option['menu_orientation']) ? $option['menu_orientation'] : 'horizontal';
          if($item->dropdown && $item->level < 2){
              $vars['class'] .= ' dropdown-toggle';
              $vars['dropdown'] = ' ';// data-toggle="dropdown"
          }
          if($item->dropdown) {
              if($item->level < 2) {

                  if (!$mobile) {
                          $vars['caret'] = '<i class="jux-caret fa fa-angle-down"></i>';
                  }
              } else {
                  if (!$mobile) {
                      if($align_sub == 'right') {
                          $vars['caret'] = '<i class="jux-caret fa fa-angle-left"></i>';
                      } else {
                          $vars['caret'] = '<i class="jux-caret fa fa-angle-right"></i>';
                      }
                  }

              }
          }

          if($mobile && $item->mega && $item->dropdown) {
              $vars['mobile_caret'] = '<i class="jux-caret fa fa-angle-right"></i>';
          }

          if ($item->group) $vars['class'] .= ' mega-group-title';

          if(self::$isFrontEnd) {
            if(isset($setting['title']) && $setting['title'] != "" && $setting['title'] != null) {
              if($setting['title'] == " ") {
                $vars['linktype'] = '<span></span>';
              } else {
                $vars['linktype'] = '<span>'.$setting['title'].'</span>';
              }
            } else {
              $vars['linktype'] = '<span>'.$item->title.'</span>';
            }
          } else {
            if(isset($setting['title']) && $setting['title'] != "" && $setting['title'] != null) {
              if($setting['title'] == " ") {
                $vars['linktype'] = '<span></span><span class="menu-original-title">'.$item->title.'</span>';
              } else {
                $vars['linktype'] = '<span>'.$setting['title'].'</span><span class="menu-original-title">'.$item->title.'</span>';
              }
            } else {
              $vars['linktype'] = '<span>'.$item->title.'</span><span class="menu-original-title">'.$item->title.'</span>';
            }
          }

          if( $item->level <= 1){
              $icon_pos = isset($option['topmenu_icon_position']) ? $option['topmenu_icon_position'] : 'left';
          } else {
              $icon_pos = isset($option['submenu_icon_position']) ? $option['submenu_icon_position'] : 'left';
          }

        if(isset($setting['sicon'])) {
            if($setting['sicon'] == 1) {
                if (isset($setting['xicon']) && $setting['xicon']) {
                    $icon_pos_cls = '';
                    if ($icon_pos == 'left')
                        $icon_pos_cls .= 'jux-icon-l';
                    else if ($icon_pos == 'right') {
                        $icon_pos_cls .= 'jux-icon-r';
                    } else {
                        $icon_pos_cls .= 'jux-icon-above';
                    }
                    $vars['icon'] = '<i class="jux-icon '.$icon_pos_cls . ' '. $setting['xicon'].'"></i> ';
                }
            } else {
                if (isset($setting['imgurl']) && $setting['imgurl']) {
                    $icon_pos_cls = '';
                    if ($icon_pos == 'left')
                        $icon_pos_cls .= 'jux-img-l';
                    else if ($icon_pos == 'right') {
                        $icon_pos_cls .= 'jux-img-r';
                    } else {
                        $icon_pos_cls .= 'jux-img-above';
                    }
                    $vars['icon'] = '<div class="jux-img '.$icon_pos_cls . '"><img src="'.$setting['imgurl'].'" alt=""></div>';
                }
            }
        } else {
            if (isset($setting['xicon']) && $setting['xicon']) {
                $icon_pos_cls = '';
                if ($icon_pos == 'left')
                    $icon_pos_cls .= 'jux-icon-l';
                else if ($icon_pos == 'right') {
                    $icon_pos_cls .= 'jux-icon-r';
                } else {
                    $icon_pos_cls .= 'jux-icon-above';
                }
                $vars['icon'] = '<i class="jux-icon '.$icon_pos_cls . ' '. $setting['xicon'].'"></i> ';
            }
        }
          if (isset($setting['caption']) && $setting['caption']) {
              $vars['caption'] = '<span class="mega-caption">'.$setting['caption'].'</span>';
          }


          $html = '';
          switch ($item->type)
          {
              case 'separator':
                  $html = self::item_separator ($vars);
                  break;
              case 'component':
                  $html = self::item_component ($vars);
                  break;
              case 'url':
              default:
                  $html = self::item_url ($vars);
          }

          return $html;
      }

      static function item_url ($vars) {
          $menu = $vars['menu'];
          $options = (!empty(self::$params)) ? (array)json_decode($menu->getParam('mega_options', ''), true) : '';
          $option = isset($options[self::$menuType]) ? $options[self::$menuType] : '';
          $item = $vars['item'];
          $class = $vars['class'];
          $title = $vars['title'];
          $dropdown = $vars['dropdown'];
          $linktype = $vars['linktype'];
          $icon = $vars['icon'];
          $caption = $vars['caption'];
          $flink = $item->flink;
          $flink = OutputFilter::ampReplace(htmlspecialchars($flink));
          $caret = $vars['caret'];
          $mobile_caret = isset($vars['mobile_caret']) ? $vars['mobile_caret'] : '';
          $setting = $item->setting;
          $align_sub = isset($setting['alignsub']) ? $setting['alignsub'] : 'left';
          $link = "";
          if( $item->level <= 1){
              $icon_pos = isset($option['topmenu_icon_position']) ? $option['topmenu_icon_position'] : 'left';
          } else {
              $icon_pos = isset($option['submenu_icon_position']) ? $option['submenu_icon_position'] : 'left';
          }
          switch ($item->browserNav) :
              default:
              case 0:
                  if($icon_pos == 'right') {
                      $link = "<a class=\"$class\" href=\"$flink\"  $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "<div class='jux-menu-item-title'>$linktype$caption</div>$icon$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  } else {
                          $link = "<a class=\"$class\" href=\"$flink\"  $title $dropdown>" .
                              "<div class='jux-menu-item-wrapper'>" .
                              "$icon<div class='jux-menu-item-title'>$linktype$caption</div>$caret$mobile_caret" .
                              "</div>" .
                              "</a>";
                  }
                  break;
              case 1:
                  // _blank
                  if($icon_pos == 'right') {
                      $link = "<a class=\"$class\" href=\"$flink\"  target=\"_blank\" $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "<div class='jux-menu-item-title'>$linktype$caption</div>$icon$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  } else {
                      $link = "<a class=\"$class\" href=\"$flink\"  target=\"_blank\" $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "$icon<div class='jux-menu-item-title'>$linktype$caption</div>$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  }

                  break;
              case 2:
                  // window.open
                  $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,'.self::$params->get('window_open');
                  if($icon_pos == 'right') {
                      $link = "<a class=\"$class\" href=\"$flink\"  onclick=\"window.open(this.href,'targetWindow','$options');return false;\" $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "<div class='jux-menu-item-title'>$linktype$caption</div>$icon$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  } else {
                      $link = "<a class=\"$class\" href=\"$flink\"  onclick=\"window.open(this.href,'targetWindow','$options');return false;\" $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "$icon<div class='jux-menu-item-title'>$linktype$caption</div>$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  }
                  break;
          endswitch;

          return $link;
      }
      static function item_separator ($vars) {
          $menu = $vars['menu'];
          $options = (!empty(self::$params)) ? (array)json_decode($menu->getParam('mega_options', ''), true) : '';
          $option = isset($options[self::$menuType]) ? $options[self::$menuType] : '';
          $item = $vars['item'];
          $class = $vars['class'];
          $title = $vars['title'];
          $dropdown = $vars['dropdown'];
          $linktype = $vars['linktype'];
          $icon = $vars['icon'];
          $caption = $vars['caption'];
          // Note. It is important to remove spaces between elements.
          $caret = $vars['caret'];
          $mobile_caret = isset($vars['mobile_caret']) ? $vars['mobile_caret'] : '';
          $setting = $item->setting;
          $align_sub = isset($setting['alignsub']) ? $setting['alignsub'] : 'left';
          $class .= " separator";
          if( $item->level <= 1){
              $icon_pos = isset($option['topmenu_icon_position']) ? $option['topmenu_icon_position'] : 'left';
          } else {
              $icon_pos = isset($option['submenu_icon_position']) ? $option['submenu_icon_position'] : 'left';
          }
          if($icon_pos == 'right') {
              $item_tpl = "<span class=\"$class\">" .
                  "<div class='jux-menu-item-wrapper'>" .
                  "<div class='jux-menu-item-title'>$title$linktype$caption</div>$icon$caret$mobile_caret" .
                  "</div>" .
                  "</span>";
          } else {
              $item_tpl = "<span class=\"$class\">" .
                  "<div class='jux-menu-item-wrapper'>" .
                  "$icon<div class='jux-menu-item-title'>$title$linktype$caption</div>$caret$mobile_caret" .
                  "</div>" .
                  "</span>";
          }
          return $item_tpl;
      }
      static function item_component ($vars) {
          $menu = $vars['menu'];
          $options = (!empty(self::$params)) ? (array)json_decode($menu->getParam('mega_options', ''), true) : '';
          $option = isset($options[self::$menuType]) ? $options[self::$menuType] : '';
          $item = $vars['item'];
          $class = $vars['class'];
          $title = $vars['title'];
          $dropdown = $vars['dropdown'];
          $linktype = $vars['linktype'];
          $icon = $vars['icon'];
          $caption = $vars['caption'];
          $caret = $vars['caret'];
          $mobile_caret = isset($vars['mobile_caret']) ? $vars['mobile_caret'] : '';
          $setting = $item->setting;
          $align_sub = isset($setting['alignsub']) ? $setting['alignsub'] : 'left';
          // Note. It is important to remove spaces between elements.

          $link = "";
          if( $item->level <= 1){
              $icon_pos = isset($option['topmenu_icon_position']) ? $option['topmenu_icon_position'] : 'left';
          } else {
              $icon_pos = isset($option['submenu_icon_position']) ? $option['submenu_icon_position'] : 'left';
          }

          switch ($item->browserNav) :
              default:
              case 0:
              if($icon_pos == 'right') {
                      $link = "<a class=\"$class\" href=\"{$item->flink}\"  $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "<div class='jux-menu-item-title'>$linktype$caption</div>$icon$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  } else {
                      $link = "<a class=\"$class\" href=\"{$item->flink}\"  $title $dropdown>" .
                          "<div class='jux-menu-item-wrapper'>" .
                          "$icon<div class='jux-menu-item-title'>$linktype$caption</div>$caret$mobile_caret" .
                          "</div>" .
                          "</a>";
                  }

                  break;
              case 1:
                  // _blank
                  if($icon_pos == 'right') {
                      $link = "<a class=\"$class\" href=\"{$item->flink}\"  target=\"_blank\" $title $dropdown>$linktype$icon $caret$caption$mobile_caret</a>";
                  } else {
                      $link = "<a class=\"$class\" href=\"{$item->flink}\"  target=\"_blank\" $title $dropdown>$icon$linktype $caret$caption$mobile_caret</a>";
                  }

                  break;
              case 2:
                  // window.open
                  if($icon_pos == 'right') {
                      $link = "<a class=\"$class\" href=\"{$item->flink}\"  onclick=\"window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;\" $title $dropdown>$linktype$icon $caret$caption$mobile_caret</a>";
                  } else {
                      $link = "<a class=\"$class\" href=\"{$item->flink}\"  onclick=\"window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;\" $title $dropdown>$icon$linktype $caret$caption$mobile_caret</a>";
                  }
                  break;
          endswitch;

          return $link;
      }

      static function beginOptionTabs() {
          $html  = '';
          $html .= '<ul id="optionTabs" class="xxx nav nav-tabs">';
          $html .= '<li class="active"><a href="#jux-general-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_FUNCTIONALITY_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-menu-bar-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_MENUBAR_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-top-menu-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_TOPMENU_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-top-menu-hover-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_TOPMENU_HOVER_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-sub-menu-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_SUBMENU_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-sub-menu-hover-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_SUBMENU_HOVER_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-mobile-menu-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_MOBILEMENU_TAB_LABEL').'</a></li>';
          $html .= '<li><a href="#jux-advanced-config" data-toggle="tab">'.Text::_('MOD_JUX_EASY_MEGAMENU_ADVANCED_TAB_LABEL').'</a></li>';
          $html .= '</ul>';

          return $html;
      }

      static function beginOptionTabsContent() {
          return '<div id="tabsContent" class="tab-content">';
      }

      static function endOptionTabsContent() {
          return '</div>';
      }

      static function generalTabContent($vars) {
          $menu_orientation_val = isset($vars['menu_orientation']) ? $vars['menu_orientation'] : 'horizontal';
          $menu_orientation_args = array('horizontal' => 'MOD_JUX_EASY_MEGAMENU_HORIZONTAL_LABEL', 'vertical' => 'MOD_JUX_EASY_MEGAMENU_VERTICAL_LABEL');
          $menu_vertical_dropdown_val = isset($vars['sm_vertical_drop']) ? $vars['sm_vertical_drop'] : 'ltr';
          $vertical_dropdown_args = array('ltr' => 'MOD_JUX_EASY_MEGAMENU_LEFTTORIGHT_LABEL', 'rtl' => 'MOD_JUX_EASY_MEGAMENU_RIGHTTOLEFT_LABEL');
          $menu_horizontal_dropdown_val = isset($vars['sm_horizontal_drop']) ? $vars['sm_horizontal_drop'] : 'down';
          $horizontal_dropdown_args = array('up' => 'MOD_JUX_EASY_MEGAMENU_UP_LABEL', 'down' => 'MOD_JUX_EASY_MEGAMENU_DOWN_LABEL');

          $html = '';
          $html .= '<div class="tab-pane active" id="jux-general-config" name="Funcationality" role="tabpanel" tabindex="-1">
  		<div class="row-fluid row">
  			<div class="span4 col-md-4">
  				<div id="jux-ez-mm-orientation" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_MENU_ORIENTATION_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $html .= self::generateSelectBox('orientation', 'MOD_JUX_EASY_MEGAMENU_ORIENTATION_LABEL', 'jux_ez_mm_orientation', $menu_orientation_args, $menu_orientation_val);
          $html .= self::generateSelectBox('horizontal-dropdown', 'MOD_JUX_EASY_MEGAMENU_SUBMENU_DIRECTION_LABEL', 'jux_ez_mm_horizontal_dropdown', $horizontal_dropdown_args, $menu_horizontal_dropdown_val);
          $html .='
  					</div>
                  </div>

                  <div id="jux-ez-mm-orientation" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_DIRECTION_LABEL').'</span>
  					</h3>
                      <div class="jux-opt-box-body">';
          $rtlDirection = isset($vars['rtl']) ? $vars['rtl'] : 0;
          $html .= self::generateCheckboxBox('rtl', 'MOD_JUX_EASY_MEGAMENU_RTL_DIRECTION_ENABLE_LABEL', 'jux_easy_mm_rtl', $rtlDirection);
          $html .='
  					</div>
                  </div>
  			</div>
  			<div class="span4 col-md-4">';
          $html .= '
  					<!-- </div>
  				</div>-->';
          $html .= '<div id="jux-ez-mm-animation" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ANIMATION_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $animation_val = isset($vars['sm_animation']) ? $vars['sm_animation'] : "";
          $animation_args = array('fading' => 'MOD_JUX_EASY_MEGAMENU_FADING_LABEL', 'slide' => 'MOD_JUX_EASY_MEGAMENU_SLIDE_LABEL', 'zoom' => 'MOD_JUX_EASY_MEGAMENU_ZOOM_LABEL', 'elastic' => 'MOD_JUX_EASY_MEGAMENU_ELASTIC_LABEL');
          $html .= self::generateSelectBox('animation', 'MOD_JUX_EASY_MEGAMENU_ANIMATION_LABEL', 'jux_ez_mm_animation', $animation_args, $animation_val, true);
          $animation_duration_val = isset($vars['sm_animation_duration']) ? $vars['sm_animation_duration'] : '300';
          $animation_duration_data = array('range'=>'min', 'value' => $animation_duration_val, 'min' => 100, 'max' => 500, 'step' => 1);
          $html .= self::generateRangeSliderBox('animation-duration-dropdown', 'MOD_JUX_EASY_MEGAMENU_DURATION_LABEL', 'duration', 'jux_ez_mm_animation_duration', $animation_duration_val, 'ms', $animation_duration_data);
          $animation_delay_val = isset($vars['sm_animation_delay']) ? $vars['sm_animation_delay'] : '0';
          $animation_delay_data = array('range'=>'min', 'value' => $animation_delay_val, 'min' => 0, 'max' => 1000, 'step' => 1);
          $html .= self::generateRangeSliderBox('animation-delay-dropdown', 'MOD_JUX_EASY_MEGAMENU_DELAY_LABEL', 'delay', 'jux_ez_mm_animation_delay', $animation_delay_val, 'ms', $animation_delay_data);
          $html .= '</div>
  				</div>
  			</div>
  			<div class="span4 col-md-4">
  			<div id="jux-ez-mm-sticky-menu" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_STICKY_MENU_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sticky_menu_val = isset($vars['sticky_menu']) ? $vars['sticky_menu'] : 0;
          $html .= self::generateSwitchBox('use-sticky', 'MOD_JUX_EASY_MEGAMENU_USE_STICKY_MENU_LABEL', 'jux_ez_mm_use_sticky', $sticky_menu_val);
          $sticky_wrap = isset($vars['sticky_wrap']) ? $vars['sticky_wrap'] : '90%';
          $html .= self::generateInputBox('sticky-wrap', 'MOD_JUX_EASY_MEGAMENU_STICKY_WRAP_LABEL', 'jux_ez_mm_sticky_wrap', $sticky_wrap);
          $sticky_menu_margin_top = isset($vars['sticky_margin_top']) ? $vars['sticky_margin_top'] : '0';
          $html .= self::generateInputBox('sticky-margin-top', 'MOD_JUX_EASY_MEGAMENU_STICKY_MARGIN_TOP_LABEL', 'jux_ez_mm_sticky_margin_top', $sticky_menu_margin_top);
          $html .= '
  					</div>
  				</div>
  				<div id="jux-ez-mm-other-options" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_OTHER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $disable_carets = isset($vars['disable_carets']) ? $vars['disable_carets'] : 0;
          $html .= self::generateCheckboxBox('disable-caret', 'MOD_JUX_EASY_MEGAMENU_DISABLE_CARETS_LABEL', 'jux_ez_mm_disable_caret', $disable_carets);
          $html .= '
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>';
          return $html;
      }

      static function menubarTabContent($vars) {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-menu-bar-config" name="xxx" tabindex="-1">
          <div class="row-fluid row">
              <div class="span4 col-md-4">';
          $html .= '

  				<!-- MENU BAR BORDER -->
  				<div id="menu-bar-border" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_border_styles = array(
              'solid'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_SOLID_LABEL',
              'dashed'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DASHED_LABEL',
              'dotted'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOTTED_LABEL',
              'double'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOUBLE_LABEL',
              'groove'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_GROOVE_LABEL',
              'inset'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_INSET_LABEL',
              'outset'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_OUTSET_LABEL',
              'ridge'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_RIDGE_LABEL'
          );
          $mb_border_style = isset($vars['menubar_border_style']) ? $vars['menubar_border_style'] : 'solid';
          $html .= self::generateSelectBox('menu-bar-border-style', 'MOD_JUX_EASY_MEGAMENU_BORDER_STYLE_LABEL', 'jux_mm_menu_bar_border_style', $mb_border_styles, $mb_border_style);
          $mb_border_width = isset($vars['menubar_border_width']) ? $vars['menubar_border_width'] : '0';
          $mb_border_width_data = array('range'=>'min', 'value' => $mb_border_width, 'min' => 0, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-border-width', 'MOD_JUX_EASY_MEGAMENU_BORDER_WIDTH_LABEL', 'border-width', 'jux_mm_menu_bar_border_width', $mb_border_width, 'px', $mb_border_width_data);
          $mb_border_color = isset($vars['menubar_border_color']) ? $vars['menubar_border_color'] : '#555';
          $html .= self::generateInputColorBox('menu-bar-border-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_menu_bar_border_color', $mb_border_color, '#555');

          $border_top_checked = isset($vars['menubar_border_top']) ? $vars['menubar_border_top'] : 0;
          $border_right_checked = isset($vars['menubar_border_right']) ? $vars['menubar_border_right'] : 0;
          $border_bottom_checked = isset($vars['menubar_border_bottom']) ? $vars['menubar_border_bottom'] : 0;
          $border_left_checked = isset($vars['menubar_border_left']) ? $vars['menubar_border_left'] : 0;
          $checkboxesGroup = array(
              array(
                  'name'      => 'jux_mm_menu_bar_border_position_top',
                  'value'     => 'top',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_TOP_LABEL',
                  'checked'   => $border_top_checked
              ),
              array(
                  'name'      => 'jux_mm_menu_bar_border_position_right',
                  'value'     => 'right',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_RIGHT_LABEL',
                  'checked'   => $border_right_checked
              ),
              array(
                  'name'      => 'jux_mm_menu_bar_border_position_bottom',
                  'value'     => 'bottom',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_BOTTOM_LABEL',
                  'checked'   => $border_bottom_checked
              ),
              array(
                  'name'      => 'jux_mm_menu_bar_border_position_left',
                  'value'     => 'left',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LEFT_LABEL',
                  'checked'   => $border_left_checked
              ),
          );
          $html .= self::generateCheckboxesGroupBox('menu-bar-border-position', 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LABEL', 'position', $checkboxesGroup);
          $html .= '
  					</div>
  				</div>

  				<!-- MENU BAR BORDER RADIUS -->
  				<div id="menu-bar-border-radius" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_radius_tleft = isset($vars['menubar_border_radius_tleft']) ? $vars['menubar_border_radius_tleft'] : '0';
          $mb_radius_tleft_data = array('range'=>'min', 'value' => $mb_radius_tleft, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-radius-top-left', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_TOPLEFT_LABEL', 'border-top-left', 'jux_mm_menu_bar_radius_top_left', $mb_radius_tleft, 'px', $mb_radius_tleft_data);
          $mb_radius_tright = isset($vars['menubar_border_radius_tright']) ? $vars['menubar_border_radius_tright'] : '0';
          $mb_radius_tright_data = array('range'=>'min', 'value' => $mb_radius_tright, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-radius-top-right', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_TOPRIGHT_LABEL', 'border-top-right', 'jux_mm_menu_bar_radius_top_right', $mb_radius_tright, 'px', $mb_radius_tright_data);
          $mb_radius_bright = isset($vars['menubar_border_radius_bright']) ? $vars['menubar_border_radius_bright'] : '0';
          $mb_radius_bright_data = array('range'=>'min', 'value' => $mb_radius_bright, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-radius-bottom-right', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_BOTTOMRIGHT_LABEL', 'border-bottom-right', 'jux_mm_menu_bar_radius_bottom_right', $mb_radius_bright, 'px', $mb_radius_bright_data);
          $mb_radius_bleft = isset($vars['menubar_border_radius_bleft']) ? $vars['menubar_border_radius_bleft'] : '0';
          $mb_radius_bleft_data = array('range'=>'min', 'value' => $mb_radius_bleft, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-radius-bottom-left', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_BOTTOMLEFT_LABEL', 'border-bottom-left', 'jux_mm_menu_bar_radius_bottom_left', $mb_radius_bleft, 'px', $mb_radius_bleft_data);
          $html .= '
  					</div>
  				</div>
  			</div>
  			<div class="span4 col-md-4">
  			    <!-- MENU BACKGROUND -->
  			    <div id="menu-bar-background" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BACKGROUND_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_bg_type = isset($vars['menubar_bg_type']) ? $vars['menubar_bg_type'] : 'solid';
          $mb_bg_types = array('solid' => 'MOD_JUX_EASY_MEGAMENU_SOLID_BACKGROUND_LABEL', 'gradient' => 'MOD_JUX_EASY_MEGAMENU_GRADIENT_BACKGROUND_LABEL');
          $html .= self::generateSelectBox('menu-bar-bg-type', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_TYPE_LABEL', 'jux_mm_menu_bar_bg_type', $mb_bg_types, $mb_bg_type);
          $mb_bg_solid_color = isset($vars['menubar_solid_bg']) ? $vars['menubar_solid_bg'] : '#fff';
          $html .= self::generateInputColorBox('menu-bar-solid-bg-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_COLOR_LABEL', 'jux_mm_menu_bar_solid_bg_color', $mb_bg_solid_color, '#fff');

          $mb_bg_start_color = isset($vars['menubar_bg_start_color']) ? $vars['menubar_bg_start_color'] : '#fff';
          $html .= self::generateInputColorBox('menu-bar-bg-start-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_START_COLOR_LABEL', 'jux_mm_menu_bar_bg_start_color', $mb_bg_start_color, '#fff');
          $mb_bg_end_color = isset($vars['menubar_bg_end_color']) ? $vars['menubar_bg_end_color'] : '#000';
          $html .= self::generateInputColorBox('menu-bar-bg-end-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_END_COLOR_LABEL', 'jux_mm_menu_bar_bg_end_color', $mb_bg_end_color, '#000');

          $html .= '
  					</div>
  				</div>
  				<!-- MENU BAR SHADOW -->
  				<div id="menu-bar-shadow" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_SHADOW_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_h_shadow_val = isset($vars['menubar_bs_h_length']) ? $vars['menubar_bs_h_length'] : '0';
          $mb_h_shadow_data = array('range'=>'min', 'value' => $mb_h_shadow_val, 'min' => -20, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-h-shadow', 'MOD_JUX_EASY_MEGAMENU_SHADOW_HORIZONTAL_LABEL', 'h-shadow', 'jux_mm_menu_bar_h_shadow', $mb_h_shadow_val, 'px', $mb_h_shadow_data);
          $mb_v_shadow_val = isset($vars['menubar_bs_v_length']) ? $vars['menubar_bs_v_length'] : '0';
          $mb_v_shadow_data = array('range'=>'min', 'value' => $mb_v_shadow_val, 'min' => -20, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-v-shadow', 'MOD_JUX_EASY_MEGAMENU_SHADOW_VERTIVAL_LABEL', 'v-shadow', 'jux_mm_menu_bar_v_shadow', $mb_v_shadow_val, 'px', $mb_v_shadow_data);
          $mb_shadow_blur_val = isset($vars['menubar_bs_blur']) ? $vars['menubar_bs_blur'] : '0';
          $mb_shadow_blur_data = array('range'=>'min', 'value' => $mb_shadow_blur_val, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-shadow-blur', 'MOD_JUX_EASY_MEGAMENU_SHADOW_BLUR_LABEL', 'shadow-blur', 'jux_mm_menu_bar_shadow_blur', $mb_shadow_blur_val, 'px', $mb_shadow_blur_data);
          $mb_shadow_size_val = isset($vars['menubar_bs_size']) ? $vars['menubar_bs_size'] : '0';
          $mb_shadow_size_data = array('range'=>'min', 'value' => $mb_shadow_size_val, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-shadow-size', 'MOD_JUX_EASY_MEGAMENU_SHADOW_SIZE_LABEL', 'shadow-size', 'jux_mm_menu_bar_shadow_size', $mb_shadow_size_val, 'px', $mb_shadow_size_data);
          $mb_shadow_color = isset($vars['menubar_bs_color']) ? $vars['menubar_bs_color'] : '';
          $html .= self::generateInputColorBox('menu-bar-shadow-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_menu_bar_shadow_color', $mb_shadow_color, 'rgba(255,255,255,0)');
          $mb_shadow_inset = isset($vars['menubar_bs_inset']) ? $vars['menubar_bs_inset'] : 0;
          $html .= self::generateCheckboxBox('menu-bar-shadow-inset', 'MOD_JUX_EASY_MEGAMENU_SHADOW_INTSET_LABEL', 'jux_mm_menu_bar_shadow_inset', $mb_shadow_inset);
          $html .= '
  					</div>
  				</div>
  			</div>
  			<div class="span4 col-md-4">
  			    <!-- MENU BAR ALIGNMENT -->
  			    <div id="menu-bar-alignment" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ALIGNMENT_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_align = isset($vars['menubar_align']) ? $vars['menubar_align'] : 'left';
          $mb_align_options = array(
              'left'      => 'MOD_JUX_EASY_MEGAMENU_ALIGNMENT_LEFT_LABEL',
              'center'    => 'MOD_JUX_EASY_MEGAMENU_ALIGNMENT_CENTER_LABEL',
              'right'     => 'MOD_JUX_EASY_MEGAMENU_ALIGNMENT_RIGHT_LABEL'
          );
          $html .= self::generateSelectBox('menu-bar-alignment', '', 'jux_mm_menu_bar_alignment', $mb_align_options, $mb_align);
          $html .= '
  					</div>
  				</div>
  				<!-- MENU BAR PADDING -->
  				<div id="menu-bar-padding" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_PADDING_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_padding_top = isset($vars['menubar_padding_top']) ? $vars['menubar_padding_top'] : '0';
          $mb_padding_top_data = array('range'=>'min', 'value' => $mb_padding_top, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-padding-top', 'MOD_JUX_EASY_MEGAMENU_PADDING_TOP_LABEL', 'm-b-p-t', 'jux_mm_menu_bar_padding_top', $mb_padding_top, 'px', $mb_padding_top_data);

          $mb_padding_right = isset($vars['menubar_padding_right']) ? $vars['menubar_padding_right'] : '0';
          $mb_padding_right_data = array('range'=>'min', 'value' => $mb_padding_right, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-padding-right', 'MOD_JUX_EASY_MEGAMENU_PADDING_RIGHT_LABEL', 'm-b-p-r', 'jux_mm_menu_bar_padding_right', $mb_padding_right, 'px', $mb_padding_right_data);

          $mb_padding_bottom = isset($vars['menubar_padding_bottom']) ? $vars['menubar_padding_bottom'] : '0';
          $mb_padding_bottom_data = array('range'=>'min', 'value' => $mb_padding_bottom, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-padding-bottom', 'MOD_JUX_EASY_MEGAMENU_PADDING_BOTTOM_LABEL', 'm-b-p-b', 'jux_mm_menu_bar_padding_bottom', $mb_padding_bottom, 'px', $mb_padding_bottom_data);

          $mb_padding_left = isset($vars['menubar_padding_left']) ? $vars['menubar_padding_left'] : '0';
          $mb_padding_left_data = array('range'=>'min', 'value' => $mb_padding_left, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-padding-left', 'MOD_JUX_EASY_MEGAMENU_PADDING_LEFT_LABEL', 'm-b-p-l', 'jux_mm_menu_bar_padding_left', $mb_padding_left, 'px', $mb_padding_left_data);
          $html .= '
  					</div>
  				</div>
  				<!-- MENU BAR MARGIN -->
  				<div id="menu-bar-margin" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_MARGIN_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mb_margin_left = isset($vars['menubar_margin_left']) ? $vars['menubar_margin_left'] : '0';
          $mb_margin_left_data = array('range'=>'min', 'value' => $mb_margin_left, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-margin-left', 'MOD_JUX_EASY_MEGAMENU_MARGIN_LEFT_LABEL', 'm-b-m-l', 'jux_mm_menu_bar_margin_left', $mb_margin_left, 'px', $mb_margin_left_data);
          $mb_margin_right = isset($vars['menubar_margin_right']) ? $vars['menubar_margin_right'] : '0';
          $mb_margin_right_data = array('range'=>'min', 'value' => $mb_margin_right, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('menu-bar-margin-right', 'MOD_JUX_EASY_MEGAMENU_MARGIN_RIGHT_LABEL', 'm-b-m-r', 'jux_mm_menu_bar_margin_right', $mb_margin_right, 'px', $mb_margin_right_data);
          $html .= '
  					</div>
  				</div>
  			</div>
          </div>
  	</div>';

          return $html;
      }

      static function topmenuTabContent($vars)
      {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-top-menu-config" name="Top Menu" role="tabpanel" tabindex="-1">
          <div class="row-fluid row">
              <div class="span4 col-md-4">';
          $html .= '

  				<!-- TOP MENU BORDER -->
  				<div id="top-menu-border" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_border_style = isset($vars['topmenu_border_style']) ? $vars['topmenu_border_style'] : 'solid';
          $tm_border_styles = array(
              'solid'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_SOLID_LABEL',
              'dashed'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DASHED_LABEL',
              'dotted'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOTTED_LABEL',
              'double'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOUBLE_LABEL',
              'groove'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_GROOVE_LABEL',
              'inset'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_INSET_LABEL',
              'outset'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_OUTSET_LABEL',
              'ridge'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_RIDGE_LABEL'
          );
          $html .= self::generateSelectBox('top-menu-border-style', 'MOD_JUX_EASY_MEGAMENU_BORDER_STYLE_LABEL', 'jux_mm_top_menu_border_style', $tm_border_styles, $tm_border_style);
          $tm_border_width = isset($vars['topmenu_border_width']) ? $vars['topmenu_border_width'] : '0';
          $tm_border_width_data = array('range'=>'min', 'value' => $tm_border_width, 'min' => 0, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-border-width', 'MOD_JUX_EASY_MEGAMENU_BORDER_WIDTH_LABEL', 'tm-border-width', 'jux_mm_top_menu_border_width', $tm_border_width, 'px', $tm_border_width_data);
          $tm_border_color = isset($vars['topmenu_border_color']) ? $vars['topmenu_border_color'] : '#555';
          $html .= self::generateInputColorBox('top-menu-border-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_top_menu_border_color', $tm_border_color, '#555');

          $border_top_checked = isset($vars['topmenu_border_top']) ? $vars['topmenu_border_top'] : 0;
          $border_right_checked = isset($vars['topmenu_border_right']) ? $vars['topmenu_border_right'] : 0;
          $border_bottom_checked = isset($vars['topmenu_border_bottom']) ? $vars['topmenu_border_bottom'] : 0;
          $border_left_checked = isset($vars['topmenu_border_left']) ? $vars['topmenu_border_left'] : 0;
          $checkboxesGroup = array(
              array(
                  'name'      => 'jux_mm_top_menu_border_position_top',
                  'value'     => 'top',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_TOP_LABEL',
                  'checked'   => $border_top_checked
              ),
              array(
                  'name'      => 'jux_mm_top_menu_border_position_right',
                  'value'     => 'right',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_RIGHT_LABEL',
                  'checked'   => $border_right_checked
              ),
              array(
                  'name'      => 'jux_mm_top_menu_border_position_bottom',
                  'value'     => 'bottom',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_BOTTOM_LABEL',
                  'checked'   => $border_bottom_checked
              ),
              array(
                  'name'      => 'jux_mm_top_menu_border_position_left',
                  'value'     => 'left',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LEFT_LABEL',
                  'checked'   => $border_left_checked
              ),
          );
          $html .= self::generateCheckboxesGroupBox('top-menu-border-position', 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LABEL', 'position', $checkboxesGroup);
          $html .= '
  					</div>
  				</div>

  				<!-- TOP MENU BORDER RADIUS -->
  				<div id="top-menu-border-radius" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_border_radius_tleft = isset($vars['topmenu_border_radius_tleft']) ? $vars['topmenu_border_radius_tleft'] : 0;
          $tm_border_radius_tleft_data = array('range'=>'min', 'value' => $tm_border_radius_tleft, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-radius-top-left', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_TOPLEFT_LABEL', 'tm-border-top-left', 'jux_mm_top_menu_radius_top_left', $tm_border_radius_tleft, 'px', $tm_border_radius_tleft_data);

          $tm_border_radius_tright = isset($vars['topmenu_border_radius_tright']) ? $vars['topmenu_border_radius_tright'] : 0;
          $tm_border_radius_tright_data = array('range'=>'min', 'value' => $tm_border_radius_tright, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-radius-top-right', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_TOPRIGHT_LABEL', 'tm-border-top-right', 'jux_mm_top_menu_radius_top_right', $tm_border_radius_tright, 'px', $tm_border_radius_tright_data);

          $tm_border_radius_bright = isset($vars['topmenu_border_radius_bright']) ? $vars['topmenu_border_radius_bright'] : 0;
          $tm_border_radius_bright_data = array('range'=>'min', 'value' => $tm_border_radius_bright, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-radius-bottom-right', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_BOTTOMRIGHT_LABEL', 'tm-border-bottom-right', 'jux_mm_top_menu_radius_bottom_right', $tm_border_radius_bright, 'px', $tm_border_radius_bright_data);

          $tm_border_radius_bleft = isset($vars['topmenu_border_radius_bleft']) ? $vars['topmenu_border_radius_bleft'] : 0;
          $tm_border_radius_bleft_data = array('range'=>'min', 'value' => $tm_border_radius_bleft, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-radius-bottom-left', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_BOTTOMLEFT_LABEL', 'tm-border-bottom-left', 'jux_mm_top_menu_radius_bottom_left', $tm_border_radius_bleft, 'px', $tm_border_radius_bleft_data);
          $html .= '
  					</div>
  				</div>

  				<!-- TOP MENU CAPTION -->
  				<div id="top-menu-caption" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ITEM_CAPTION_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_caption_size = isset($vars['topmenu_caption_size']) ? $vars['topmenu_caption_size'] : 11;
          $tm_caption_size_data = array('range'=>'min', 'value' => $tm_caption_size, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-caption-size', 'MOD_JUX_EASY_MEGAMENU_SIZE_LABEL', 'tm-caption-size', 'jux_mm_top_menu_caption_size', $tm_caption_size, 'px', $tm_caption_size_data);

          $tm_caption_color = isset($vars['topmenu_caption_color']) ? $vars['topmenu_caption_color'] : '#999';
          $html .= self::generateInputColorBox('top-menu-caption-color', 'MOD_JUX_EASY_MEGAMENU_CAPTION_COLOR_LABEL', 'jux_mm_top_menu_caption_color', $tm_caption_color, '#999');
          $html .= '
  					</div>
  				</div>

  			</div>
  			<div class="span4 col-md-4">
  			    <!-- FONT -->
  			    <div id="top-menu-font" class="jux-option-box">
  			        <div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_FONT_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_font_family = isset($vars['topmenu_font_family']) ? $vars['topmenu_font_family'] : 'inherit';
          $tm_fonts = array(
              'inherit'               => array('name' => 'Inherit', 'url' => ''),
              'Open Sans'             => array('name' => 'Open Sans', 'url' => 'family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,greek,vietnamese'),
              'Oswald'                => array('name' => 'Oswald', 'url' => 'family=Oswald:300,400,500,600,700&amp;subset=cyrillic,vietnamese'),
              'Roboto'                => array('name' => 'Roboto', 'url' => 'family=Roboto:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,greek,vietnamese'),
              'Droid Sans'            => array('name' => 'Droid Sans', 'url' => 'family=Droid+Sans:400,700&subset=latin'),
              'Lato'                  => array('name' => 'Lato', 'url' => 'family=Lato:300,300i,400,400i,700,700i,900,900i'),
              'Open Sans Condensed'   => array('name' => 'Open Sans Condensed', 'url' => 'family=Open+Sans+Condensed:300,300i,700&amp;subset=cyrillic,greek,vietnamese'),
              'PT Sans'               => array('name' => 'PT Sans', 'url' => 'family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic'),
              'Droid Serif'           => array('name' => 'Droid Serif', 'url' => 'family=Droid+Serif:400,400i,700,700i&amp;subset=latin'),
              'Ubuntu'                => array('name' => 'Ubuntu', 'url' => 'family=Ubuntu:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,greek'),
              'Roboto Condensed'      => array('name' => 'Roboto Condensed', 'url' => 'family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,greek,vietnamese'),
              'Source Sans Pro'       => array('name' => 'Source Sans Pro', 'url' => 'family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&amp;subset=cyrillic,greek,vietnamese'),
              'PT Sans Narrow'        => array('name' => 'PT Sans Narrow', 'url' => 'family=PT+Sans+Narrow:400,700&amp;subset=cyrillic'),
              'Raleway'               => array('name' => 'Raleway', 'url' => 'family=Raleway:300,400,500,600,700,800,900'),
              'Yanone Kaffeesatz'     => array('name' => 'Yanone Kaffeesatz', 'url' => 'family=Yanone+Kaffeesatz:300,400,700&amp;subset=vietnamese'),
              'Lobster'               => array('name' => 'Lobster', 'url' => 'family=Lobster&amp;subset=cyrillic,vietnamese'),
              'Lora'                  => array('name' => 'Lora', 'url' => 'family=Lora:400,400i,700,700i&amp;subset=cyrillic,vietnamese'),
              'Oxygen'                => array('name' => 'Oxygen', 'url' => 'family=Oxygen:300,400,700'),
              'Arimo'                 => array('name' => 'Arimo', 'url' => 'family=Arimo:400,400i,700,700i&amp;subset=cyrillic,greek,hebrew,vietnamese'),
              'Arvo'                  => array('name' => 'Arvo', 'url' => 'family=Arvo:400,400i,700,700i'),
              'Bitter'                => array('name' => 'Bitter', 'url' => 'family=Bitter:400,400i,700'),
              'Montserrat'            => array('name' => 'Montserrat', 'url' => 'family=Montserrat:300,400,500,600,700,800,900&amp;subset=cyrillic,vietnamese'),
              'Play'                  => array('name' => 'Play', 'url' => 'family=Play:400,700&amp;subset=cyrillic,greek,vietnamese'),
              'Rokkitt'               => array('name' => 'Rokkitt', 'url' => 'family=Rokkitt:300,400,500,600,700,800,900&amp;subset=vietnamese'),
              'Francois One'          => array('name' => 'Francois One', 'url' => 'family=Francois+One&amp;subset=vietnamese'),
              'Noto Sans'             => array('name' => 'Noto Sans', 'url' => 'family=Noto+Sans:400,400i,700,700i&amp;subset=cyrillic,devanagari,greek,vietnamese'),
              'Nunito'                => array('name' => 'Nunito', 'url' => 'family=Nunito:300,400,600,700,800,900&amp;subset=vietnamese'),
              'Merriweather'          => array('name' => 'Merriweather', 'url' => 'family=Merriweather:300,300i,400,400i,700,700i,900,900i&amp;subset=cyrillic,vietnamese'),
              'PT Serif'              => array('name' => 'PT Serif', 'url' => 'family=PT+Serif:400,400i,700,700i&amp;subset=cyrillic'),
              'Shadows Into Light'    => array('name' => 'Shadows Into Light', 'url' => 'family=Shadows+Into+Light'),
              'Dosis'                 => array('name' => 'Dosis', 'url' => 'family=Dosis:300,400,500,600,700,800')
          );
          $html .= self::generateSelectBox('top-menu-font-family', 'MOD_JUX_EASY_MEGAMENU_FONT_FAMILY_LABEL', 'jux_mm_top_menu_font_family', $tm_fonts, $tm_font_family, false, '', true);
          $tm_font_style = isset($vars['topmenu_font_style']) ? $vars['topmenu_font_style'] : 'normal';
          $tm_font_styles = array(
              'normal' => 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_NORMAL_LABEL',
              'italic' => 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_ITALIC_LABEL',
              'oblique'=> 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_OBLIQUE_LABEL'
          );
          $html .= self::generateSelectBox('top-menu-font-style', 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_LABEL', 'jux_mm_top_menu_font_style', $tm_font_styles, $tm_font_style);
          $tm_font_weight = isset($vars['topmenu_font_weight']) ? $vars['topmenu_font_weight'] : 'normal';
          $tm_font_weight_opts = array(
              'lighter'   => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_LIGHTER_LABEL',
              'normal'    => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_NORMAL_LABEL',
              'bold'      => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_BOLD_LABEL',
              'bolder'    => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_BOLDER_LABEL',
          );
          $html .= self::generateSelectBox('top-menu-font-weight', 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_LABEL', 'jux_mm_top_menu_font_weight', $tm_font_weight_opts, $tm_font_weight);
          $tm_font_size = isset($vars['topmenu_font_size']) ? $vars['topmenu_font_size'] : '13';
          $tm_font_size_data = array('range'=>'min', 'value' => $tm_font_size, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-font-size', 'MOD_JUX_EASY_MEGAMENU_FONT_SIZE_LABEL', 'tm-font-size', 'jux_mm_top_menu_font_size', $tm_font_size, 'px', $tm_font_size_data);

          $tm_font_color = isset($vars['topmenu_font_color']) ? $vars['topmenu_font_color'] : '#555';
          $html .= self::generateInputColorBox('top-menu-font-color', 'MOD_JUX_EASY_MEGAMENU_FONT_COLOR_LABEL', 'jux_mm_top_menu_font_color', $tm_font_color, '#555');
          $tm_font_upper = isset($vars['topmenu_font_upper']) ? $vars['topmenu_font_upper'] : 0;
          $html .= self::generateCheckboxBox('top-menu-uppercase', 'MOD_JUX_EASY_MEGAMENU_FONT_UPPERCASE_LABEL', 'jux_mm_top_menu_uppercase', $tm_font_upper);
          $html .= '
  					</div>
  			    </div>
  				<!-- TOP MENU ICON -->
  				<div id="top-menu-icon" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ICON_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_icon_size = isset($vars['topmenu_icon_size']) ? $vars['topmenu_icon_size'] : 13;
          $tm_icon_size_data = array('range'=>'min', 'value' => $tm_icon_size, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-icon-size', 'MOD_JUX_EASY_MEGAMENU_ICON_SIZE_LABEL', 'tm-icon-size', 'jux_mm_top_menu_icon_size', $tm_icon_size, 'px', $tm_icon_size_data);

          $tm_icon_color = isset($vars['topmenu_icon_color']) ? $vars['topmenu_icon_color'] : '#555';
          $html .= self::generateInputColorBox('top-menu-icon-color', 'MOD_JUX_EASY_MEGAMENU_ICON_COLOR_LABEL', 'jux_mm_top_menu_icon_color', $tm_icon_color, '#555');
          $tm_icon_position = isset($vars['topmenu_icon_position']) ? $vars['topmenu_icon_position'] : 'left';
          $tm_icon_positions = array(
              'left'   => 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_LEFT_LABEL',
              'right'    => 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_RIGHT_LABEL',
              'above'      => 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_ABOVE_LABEL'
          );
          $html .= self::generateSelectBox('top-menu-icon-position', 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_LABEL', 'jux_mm_top_menu_icon_position', $tm_icon_positions, $tm_icon_position);
          $html .= '
  					</div>
  				</div>

                  <!-- TOP MENU SHADOW -->
  				<div id="top-menu-shadow" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_SHADOW_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_h_shadow_val = isset($vars['topmenu_bs_h_length']) ? $vars['topmenu_bs_h_length'] : '0';
          $tm_h_shadow_data = array('range'=>'min', 'value' => $tm_h_shadow_val, 'min' => -20, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-h-shadow', 'MOD_JUX_EASY_MEGAMENU_SHADOW_HORIZONTAL_LABEL', 'tm-h-shadow', 'jux_mm_top_menu_h_shadow', $tm_h_shadow_val, 'px', $tm_h_shadow_data);
          $tm_v_shadow_val = isset($vars['topmenu_bs_v_length']) ? $vars['topmenu_bs_v_length'] : '0';
          $tm_v_shadow_data = array('range'=>'min', 'value' => $tm_v_shadow_val, 'min' => -20, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-v-shadow', 'MOD_JUX_EASY_MEGAMENU_SHADOW_VERTIVAL_LABEL', 'tm-v-shadow', 'jux_mm_top_menu_v_shadow', $tm_v_shadow_val, 'px', $tm_v_shadow_data);
          $tm_shadow_blur_val = isset($vars['topmenu_bs_blur']) ? $vars['topmenu_bs_blur'] : '0';
          $tm_shadow_blur_data = array('range'=>'min', 'value' => $tm_shadow_blur_val, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-shadow-blur', 'MOD_JUX_EASY_MEGAMENU_SHADOW_BLUR_LABEL', 'tm-shadow-blur','jux_mm_top_menu_shadow_blur', $tm_shadow_blur_val, 'px', $tm_shadow_blur_data);
          $tm_shadow_size_val = isset($vars['topmenu_bs_size']) ? $vars['topmenu_bs_size'] : '0';
          $tm_shadow_size_data = array('range'=>'min', 'value' => $tm_shadow_size_val, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-shadow-size', 'MOD_JUX_EASY_MEGAMENU_SHADOW_SIZE_LABEL', 'tm-shadow-size', 'jux_mm_top_menu_shadow_size', $tm_shadow_size_val, 'px', $tm_shadow_size_data);
          $tm_shadow_color = isset($vars['topmenu_bs_color']) ? $vars['topmenu_bs_color'] : '';
          $html .= self::generateInputColorBox('top-menu-shadow-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_top_menu_shadow_color', $tm_shadow_color, 'rgba(255,255,255,0)');
          $tm_shadow_inset = isset($vars['topmenu_bs_inset']) ? $vars['topmenu_bs_inset'] : 0;
          $html .= self::generateCheckboxBox('top-menu-shadow-inset', 'MOD_JUX_EASY_MEGAMENU_SHADOW_INTSET_LABEL', 'jux_mm_top_menu_shadow_inset', $tm_shadow_inset);
          $html .= '
  					</div>
  				</div>
  			</div>
  			<div class="span4 col-md-4">
  			    <!-- TOP MENU BACKGROUND -->
  			    <div id="top-menu-background" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BACKGROUND_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_bg_type = isset($vars['topmenu_bg_type']) ? $vars['topmenu_bg_type'] : 'solid';
          $tm_bg_types = array('solid' => 'MOD_JUX_EASY_MEGAMENU_SOLID_BACKGROUND_LABEL', 'gradient' => 'MOD_JUX_EASY_MEGAMENU_GRADIENT_BACKGROUND_LABEL');
          $html .= self::generateSelectBox('top-menu-bg-type', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_TYPE_LABEL', 'jux_mm_top_menu_bg_type', $tm_bg_types, $tm_bg_type);
          $tm_solid_bg_color = isset($vars['topmenu_solid_bg']) ? $vars['topmenu_solid_bg'] : '#fff';
          $html .= self::generateInputColorBox('top-menu-solid-bg-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_COLOR_LABEL', 'jux_mm_top_menu_solid_bg_color', $tm_solid_bg_color, '#fff');
          $tm_bg_start_color = isset($vars['topmenu_bg_start_color']) ? $vars['topmenu_bg_start_color'] : '#fff';
          $html .= self::generateInputColorBox('top-menu-bg-start-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_START_COLOR_LABEL', 'jux_mm_top_menu_bg_start_color', $tm_bg_start_color, '#fff');
          $tm_bg_end_color = isset($vars['topmenu_bg_end_color']) ? $vars['topmenu_bg_end_color'] : '#000';
          $html .= self::generateInputColorBox('top-menu-bg-end-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_END_COLOR_LABEL', 'jux_mm_top_menu_bg_end_color', $tm_bg_end_color, '#000');
          $html .= '
  					</div>
  				</div>
  				<!-- TOP MENU PADDING -->
  				<div id="top-menu-padding" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_PADDING_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_padding_top = isset($vars['topmenu_padding_top']) ? $vars['topmenu_padding_top'] : '10';
          $tm_padding_top_data = array('range'=>'min', 'value' => $tm_padding_top, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-padding-top', 'MOD_JUX_EASY_MEGAMENU_PADDING_TOP_LABEL', 'tm-p-t', 'jux_mm_top_menu_padding_top', $tm_padding_top, 'px', $tm_padding_top_data);

          $tm_padding_right = isset($vars['topmenu_padding_right']) ? $vars['topmenu_padding_right'] : '12';
          $tm_padding_right_data = array('range'=>'min', 'value' => $tm_padding_right, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-padding-right', 'MOD_JUX_EASY_MEGAMENU_PADDING_RIGHT_LABEL', 'tm-p-r', 'jux_mm_top_menu_padding_right', $tm_padding_right, 'px', $tm_padding_right_data);

          $tm_padding_bottom = isset($vars['topmenu_padding_bottom']) ? $vars['topmenu_padding_bottom'] : '10';
          $tm_padding_bottom_data = array('range'=>'min', 'value' => $tm_padding_bottom, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-padding-bottom', 'MOD_JUX_EASY_MEGAMENU_PADDING_BOTTOM_LABEL', 'tm-p-b', 'jux_mm_top_menu_padding_bottom', $tm_padding_bottom, 'px', $tm_padding_bottom_data);

          $tm_padding_left = isset($vars['topmenu_padding_left']) ? $vars['topmenu_padding_left'] : '12';
          $tm_padding_left_data = array('range'=>'min', 'value' => $tm_padding_left, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-padding-left', 'MOD_JUX_EASY_MEGAMENU_PADDING_LEFT_LABEL', 'tm-p-l', 'jux_mm_top_menu_padding_left', $tm_padding_left, 'px', $tm_padding_left_data);
  $html .= '
  					</div>
  				</div>
  				<!-- TOP MENU MARGIN -->
  				<div id="top-menu-margin" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_MARGIN_LABEL').'</span>
  					</h3>
                      <div class="jux-opt-box-body">';
                      $tm_margin_top = isset($vars['topmenu_margin_top']) ? $vars['topmenu_margin_top'] : '0';
          $tm_margin_top_data = array('range'=>'min', 'value' => $tm_margin_top, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-margin-top', 'MOD_JUX_EASY_MEGAMENU_MARGIN_TOP_LABEL', 'tm-m-t', 'jux_mm_top_menu_margin_top', $tm_margin_top, 'px', $tm_margin_top_data);

          $tm_margin_right = isset($vars['topmenu_margin_right']) ? $vars['topmenu_margin_right'] : '0';
          $tm_margin_right_data = array('range'=>'min', 'value' => $tm_margin_right, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-margin-right', 'MOD_JUX_EASY_MEGAMENU_MARGIN_RIGHT_LABEL', 'tm-m-r', 'jux_mm_top_menu_margin_right', $tm_margin_right, 'px', $tm_margin_right_data);

          $tm_margin_bottom = isset($vars['topmenu_margin_bottom']) ? $vars['topmenu_margin_bottom'] : '0';
          $tm_margin_bottom_data = array('range'=>'min', 'value' => $tm_margin_bottom, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-margin-bottom', 'MOD_JUX_EASY_MEGAMENU_MARGIN_BOTTOM_LABEL', 'tm-m-b', 'jux_mm_top_menu_margin_bottom', $tm_margin_bottom, 'px', $tm_margin_bottom_data);

          $tm_margin_left = isset($vars['topmenu_margin_left']) ? $vars['topmenu_margin_left'] : '0';
          $tm_margin_left_data = array('range'=>'min', 'value' => $tm_margin_left, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('top-menu-margin-left', 'MOD_JUX_EASY_MEGAMENU_MARGIN_LEFT_LABEL', 'tm-m-l', 'jux_mm_top_menu_margin_left', $tm_margin_left, 'px', $tm_margin_left_data);

          $html .= '
  					</div>
  				</div>
  			</div>
          </div>
  	</div>';

          return $html;
      }

      static function topmenuHoverTabContent($vars)
      {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-top-menu-hover-config" name="Top Menu Hover" role="tabpanel" tabindex="-1">
          <div class="row-fluid row">
              <div class="span4 col-md-4">
                  <div id="tm-hvr-txt-color" class="jux-option-box">
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_TEXT_COLOR_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_hvr_txt_color = isset($vars['topmenu_hvr_txt_color']) ? $vars['topmenu_hvr_txt_color'] : '#333';
          $html .= self::generateInputColorBox('tm-hvr-txt-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_tm_hvr_txt_color', $tm_hvr_txt_color, '#333');
          $html .= '
  					</div>
  				</div>
                  <div id="tm-hvr-txt-color" class="jux-option-box">
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ITEM_CAPTION_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_hvr_txt_color = isset($vars['topmenu_hvr_caption_color']) ? $vars['topmenu_hvr_caption_color'] : '#999';
          $html .= self::generateInputColorBox('tm-hvr-caption-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_tm_hvr_caption_color', $tm_hvr_txt_color, '#999');
          $html .= '
  					</div>
  				</div>
              </div>
              <div class="span4 col-md-4">
                  <div id="tm-hvr-background" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BACKGROUND_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_hvr_bg_color = isset($vars['topmenu_hvr_solid_color']) ? $vars['topmenu_hvr_solid_color'] : '#fff';
          $html .= self::generateInputColorBox('tm-hvr-solid-bg-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_tm_hvr_solid_bg_color', $tm_hvr_bg_color, '#fff');

          $tm_hvr_bg_start_color = isset($vars['topmenu_hvr_bg_start_color']) ? $vars['topmenu_hvr_bg_start_color'] : '#fff';
          $html .= self::generateInputColorBox('tm-hvr-bg-start-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_START_COLOR_LABEL', 'jux_mm_tm_hvr_bg_start_color', $tm_hvr_bg_start_color, '#fff');

          $tm_hvr_bg_end_color = isset($vars['topmenu_hvr_bg_end_color']) ? $vars['topmenu_hvr_bg_end_color'] : '#ddd';
          $html .= self::generateInputColorBox('tm-hvr-bg-end-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_END_COLOR_LABEL', 'jux_mm_tm_hvr_bg_end_color', $tm_hvr_bg_end_color, '#ddd');
          $html .= '
  					</div>
  				</div>
              </div>
              <div class="span4 col-md-4">
                  <!-- TOP MENU HOVER ICON COLOR -->
                  <div id="tm-hvr-icon-color" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ICON_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_hvr_icon_color = isset($vars['topmenu_hvr_icon_color']) ? $vars['topmenu_hvr_icon_color'] : '#333';
          $html .= self::generateInputColorBox('tm-hvr-icon-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_tm_hvr_icon_color', $tm_hvr_icon_color, '#333');
          $html .= '
  					</div>
  				</div>
  				<!-- TOP MENU HOVER BORDER COLOR -->
                  <div id="tm-hvr-border-color" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $tm_hvr_border_color = isset($vars['topmenu_hvr_border_color']) ? $vars['topmenu_hvr_border_color'] : '#333';
          $html .= self::generateInputColorBox('tm-hvr-border-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_tm_hvr_border_color', $tm_hvr_border_color, '#333');
          $html .= '
  					</div>
  				</div>
              </div>
          </div>
  	</div>';

          return $html;
      }

      static function submenuTabContent($vars)
      {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-sub-menu-config" name="Sub Menu" role="tabpanel" tabindex="-1">
  	    <div class="row-fluid row">
  	        <div class="span4 col-md-4">
  	            <!-- SUB MENU BOX BORDER -->
  				<div id="sm-border" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BOX_BORDER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_border_style = isset($vars['submenu_border_style']) ? $vars['submenu_border_style'] : 'solid';
          $sm_borders = array(
              'solid'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_SOLID_LABEL',
              'dashed'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DASHED_LABEL',
              'dotted'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOTTED_LABEL',
              'double'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOUBLE_LABEL',
              'groove'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_GROOVE_LABEL',
              'inset'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_INSET_LABEL',
              'outset'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_OUTSET_LABEL',
              'ridge'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_RIDGE_LABEL'
          );
          $html .= self::generateSelectBox('sm-border-style', 'MOD_JUX_EASY_MEGAMENU_BORDER_STYLE_LABEL', 'jux_mm_sm_border_style', $sm_borders, $sm_border_style);
          $sm_border_width = isset($vars['submenu_border_width']) ? $vars['submenu_border_width'] : '0';
          $sm_border_width_data = array('range'=>'min', 'value' => $sm_border_width, 'min' => 0, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-border-width', 'MOD_JUX_EASY_MEGAMENU_BORDER_WIDTH_LABEL', 'sm-border-width', 'jux_mm_sm_border_width', $sm_border_width, 'px', $sm_border_width_data);

          $sm_border_color = isset($vars['submenu_border_color']) ? $vars['submenu_border_color'] : '#555';
          $html .= self::generateInputColorBox('sm-border-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_border_color', $sm_border_color, '#555');
          $border_top_checked = isset($vars['submenu_border_top']) ? $vars['submenu_border_top'] : 0;
          $border_right_checked = isset($vars['submenu_border_right']) ? $vars['submenu_border_right'] : 0;
          $border_bottom_checked = isset($vars['submenu_border_bottom']) ? $vars['submenu_border_bottom'] : 0;
          $border_left_checked = isset($vars['submenu_border_left']) ? $vars['submenu_border_left'] : 0;
          $checkboxesGroup = array(
              array(
                  'name'      => 'jux_mm_sm_border_position_top',
                  'value'     => 'top',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_TOP_LABEL',
                  'checked'   => $border_top_checked
              ),
              array(
                  'name'      => 'jux_mm_sm_border_position_right',
                  'value'     => 'right',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_RIGHT_LABEL',
                  'checked'   => $border_right_checked
              ),
              array(
                  'name'      => 'jux_mm_sm_border_position_bottom',
                  'value'     => 'bottom',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_BOTTOM_LABEL',
                  'checked'   => $border_bottom_checked
              ),
              array(
                  'name'      => 'jux_mm_sm_border_position_left',
                  'value'     => 'left',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LEFT_LABEL',
                  'checked'   => $border_left_checked
              ),
          );
          $html .= self::generateCheckboxesGroupBox('sm-border-position', 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LABEL', 'position', $checkboxesGroup);
          $html .= '
  					</div>
  				</div>
  				<!-- SUB MENU ITEM BORDER -->
  				<div id="sm-item-border" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ITEM_BORDER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_item_border_style = isset($vars['submenu_item_border_style']) ? $vars['submenu_item_border_style'] : 'solid';
          $sm_item_borders = array(
              'solid'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_SOLID_LABEL',
              'dashed'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DASHED_LABEL',
              'dotted'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOTTED_LABEL',
              'double'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_DOUBLE_LABEL',
              'groove'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_GROOVE_LABEL',
              'inset'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_INSET_LABEL',
              'outset'    => 'MOD_JUX_EASY_MEGAMENU_BORDER_OUTSET_LABEL',
              'ridge'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_RIDGE_LABEL'
          );
          $html .= self::generateSelectBox('sm-item-border-style', 'MOD_JUX_EASY_MEGAMENU_BORDER_STYLE_LABEL', 'jux_mm_sm_item_border_style', $sm_item_borders, $sm_item_border_style);
          $sm_item_border_width = isset($vars['submenu_item_border_width']) ? $vars['submenu_item_border_width'] : '0';
          $sm_item_border_width_data = array('range'=>'min', 'value' => $sm_item_border_width, 'min' => 0, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-item-border-width', 'MOD_JUX_EASY_MEGAMENU_BORDER_WIDTH_LABEL', 'sm-item-border-width', 'jux_mm_sm_item_border_width', $sm_item_border_width, 'px', $sm_item_border_width_data);

          $sm_item_border_color = isset($vars['submenu_item_border_color']) ? $vars['submenu_item_border_color'] : '#555';
          $html .= self::generateInputColorBox('sm-item-border-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_item_border_color', $sm_item_border_color, '#555');
          $item_border_top_checked = isset($vars['submenu_item_border_top']) ? $vars['submenu_item_border_top'] : 0;
          $item_border_right_checked = isset($vars['submenu_item_border_right']) ? $vars['submenu_item_border_right'] : 0;
          $item_border_bottom_checked = isset($vars['submenu_item_border_bottom']) ? $vars['submenu_item_border_bottom'] : 0;
          $item_border_left_checked = isset($vars['submenu_item_border_left']) ? $vars['submenu_item_border_left'] : 0;
          $item_checkboxesGroup = array(
              array(
                  'name'      => 'jux_mm_sm_item_border_position_top',
                  'value'     => 'top',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_TOP_LABEL',
                  'checked'   => $item_border_top_checked
              ),
              array(
                  'name'      => 'jux_mm_sm_item_border_position_right',
                  'value'     => 'right',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_RIGHT_LABEL',
                  'checked'   => $item_border_right_checked
              ),
              array(
                  'name'      => 'jux_mm_sm_item_border_position_bottom',
                  'value'     => 'bottom',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_BOTTOM_LABEL',
                  'checked'   => $item_border_bottom_checked
              ),
              array(
                  'name'      => 'jux_mm_sm_item_border_position_left',
                  'value'     => 'left',
                  'label'     => 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LEFT_LABEL',
                  'checked'   => $item_border_left_checked
              ),
          );
          $html .= self::generateCheckboxesGroupBox('sm-item-border-position', 'MOD_JUX_EASY_MEGAMENU_BORDER_POSITION_LABEL', 'position', $item_checkboxesGroup);
          $html .= '
  					</div>
  				</div>
  				<!-- SUB MENU BORDER RADIUS -->
  				<div id="sm-border-radius" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_border_radius_tleft = isset($vars['submenu_border_radius_tleft']) ? $vars['submenu_border_radius_tleft'] : 0;
          $sm_border_radius_tleft_data = array('range'=>'min', 'value' => $sm_item_border_width, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-radius-top-left', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_TOPLEFT_LABEL', 'sm-border-tl', 'jux_mm_sm_radius_top_left', $sm_border_radius_tleft, 'px', $sm_border_radius_tleft_data);

          $sm_border_radius_tright = isset($vars['submenu_border_radius_tright']) ? $vars['submenu_border_radius_tright'] : 0;
          $sm_border_radius_tright_data = array('range'=>'min', 'value' => $sm_border_radius_tright, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-radius-top-right', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_TOPRIGHT_LABEL', 'sm-border-tr', 'jux_mm_sm_radius_top_right', $sm_border_radius_tright, 'px', $sm_border_radius_tright_data);

          $sm_border_radius_bright = isset($vars['submenu_border_radius_bright']) ? $vars['submenu_border_radius_bright'] : 0;
          $sm_border_radius_bright_data = array('range'=>'min', 'value' => $sm_border_radius_bright, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-radius-bottom-right', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_BOTTOMRIGHT_LABEL', 'sm-border-br', 'jux_mm_sm_radius_bottom_right', $sm_border_radius_bright, 'px', $sm_border_radius_bright_data);

          $sm_border_radius_bleft = isset($vars['submenu_border_radius_bleft']) ? $vars['submenu_border_radius_bleft'] : 0;
          $sm_border_radius_bleft_data = array('range'=>'min', 'value' => $sm_border_radius_bleft, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-radius-bottom-left', 'MOD_JUX_EASY_MEGAMENU_BORDER_RADIUS_BOTTOMLEFT_LABEL', 'sm-border-bl', 'jux_mm_sm_radius_bottom_left', $sm_border_radius_bleft, 'px', $sm_border_radius_bleft_data);
          $html .= '
  					</div>
  				</div>
  				<!-- SUB MENU ICON -->
  				<div id="sm-icon" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ICON_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_icon_size = isset($vars['submenu_icon_size']) ? $vars['submenu_icon_size'] : 13;
          $sm_icon_color = isset($vars['submenu_icon_color']) ? $vars['submenu_icon_color'] : '#555';
          $sm_icon_position = isset($vars['submenu_icon_position']) ? $vars['submenu_icon_position'] : 'left';
          $sm_icon_size_data = array('range'=>'min', 'value' => $sm_icon_size, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-icon-size', 'MOD_JUX_EASY_MEGAMENU_ICON_SIZE_LABEL', 'sm-icon-size', 'jux_mm_sm_icon_size', $sm_icon_size, 'px', $sm_icon_size_data);
          $html .= self::generateInputColorBox('sm-icon-color', 'MOD_JUX_EASY_MEGAMENU_ICON_COLOR_LABEL', 'jux_mm_sm_icon_color', $sm_icon_color, '#555');
          $sm_icon_positions = array(
              'left' => 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_LEFT_LABEL',
              'right'=> 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_RIGHT_LABEL',
              'above'=> 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_ABOVE_LABEL'
          );
          $html .= self::generateSelectBox('sm-icon-position', 'MOD_JUX_EASY_MEGAMENU_ICON_POSITION_LABEL', 'jux_mm_sm_icon_position', $sm_icon_positions, $sm_icon_position);
          $html .= '
  					</div>
  				</div>
  	        </div>
  	        <div class="span4 col-md-4">
  	            <!-- FONT -->
  			    <div id="sm-font" class="jux-option-box">
  			        <div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_FONT_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_font_family = isset($vars['submenu_font_family']) ? $vars['submenu_font_family'] : 'inherit';
          $sm_fonts = array(
              'inherit'               => array('name' => 'Inherit', 'url' => ''),
              'Open Sans'             => array('name' => 'Open Sans', 'url' => 'family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,greek,vietnamese'),
              'Oswald'                => array('name' => 'Oswald', 'url' => 'family=Oswald:300,400,500,600,700&amp;subset=cyrillic,vietnamese'),
              'Roboto'                => array('name' => 'Roboto', 'url' => 'family=Roboto:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,greek,vietnamese'),
              'Droid Sans'            => array('name' => 'Droid Sans', 'url' => 'family=Droid+Sans:400,700&subset=latin'),
              'Lato'                  => array('name' => 'Lato', 'url' => 'family=Lato:300,300i,400,400i,700,700i,900,900i'),
              'Open Sans Condensed'   => array('name' => 'Open Sans Condensed', 'url' => 'family=Open+Sans+Condensed:300,300i,700&amp;subset=cyrillic,greek,vietnamese'),
              'PT Sans'               => array('name' => 'PT Sans', 'url' => 'family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic'),
              'Droid Serif'           => array('name' => 'Droid Serif', 'url' => 'family=Droid+Serif:400,400i,700,700i&amp;subset=latin'),
              'Ubuntu'                => array('name' => 'Ubuntu', 'url' => 'family=Ubuntu:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,greek'),
              'Roboto Condensed'      => array('name' => 'Roboto Condensed', 'url' => 'family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,greek,vietnamese'),
              'Source Sans Pro'       => array('name' => 'Source Sans Pro', 'url' => 'family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&amp;subset=cyrillic,greek,vietnamese'),
              'PT Sans Narrow'        => array('name' => 'PT Sans Narrow', 'url' => 'family=PT+Sans+Narrow:400,700&amp;subset=cyrillic'),
              'Raleway'               => array('name' => 'Raleway', 'url' => 'family=Raleway:300,400,500,600,700,800,900'),
              'Yanone Kaffeesatz'     => array('name' => 'Yanone Kaffeesatz', 'url' => 'family=Yanone+Kaffeesatz:300,400,700&amp;subset=vietnamese'),
              'Lobster'               => array('name' => 'Lobster', 'url' => 'family=Lobster&amp;subset=cyrillic,vietnamese'),
              'Lora'                  => array('name' => 'Lora', 'url' => 'family=Lora:400,400i,700,700i&amp;subset=cyrillic,vietnamese'),
              'Oxygen'                => array('name' => 'Oxygen', 'url' => 'family=Oxygen:300,400,700'),
              'Arimo'                 => array('name' => 'Arimo', 'url' => 'family=Arimo:400,400i,700,700i&amp;subset=cyrillic,greek,hebrew,vietnamese'),
              'Arvo'                  => array('name' => 'Arvo', 'url' => 'family=Arvo:400,400i,700,700i'),
              'Bitter'                => array('name' => 'Bitter', 'url' => 'family=Bitter:400,400i,700'),
              'Montserrat'            => array('name' => 'Montserrat', 'url' => 'family=Montserrat:300,400,500,600,700,800,900&amp;subset=cyrillic,vietnamese'),
              'Play'                  => array('name' => 'Play', 'url' => 'family=Play:400,700&amp;subset=cyrillic,greek,vietnamese'),
              'Rokkitt'               => array('name' => 'Rokkitt', 'url' => 'family=Rokkitt:300,400,500,600,700,800,900&amp;subset=vietnamese'),
              'Francois One'          => array('name' => 'Francois One', 'url' => 'family=Francois+One&amp;subset=vietnamese'),
              'Noto Sans'             => array('name' => 'Noto Sans', 'url' => 'family=Noto+Sans:400,400i,700,700i&amp;subset=cyrillic,devanagari,greek,vietnamese'),
              'Nunito'                => array('name' => 'Nunito', 'url' => 'family=Nunito:300,400,600,700,800,900&amp;subset=vietnamese'),
              'Merriweather'          => array('name' => 'Merriweather', 'url' => 'family=Merriweather:300,300i,400,400i,700,700i,900,900i&amp;subset=cyrillic,vietnamese'),
              'PT Serif'              => array('name' => 'PT Serif', 'url' => 'family=PT+Serif:400,400i,700,700i&amp;subset=cyrillic'),
              'Shadows Into Light'    => array('name' => 'Shadows Into Light', 'url' => 'family=Shadows+Into+Light'),
              'Dosis'                 => array('name' => 'Dosis', 'url' => 'family=Dosis:300,400,500,600,700,800')
          );
          $html .= self::generateSelectBox('sub-menu-font-family', 'Font Family', 'jux_mm_sm_font_family', $sm_fonts, $sm_font_family, false, '', true);
          $sm_font_style = isset($vars['submenu_font_style']) ? $vars['submenu_font_style'] : 'normal';
          $sm_font_styles = array(
              'normal' => 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_NORMAL_LABEL',
              'italic' => 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_ITALIC_LABEL',
              'oblique'=> 'MOD_JUX_EASY_MEGAMENU_FONT_STYLE_OBLIQUE_LABEL'
          );
          $html .= self::generateSelectBox('sub-menu-font-style', 'Font Style', 'jux_mm_sm_font_style', $sm_font_styles, $sm_font_style);
          $sm_font_weight = isset($vars['submenu_font_weight']) ? $vars['submenu_font_weight'] : 'normal';
          $sm_font_weight_opts = array(
              'lighter'   => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_LIGHTER_LABEL',
              'normal'    => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_NORMAL_LABEL',
              'bold'      => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_BOLD_LABEL',
              'bolder'    => 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_BOLDER_LABEL',
          );
          $html .= self::generateSelectBox('sub-menu-font-weight', 'MOD_JUX_EASY_MEGAMENU_FONT_WEIGHT_LABEL', 'jux_mm_sm_font_weight', $sm_font_weight_opts, $sm_font_weight);
          $sm_font_size = isset($vars['submenu_font_size']) ? $vars['submenu_font_size'] : '13';
          $sm_font_size_data = array('range'=>'min', 'value' => $sm_font_size, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sub-menu-font-size', 'MOD_JUX_EASY_MEGAMENU_FONT_SIZE_LABEL', 'sm-font-size', 'jux_mm_sm_font_size', $sm_font_size, 'px', $sm_font_size_data);
          $sm_font_color = isset($vars['submenu_font_color']) ? $vars['submenu_font_color'] : '#555';
          $html .= self::generateInputColorBox('sub-menu-font-color', 'MOD_JUX_EASY_MEGAMENU_FONT_COLOR_LABEL', 'jux_mm_sm_font_color', $sm_font_color, '#555');
          $sm_font_upper = isset($vars['submenu_font_upper']) ? $vars['submenu_font_upper'] : 0;
          $html .= self::generateCheckboxBox('sub-menu-uppercase', 'MOD_JUX_EASY_MEGAMENU_FONT_UPPERCASE_LABEL', 'jux_mm_sm_uppercase', $sm_font_upper);
  		$html .= '</div>
  			    </div>
  				<!-- SUB MENU - BOX SHADOW -->
  				<div id="sb-box-shadow" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BOX_SHADOW_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_h_shadow_val = isset($vars['submenu_bs_h_length']) ? $vars['submenu_bs_h_length'] : '0';
          $sm_h_shadow_data = array('range'=>'min', 'value' => $sm_h_shadow_val, 'min' => -20, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-h-shadow', 'MOD_JUX_EASY_MEGAMENU_SHADOW_HORIZONTAL_LABEL', 'sm-h-shadow', 'jux_mm_sm_h_shadow', $sm_h_shadow_val, 'px', $sm_h_shadow_data);

          $sm_v_shadow_val = isset($vars['submenu_bs_v_length']) ? $vars['submenu_bs_v_length'] : '0';
          $sm_v_shadow_data = array('range'=>'min', 'value' => $sm_v_shadow_val, 'min' => -20, 'max' => 20, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-v-shadow', 'MOD_JUX_EASY_MEGAMENU_SHADOW_VERTIVAL_LABEL', 'sm-v-shadow', 'jux_mm_sm_v_shadow', $sm_v_shadow_val, 'px', $sm_v_shadow_data);

          $sm_shadow_blur_val = isset($vars['submenu_bs_blur']) ? $vars['submenu_bs_blur'] : '0';
          $sm_shadow_blur_data = array('range'=>'min', 'value' => $sm_shadow_blur_val, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-shadow-blur', 'MOD_JUX_EASY_MEGAMENU_SHADOW_BLUR_LABEL', 'sm-shadow-blur', 'jux_mm_sm_shadow_blur', $sm_shadow_blur_val, 'px', $sm_shadow_blur_data);

          $sm_shadow_size_val = isset($vars['submenu_bs_size']) ? $vars['submenu_bs_size'] : '0';
          $sm_shadow_size_data = array('range'=>'min', 'value' => $sm_shadow_size_val, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-shadow-size', 'MOD_JUX_EASY_MEGAMENU_SHADOW_SIZE_LABEL', 'sm-shadow-size', 'jux_mm_sm_shadow_size', $sm_shadow_size_val, 'px', $sm_shadow_size_data);

          $sm_shadow_color = isset($vars['submenu_bs_color']) ? $vars['submenu_bs_color'] : '';
          $html .= self::generateInputColorBox('sm-shadow-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_shadow_color', $sm_shadow_color);
          $sm_shadow_inset = isset($vars['submenu_bs_inset']) ? $vars['submenu_bs_inset'] : 0;
          $html .= self::generateCheckboxBox('sm-shadow-inset', 'MOD_JUX_EASY_MEGAMENU_SHADOW_INTSET_LABEL', 'jux_mm_sm_shadow_inset', $sm_shadow_inset);
  		$html .= '
  					</div>
  				</div>
  		        <!-- SUB MENU CAPTION -->
  				<div id="sm-caption" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ITEM_CAPTION_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_caption_size = isset($vars['submenu_caption_size']) ? $vars['submenu_caption_size'] : 11;
          $sm_caption_size_data = array('range'=>'min', 'value' => $sm_caption_size, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-caption-size', 'MOD_JUX_EASY_MEGAMENU_SIZE_LABEL', 'sm-caption-size', 'jux_mm_sm_caption_size', $sm_caption_size, 'px', $sm_caption_size_data);

          $sm_caption_color = isset($vars['submenu_caption_color']) ? $vars['submenu_caption_color'] : '#999';
          $html .= self::generateInputColorBox('sm-caption-color', 'MOD_JUX_EASY_MEGAMENU_CAPTION_COLOR_LABEL', 'jux_mm_sm_caption_color', $sm_caption_color, '#999');
          $html .= '
  					</div>
  				</div>
  	        </div>
  	        <div class="span4 col-md-4">
  	            <!-- SUB MENU BACKGROUND -->
  			    <div id="sm-background" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BACKGROUND_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
  		$sm_solid_bg_color = isset($vars['submenu_solid_color']) ? $vars['submenu_solid_color'] : '#fff';
          $html .= self::generateInputColorBox('sm-solid-bg-color', 'MOD_JUX_EASY_MEGAMENU_BACKGROUND_COLOR_LABEL', 'jux_mm_sm_solid_bg_color', $sm_solid_bg_color, '#fff');
  		$html .= '
  					</div>
  				</div>
  				<!-- SUB MENU BOX PADDING -->
  				<div id="sm-padding" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BOX_PADDING_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
  		$sm_padding_top = isset($vars['submenu_padding_top']) ? $vars['submenu_padding_top'] : 5;
          $sm_padding_top_data = array('range'=>'min', 'value' => $sm_padding_top, 'min' => 0, 'max' => 100, 'step' => 1);
          $sm_padding_right = isset($vars['submenu_padding_right']) ? $vars['submenu_padding_right'] : 5;
          $sm_padding_right_data = array('range'=>'min', 'value' => $sm_padding_right, 'min' => 0, 'max' => 100, 'step' => 1);
          $sm_padding_bottom = isset($vars['submenu_padding_bottom']) ? $vars['submenu_padding_bottom'] : 5;
          $sm_padding_bottom_data = array('range'=>'min', 'value' => $sm_padding_bottom, 'min' => 0, 'max' => 100, 'step' => 1);
          $sm_padding_left = isset($vars['submenu_padding_left']) ? $vars['submenu_padding_left'] : 5;
          $sm_padding_left_data = array('range'=>'min', 'value' => $sm_padding_left, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-padding-top', 'MOD_JUX_EASY_MEGAMENU_PADDING_TOP_LABEL', 'sm-pt', 'jux_mm_sm_padding_top', $sm_padding_top, 'px', $sm_padding_top_data);
          $html .= self::generateRangeSliderBox('sm-padding-right', 'MOD_JUX_EASY_MEGAMENU_PADDING_RIGHT_LABEL', 'sm-pr', 'jux_mm_sm_padding_right', $sm_padding_right, 'px', $sm_padding_right_data);
          $html .= self::generateRangeSliderBox('sm-padding-bottom', 'MOD_JUX_EASY_MEGAMENU_PADDING_BOTTOM_LABEL', 'sm-pb', 'jux_mm_sm_padding_bottom', $sm_padding_bottom, 'px', $sm_padding_bottom_data);
          $html .= self::generateRangeSliderBox('sm-padding-left', 'MOD_JUX_EASY_MEGAMENU_PADDING_LEFT_LABEL', 'sm-pl', 'jux_mm_sm_padding_left', $sm_padding_left, 'px', $sm_padding_left_data);
  		$html .= '
  					</div>
  				</div>
  				<!-- SUB MENU ITEM PADDING -->
  				<div id="sm-item-padding" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ITEM_PADDING_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_item_padding_top = isset($vars['submenu_item_padding_top']) ? $vars['submenu_item_padding_top'] : 5;
          $sm_item_padding_top_data = array('range'=>'min', 'value' => $sm_item_padding_top, 'min' => 0, 'max' => 100, 'step' => 1);
          $sm_item_padding_right = isset($vars['submenu_item_padding_right']) ? $vars['submenu_item_padding_right'] : 20;
          $sm_item_padding_right_data = array('range'=>'min', 'value' => $sm_item_padding_right, 'min' => 0, 'max' => 100, 'step' => 1);
          $sm_item_padding_bottom = isset($vars['submenu_item_padding_bottom']) ? $vars['submenu_item_padding_bottom'] : 5;
          $sm_item_padding_bottom_data = array('range'=>'min', 'value' => $sm_item_padding_bottom, 'min' => 0, 'max' => 100, 'step' => 1);
          $sm_item_padding_left = isset($vars['submenu_item_padding_left']) ? $vars['submenu_item_padding_left'] : 20;
          $sm_item_padding_left_data = array('range'=>'min', 'value' => $sm_item_padding_left, 'min' => 0, 'max' => 100, 'step' => 1);
          $html .= self::generateRangeSliderBox('sm-item-padding-top', 'MOD_JUX_EASY_MEGAMENU_PADDING_TOP_LABEL', 'sm-item-pt', 'jux_mm_sm_item_padding_top', $sm_item_padding_top, 'px', $sm_item_padding_top_data);
          $html .= self::generateRangeSliderBox('sm-item-padding-right', 'MOD_JUX_EASY_MEGAMENU_PADDING_RIGHT_LABEL', 'sm-item-pr', 'jux_mm_sm_item_padding_right', $sm_item_padding_right, 'px', $sm_item_padding_right_data);
          $html .= self::generateRangeSliderBox('sm-item-padding-bottom', 'MOD_JUX_EASY_MEGAMENU_PADDING_BOTTOM_LABEL', 'sm-item-pb', 'jux_mm_sm_item_padding_bottom', $sm_item_padding_bottom, 'px', $sm_item_padding_bottom_data);
          $html .= self::generateRangeSliderBox('sm-item-padding-left', 'MOD_JUX_EASY_MEGAMENU_PADDING_LEFT_LABEL', 'sm-item-pl', 'jux_mm_sm_item_padding_left', $sm_item_padding_left, 'px', $sm_item_padding_left_data);
  		$html .= '
  					</div>
  				</div>
  	        </div>
  	    </div>
  	</div>';

          return $html;
      }

      static function submenuHoverTabContent($vars)
      {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-sub-menu-hover-config" name="Sub Menu Hover" role="tabpanel" tabindex="-1">
          <div class="row-fluid row">
              <div class="span4 col-md-4">
                  <div id="sm-hvr-txt-color" class="jux-option-box">
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_TEXT_COLOR_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_hvr_txt_color = isset($vars['submenu_hvr_txt_color']) ? $vars['submenu_hvr_txt_color'] : '#333';
          $html .= self::generateInputColorBox('sm-hvr-txt-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_hvr_txt_color', $sm_hvr_txt_color, '#333');
          $html .= '
  					</div>
  				</div>
                  <div id="sm-hvr-caption-color" class="jux-option-box">
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ITEM_CAPTION_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_hvr_txt_color = isset($vars['submenu_hvr_caption_color']) ? $vars['submenu_hvr_caption_color'] : '#999';
          $html .= self::generateInputColorBox('sm-hvr-caption-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_hvr_caption_color', $sm_hvr_txt_color, '#999');
          $html .= '
  					</div>
  				</div>
              </div>
              <div class="span4 col-md-4">
                  <div id="sm-hvr-background" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BACKGROUND_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_hvr_bg_color = isset($vars['submenu_hvr_solid_color']) ? $vars['submenu_hvr_solid_color'] : '#fff';
          $html .= self::generateInputColorBox('sm-hvr-solid-bg-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_hvr_solid_bg_color', $sm_hvr_bg_color, '#fff');
          $html .= '
  					</div>
  				</div>

  				<!-- TOP MENU HOVER CAPTION COLOR -->
                  <div id="sm-hvr-border-color" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_BORDER_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_hvr_border_color = isset($vars['submenu_hvr_border_color']) ? $vars['submenu_hvr_border_color'] : '#333';
          $html .= self::generateInputColorBox('sm-hvr-border-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_hvr_border_color', $sm_hvr_border_color, '#333');
          $html .= '
  					</div>
  				</div>
              </div>
  			<div class="span4 col-md-4">
  				<!-- TOP MENU HOVER ICON COLOR -->
                  <div id="sm-hvr-icon-color" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_ICON_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $sm_hvr_icon_color = isset($vars['submenu_hvr_icon_color']) ? $vars['submenu_hvr_icon_color'] : '#333';
          $html .= self::generateInputColorBox('sm-hvr-icon-color', 'MOD_JUX_EASY_MEGAMENU_COLOR_LABEL', 'jux_mm_sm_hvr_icon_color', $sm_hvr_icon_color, '#333');
          $html .= '
  					</div>
  				</div>
              </div>
          </div>
  	</div>';

          return $html;
      }

      static function mobilemenuTabContent($vars)
      {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-mobile-menu-config" name="Mobile Menu" role="tabpanel" tabindex="-1">
          <div class="row-fluid row">
              <div class="span4 col-md-4">
                  <!-- MOBILE MENU ACTION -->
                  <div id="mobile-menu-action" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_MOBILE_BREAKPOINT_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mobile_breakpoint = isset($vars['mobile_breakpoint']) ? $vars['mobile_breakpoint'] : '768';
          $helper_text = 'MOD_JUX_EASY_MEGAMENU_MOBILE_BREAKPOINT_HELPER_LABEL';
          $html .= self::generateInputBox('mobile-menu-breakpoint', 'MOD_JUX_EASY_MEGAMENU_BREAKPOINT_LABEL', 'jux_mm_mobile_menu_breakpoint', $mobile_breakpoint, $helper_text);
          $html .= '
  					</div>
  				</div>
              </div>
              <div class="span4 col-md-4">
                  <!-- MOBILE MENU BAR -->
                  <div id="mobile-menu-bar" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_MOBILE_MENUBAR_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">';
          $mobile_menu_title = isset($vars['mobile_menu_title']) ? $vars['mobile_menu_title'] : 'Menu';
          $html .= self::generateInputBox('mobile-menu-title', 'MOD_JUX_EASY_MEGAMENU_MOBILE_MENU_TITLE_LABEL', 'jux_mm_mobile_menu_title', $mobile_menu_title);
          $mobile_menu_toggle_icon = isset($vars['mobile_menu_toggle_icon']) ? $vars['mobile_menu_toggle_icon'] : 'fa fa-bars';
          $additional_icon = '<a style="display: block;" href="https://fontawesome.com/v4.7.0/icons/" target="_blank"><i class="fa  fa-search"></i> ' . Text::_('JUX_NAVIGATION_MM_ICON') . '</a>';
          $html .= self::generateInputBox('mobile-menu-toggle-icon', 'MOD_JUX_EASY_MEGAMENU_TOGGLE_ICON_LABEL', 'jux_mm_mobile_menu_toggle_icon', $mobile_menu_toggle_icon, $additional_icon);
          $html .= '
  					</div>
  				</div>
              </div>
              <div class="span4 col-md-4">
              <!-- MOBILE MENU LAYOUT -->
              <div id="mobile-menu-layout" class="jux-option-box">
                <h3 class="jux-opt-box-title">
                  <span>'.Text::_('MOD_JUX_EASY_MEGAMENU_MOBILE_MENU_LAYOUT_LABEL').'</span>
                </h3>
                <div class="jux-opt-box-body">';
                $mobile_layout = isset($vars['mobile_layout']) ? $vars['mobile_layout'] : '1';
                $mobile_layouts = array(
                    '1' => 'MOD_JUX_EASY_MEGAMENU_MOBILE_LAYOUT_WITH_TOGGLE_BUTTON_LABEL',
                    '2'=> 'MOD_JUX_EASY_MEGAMENU_MOBILE_LAYOUT_WITHOUT_TOGGLE_BUTTON_LABEL'
                );
                $html .= self::generateSelectBox('mobile-menu-layout', 'MOD_JUX_EASY_MEGAMENU_MOBILE_LAYOUT_LABEL', 'jux_mm_mobile_menu_layout', $mobile_layouts, $mobile_layout);
        $html .= '
                </div>
              </div>
              </div>
          </div>
  	</div>';
          return $html;
      }

      static function advancedTabContent($vars)
      {
          $html = '';
          $html .= '<div class="tab-pane fade" id="jux-advanced-config" name="Advanced" role="tabpanel" tabindex="-1">
           <div class="row-fluid row">
              <div class="span8">
                  <!-- CUSTOM CSS -->
                  <div id="jux-custom-css" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_CUSTOM_CSS_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">
  					    <div id="jux-adv-custom-css" class="jux-opt-body-wrap">';
          $custom_css = isset($vars['custom_css']) ? $vars['custom_css'] : '';
          $html .= '
  							<textarea name="jux_mm_adv_custom_css" id="jux_mm_adv_custom_css" cols="" rows="5" class="inputbox jux-textarea" onChange="updatemenu()" placeholder="'.Text::_('MOD_JUX_EASY_MEGAMENU_CUSTOM_CSS_PLACEHOLDER_LABEL').'">'.$custom_css.'</textarea>
  						</div>
  					</div>
  				</div>
              </div>
              <div class="span4 col-md-4">
                  <!-- CSS PREFIX -->
                  <div id="jux-css-prefix" class="jux-option-box">
  					<div class="jux-handlediv"></div>
  					<h3 class="jux-opt-box-title">
  						<span>'.Text::_('MOD_JUX_EASY_MEGAMENU_CSS_PREFIX_LABEL').'</span>
  					</h3>
  					<div class="jux-opt-box-body">
  					    <div id="jux-adv-css-prefix" class="jux-opt-body-wrap">
  					        <small>Input the id of your navigation element (normally &lt;nav&gt; tag) will help resolve conflict with your theme.<br>CAUTION: If you don\'t know what it is, don\'t change it as it\'ll break you menu</small>
  							<label class="jux-opt-box-label" for="jux_mm_adv_css_prefix">Prefix</label>';
          $css_prefix = isset($vars['css_prefix']) ? $vars['css_prefix'] : '';
          $html .= '
  							<input name="jux_mm_adv_css_prefix" id="jux_mm_adv_css_prefix" type="text" value="'.$css_prefix.'" class="inputbox" onChange="updatemenu()" placeholder="#nav">
  						</div>
  					</div>
  				</div>
              </div>
           </div>
  	</div>';

          return $html;
      }

      static function generateSelectBox($optionID = '', $optionTitle = '', $selectName = '', $selectValues = array(), $selectedVal = '', $createNoneOption = false, $dataDisplay = array(), $isFontList = false) {
          $js_data = '';

          if(!empty($dataDisplay))
          {
              foreach($dataDisplay as $key => $data)
              {
                  $js_data .= ' data-'.$key.'="'.$data.'"';
              }
          }

          $gg_font_class = $isFontList ? 'google-fonts' : '';

          $html = '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).'</label>';
          $html .= '<select name="'.$selectName.'" id="'.$selectName.'" class="jux-field form-select '.$gg_font_class.'" onChange="updatemenu()">';
          if($createNoneOption == true)
          {
              $html .= '<option value="" >None</option>';
          }
          if(!empty($selectValues))
          {
              if($isFontList) {
                  foreach ($selectValues as $key => $value) {
                      $selected = ($key == $selectedVal) ? 'selected="selected"' : '';
                      $data_url = $value['url'] != '' ? 'data-url="'.$value['url'].'"' : '';
                      $html .= '<option value="' . $key . '"  '. $data_url . $selected . '>' . Text::_($value['name']) . '</option>';
                  }
              } else {
                  foreach ($selectValues as $key => $value) {
                      $selected = ($key == $selectedVal) ? 'selected="selected"' : '';
                      $html .= '<option value="' . $key . '" ' . $selected . '>' . Text::_($value) . '</option>';
                  }
              }
          }
          $html .= '</select>';
          $html .= '</div>';

          return $html;
      }

      static function generateRangeSliderBox($optionID = '', $optionTitle = '',$labelId = '', $inputName = '', $selectedVal = '', $unit = 'ms', $sliderData = array())
      {
          $js_data = '';
          if(!empty($sliderData))
          {
              foreach($sliderData as $key => $data) {
                  $js_data .= ' data-'.$key.'="'.$data.'"';
              }
          }
          $js_data .= ' data-inputname="'.$inputName.'"';
          $js_data .= ' data-label="'.$labelId.'"';
          $html = '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).' <strong><span id="'.$labelId.'-label">'.$selectedVal.'</span>'.$unit.'</strong></label>';
          $html .= '<div id="'.$inputName.'" class="js-rslider"'.$js_data.'></div>';
          $html .= '<input type="hidden" name="'.$inputName.'" class="jux-field" value="'.$selectedVal.'">';
          $html .= '</div>';

          return $html;
      }

      static function generateSwitchBox($optionID = '', $optionTitle = '', $inputName = '', $selectedVal = '')
      {
          $checked = ($selectedVal == 1) ? ' checked="checked"' : '';
          $html = '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).'</label>';
              $html .= '<div id="'.$inputName.'" class="jux-switch-wrap">';
                  $html .= '<span class="jux-switch-status off-label">'.Text::_('JNO').'</span>';
                  $html .= '<label class="switch"><input name="'.$inputName.'" value="1" class="jux-field" type="checkbox"'.$checked.'><span class="slider"></span></label>';
                  $html .= '<span class="jux-switch-status on-label">'.Text::_('JYES').'</span>';
              $html .= '</div>';
          $html .= '</div>';

          return $html;
      }

      static function generateInputBox($optionID = '', $optionTitle = '', $inputName = '', $selectedVal = '', $helperText = '', $additionalHtml = '')
      {
          $checked = ($selectedVal == 1) ? ' checked="checked"' : '';
          $html = '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).'</label>';
          $html .= '<input name="'.$inputName.'" id="'.$inputName.'" class="inputbox jux-field" value="'.$selectedVal.'" aria-invalid="false" type="text" onChange="updatemenu()">';
          $html .= $additionalHtml;
          $html .= '<small>'.Text::_($helperText).'</small>';
          $html .= '</div>';

          return $html;
      }

      static function generateCheckboxBox($optionID = '', $optionTitle = '', $inputName = '', $selectedVal = '')
      {
          $checked = ($selectedVal == 1) ? ' checked="checked"' : '';
          $html = '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<input name="'.$inputName.'" id="'.$inputName.'" value="1" class="jux-field" type="checkbox"'.$checked.' onclick="updatemenu();"> ';
          $html .= '<label class="jux-opt-box-label jux-cb-label" for="'.$inputName.'">'.Text::_($optionTitle).'</label>';
          $html .= '</div>';

          return $html;
      }

      /**
       * @param $optionID
       * @param string $optionTitle
       * @param $inputName
       * @param $selectedVal
       * @return string
       */
      static function generateInputColorBox($optionID = '', $optionTitle = '', $inputName = '', $selectedVal = '', $defaultVal = '')
      {
          $checked = ($selectedVal == 1) ? ' checked="checked"' : '';
          $html = '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).'</label>';

          $html .= '<input name="'.$inputName.'" id="'.$inputName.'" value="'.$selectedVal.'" class="jux-field jux-colorpicker minicolors-input span12" data-defaultValue="'.$defaultVal.'" data-opacity="1" data-format="rgb" aria-invalid="false" type="text">';
          $html .= '</div>';

          return $html;
      }

      static function generateCheckboxesGroupBox($optionID = '', $optionTitle = '', $groupName = '', $checkboxes = array())
      {
          $html = '';
          $html .= '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).'</label>';
  		$html .= '<div class="'.$groupName.'-group">';
  		if(!empty($checkboxes))
          {
              foreach($checkboxes as $key => $checkbox)
              {
                  $checked = $checkboxes[$key]['checked'] == 1 ? ' checked="checked"' : '';
                  $html .= '<input type="checkbox" name="'.$checkboxes[$key]['name'].'" class="jux-field" id="'.$checkboxes[$key]['name'].'" value="'.$checkboxes[$key]['value'].'"'.$checked.' onclick="updatemenu()"> ';
  				$html .= '<label class="jux-opt-box-label jux-cb-label" for="'.$checkboxes[$key]['name'].'">'.Text::_($checkboxes[$key]['label']).'</label> ';
              }
          }
  		$html .= '</div>';
  		$html .= '</div>';

          return $html;
      }

      static function generateMediaLibraryBox($optionID = '', $optionTitle = '', $inputName = '', $selectedVal = '', $folder = '', $preview = true, $previewTooltip = 'false')
      {
          $root_url = Uri::root();
          $basepath = explode('modules/', $root_url);
          $html = '';
          $html .= '<div id="jux-'.$optionID.'" class="jux-opt-body-wrap">';
          $html .= '<label class="jux-opt-box-label">'.Text::_($optionTitle).'</label>';
          $html .= '<div class="field-media-wrapper" data-basepath="'.$basepath[0].'" data-url="index.php?option=com_media&amp;view=images&amp;tmpl=component&amp;asset=128&amp;author=&amp;fieldid={field-media-id}&amp;ismoo=0&amp;folder='.$folder.'"
  								data-modal=".modal" data-modal-width="100%" data-modal-height="400px" data-input=".field-media-input" data-button-select=".button-select"
  								data-button-clear=".button-clear" data-button-save-selected=".button-save-selected" data-preview="'.$preview.'" data-preview-as-tooltip="'.$previewTooltip.'"
  								data-preview-container=".field-media-preview" data-preview-width="200" data-preview-height="200">';
          $html .= '<div id="imageModal_'.$inputName.'" tabindex="-1" class="modal hide fade">';
              $html .= '<div class="modal-header">';
                  $html .= '<button type="button" class="close novalidate" data-dismiss="modal">×</button>';
                  $html .= '<h3>Change Image</h3>';
              $html .= '</div>';
              $html .= '<div class="modal-body"></div>';
              $html .= '<div class="modal-footer">';
              $html .= '<a class="btn" data-dismiss="modal">'.Text::_('JCANCEL').'</a>';
              $html .= '</div>';
              $html .= '</div>';
              $html .= '<div class="field-media-preview" style="width: 200px; max-height: 200px;margin-bottom:10px;"></div>';
              $html .= '<div class="input-prepend input-append">';
              $html .= '<input name="'.$inputName.'" id="'.$inputName.'" value="'.$selectedVal.'" readonly="readonly" class="input-small hasTooltip field-media-input" aria-invalid="false" type="text">';
              $html .= '<a class="btn add-on button-select">'.Text::_('JSELECT').'</a>';
              $html .= '<a class="btn icon-remove hasTooltip add-on button-clear button-clear-prev-img" title="'.Text::_('JCLEAR').'"></a>';
              $html .= '</div>';
              $html .= '</div>';
  		$html .= '</div>';

          return $html;
      }
  }
}
