<?php

class cloudSlider {

  var $arrSliderDefaults = array();
  var $arrPositions = array();
  var $arrEasing = array();
  var $arrSkins = array();
  var $arrBulletPosition = array();
  var $wpdb = '';
  var $tableName = '';

  function cloudSlider()
  {
    $this->wpdb = $GLOBALS["wpdb"];
    $this->tableName = $this->wpdb->prefix . "cloudslider";
    $this->arrSliderDefaults = array(
      'layers' => array(
        0 => array(
          'properties' => array(
            'background' => '',
            'thumbnail' => '',
            'backsize' => 'Cover',
            '2d_transitions_id' => '1,2',
            '3d_transitions_id' => '',
            'slidedelay' => '6000',
            'hidden' => '',
            'layer_link' => '',
            'layer_link_target' => '_self',
            'kenburn' => '',
            'scale-from' => '1',
            'position-from' => 'center_center',
            'position-from-left' => '0',
            'position-from-top' => '0',
            'scale-to' => '1',
            'position-to' => 'center_center',
            'position-to-left' => '50',
            'position-to-top' => '50',
            'kenburn-duration' => '5000',
            'kenburn-easing' => 'easeInSine',
            'carousel_layer_ids' => '',
            'carousel' => 'on',
            'carousel-pos' => 'center',
            'carousel-pos-px-per' => '',
            'carousel-width' => '',
            'carousel-height' => '',
            'carousel-fisrt-show' => '1',
            'carousel-overlay' => '20%',
            'carousel-perspective' => '1000',
            'carousel-easing' => 'easeOutSine',
            'carousel-duration' => '700',
            'carousel-delay' => '6000',
            'carousel-direction' => 'right',
            'carousel-arrow-visibility' => 'hover',
            'carousel-arrow-pos' => 'auto',
            'carousel-left-arrow-img' => CS_ROOT_URL . '//library/img/left_carousel_arrow.png',
            'carousel-right-arrow-img' => CS_ROOT_URL . '//library/img/right_carousel_arrow.png',
            'carousel-responsive-level' => '2',
            'carousel-level' => array(
              1 => array(
                'carousel-opacity' => '1',
                'carousel-scale' => '1',
                'carousel-rotation-x' => '0',
                'carousel-rotation-y' => '0',
                'carousel-rotation-z' => '0',
              ) ,
            )
          ) ,
          'sub_layer' => array(
            0 => array(
              'properties' => array(
                'subtitle' => '',
                'layer_id' => strtotime("now")+floor((rand(0,1)*100)+1),
                'highlight' => '0',
                'lock' => '0',
                'hide' => '0',
                'type' => 'image',
                'image' => '',
                'dynamic_text' => '',
                'text-limit' => '',
                'hidden_post_id' => '1',
                'hidden_post_type' => 'post',
                'hidden_post_cat' => '',
                'hidden_post_tag' => '',
                'hidden_orderby' => 'date',
                'hidden_order' => 'desc',
                'html' => '',
                'pos_width' => 'auto',
                'pos_height' => 'auto',
                'pos_top' => '0',
                'pos_top_type' => 'px',
                'pos_left' => '0',
                'pos_left_type' => 'px',
                'padding_top' => '0',
                'padding_right' => '0',
                'padding_bottom' => '0',
                'padding_left' => '0',
                'font_family' => 'Arial, Helvetica, sans-serif',
                'font_color' => '#000000',
                'font_size' => '15',
                'line_height' => 'Normal',
                'font_background' => '',
                'radius' => '0',
                'custom_style' => '',
                'ti-offsetx' => '0',
                'ti-offsety' => '0',
                'ti-duration' => '800',
                'ti-delay' => '0',
                'ti-fade' => 'on',
                'ti-easing' => 'easeInOutExpo',
                'ti-rotate' => '0',
                'ti-rotatex' => '0',
                'ti-rotatey' => '0',
                'ti-skewx' => '0',
                'ti-skewy' => '0',
                'ti-origin' => '50% 50% 0',
                'ti-scalex' => '1',
                'ti-scaley' => '1',
                'ti-perspective' => '400',
                'to-offsetx' => '0',
                'to-offsety' => '0',
                'to-duration' => '800',
                'to-delay' => '0',
                'to-fade' => 'on',
                'to-easing' => 'easeInOutExpo',
                'to-rotate' => '0',
                'to-rotatex' => '0',
                'to-rotatey' => '0',
                'to-skewx' => '0',
                'to-skewy' => '0',
                'to-origin' => '50% 50% 0',
                'to-scalex' => '1',
                'to-scaley' => '1',
                'to-perspective' => '400',
                'carousel_attr' => array(
                  0 => array(
                    'attach_layer_value' => '',
                  ) ,
                ) ,
                'url' => '',
                'target' => '_self',
                'id' => '',
                'classes' => '',
                'title' => '',
                'alt' => '',
                'rel' => '',
              ) ,
            ) ,
          ) ,
        ) ,
      ) ,
      'settings' => array(
        'slider-width' => '1000',
        'slider-height' => '500',
        'responsive' => 'on',
        'full-width' => '',
        'full-size' => '',
        'skin' => 'default',
        'container-color' => '#FFF',
        'container-border' => '5px',
        'container-box-shadow' => '0px 2px 30px 0px #000',
        'proress-bar-pos' => 'top',
        'progress-bar-color' => 'rgba(170, 170, 170, 0.5)',
        'progress-bar-thick' => '3',
        'img-loader' => CS_ROOT_URL . '//library/img/loading.gif',
        'image-lazyload' => 'on',
        'navigation-type' => 'bullet',
        'start-slide-show' => 'on',
        'auto-slide-carousel' => 'slide',
        'pause-on-hover' => 'on',
        'start-with-slide' => '1',
        'shuffle-mode' => '',
        'keyboard-navigation' => 'on',
        'arrow-visibility' => 'hover',
        'arrow-pos' => '30',
        'left-arrow-img' => CS_ROOT_URL . '//library/img/left_arrow.png',
        'right-arrow-img' => CS_ROOT_URL . '//library/img/right_arrow.png',
        'left-hover-arrow-img' => CS_ROOT_URL . '//library/img/left_arrow_activated.png',
        'right-hover-arrow-img' => CS_ROOT_URL . '//library/img/right_arrow_activated.png',
        'arrow-responsive-level' => '2',
        'bullet-visibility' => 'show',
        'bullet-pos' => 'bottom_center',
        'horizontal-offset' => '0',
        'vertical-offset' => '10',
        'bullet-opacity' => '1',
        'active-bullet-opacity' => '1',
        'bullet-img' => CS_ROOT_URL . '//library/img/bullet_item.png',
        'active-bullet-img' => CS_ROOT_URL . '//library/img/bullet_item_activated.png',
        'bullet-left-container-img' => '',
        'bullet-right-container-img' => '',
        'bullet-margin' => '0 5px',
        'bullet-responsive-level' => '2',
        'thumb-visibility' => 'hover',
        'thumb-position-offset' => 'outside',
        'thumb-container-width' => 'auto',
        'thumb-bg-color' => '#FFFFFF',
        'thumb-container-padding' => '5px',
        'thumb-width' => '',
        'thumb-height' => '',
        'thumb-margin' => '5px',
        'thumb-border-width' => '3px',
        'thumb-border-color' => '#AAA',
        'active-thumb-border-color' => '#AAA',
        'thumb-opacity' => '0.6',
        'active-thumb-opacity' => '1',
        'thumb-responsive-level' => '1.3',
        'no-thumb-img' => CS_ROOT_URL . '//library/img/no_thumb.png',
        'pause-when-playing' => 'on'
      ) ,
      'callbacks' => array(
        'callback-onInit' => '',
        'callback-onResume' => '',
        'callback-onPause' => '',
        'callback-onPrev' => '',
        'callback-onNext' => '',
        'callback-onSlideTo' => '',
        'callback-onSlidingStart' => '',
        'callback-onSlidingComplete' => '',
        'callback-onCloudClick' => '',
        'callback-onCloudHover' => ''
      )
    );
    $this->arrSkins = array(
      'light_iron' => array(
        'containerBgColor' => '#ccc',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/light_iron/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/light_iron/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/light_iron/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/light_iron/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/light_iron/right_arrow_activated.png',
          'positionOffset' => - 7,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => - 7,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/light_iron/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/light_iron/bullet_item_activated.png',
          'imgContainerLeft' => CS_ROOT_URL . '/library/skins/light_iron/bullet_left.png',
          'imgContainerRight' => CS_ROOT_URL . '/library/skins/light_iron/bullet_right.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => '#AAAAAA',
          'itemOpacity' => 0.4,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/light_iron/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_iron' => array(
        'containerBgColor' => '#666666',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_iron/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_iron/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_iron/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_iron/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_iron/right_arrow_activated.png',
          'positionOffset' => - 7,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => - 7,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_iron/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_iron/bullet_item_activated.png',
          'imgContainerLeft' => CS_ROOT_URL . '/library/skins/dark_iron/bullet_left.png',
          'imgContainerRight' => CS_ROOT_URL . '/library/skins/dark_iron/bullet_right.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => '#444444',
          'itemOpacity' => 0.4,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#333333',
          'activatedBorderColor' => '#333333',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_iron/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'light_glass' => array(
        'containerBgColor' => '#FFFFFF',
        'containerBorder' => '6px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/light_glass/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/light_glass/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/light_glass/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/light_glass/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/light_glass/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => '0px 5px',
          'imgItem' => CS_ROOT_URL . '/library/skins/light_glass/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/light_glass/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(255, 255, 255, 0.5)',
          'itemOpacity' => 0.5,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/light_glass/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_glass' => array(
        'containerBgColor' => '#333333',
        'containerBorder' => '6px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_glass/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_glass/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_glass/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_glass/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_glass/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => '0px 5px',
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_glass/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_glass/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(0, 0, 0, 0.5)',
          'itemOpacity' => 0.5,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#333333',
          'activatedBorderColor' => '#333333',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_glass/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'light_rounded_bar' => array(
        'containerBgColor' => '#AAAAAA',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/light_rounded_bar/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/light_rounded_bar/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/light_rounded_bar/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/light_rounded_bar/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/light_rounded_bar/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 10,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/light_rounded_bar/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/light_rounded_bar/bullet_item_activated.png',
          'imgContainerLeft' => CS_ROOT_URL . '/library/skins/light_rounded_bar/bullet_left.png',
          'imgContainerRight' => CS_ROOT_URL . '/library/skins/light_rounded_bar/bullet_right.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => '#AAAAAA',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#333333',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/light_rounded_bar/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_rounded_bar' => array(
        'containerBgColor' => '#333333',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 10,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/bullet_item_activated.png',
          'imgContainerLeft' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/bullet_left.png',
          'imgContainerRight' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/bullet_right.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => '#333333',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#000000',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_rounded_bar/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'light_bar' => array(
        'containerBgColor' => '#FFFFFF',
        'containerBorder' => '5px 5px 20px 5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/light_bar/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/light_bar/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/light_bar/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/light_bar/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/light_bar/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 3,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/light_bar/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/light_bar/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(256, 256, 256, 0.5)',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#000000',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/light_bar/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_bar' => array(
        'containerBgColor' => '#333333',
        'containerBorder' => '5px 5px 20px 5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_bar/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_bar/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_bar/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_bar/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_bar/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 3,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_bar/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_bar/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(0, 0, 0, 0.5)',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#000000',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_bar/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'light_tab' => array(
        'containerBgColor' => '#FFFFFF',
        'containerBorder' => '5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/light_tab/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/light_tab/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/light_tab/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/light_tab/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/light_tab/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 5,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/light_tab/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/light_tab/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(200, 200, 200, 0.7)',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#000000',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/light_tab/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_tab' => array(
        'containerBgColor' => '#000000',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_tab/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_tab/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_tab/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_tab/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_tab/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 5,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_tab/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_tab/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(30, 30, 30, 0.7)',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#000000',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_tab/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'light_outline' => array(
        'containerBgColor' => '#ffffff',
        'containerBorder' => '5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/light_outline/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/light_outline/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/light_outline/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/light_outline/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/light_outline/right_arrow_activated.png',
          'positionOffset' => 30,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_right',
          'horizontalOffset' => 30,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => 2,
          'imgItem' => CS_ROOT_URL . '/library/skins/light_outline/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/light_outline/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.2
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(255, 255, 255, 0.8)',
          'itemOpacity' => 0.3,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/light_outline/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_outline' => array(
        'containerBgColor' => '#000000',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_outline/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_outline/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_outline/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_outline/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_outline/right_arrow_activated.png',
          'positionOffset' => 30,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_right',
          'horizontalOffset' => 30,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => 5,
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_outline/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_outline/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.2
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '2px',
          'containerBgColor' => '#333333',
          'itemOpacity' => 1,
          'itemMargin' => '2px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#000000',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_outline/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'stroke' => array(
        'containerBgColor' => '#FFFFFF',
        'containerBorder' => '5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/stroke/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/stroke/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/stroke/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/stroke/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/stroke/right_arrow_activated.png',
          'positionOffset' => 40,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => 3,
          'imgItem' => CS_ROOT_URL . '/library/skins/stroke/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/stroke/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'transparent',
          'itemOpacity' => 0.5,
          'itemMargin' => '5px',
          'itemBorderWidth' => '4px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/stroke/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'pierced' => array(
        'containerBgColor' => '#FFFFFF',
        'containerBorder' => '5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/pierced/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/pierced/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/pierced/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/pierced/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/pierced/right_arrow_activated.png',
          'positionOffset' => - 11,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => - 12,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/pierced/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/pierced/bullet_item_activated.png',
          'imgContainerLeft' => CS_ROOT_URL . '/library/skins/pierced/bullet_left.png',
          'imgContainerRight' => CS_ROOT_URL . '/library/skins/pierced/bullet_right.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'transparent',
          'itemOpacity' => 1,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#333333',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/pierced/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'polygon' => array(
        'containerBgColor' => '#CCCCCC',
        'containerBorder' => '0px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/polygon/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/polygon/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/polygon/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/polygon/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/polygon/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 10,
          'itemOpacity' => 1,
          'itemMargin' => 1,
          'imgItem' => CS_ROOT_URL . '/library/skins/polygon/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/polygon/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(255, 255, 255, 0.5)',
          'itemOpacity' => 0.5,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/polygon/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'embossed' => array(
        'containerBgColor' => '#AAAAAA',
        'containerBorder' => '5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/embossed/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/embossed/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/embossed/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/embossed/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/embossed/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/embossed/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/embossed/bullet_item_activated.png',
          'imgContainerLeft' => CS_ROOT_URL . '/library/skins/embossed/bullet_left.png',
          'imgContainerRight' => CS_ROOT_URL . '/library/skins/embossed/bullet_right.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => '#CCCCCC',
          'itemOpacity' => 0.5,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#000000',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/embossed/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'dark_short_bar' => array(
        'containerBgColor' => '#333333',
        'containerBorder' => '5px',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/dark_short_bar/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/dark_short_bar/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/dark_short_bar/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/dark_short_bar/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/dark_short_bar/right_arrow_activated.png',
          'positionOffset' => 20,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 20,
          'itemOpacity' => 1,
          'itemMargin' => 0,
          'imgItem' => CS_ROOT_URL . '/library/skins/dark_short_bar/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/dark_short_bar/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'rgba(0, 0, 0, 0.5)',
          'itemOpacity' => 0.5,
          'itemMargin' => '5px',
          'itemBorderWidth' => '1px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/dark_short_bar/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      ) ,
      'default' => array(
        'containerBgColor' => '#FFFFFF',
        'containerBorder' => '5px',
        'containerBoxShadow' => '0px 2px 30px 0px #000',
        'progressBarPosition' => 'top',
        'progressBarColor' => 'rgba(170, 170, 170, 0.5)',
        'progressBarThick' => '3px',
        'imgLoader' => CS_ROOT_URL . '/library/skins/default/loading.gif',
        'arrow' => array(
          'imgPrev' => CS_ROOT_URL . '/library/skins/default/left_arrow.png',
          'imgNext' => CS_ROOT_URL . '/library/skins/default/right_arrow.png',
          'imgPrevActivated' => CS_ROOT_URL . '/library/skins/default/left_arrow_activated.png',
          'imgNextActivated' => CS_ROOT_URL . '/library/skins/default/right_arrow_activated.png',
          'positionOffset' => 30,
          'responsiveLevel' => 1.5
        ) ,
        'bullet' => array(
          'position' => 'bottom_center',
          'horizontalOffset' => 0,
          'verticalOffset' => 15,
          'itemOpacity' => 1,
          'itemMargin' => '0px 5px',
          'imgItem' => CS_ROOT_URL . '/library/skins/default/bullet_item.png',
          'imgItemActivated' => CS_ROOT_URL . '/library/skins/default/bullet_item_activated.png',
          'activatedOpacity' => 1,
          'responsiveLevel' => 1.5
        ) ,
        'thumb' => array(
          'positionOffset' => - 120,
          'containerPadding' => '5px',
          'containerBgColor' => 'transparent',
          'itemOpacity' => 0.7,
          'itemMargin' => '5px',
          'itemBorderWidth' => '2px',
          'itemBorderColor' => '#FFFFFF',
          'activatedBorderColor' => '#FFFFFF',
          'activatedOpacity' => 1,
          'imgNoThumb' => CS_ROOT_URL . '/library/skins/default/no_thumb.png',
          'responsiveLevel' => 1.3
        )
      )
    );
    $this->arrPositions = array(
      'center_center' => 'Center Center',
      'center_left' => 'Center Left',
      'center_right' => 'Center Right',
      'top_left' => 'Top Left',
      'top_center' => 'Top Center',
      'top_right' => 'Top Right',
      'bottom_left' => 'Bottom Left',
      'bottom_center' => 'Bottom Center',
      'bottom_right' => 'Bottom Right',
      'top_left_per' => '(x%,y%)'
    );
    $this->arrEasing = array(
      'swing',
      'linear',
      'easeInSine',
      'easeOutSine',
      'easeInOutSine',
      'easeInQuad',
      'easeOutQuad',
      'easeInOutQuad',
      'easeInCubic',
      'easeOutCubic',
      'easeInOutCubic',
      'easeInQuart',
      'easeOutQuart',
      'easeInOutQuart',
      'easeInQuint',
      'easeOutQuint',
      'easeInOutQuint',
      'easeInExpo',
      'easeOutExpo',
      'easeInOutExpo',
      'easeInCirc',
      'easeOutCirc',
      'easeInOutCirc',
      'easeInBack',
      'easeOutBack',
      'easeInOutBack',
      'easeInElastic',
      'easeOutElastic',
      'easeInOutElastic',
      'easeInBounce',
      'easeOutBounce',
      'easeInOutBounce'
    );
    $this->arrBulletPosition = array(
      'bottom_center',
      'bottom_left',
      'bottom_right',
      'top_center',
      'top_left',
      'top_right'
    );
  }
  function fnGetPositionsDropdown($arrPostData)
  {
    $html = '<select name="' . $arrPostData['name'] . '" class="' . $arrPostData['class'] . '" data-title="' . $arrPostData['title'] . '">';
    foreach($this->arrPositions as $key => $position) {
      $selected = $arrPostData['default'] == $key ? 'Selected="Selected"' : '';
      $html.= '<option ' . $selected . ' value="' . $key . '">' . $position . '</option>';
    }
    $html.= '</select>';
    return $html;
  }
  function fnGetEasingDropdown($arrPostData)
  {
    $html = '<select name="' . $arrPostData['name'] . '" class="' . $arrPostData['class'] . '" data-title="' . $arrPostData['title'] . '">';
    $arrPostData['default'] = $arrPostData['default'] == '' ? 'easeOutSine' : $arrPostData['default'];
    foreach($this->arrEasing as $easing) {
      $selected = $arrPostData['default'] == $easing ? 'Selected="Selected"' : '';
      $html.= '<option ' . $selected . ' value="' . $easing . '">' . $easing . '</option>';
    }
    $html.= '</select>';
    return $html;
  }
  function fnGetAutoIncrement()
  {
    $sqlQuery = 'SELECT MAX(id) as `AUTO_INCREMENT` FROM ' . $this->tableName;
    $slider_count = $this->wpdb->get_row($sqlQuery);
    return is_null($slider_count->AUTO_INCREMENT) ? 0 : $slider_count->AUTO_INCREMENT;
  }
  function fnUpdateCallback($arrPostData)
  {
    if ($arrPostData['cs-code'] != "" && $arrPostData['cs_envato_username'] != "" && $arrPostData['cs_envato_api_key'] != "") {
      update_option('cs_envato_username', $arrPostData['cs_envato_username']);
      update_option('cs_envato_api_key', $arrPostData['cs_envato_api_key']);
      update_option('cs_code', $arrPostData['cs-code']);
      $updateURL='update-core.php';
      die(json_encode(array(
        'success' => true,
        'message' => __('Your information saved successfully.', 'CloudSlider') . '<a href="'.$updateURL.'">' . __('Check for update', 'CloudSlider') . '</a>'
      )));
    }
  }
  function fnCloudSliderTemplate($arrGetData)
  {
    if ((isset($arrGetData['action']) && $arrGetData['action'] == 'edit')) {
      /*if (isset($arrGetData['save_slider'])) {
      wp_redirect('?page=cloud-slider&action=edit&id='.$arrGetData['id']); exit;
      } else {
      */
      include_once (CS_DIR . '/include/edit_slider.php');

      //  }
    }
    else {
      if (is_null($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == '') {
        wp_redirect('?page=cloud-slider-list');
        exit;
      }
      else {
        wp_redirect('?page=cloud-slider&action=edit&type=new');
        exit;
      }
      // wp_redirect('?page=cloud-slider&action=edit&type=new'); exit;
    }
  }
  function fnInsertNewSlider()
  {
    $ai = (int)$this->fnGetAutoIncrement() + 1;
    $sliderData = base64_encode(serialize($this->arrSliderDefaults));
    $this->wpdb->query($this->wpdb->prepare("INSERT INTO $this->tableName (name, data, created, author_id, modified,type)VALUES (%s, %s, %s, %d, %s, %s)", 'Edit Slider ' . $ai, $sliderData, Date("Y-m-d H:i:s") , get_current_user_id() , Date("Y-m-d H:i:s") , 'new'));
    $new_cloud_id = $this->wpdb->insert_id;
    return $new_cloud_id;
  }
  function fnGetSliderData($sliderId, $preview = "")
  {
    $tableName = $preview == 'preview' ? $this->wpdb->prefix . 'cloudpreview' : $this->tableName;
    $sqlQuery = "SELECT * FROM $tableName WHERE id='" . $sliderId . "'";
    if (!current_user_can('manage_options')) $sqlQuery.= " AND author_id='" . get_current_user_id() . "'";
    $sliderData = $this->wpdb->get_row($sqlQuery);
    return $sliderData;
  }
  function fnDeleteUnsavedSliders()
  {
    $sqlQuery = "DELETE FROM $this->tableName WHERE author_id='" . get_current_user_id() . "' AND type='new' AND created < DATE_SUB(NOW(),INTERVAL 1 HOUR)";
    $this->wpdb->query($sqlQuery);
  }
  function fnGetAllSliderData($limit = 0)
  {
    $sqlQuery = "SELECT * FROM $this->tableName WHERE type='save'";
    if (!current_user_can('manage_options')) $sqlQuery.= "  AND author_id='" . get_current_user_id() . "'";
    $sqlQuery.= " ORDER BY id DESC ";
    if ($limit != 0) $sqlQuery.= " LIMIT " . $limit;
    $sliderData = $this->wpdb->get_results($sqlQuery);
    return $sliderData;
  }
  function fnGetAllSliderCount()
  {
    $sqlQuery = "SELECT count(*) FROM $this->tableName WHERE type='save'";
    if (!current_user_can('manage_options')) $sqlQuery.= " AND author_id='" . get_current_user_id() . "'";
    $sliderCount = $this->wpdb->get_var($sqlQuery);
    return $sliderCount;
  }
  function fnGetSliderCount($sliderId)
  {
    $sqlQuery = "SELECT count(*) FROM $this->tableName WHERE id='" . $sliderId . "'";
    if (!current_user_can('manage_options')) $sqlQuery.= " AND author_id='" . get_current_user_id() . "'";
    $sliderCount = $this->wpdb->get_var($sqlQuery);
    return $sliderCount;
  }
  function fnDeletePreviewSlider($arrPostData)
  {
    $tableName = $this->wpdb->prefix . 'cloudpreview';
    $sqlQuery = 'DELETE FROM ' . $tableName . ' WHERE id="' . $arrPostData['id'] . '"';
    $this->wpdb->query($sqlQuery);
  }
  function fnSavePreviewCallback($arrPostData)
  {
    global $new_cloud_id;
    $tableName = $this->wpdb->prefix . 'cloudpreview';
    $sqlQuery = '';
    if (isset($arrPostData['action']) && $arrPostData['type'] = 'new') {
      $output = array();
      $output = json_decode(stripcslashes($arrPostData['alldata']) , true);
      $output = $output['slides'];
      $slider_count = $this->fnGetSliderData($arrPostData['id'], 'preview');
      if ($slider_count) {
        $sqlQuery = "UPDATE $tableName SET name = '" . $arrPostData['slider-name'] . "',data = '" . base64_encode(serialize($output)) . "',modified ='" . date('Y-m-d H:i:s') . "' WHERE id = '" . $arrPostData['id'] . "'";
      }
      else {
        $data = $newdata;
        $sqlQuery = $this->wpdb->prepare("INSERT INTO $tableName (id,name, data, created, author_id) VALUES (%d, %s, %s, %s, %d)", $arrPostData['id'], $arrPostData['slider-name'], base64_encode(serialize($output)) , Date("Y-m-d H:i:s") , get_current_user_id());
      }
      if (false !== $this->wpdb->query($sqlQuery)) {
        echo 'SUCCESS';
        die();
      }
      die();
    }
  }
  function fnSaveSliderCallback($arrPostData)
  {
    global $new_cloud_id;
    $tableName = $this->tableName;
    $sqlQuery = '';
    if (isset($arrPostData['action']) && $arrPostData['type'] == 'new') {
      $output = array();
      $output = json_decode(stripcslashes($arrPostData['alldata']) , true);
      $output = $output['slides'];
      $slider_count = $this->fnGetSliderData($arrPostData['id']);
      if ($slider_count) {
        $sqlQuery = "UPDATE $tableName SET type='save', name = '" . $arrPostData['slider-name'] . "', data = '" . base64_encode(serialize($output)) . "',modified ='" . date('Y-m-d H:i:s') . "' WHERE id = '" . $arrPostData['id'] . "'";
      }
      else {
        $sqlQuery = $this->wpdb->prepare("INSERT INTO $tableName (id,name, data, created, author_id) VALUES (%d, %s, %s, %s, %d)", $arrPostData['id'], $arrPostData['slider-name'], base64_encode(serialize($output)) , Date("Y-m-d H:i:s") , get_current_user_id());
      }
      if (false !== $this->wpdb->query($sqlQuery)) {
        echo 'SUCCESS';
        die();
      }
      die();
    }
  }
  function fnDuplicateSlider($id)
  {
    $slider = (array)$this->fnGetSliderData($id);
    $this->wpdb->query($this->wpdb->prepare("INSERT INTO $this->tableName (name, data, created, author_id, modified, type) VALUES (%s, %s, %s, %d,%s,%s)", stripcslashes($slider['name'] . " copy") , $slider['data'], Date("Y-m-d H:i:s") , get_current_user_id() , Date("Y-m-d H:i:s") , 'save'));
  }
  function fnDeleteSlider($id)
  {
    $this->wpdb->query("DELETE FROM $this->tableName WHERE id = '" . $id . "' and author_id='" . get_current_user_id() . "'");
  }
  function fnGetCloudSliderList($arrAllRequestData)
  {
    $action = isset($arrAllRequestData['action']) ? $arrAllRequestData['action'] : '';
    switch ($action) {
    case 'delete':
      $this->fnDeleteSlider($arrAllRequestData['id']);
      break;

    case 'duplicate':
      $this->fnDuplicateSlider($arrAllRequestData['id']);
      break;

    case 'import-export':
      if (isset($arrAllRequestData['hidden_action'])) {
        do_output_buffer();
      }
      break;

    case 'cs-permission':
      $capability = get_option('cs_capability', 'manage_options');
      if (empty($capability) || !current_user_can($capability)) {
      }
      else {
        $capability = ($arrAllRequestData['cs_role'] == 'custom') ? $arrAllRequestData['cs_capability'] : $arrAllRequestData['cs_role'];
        if (empty($capability) || !current_user_can($capability)) {
          $message = 'Error occured while update permission';
          // echo "<script>document.location='admin.php?page=cloud-slider-list&message=error'</script>";
        }
        else {
          update_option('cs_capability', $capability);
          $message = 'Permission changes has been updated';
          // echo "<script>document.location='admin.php?page=cloud-slider-list&message=success'</script>";
        }
      }
      break;

    case 'cs-googlefonts':
      $google_fonts = $arrAllRequestData['cs_googlefonts'];
      $str_google_fonts = '';
      $ind = 0;
      if(count($google_fonts)>0){
        foreach($google_fonts as $google_font) {
        $google_font = str_replace(" ", "", $google_font);
        $google_font = str_replace("<linkhref=\'http://fonts.googleapis.com/css?family=", "", $google_font);
        $google_font = str_replace("\'rel=\'stylesheet\'type=\'text/css\'>", "", $google_font);
        if ($google_font != '') {
          if ($ind == 0) {
            $str_google_fonts.= $google_font;
          }
          else {
            $str_google_fonts.= '|' . $google_font;
          }
        }
        $ind++;
      }
      }
      update_option('cs_googlefonts', $str_google_fonts);
      $message = 'Google font changes has been updated';
      break;

    case 'multiple':
      if (isset($arrAllRequestData['hiddenaction']) && $arrAllRequestData["hiddenaction"] == "duplicateall") {
        if (count($arrAllRequestData["sel"]) > 0) {
          for ($i = 0; $i < sizeof($arrAllRequestData["sel"]); $i++) {
            $this->fnDuplicateSlider($arrAllRequestData["sel"][$i]);
          }
        }
      }
      else if (isset($arrAllRequestData['hiddenaction']) && $arrAllRequestData["hiddenaction"] == "deleteall") {
        if (count($arrAllRequestData["sel"]) > 0) {
          for ($i = 0; $i < sizeof($arrAllRequestData["sel"]); $i++) {
            $this->fnDeleteSlider($arrAllRequestData["sel"][$i]);
          }
        }
      }
      break;

    case 'save_settings':
      if (isset($arrAllRequestData["save_settings"])) {
        do_action('cloud_advance_settings');
      }
      break;
    }
  }
  function fnSaveAdvanceCloudSettings($arrPostData)
  {
    $options = array(
      'cdn_jquery',
      'include_script_footer',
      'script_load',
      'concatenate_output',
      'include_js_to_body'
    );
    foreach($options as $item) {
      update_option('cs_' . $item, array_key_exists($item, $arrPostData));
    }
  }
  function fnUpdateCloudSlider()
  {
    if (!current_user_can('update_plugins')) wp_die(__('You do not have permissions to update plugins.', 'CloudSlider') );
    $title = 'Update Cloud Slider Plugin';
    require_once ABSPATH . 'wp-admin/admin-header.php';

    require_once 'cs_auto_update.php';

    $cs_upgrader = new CSAutoUpdate(new Plugin_Upgrader_Skin(compact('title', 'nonce', 'url', 'plugin')));
    $cs_upgrader->cs_update_operations();
    include ABSPATH . 'wp-admin/admin-footer.php';

    exit();
  }
  function fnDoOutputBuffer($arrRequestData)
  {
    ob_start();
    if (isset($arrRequestData["page"]) && $arrRequestData["page"] == "cloud-slider-list" && isset($arrRequestData["action"]) && $arrRequestData["action"] == "edit") {
      $slider_data = (array)$this->fnGetSliderData($arrRequestData['id']);
      if (!is_array($slider_data)) {
        wp_redirect("admin.php?page=cloud-slider-list");
        exit;
      }
    }
    include_once (CS_DIR . '/include/import_export_slider.php');

  }
  function fnGetSkinDropdown($selOption)
  {
    $html = '<select name="skin" class="element-cls input-medium slider-skin">';
    foreach($this->arrSkins as $key=>$skin) {
      $selected = $selOption == $key ? 'selected="selected"' : "";
      $html.= '<option ' . $selected . ' value="' . $key . '">' . ucwords(str_replace('_', ' ', $key)) . '</option>';
    }
    $html.= '</select>';
    return $html;
  }
  function fnGetBulletPositionDropdown($selOption)
  {
    $html = '<select name="bullet-pos" class="element-cls input-medium bullet-pos">';
    foreach($this->arrBulletPosition as $bullet) {
      $selected = $selOption == $bullet ? 'selected="selected"' : "";
      $html.= '<option ' . $selected . ' value="' . $bullet . '">' . ucwords(str_replace('_', ' ', $bullet)) . '</option>';
    }
    $html.= '</select>';
    return $html;
  }
  function fnGetTemplateCallback($arrPostData)
  {
    if ($arrPostData['type'] == 'slider') {
      $this->fnNewSliderTemplate($arrPostData['id']);
    }
    else if ($arrPostData['type'] == 'layer') {
      $this->fnNewLayerTemplate($arrPostData['layerId']);
    }
  }
  function fnNewSliderTemplate($id)
  {
?>
        <div id="tabs-<?php echo $id; ?>" slide-id="slide-<?php echo $id; ?>">
            <div class="preview-wrapper">
                <div class="preview-container">
                    <div class="preview" slide-id="slide-<?php echo $id; ?>" >               
                    </div>
                </div>
                <a href="#" class="table-btn-link enter-preview">Enter Preview</a>
            </div>
            <div class="slides-options">
                <div id="slide-options-<?php echo $id; ?>" class="hidden options" setting="slide-options" >
                    <div class="option-header">
                        <div class="option-title" data-draggable="true"><i class="fa fa-edit"></i>Slider Options</div>
                        <div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
                    </div>
                    <div class="option-container">
                        <table class="slide-table slide-property" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td class="sub-head" colspan="4">
                                        Slider Background/Thumbnail Image
                                        <a href="#" class="float-right duplicate-slide" slide-id="slide-<?php echo $id; ?>">Duplicate this slide</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <table  cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td nowrap="nowrap" class="text-right">Background image<br /> or <a href="#" class="enter_url" preview="1">enter URL</a></td>
                                                <td>
                                                    <div class="pos-rel">                                                            
                                                        <button type="button" class="click-set tooltip layer-add-img" preview="1" data-title="The slide image/background. Click on the image to open the WordPress Media Library to choose or upload an image.">Click To Set</button>
                                                        <input type="hidden" value="" name="background">
                                                    </div>
                                                </td>
                                                <td nowrap="nowrap" class="text-right">Thumbnail image<br /> or <a href="#" class="enter_url">enter URL</a></td>
                                                <td>
                                                    <div class="pos-rel">
                                                        <button type="button" class="click-set tooltip layer-add-img" data-title="The thumbnail image of this slide. Click on the image to open the WordPress Media Library to choose or upload an image. If you leave this field empty, the slide image will be used.">Click To Set</button>
                                                        <input type="hidden" value="" name="thumbnail">
                                                    </div>
                                                </td>
                                                <td nowrap="nowrap" class="text-right">Background Size</td>
                                                <td>
                                                    <div class="pos-rel">                                                            
                                                        <select class="element-cls tooltip backsize"  name="backsize" data-title="You can control here the size of background: 'cover' means the background will cover all the area and 'contain' will be depend on image size.">
                                                            <option  value="cover">Cover</option>
                                                            <option  value="contain">Contain</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>                                
                                <tr>
                                    <td colspan="4" class="sub-head">Slide Transitions</td>
                                </tr>
                                <tr>
                                    <td nowrap="nowrap" colspan="2" class="text-center">
                                        <input type="hidden" name="2d_transitions_id" class="2d_trans_ids" value="1,2" slide-id="slide-<?php echo $id; ?>">
                                        <input type="hidden" name="3d_transitions_id" class="3d_trans_ids" slide-id="slide-<?php echo $id; ?>">
                                        <a href="#" class="table-btn-link tooltip slide-transition" data-title="You can select your desired  by clicking on this button." slide-id="slide-<?php echo $id; ?>">Select Transitions</a>
                                    </td>
                                    <td class="sub-head2 text-right">Slide Delay &nbsp;<input type="number" min="0" name="slidedelay" value="5000" class="input-small tooltip keypressFilter" data-title="Here you can set the time interval between slide changes, this slide will stay visible for the time specified here. This value is in millisecs, so the value 1000 means 1 second. Please don't use 0 or very low values."> ms</td>
                                    <td class="sub-head2 text-right">Hidden &nbsp;
                                        <input type="checkbox" name="hidden"  class="checkbox misc-hidden tooltip" data-title="If you don't want to use this slide in your front-page, but you want to keep it, you can hide it with this switch."/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="sub-head">Link this slide</td>
                                </tr>
                                <tr>
                                    <td class="sub-head2 text-right" colspan="3">URL &nbsp;
                                        <input type="text" value="" name="layer_link" class="input-long tooltip" data-title="If you want to link the whole slide, enter the URL of your link here.">
                                    </td>
                                    <td class="sub-head2 text-right">
                                        Open &nbsp;
                                        <select class="element-cls tooltip" name="layer_link_target" data-title="You can control here the link behaviour: _self means the linked page will open in the current tab/window, _blank will create a new tab/window.">
                                            <option value="_self" selected="">On the same page</option>
                                            <option value="_blank">On new page</option>
                                            <option value="_parent">In parent frame</option>
                                            <option value="_top">In main frame</option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="kenburn-options-<?php echo $id; ?>" class="hidden options" setting="kenburn-options">
                    <div class="option-header">
                        <div class="option-title" data-draggable="true"><i class="fa fa-search-plus"></i>Ken Burns/ Pan Zoom Options</div>
                        <div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
                    </div>
                    <div class="option-container">
                        <table class="slide-table slide-property" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr class="is-kenburn">
                                    <td colspan="4" class="text-center">Ken Burns/ Pan Zoom Setting&nbsp;<input type="checkbox" name="kenburn" class="checkbox kenburn" /></td>
                                </tr>
                                <tr class="hidden kenburn-setting">
                                    <td class="text-right sub-head2">Scale From</td>
                                    <td><input type="number" name="scale-from" min="0.1" step="0.1" class="input-extra-small keypressFilter tooltip scale-from" data-title=" Start scale of background." value="1"></td>
                                    <td class="text-right sub-head2">Position From</td>
                                    <td class="sub-head2">
                                        <?php
    echo $this->fnGetPositionsDropdown(array(
      'name' => 'position-from',
      'class' => 'element-cls input-medium ken-position position-from tooltip',
      'title' => 'You can set kenburn background effect start from position.',
      'default' => ''
    )); ?>
                                        <span class="hidden">
                                            <input type="number" min="0.1" step="0.1" class="input-extra-small keypressFilter position-from-left scale-pos" name="position-from-left" placeholder="Left" value="0">&nbsp;%
                                            <input type="number" min="0.1" step="0.1" class="input-extra-small keypressFilter position-from-top scale-pos" name="position-from-top" placeholder="Top" value="0">&nbsp;%
                                        </span>
                                    </td>
                                </tr>
                                <tr class="hidden kenburn-setting">
                                    <td class="text-right sub-head2">Scale To</td>
                                    <td><input type="number" min="0.1" step="0.1" name="scale-to" class="input-extra-small keypressFilter scale-to tooltip" data-title="End scale of background." value="1"></td>
                                    <td class="text-right sub-head2">Position To</td>
                                    <td class="sub-head2">
                                        <?php
    echo $this->fnGetPositionsDropdown(array(
      'name' => 'position-to',
      'class' => 'element-cls input-medium ken-position position-to tooltip',
      'title' => 'You can set kenburn background effect end to position.',
      'default' => ''
    )); ?>
                                        <span class="hidden">
                                            <input type="number" min="0" class="input-extra-small keypressFilter position-to-left" name="position-to-left" placeholder="Left">&nbsp;%;
                                            <input type="number" min="0" class="input-extra-small keypressFilter position-to-top" name="position-to-top" placeholder="Top">&nbsp;%
                                        </span>
                                    </td>
                                </tr>
                                <tr class="hidden kenburn-setting">
                                    <td class="text-right sub-head2">Duration</td>
                                    <td class="sub-head2"><input type="number" min="0" class="input-extra-small tooltip keypressFilter" data-title="This options is for duration value of ken burn effect in miliseconds. If you set it to 4000, it means 4 seconds." name="kenburn-duration" value="5000">&nbsp;ms</td>
                                    <td class="text-right sub-head2">Easing</td>
                                    <td>
                                        <?php
    echo $this->fnGetEasingDropdown(array(
      'name' => 'kenburn-easing',
      'class' => 'element-cls input-medium tooltip',
      'title' => 'You can set easing of ken burn effect',
      'default' => 'easeInSine'
    )); ?>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="carousel-options-<?php echo $id; ?>" class="hidden options" setting="carousel-options">
                    <div class="option-header">
                        <div class="option-title" data-draggable="true"><i class="fa fa-copy"></i>Carousel Options</div>
                        <div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
                    </div>
                    <div class="option-container">
                        <table class="slide-table slide-property" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr class="is-carousel hidden">
                                    <td class="text-center" colspan="4">Carousel Layers Setting <input type="hidden" name="carousel_layer_ids" class="carousel_layer_ids" />&nbsp;<input type="checkbox" name="carousel" class="checkbox carousel" checked="checked"/></td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="subhead-td" colspan="4">Carousel Layer Settings</td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">Position: </td>
                                    <td class="sub-head2">
                                        <select name="carousel-pos" class="input-small element-cls carousel-pos tooltip" data-title="Top position of the carousel container. You can set top position of the container in pixel or percent of height of the slider. ">
                                            <option value="center">Center</option>
                                            <option value="top">Top</option>
                                            <option value="bottom">Bottom</option>
                                            <option value="px_or_per">(px) or (%)</option>
                                        </select>
                                        <span class="hidden">
                                            <input name="carousel-pos-px-per" class="input-small tooltip" data-title="You can set position in pixel or %. For example 20% or 100px">
                                        </span>
                                    </td>
                                    <td class="text-right sub-head2">Size: </td>
                                    <td>
                                        <input type="number" min="0" name="carousel-width" placeholder="Width" class="input-extra-small tooltip keypressFilter carousel-width" data-title="You can set carousel item width. Default is empty and it means carousel item width will be original width of carousel item. But if you set this option, width will be adjusted. You can set this option 300 or 300px"> px
                                        <input type="number" min="0" name="carousel-height" placeholder="Height" class="input-extra-small tooltip keypressFilter carousel-height" data-title="You can set carousel item height. Default is empty and it means carousel item height will be original height of carousel item. But if you set this option, height will be adjusted. You can set this option 300 or 300px"> px
                                    </td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">First Show: </td>
                                    <td>
                                        <input name="carousel-fisrt-show" type="number" min="1" step="1" value="1" class="input-extra-small keypressFilter carousel-fisrt-show tooltip" data-title="ID of the carousel item to firstly show.">
                                    </td>
                                    <td class="text-right sub-head2">Overlay: </td>
                                    <td><input name="carousel-overlay" value="20%" class="input-small tooltip carousel-overlay" data-title="Overlay degree. You can change overlay of each level of carousels with this options. You can also use negative value for this option to keep apart each carousel item from adjacent carousel item. You can set value in px or %."></td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">Perspective: </td>
                                    <td><input name="carousel-perspective" value="1000" class="input-small tooltip carousel-perspective" data-title="The perspective property defines how many pixels a 3D element is placed from the view. You can change feeling of rotation with this option."></td>
                                    <td class="text-right sub-head2">Easing</td>
                                    <td>
                                        <?php
    echo $this->fnGetEasingDropdown(array(
      'name' => 'carousel-easing',
      'class' => 'element-cls input-medium carousel-easing tooltip',
      'title' => 'Easing of carousel flowing.',
      'default' => 'easeOutSine'
    )); ?>
                                    </td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">Duration: </td>
                                    <td>
                                        <input type="number" min="100" name="carousel-duration" class="input-small keypressFilter tooltip carousel-duration" value="700" data-title="Carousel Flowing duration in miliseconds."> ms
                                    </td>
                                    <td class="text-right sub-head2">Delay: </td>
                                    <td>
                                        <input type="number" min="0" name="carousel-delay" class="input-small keypressFilter tooltip carousel-delay" value="6000" data-title="Carousel Flowing delay in miliseconds. It's effective in only case you set autoSlide option to true."> ms
                                    </td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">Direction: </td>
                                    <td>
                                        <select name="carousel-direction" class="element-cls input-medium tooltip carousel-direction" data-title="Carousel Flowing direction. It's effective in only case you set autoSlide option to true.">
                                            <option value="right">right</option>
                                            <option value="left">left</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td colspan="4" class="subhead-td">Carousel Arrow Settings</td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">Visibility</td>
                                    <td>
                                        <select name="carousel-arrow-visibility" class="element-cls input-small tooltip" data-title="Visibility of the carousel arrow navigation. &quot;hover&quot; means arrows will only be shown when mouse comes over carousel container. &quot;show&quot; means arrows will always be shown and &quot;hide&quot; means arrows will  not be shown.">
                                            <option value="hover">Hover</option>
                                            <option value="show">Show</option>
                                            <option value="hide">Hide</option>
                                        </select>
                                    </td>
                                    <td class="text-right sub-head2">Position</td>
                                    <td><input name="carousel-arrow-pos" class="input-small tooltip" value="auto" data-title="Position of the carousel navigation arrows. If you set this option to &quot;auto&quot;, arrows will be aligned on either side of level 1 of carousel item. You can set this option with distance from left, right edge of the carousel container in pixel or in percent of container."></td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2" valign="top">Left Arrow</td>
                                    <td>
                                        <input type="text" class="input-medium tooltip" name="carousel-left-arrow-img" value="<?php echo CS_ROOT_URL; ?>//library/img/left_carousel_arrow.png" data-title="Image src string of carousel left arrow. Default image path is cloudslider/img/left_carousel_arrow.png and that image will appear as left arrow on carousel by default. You can upload your own arrow image and then change this option so it will be shown as left arrow on carousel."><br /><br />
                                        <a href="#" class="upload-image btn-link">Upload Image</a>
                                    </td>
                                    <td class="text-right sub-head2" valign="top">Right Arrow</td>
                                    <td>
                                        <input type="text" class="input-medium tooltip" name="carousel-right-arrow-img" value="<?php echo CS_ROOT_URL; ?>//library/img/right_carousel_arrow.png" data-title="Image src string of carousel right arrow. Default image path is cloudslider/img/right_carousel_arrow.png and that image will appear as right arrow on carousel by default. You can upload your own arrow image and then change this option so it will be shown as right arrow on carousel."><br /><br />
                                        <a href="#" class="upload-image btn-link">Upload Image</a>
                                    </td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="text-right sub-head2">Responsive Level</td>
                                    <td colspan="3"><input type="number" min="0.1" name="carousel-responsive-level" class="input-small keypressFilter tooltip" value="2" data-title="Responsive level of the carousel arrows. Normal responsive level is 1. But it makes arrows too small in mobile browsers. If we set this option to bigger than 1, arrows won't be such small in mobile browsers. "></td>
                                </tr>
                                <tr class="carousel-setting">
                                    <td class="subhead-td" colspan="4">Carousel Level Settings &nbsp;<a href="#" class="add-carousel-level">Add Level</a></td>
                                </tr>
                                <tr class="carousel-setting carousel-level">
                                    <td colspan="4">
                                        <table width="100%" cellpadding="0" cellspacing="0" class="carousel-multi-level">
                                            <tbody>
                                                <tr>
                                                    <td class="text-center sub-head2">Opacity</td>
                                                    <td class="text-center sub-head2">Scale</td>
                                                    <td class="text-center sub-head2">RotationX</td>
                                                    <td class="text-center sub-head2">RotationY</td>
                                                    <td class="text-center sub-head2">RotationZ</td>
                                                    <td>&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-center"><input type="number" min="0" max="1" step="0.1" name="carousel-opacity" value="1" class="input-extra-small keypressFilter tooltip carousel-opacity" data-title="Opacity of the carousel item for level."></td>
                                                    <td class="text-center"><input type="number" min="0.1" step="0.1" name="carousel-scale" value="1" class="input-extra-small keypressFilter tooltip carousel-scale" data-title="Scale of the carousel item for level."></td>
                                                    <td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-x" value="0" class="input-extra-small keypressFilter tooltip carousel-rotation-x" data-title="Rotate Degree of the carousel item for level along X axis.">&nbsp;&deg;</td>
                                                    <td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-y" value="0" class="input-extra-small keypressFilter tooltip carousel-rotation-y" data-title="Rotate Degree of the carousel item for level along Y axis.">&nbsp;&deg;</td>
                                                    <td class="text-center sub-head2"><input type="number" step="1" name="carousel-rotation-z" value="0" class="input-extra-small keypressFilter tooltip carousel-rotation-z" data-title="Rotate Degree of the carousel item for level along Z axis.">&nbsp;&deg;</td>
                                                    <td class="text-center"><a href="#" class="delete-carousel-level">Delete</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="layer-options-<?php echo $id; ?>" class="hidden options" setting="layer-options">
                    <div class="option-header">
                        <div class="option-title" data-draggable="true"><i class="fa fa-file-o"></i>Layer Options</div>
                        <div class="closethis"><a href="#"><i class="fa fa-times-circle"></i></a></div>
                    </div>
                    <div class="option-container">
                        <table class="slide-table all-layer-table" slide-id="slide-<?php echo $id; ?>">                    
                        </table>
                        <a href="#" class="add-new-layer table-btn-link active" id="slide-<?php echo $id; ?>"><i class="fa fa-plus-circle"></i>Add New Layer</a>
                    </div>
                </div>
            </div>
        </div>    
        <?php
  }
  function fnNewLayerTemplate($layerId)
  {
?>
        <tr id='<?php echo $layerId; ?>' class='layer'>
            <td class='main_td'>
                <div class="layer-container sortable">
                    <span class="layer-main ui-state-default">
                        <span class="move"><a href="#"><i class="fa fa-navicon"></i></a></span>
                        <span class="layer-no">0</span>
                        <span><input type="text" class="layer-text" value="" name="subtitle" placeholder="Layer#1"></span>
                        <span class="float-right layer-tab-right">
                            <span class="layer-icons float-left">
                                <input type="hidden" name="layer_id" value="<?php echo $layerId; ?>">
                                <a href="#" data-title="Highlight layer in editor." class="tooltip highlight-layer" highlight="0"><i class="fa fa-lightbulb-o"></i></a>
                                <input type="hidden" name="highlight" value="0">
                                <a href="#" data-title="Prevent layer from dragging in editor." class="tooltip lock-layer" lock="0"><i class="fa fa-lock"></i></a>
                                <input type="hidden" name="lock" value="0">
                                <a href="#" data-title="Hide layer in editor." class="tooltip hide-layer" hide="0"><i class="fa fa-eye"></i></a>
                                <input type="hidden" name="hide" value="0">
                            </span>
                            <span class="layer-tabs">
                                <a href="#content" class="tooltip active" data-title="Content" applycls="main-layer-tab"><i class="fa fa-file-text-o"></i></a>
                                <a href="#styles" class="tooltip" data-title="Styles" applycls="main-layer-tab"><i class="fa fa-credit-card"></i></a>
                                <a href="#transition" class="tooltip" data-title="Transitions" applycls="main-layer-tab"><i class="fa fa-space-shuttle"></i></a>
                                <a href="#carousel" class="tooltip" data-title="Carousel" applycls="main-layer-tab"><i class="fa fa-users"></i></a>
                                <a href="#attributes" class="tooltip" data-title="Attributes" applycls="main-layer-tab"><i class="fa fa-file-code-o"></i></a>
                            </span>
                            <a href="#" class="duplicate-layer tooltip" data-title="Duplicate"><i class="fa fa-plus-circle"></i></a>
                            <a href="#" class="remove-layer tooltip" data-title="Remove" layerid="<?php echo $layerId; ?>"><i class="fa fa-times-circle"></i></a>
                        </span>
                    </span>
                    <div class="current-layer">
                        <div class="layer-data active main-layer-tab content">
                            <div class="content-nav text-center">
                                <div class="content-subnav">
                                    <a href="#layer-image" data-type="image" class="active" applycls="layer-cls"><i class="fa fa-image"></i> Image</a>
                                    <a href="#layer-daynamic-content" data-type="dynamic_text" applycls="layer-cls"><i class="fa fa-file"></i>Text/HTML</a>
                                    <a href="#layer-html-video-audio" data-type="html" applycls="layer-cls"><i class="fa fa-file-code-o"></i>HTML/Video/Audio</a>
                                    <!--<a href="#layer-content-text" data-type="span" applycls="layer-cls"><i class="fa fa-file-text"></i>Text</a>-->
                                    <input type="hidden" class="type" value="image" name="type">
                                </div>
                                <div class="layer-image-container layer-cls layer-image">
                                    <div class="pos-rel">
                                        <button type="button" class="click-set layer-add-img" preview="1" layer="1" layerid="<?php echo $layerId; ?>">Click To Set</button>
                                        <input type="hidden" class="image" value="" name="image">
                                    </div>
                                    <span class="layer-image-text">Click on image preview to open Wordpress Media Library or <a href="#" class="enter_url" preview="1" layer="1">insert from URL</a></span>
                                </div>
                                <div class="layer-daynamic-content hidden layer-cls">
                                    <div class="text-center layer-daynamic-html-textarea">
                                        <textarea cols="50" rows="5" class="daynamic-content-text tooltip" data-title="Type here the contents of your layer. You can use any HTML codes in this field to insert other contents then text. This field is also shortcode-aware, so you can insert content from other plugins as well as video embed codes." placeholder="Enter layer content here" name="dynamic_text">[Text here]</textarea>
                                    </div>
                                    <div class="layer-post-short-code">
                                        <a href="#">[post-id]</a>
                                        <a href="#">[post-slug]</a>
                                        <a href="#">[post-url]</a>
                                        <a href="#">[date-published]</a>
                                        <a href="#">[date-modified]</a>
                                        <a href="#">[image]</a>
                                        <a href="#">[image-url]</a>
                                        <a href="#">[title]</a>
                                        <a href="#">[content]</a>
                                        <a href="#">[excerpt]</a>
                                        <a href="#">[link]</a>
                                        <a href="#">[author]</a>
                                        <a href="#">[author-id]</a>
                                        <a href="#">[categories]</a>
                                        <a href="#">[tags]</a>
                                        <a href="#">[comments]</a>
                                        <p>Click on one or more post placeholders to insert them into your layer's content. Post placeholders are acting like shortcodes in WP, and they will be filled with the actual content from your posts.</p>
                                        <div class="limit-text">
                                            Limit text length (if any)
                                            <input type="number" class="input-extra-small keypressFilter textlength" name="text-limit" value="">
                                            &nbsp;&nbsp;<button type="button" class="click-set configure-post"><i class="fa fa-gear"></i>Configure post options</button>
                                            <input type="hidden" name="hidden_post_id" class="cs-post-id" value="1">
                                            <input type="hidden" name="hidden_post_type" class="cs-post-type" value="post">
                                            <input type="hidden" name="hidden_post_cat" class="cs-post-cat" value="">
                                            <input type="hidden" name="hidden_post_tag" class="cs-post-tag" value="">
                                            <input type="hidden" name="hidden_orderby" class="cs-orderby" value="date">
                                            <input type="hidden" name="hidden_order" class="cs-order" value="desc">
                                        </div>
                                    </div>
                                </div>
                                <div class="layer-html-video-audio hidden layer-cls">
                                    <div class="text-center layer-html-video-audio-textarea">

                                        <textarea cols="50" rows="5" class="video-audio-text tooltip" data-title="Type here the contents of your layer. You can use any HTML codes in this field to insert other contents then text. This field is also shortcode-aware, so you can insert content from other plugins as well as video embed codes." placeholder="Enter layer content here"  name="html"></textarea>

                                    </div>

                                    <div class="pos-rel">

                                        <button class="click-set layer-add-media" preview="1"><i class="fa fa-music"></i>Add Media</button>&nbsp; insert self hosted video or audio

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="layer-data hidden main-layer-tab styles">
                            <table class="style-layer-table layer-table" cellpadding="0" cellspacing="0">
                                <tbody class="ui-sortable">
                                    <tr>
                                        <td colspan="4" class="sub-head">Layout &amp; Positions</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Width</td>
                                        <td>
                                            <input name="pos_width" value="auto" type="text" data-default="auto" class="input-extra-small img-width tooltip" data-title="You can set the width of your layer. You can use pixels, percents, or the 'auto'. Examples: 100px, 50% or auto">
                                        </td>
                                        <td class="sub-head2 text-right">Height</td>
                                        <td>
                                            <input name="pos_height" value="auto" type="text" data-default="auto" class="input-extra-small img-height tooltip" data-title="You can set the height of your layer. You can use pixels, percents, or the 'auto'. Examples: 100px, 50% or auto">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Top</td>
                                        <td>
                                            <input name="pos_top" type="number" value="0" data-default="0" class="input-extra-small img-top keypressFilter tooltip" data-title="The layer position from the top of the slide. You can use pixels and percents. Examples: 100px or 50%. You can move your layers in the preview above with a drag n' drop, or set the exact values here.">
                                            <select name="pos_top_type" class="img-top-px element-cls">
                                                <option value="px">px</option>
                                                <option value="%">%</option>
                                            </select>
                                        </td>
                                        <td class="sub-head2 text-right">Left</td>
                                        <td>
                                            <input name="pos_left" type="number" value="0" data-default="0" class="input-extra-small img-left keypressFilter tooltip" data-title="The layer position from the left side of the slide. You can use pixels and percents. Examples: 100px or 50%. You can move your layers in the preview above with a drag n' drop, or set the exact values here.">
                                            <select name="pos_left_type" class="img-left-px element-cls">
                                                <option value="px">px</option>
                                                <option value="%">%</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="sub-head">Padding</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Top</td>
                                        <td class="sub-head2">
                                            <input name="padding_top" type="number" min="0" value="0" data-default="0" class="input-extra-small img-padding-top keypressFilter tooltip" data-title="Padding on the top of the layer. Example: 10px"> px
                                        </td>
                                        <td class="sub-head2 text-right">Right</td>
                                        <td class="sub-head2">
                                            <input name="padding_right" type="number" min="0" value="0" data-default="0" class="input-extra-small img-padding-right keypressFilter tooltip" data-title="Padding on the right side of the layer. Example: 10px"> px
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Bottom</td>
                                        <td class="sub-head2">
                                            <input name="padding_bottom" type="number" min="0" value="0" data-default="0" class="input-extra-small img-padding-bottom keypressFilter tooltip" data-title="Padding on the bottom of the layer. Example: 10px"> px
                                        </td>
                                        <td class="sub-head2 text-right">Left</td>
                                        <td class="sub-head2">
                                            <input type="number" min="0" name="padding_left" value="0" data-default="0" class="input-extra-small img-padding-left keypressFilter tooltip" data-title="Padding on the left side of the layer. Example: 10px"> px
                                        </td>
                                    </tr>                                   
                                    <tr>
                                        <td colspan="4" class="sub-head">Font</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Family</td>
                                        <td><input name="font_family" value="Arial, Helvetica, sans-serif" data-default="Arial, Helvetica, sans-serif" type="text" class="input-extra-small text-font-family tooltip" data-title="List of your chosen fonts separated with a comma. Please use apostrophes if your font names contains white spaces. Example: Helvetica, Arial, sans-serif"></td>
                                        <td class="sub-head2 text-right">Color</td>
                                        <td>
                                        <input name="font_color" value="#000000" data-default="#000000" type="text" class="input-extra-small text-color tooltip minicolors" data-title="The color of your text. You can use color names, hexadecimal, RGB or RGBA values. Example: #333333" />                        </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Size</td>
                                        <td class="sub-head2"><input name="font_size" value="15" data-default="15" type="number" min="1" class="input-extra-small text-font-size keypressFilter tooltip" data-title="The font size in pixels. Example: 16px.">&nbsp;px</td>
                                        <td class="sub-head2 text-right">Line-height</td>
                                        <td class="sub-head2"><input name="line_height" value="Normal" data-default="Normal" class="input-extra-small text-line-height  tooltip" data-title="The line height of your text. The default setting is 'normal'. Example: 22px">&nbsp;px</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="sub-head">Misc</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-right">Background</td>
                                        <td>

                                            <input name="font_background" type="text" data-default="" class="input-extra-small bg-color tooltip minicolors" data-title="The background color of your layer. You can use color names, hexadecimal, RGB or RGBA values as well as the 'transparent' keyword. Example: #FFFFFF"/>                  

                                        </td>
                                        <td class="sub-head2 text-right">Rounded corners</td>
                                        <td class="sub-head2"><input name="radius" value="0" data-default="0" type="number" min="0" class="input-extra-small rounded-corner keypressFilter tooltip" data-title="If you want rounded corners, you can set here its radius. Example: 5px">&nbsp;px</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="sub-head">Custom style settings</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4" class="text-center"><textarea name="custom_style" type="text" class="custom-style tooltip" data-title="If you want to set style settings other then above, you can use here any CSS codes. Please make sure to write valid markup." cols="65" rows="4"></textarea></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="layer-data hidden main-layer-tab transition">
                            <table class="layer-table" cellpadding="0" cellspacing="0">
                                <tbody class="ui-sortable">
                                    <tr>
                                        <td colspan="6" class="transition_in sub-head">Transition in</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">OffsetX</td>
                                        <td><input type="number" name="ti-offsetx" value="0" class="input-extra-small keypressFilter tooltip" data-title="The horizontal offset to align the starting position of layers. Positive and negative numbers are allowed or enter left / right to position the layer out of the frame."> px</td>
                                        <td class="sub-head2">OffsetY</td>
                                        <td><input type="number" value="0" name="ti-offsety" class="input-extra-small keypressFilter tooltip" data-title="The vertical offset to align the starting position of layers. Positive and negative numbers are allowed or enter top / bottom to position the layer out of the frame."> px</td>
                                        <td class="sub-head2">Duration</td>
                                        <td class="sub-head2"><input type="number" min="0" name="ti-duration" value="800" class="input-extra-small keypressFilter tooltip" data-title="The transition duration in milliseconds when the layer entering into the slide. A second is equal to 1000 milliseconds."> ms</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">Delay</td>
                                        <td class="sub-head2"><input type="number" min="0" value="0" name="ti-delay" class="input-extra-small keypressFilter tooltip" data-title="Delays the transition with the given amount of milliseconds before the layer entering into the slide. A second is equal to 1000 milliseconds."> ms</td>
                                        <td class="sub-head2">Fade</td>
                                        <td>
                                            <input type="checkbox" name="ti-fade" class="checkbox transition-fade-in" checked="checked"/>
                                        </td>
                                        <td class="sub-head2">Easing</td>
                                        <td>
                                            <?php
    echo $this->fnGetEasingDropdown(array(
      'name' => 'ti-easing',
      'class' => 'element-cls tooltip',
      'title' => 'The timing function of the animation to manipualte the layer\'s movement. Click on the link next to this field to open easings.net for examples and more information',
      'default' => 'easeInOutExpo'
    )); ?>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">Rotate</td>
                                        <td class="sub-head2"><input type="number" value="0" name="ti-rotate" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer clockwise from the given angle to zero degree. Negative values are allowed for anticlockwise rotation."> &deg;</td>
                                        <td class="sub-head2">RotateX</td>
                                        <td class="sub-head2"><input type="number" value="0" name="ti-rotatex" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the X (horizontal) axis from the given angle to zero degree. Negative values are allowed for reverse direction."> &deg;</td>
                                        <td class="sub-head2">RotateY</td>
                                        <td class="sub-head2"><input type="number" value="0" name="ti-rotatey" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the Y (vertical) axis from the given angle to zero degree. Negative values are allowed for reverse direction."> &deg;</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">SkewX</td>
                                        <td class="sub-head2"><input type="number" value="0" name="ti-skewx" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the X (horizontal) axis from the given angle to 0 degree. Negative values are allowed for reverse direction."> &deg;</td>
                                        <td class="sub-head2">SkewY</td>
                                        <td class="sub-head2"><input type="number" value="0" name="ti-skewy" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the Y (vertical) axis from the given angle to 0 degree. Negative values are allowed for reverse direction."> &deg;</td>
                                        <td class="sub-head2">TransformOrigin</td>
                                        <td><input type="text" name="ti-origin" value="50% 50% 0" class="input-small tooltip" data-title="This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space."></td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">ScaleX</td>
                                        <td><input type="number" min="0" step="0.1" value="1" class="input-extra-small keypressFilter tooltip" name="ti-scalex" data-title="Scales the layer's width from the given value to its original size."></td>
                                        <td class="sub-head2">ScaleY</td>
                                        <td><input type="number" min="0" step="0.1" value="1" class="input-extra-small keypressFilter tooltip" name="ti-scaley" data-title="Scales the layer's height from the given value to its original size."></td>
                                        <td class="sub-head2">Perspective</td>
                                        <td class="sub-head2"><input type="number" min="0" value="400" class="input-small keypressFilter tooltip" name="ti-perspective" data-title="The perspective property defines how many pixels a 3D element is placed from the view. You can change feeling of rotation with this option.">&nbsp;px</td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="transition_out sub-head">Transition out</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">OffsetX</td>
                                        <td><input type="number" name="to-offsetx" value="0" class="input-extra-small keypressFilter tooltip" data-title="The horizontal offset to align the ending position of layers. Positive and negative numbers are allowed or write left / right to position the layer out of the frame."> px</td>
                                        <td class="sub-head2">OffsetY</td>
                                        <td><input type="number" value="0" name="to-offsety" class="input-extra-small keypressFilter tooltip" data-title="The vertical offset to align the starting position of layers. Positive and negative numbers are allowed or write top / bottom to position the layer out of the frame."> px</td>
                                        <td class="sub-head2">Duration</td>
                                        <td class="sub-head2"><input type="number" min="0" name="to-duration" value="800" class="input-extra-small keypressFilter tooltip" data-title="The transition duration in milliseconds when the layer leaving the slide. A second is equal to 1000 milliseconds."> ms</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">Delay</td>
                                        <td class="sub-head2"><input type="number" min="0" value="0" name="to-delay" class="input-extra-small keypressFilter tooltip" data-title="The layer will be visible for the time you specify here, then it will slide out. You can use this setting for layers to leave the slide before the slide itself animates out, or for example before other layers will slide in. This value in millisecs, so the value 1000 means 1 second."> ms</td>
                                        <td class="sub-head2">Fade</td>
                                        <td>
                                            <input type="checkbox" name="to-fade"  class="checkbox transition-fade-in" checked="checked"/>
                                        </td>
                                        <td class="sub-head2">Easing</td>
                                        <td>
                                            <?php
    echo $this->fnGetEasingDropdown(array(
      'name' => 'to-easing',
      'class' => 'element-cls tooltip',
      'title' => 'The timing function of the animation to manipualte the layer\'s movement. Click on the link next to this field to open easings.net for examples and more information',
      'default' => 'easeInOutExpo'
    )); ?>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">Rotate</td>
                                        <td class="sub-head2"><input type="number" value="0" name="to-rotate" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer clockwise by the given angle from its original position. Negative values are allowed for anticlockwise rotation."> &deg;</td>
                                        <td class="sub-head2">RotateX</td>
                                        <td class="sub-head2"><input type="number" value="0" name="to-rotatex" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the X (horizontal) axis by the given angle from its original state. Negative values are allowed for reverse direction."> &deg;</td>
                                        <td class="sub-head2">RotateY</td>
                                        <td class="sub-head2"><input type="number" value="0" name="to-rotatey" class="input-extra-small keypressFilter tooltip" data-title="Rotates the layer along the Y (vertical) axis by the given angle from its orignal state. Negative values are allowed for reverse direction."> &deg;</td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">SkewX</td>
                                        <td class="sub-head2"><input type="number" value="0" name="to-skewx" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the X (horizontal) axis by the given angle from its orignal state. Negative values are allowed for reverse direction."> &deg;</td>
                                        <td class="sub-head2">SkewY</td>
                                        <td class="sub-head2"><input type="number" value="0" name="to-skewy" class="input-extra-small keypressFilter tooltip" data-title="Skews the layer along the Y (vertical) axis by the given angle from its original state. Negative values are allowed for reverse direction."> &deg;</td>
                                        <td class="sub-head2">TransformOrigin</td>
                                        <td><input type="text" name="to-origin" value="50% 50% 0" class="input-small tooltip" data-title="This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space."></td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2">ScaleX</td>
                                        <td><input type="number" step="0.1" min="0" value="1" class="input-extra-small keypressFilter tooltip" name="to-scalex" data-title="Scales the layer's width by the given value from its original size."></td>
                                        <td class="sub-head2">ScaleY</td>
                                        <td><input type="number" step="0.1" min="0" value="1" class="input-extra-small keypressFilter tooltip" name="to-scaley" data-title="Scales the layer's height by the given value from its original size."></td>
                                        <td class="sub-head2">Perspective</td>
                                        <td class="sub-head2"><input type="number" min="0" value="400" class="input-small keypressFilter tooltip" name="to-perspective" data-title="The perspective property defines how many pixels a 3D element is placed from the view. You can change feeling of rotation with this option.">&nbsp;px</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="layer-data hidden main-layer-tab carousel" >
                            <table class="layer-table" cellpadding="0" cellspacing="0">
                                <tbody class="ui-sortable">
                                    <tr class="other-info">
                                        <td style="width: 18%;" class="sub-head2 carousel-layer">Carousel Layer</td>
                                        <td class="carousel-layer">
                                            <input type="checkbox" name="carousel-layer" class="checkbox carousel-layer" data-title="If you want to use this layer as carousel layer, you can set it with this switch."/>
                                        </td>
                                    </tr>
                                    <tr class="common-layer hidden">
                                        <td style="width: 18%;" valign="top"><a class="table-btn-link add-attach-layer" href="#">Add</a></td>
                                        <td>
                                            <table cellpadding="0" cellspacing="0" class="carousel-attr">
                                                <tbody class="ui-sortable">
                                                    <tr>
                                                        <td valign="top" class="sub-head2">Attach Layer</td>
                                                        <td valign="top">
                                                            <select name="attach_layer" class="element-cls input-small attach-layer">
                                                            </select>
                                                        </td>
                                                        <td><textarea name="attach_layer_value" class="input-long attr-value"></textarea></td>
                                                        <td valign="top"><a href="#" class="remove-carousel-attr">Delete</a></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="layer-data hidden main-layer-tab attributes">
                            <table class="layer-table" cellpadding="0" cellspacing="0">
                                <tbody class="ui-sortable">
                                    <tr>
                                        <td colspan="5" class="sub-head">Link: </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-center" colspan="4">URL</td>
                                        <td class="sub-head2 text-center" colspan="1">Target</td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" colspan="4">
                                            <input type="text" name="url" style="width:98%" class="input-long layer-link tooltip" data-title="If you want to link your layer, type here the URL. You can use a hash mark followed by a number to link this layer to another slide. Example: #3 - this will switch to the third slide.">
                                        </td>
                                        <td class="text-center" colspan="1">
                                            <select class="element-cls layer-link-open tooltip" name="target" data-title="You can control here the link behaviour: _self means the linked page will open in the current tab/window, _blank will open it in a new tab/window.">
                                                <option value="_self">Same page</option>
                                                <option value="_blank">New page</option>
                                                <option value="_parent">Parent frame</option>
                                                <option value="_top">Main frame</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="sub-head">Attributes: </td>
                                    </tr>
                                    <tr>
                                        <td class="sub-head2 text-center">ID</td>
                                        <td class="sub-head2 text-center">Classes</td>
                                        <td class="sub-head2 text-center">Title</td>
                                        <td class="sub-head2 text-center">Alt</td>
                                        <td class="sub-head2 text-center">Rel</td>
                                    </tr>
                                    <tr>
                                        <td class="text-center"><input name="id" type="text" class="input-small layer-id tooltip" data-title="You can apply an ID attribute on the HTML element of this layer to work with it in your custom CSS or Javascript code."></td>
                                        <td class="text-center"><input name="classes" type="text" class="input-small layer-class tooltip" data-title="You can apply classes on the HTML element of this layer to work with it in your custom CSS or Javascript code."></td>
                                        <td class="text-center"><input name="title" type="text" class="input-small layer-title tooltip" data-title="You can add a title to this layer which will display as a tooltip if someone holds his mouse cursor over the layer." value=""></td>
                                        <td class="text-center"><input name="alt" type="text" class="input-small layer-alt tooltip" data-title="You can add an alternative text to your layer which is indexed by search engine robots and it helps people with certain disabilities." value=""></td>
                                        <td class="text-center"><input name="rel" type="text" class="input-small layer-rel tooltip" data-title="Some plugin may use the rel attribute of a linked content, here you can specify it to make interaction with these plugins." value=""></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </td>  
        </tr> 
        <?php
  }
  function rgb2hex($color)
  {
    if (strpos($color, 'rgb') === false && strpos($color, '#') !== false) {
      return array(
        $color,
        1
      );
    }
    else if (strpos($color, 'rgb') !== false) {
      $color = explode(',', $color);
      $r = intval(str_replace(array('rgb','a','(') , array('','','') , $color[0]));
      $g = intval($color[1]);
      $b = intval(str_replace(array('(',')') , array('','') , $color[2]));
      $a = 1;
      if (isset($color[3])) {
        $a = floatval(str_replace(array('(',')') , array('','') , $color[3]));
      }
      if (is_array($r) && sizeof($r) == 3) list($r, $g, $b) = $r;
      $r = intval($r);
      $g = intval($g);
      $b = intval($b);
      $r = dechex($r < 0 ? 0 : ($r > 255 ? 255 : $r));
      $g = dechex($g < 0 ? 0 : ($g > 255 ? 255 : $g));
      $b = dechex($b < 0 ? 0 : ($b > 255 ? 255 : $b));
      $color = (strlen($r) < 2 ? '0' : '') . $r;
      $color.= (strlen($g) < 2 ? '0' : '') . $g;
      $color.= (strlen($b) < 2 ? '0' : '') . $b;
      return array('#' . $color,$a);
    }
    else {
      return array('',1);
    }
  }
  function fnExportSliderData($slider_layers)
  {
    for ($j = 0; $j < sizeof($slider_layers['layers']); $j++) {
      $main_slide = $slider_layers['layers'][$j];
      if ($main_slide['properties']['background'] != "") {
        $main_slide['properties']['background'];
        $img = explode("/", $main_slide['properties']['background']);
        copy($main_slide['properties']['background'], CS_DIR . 'temp/' . $img[count($img) - 1]);
        $main_slide['properties']['background'] = "/" . $img[count($img) - 1];
      }
      if ($main_slide['properties']['thumbnail'] != "") {
        $timg = explode("/", $main_slide['properties']['thumbnail']);
        copy($main_slide['properties']['thumbnail'], CS_DIR . 'temp/' . $timg[count($timg) - 1]);
        $main_slide['properties']['thumbnail'] = "/" . $timg[count($timg) - 1];
      }
      if ($main_slide['properties']['carousel-left-arrow-img'] != "") {
        $climg = explode("/", $main_slide['properties']['carousel-left-arrow-img']);
        if ($this->fnIsDefaultImage($main_slide['properties']['carousel-left-arrow-img'])) {
          $main_slide['properties']['carousel-left-arrow-img'] = "";
        }
        else {
          copy($main_slide['properties']['carousel-left-arrow-img'], CS_DIR . 'temp/' . $climg[count($climg) - 1]);
          $main_slide['properties']['carousel-left-arrow-img'] = "/" . $climg[count($climg) - 1];
        }
      }
      if ($main_slide['properties']['carousel-right-arrow-img'] != "") {
        $crimg = explode("/", $main_slide['properties']['carousel-right-arrow-img']);
        if ($this->fnIsDefaultImage($main_slide['properties']['carousel-right-arrow-img'])) {
          $main_slide['properties']['carousel-right-arrow-img'] = "";
        }
        else {
          copy($main_slide['properties']['carousel-right-arrow-img'], CS_DIR . 'temp/' . $crimg[count($crimg) - 1]);
          $main_slide['properties']['carousel-right-arrow-img'] = "/" . $crimg[count($crimg) - 1];
        }
      }
      for ($k = 0; $k < sizeof($main_slide['sub_layer']); $k++) {
        $layer = $main_slide['sub_layer'][$k];
        if ($layer['properties']['image'] != "") {
          $layerimg = explode("/", $layer['properties']['image']);
          copy($layer['properties']['image'], CS_DIR . 'temp/' . $layerimg[count($layerimg) - 1]);
          $layer['properties']['image'] = "/" . $layerimg[count($layerimg) - 1];
        }
        $main_slide['sub_layer'][$k] = $layer;
      }
      $slider_layers['layers'][$j] = $main_slide;
    }
    if ($slider_layers['settings']['loading-img']) {
      $cslimg = explode("/", $slider_layers['settings']['loading-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['loading-img'])) {
        $slider_layers['settings']['loading-img'] = "";
      }
      else {
        copy($slider_layers['settings']['loading-img'], CS_DIR . 'temp/' . $cslimg[count($cslimg) - 1]);
        $slider_layers['settings']['loading-img'] = "/" . $cslimg[count($cslimg) - 1];
      }
    }
    if (trim($slider_layers['settings']['img-loader'])) {
      $cslimg = explode("/", $slider_layers['settings']['img-loader']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['img-loader'])) {
        $slider_layers['settings']['img-loader'] = "";
      }
      else {
        copy($slider_layers['settings']['img-loader'], CS_DIR . 'temp/' . $cslimg[count($cslimg) - 1]);
        $slider_layers['settings']['img-loader'] = "/" . $cslimg[count($cslimg) - 1];
      }
    }
    if ($slider_layers['settings']['left-arrow-img']) {
      $limg = explode("/", $slider_layers['settings']['left-arrow-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['left-arrow-img'])) {
        $slider_layers['settings']['left-arrow-img'] = "";
      }
      else {
        copy($slider_layers['settings']['left-arrow-img'], CS_DIR . 'temp/' . $limg[count($limg) - 1]);
        $slider_layers['settings']['left-arrow-img'] = "/" . $limg[count($limg) - 1];
      }
    }
    if ($slider_layers['settings']['right-arrow-img']) {
      $rimg = explode("/", $slider_layers['settings']['right-arrow-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['right-arrow-img'])) {
        $slider_layers['settings']['right-arrow-img'] = "";
      }
      else {
        copy($slider_layers['settings']['right-arrow-img'], CS_DIR . 'temp/' . $rimg[count($rimg) - 1]);
        $slider_layers['settings']['right-arrow-img'] = "/" . $rimg[count($rimg) - 1];
      }
    }
    if ($slider_layers['settings']['left-hover-arrow-img']) {
      $lhimg = explode("/", $slider_layers['settings']['left-hover-arrow-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['left-hover-arrow-img'])) {
        $slider_layers['settings']['left-hover-arrow-img'] = "";
      }
      else {
        copy($slider_layers['settings']['left-hover-arrow-img'], CS_DIR . 'temp/' . $lhimg[count($lhimg) - 1]);
        $slider_layers['settings']['left-hover-arrow-img'] = "/" . $lhimg[count($lhimg) - 1];
      }
    }
    if ($slider_layers['settings']['right-hover-arrow-img']) {
      $rhimg = explode("/", $slider_layers['settings']['right-hover-arrow-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['right-hover-arrow-img'])) {
        $slider_layers['settings']['right-hover-arrow-img'] = "";
      }
      else {
        copy($slider_layers['settings']['right-hover-arrow-img'], CS_DIR . 'temp/' . $rhimg[count($rhimg) - 1]);
        $slider_layers['settings']['right-hover-arrow-img'] = "/" . $rhimg[count($rhimg) - 1];
      }
    }
    if ($slider_layers['settings']['bullet-img']) {
      $bimg = explode("/", $slider_layers['settings']['bullet-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['bullet-img'])) {
        $slider_layers['settings']['bullet-img'] = "";
      }
      else {
        copy($slider_layers['settings']['bullet-img'], CS_DIR . 'temp/' . $bimg[count($bimg) - 1]);
        $slider_layers['settings']['bullet-img'] = "/" . $bimg[count($bimg) - 1];
      }
    }
    if ($slider_layers['settings']['active-bullet-img']) {
      $baimg = explode("/", $slider_layers['settings']['active-bullet-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['active-bullet-img'])) {
        $slider_layers['settings']['active-bullet-img'] = "";
      }
      else {
        copy($slider_layers['settings']['active-bullet-img'], CS_DIR . 'temp/' . $baimg[count($baimg) - 1]);
        $slider_layers['settings']['active-bullet-img'] = "/" . $baimg[count($baimg) - 1];
      }
    }
    if ($slider_layers['settings']['bullet-left-container-img']) {
      $blimg = explode("/", $slider_layers['settings']['bullet-left-container-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['bullet-left-container-img'])) {
        $slider_layers['settings']['bullet-left-container-img'] = "";
      }
      else {
        copy($slider_layers['settings']['bullet-left-container-img'], CS_DIR . 'temp/' . $blimg[count($blimg) - 1]);
        $slider_layers['settings']['bullet-left-container-img'] = "/" . $blimg[count($blimg) - 1];
      }
    }
    if ($slider_layers['settings']['bullet-right-container-img']) {
      $brimg = explode("/", $slider_layers['settings']['bullet-right-container-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['bullet-right-container-img'])) {
        $slider_layers['settings']['bullet-right-container-img'] = "";
      }
      else {
        copy($slider_layers['settings']['bullet-right-container-img'], CS_DIR . 'temp/' . $brimg[count($brimg) - 1]);
        $slider_layers['settings']['bullet-right-container-img'] = "/" . $brimg[count($brimg) - 1];
      }
    }
    if ($slider_layers['settings']['no-thumb-img']) {
      $noimg = explode("/", $slider_layers['settings']['no-thumb-img']);
      if ($this->fnIsDefaultImage($slider_layers['settings']['no-thumb-img'])) {
        $slider_layers['settings']['no-thumb-img'] = "";
      }
      else {
        copy($slider_layers['settings']['no-thumb-img'], CS_DIR . 'temp/' . $noimg[count($noimg) - 1]);
        $slider_layers['settings']['no-thumb-img'] = "/" . $noimg[count($noimg) - 1];
      }
    }
    return $slider_layers;
  }
  function fnIsDefaultImage($url)
  {
    $libraryPaths = array('/library/skins/','/library/img/','library');
    $flag = false;
    foreach($libraryPaths as $path) {
      if (strpos($url, $path) !== false) {
        $flag = true;
        break;
      }
    }
    return $flag;
  }
}
?>