<?php
/**
 * Building form for configuring Fotorama Element
 *
 * The output will be valid arrays for use with
 * VTCore_Wordpress_Element_WpFotorama object
 *
 *
 * @author jason.xie@victheme.com
 * @method WpFotorama($context)
 * @see VTCore_Html_Form interface
 */
class VTCore_Wordpress_Form_WpFotorama
extends VTCore_Bootstrap_Form_Base
implements VTCore_Form_Interface {

  protected $context = array(

    // Wrapper element
    'type' => 'div',
    'attributes' => array(
      'class' => array(
        'form-multi-group',
        'wp-fotorama-form'
      ),
    ),

    // Shortcut method
    // @see VTCore_Bootstrap_Form_Base::assignContext()
    'text' => false,
    'description' => false,

    'name' => false,
    'id' => false,
    'class' => array('form-control'),

    // Bootstrap Rules
    'label' => true,

    // Array of values, User should
    // populate this when injecting
    // values to the form.
    'fotorama' => array(

      // Dimensions
      'width' => '',
      'height' => '',
      'ratio' => '',
      'minwidth' => '',
      'maxwidth' => '',
      'minheight' => '',
      'maxheight' => '',
      'captions' => false,
      'margin' => '',
      'glimpse' => '',

      // Animations
      'loop' => true,
      'shuffle' => true,
      'startindex' => '',
      'autoplay' => '',
      'stopautoplayontouch' => true,
      'shadows' => true,
      'transition' => 'slide', // slide | crossfade | disolve
      'clicktransition' => 'crossfade', // slide | crossfade | disolve
      'transitionduration' => '',

      // Key operations
      'arrows' => 'true',
      'keyboard' => true,
      'click' => true,
      'swipe' => true,
      'trackpad' => true,


      // Navigations
      'navposition' => 'bottom', // bottom | top
      'direction' => 'rtl', // rtl || ltr
      'nav' => 'thumbs', // false | thumbs | dot
      'navwidth' => '',

      // Full screens
      'allowfullscreen' => 'false', // false | true | native

      // Thumbnails
      'thumbwidth' => '80',
      'thumbheight' => '80',
      'thumbmargin' => '',
      'thumbborderwidth' => '',

      // Image fitting
      'fit' => 'contain', // contain | cover | scaledown | none
      'thumbfit' => 'cover', // contain | cover | scaledown | none
    ),
  );


  private $accordion;
  private $object;


  /**
   * Method for generating fotorama form element name attributes
   */
  private function convertElementName($key) {
    return $this->getContext('name') . '[fotorama][' . $key . ']';
  }



  /**
   * Overriding parent method
   * @see VTCore_Html_Base::buildElement()
   */
  public function buildElement() {

    parent::buildElement();

    if ($this->getContext('label_elements')) {
      $this->Label($this->getContext('label_elements'));
    }

    if ($this->getContext('description_elements')) {
      $this->addChildren(new VTCore_Bootstrap_Form_BsDescription(($this->getContext('description_elements'))));
    }

    $this->accordion = $this->BsAccordion(array(
        'active' => 'dimension',
      ))
      ->lastChild();

    $this->object = new VTCore_Bootstrap_Form_Base();

    // Dimension Panel
    $this->object
      ->BsRow()
      ->lastChild()
      ->BsText(array(
        'text' => __('Min Width', VTCORE_LANGUAGE),
        'description' => __('Stage container minimum width in pixels or percents.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('minwidth'),
        'value' => $this->getContext('fotorama.minwidth'),
        'validators' => array(
          'csssize' => __('Invalid size.', VTCORE_LANGUAGE),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '4',
            'small' => '4',
            'large' => '4',
          ),
        ),
      ))
      ->BsText(array(
        'text' => __('Width', VTCORE_LANGUAGE),
        'description' => __('Stage container width in pixels or percents.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('width'),
        'value' => $this->getContext('fotorama.width'),
        'validators' => array(
          'csssize' => __('Invalid size.', VTCORE_LANGUAGE),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '4',
            'small' => '4',
            'large' => '4',
          ),
        ),
      ))
      ->BsText(array(
        'text' => __('Max Width', VTCORE_LANGUAGE),
        'description' => __('Stage container maximum width in pixels or percents.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('maxwidth'),
        'value' => $this->getContext('fotorama.maxwidth'),
        'validators' => array(
          'csssize' => __('Invalid size.', VTCORE_LANGUAGE),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '4',
            'small' => '4',
            'large' => '4',
          ),
        ),
      ))
      ->getParent()
      ->BsRow()
      ->lastChild()
      ->BsText(array(
        'text' => __('Min Height', VTCORE_LANGUAGE),
        'description' => __('Stage container minimum height in pixels or percents.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('minheight'),
        'value' => $this->getContext('fotorama.minheight'),
        'validators' => array(
          'csssize' => __('Invalid size.', VTCORE_LANGUAGE),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '4',
            'small' => '4',
            'large' => '4',
          ),
        ),
      ))
      ->BsText(array(
        'text' => __('Height', VTCORE_LANGUAGE),
        'description' => __('Stage container height in pixels or percents.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('height'),
        'value' => $this->getContext('fotorama.height'),
        'validators' => array(
          'csssize' => __('Invalid size.', VTCORE_LANGUAGE),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '4',
            'small' => '4',
            'large' => '4',
          ),
        ),
      ))
      ->BsText(array(
        'text' => __('Max Height', VTCORE_LANGUAGE),
        'description' => __('Stage container maximum height in pixels or percents.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('maxheight'),
        'value' => $this->getContext('fotorama.maxheight'),
        'validators' => array(
          'csssize' => __('Invalid size.', VTCORE_LANGUAGE),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '4',
            'small' => '4',
            'large' => '4',
          ),
        ),
      ));

    $this->accordion->addPanel('dimension', array(
      'title' => __('Dimension', VTCORE_LANGUAGE),
      'content' => $this->object->getChildrens(),
    ));


    // Media Panel
    $this->object
    ->resetChildren()
    ->BsRow()
    ->lastChild()
    ->BsCheckbox(array(
      'text' => __('Captions', VTCORE_LANGUAGE),
      'description' => __('Captions visibility.', VTCORE_LANGUAGE),
      'name' => $this->convertElementName('captions'),
      'checked' => (boolean) $this->getContext('fotorama.captions'),
      'switch' => true,
      'grids' => array(
        'columns' => array(
          'mobile' => '12',
          'tablet' => '6',
          'small' => '6',
          'large' => '6',
        ),
      ),
    ))
    ->BsCheckbox(array(
      'text' => __('Shadows', VTCORE_LANGUAGE),
      'description' => __('Enables shadows.', VTCORE_LANGUAGE),
      'name' => $this->convertElementName('shadows'),
      'checked' => (boolean) $this->getContext('fotorama.shadows'),
      'switch' => true,
      'grids' => array(
        'columns' => array(
          'mobile' => '12',
          'tablet' => '6',
          'small' => '6',
          'large' => '6',
        ),
      ),
    ))
    ->getParent()
    ->BsSelect(array(
      'text' => __('Allow Full Screen', VTCORE_LANGUAGE),
      'description' => __('Allows fullscreen', VTCORE_LANGUAGE),
      'options' => array(
        'false' => __('No Full Screen', VTCORE_LANGUAGE),
        'true' => __('Allow Full Screen', VTCORE_LANGUAGE),
        'native' => __('Native', VTCORE_LANGUAGE),

      ),
      'name' => $this->convertElementName('allowfullscreen'),
      'value' => $this->getContext('fotorama.allowfullscreen'),
    ))
    ->BsSelect(array(
      'text' => __('Fit', VTCORE_LANGUAGE),
      'description' => __('How to fit an image into a fotorama', VTCORE_LANGUAGE),
      'options' => array(
        'contain' => __('Contain', VTCORE_LANGUAGE),
        'cover' => __('Cover', VTCORE_LANGUAGE),
        'scaledown' => __('Scale Down', VTCORE_LANGUAGE),
        'none' => __('None', VTCORE_LANGUAGE),
      ),
      'name' => $this->convertElementName('fit'),
      'value' => $this->getContext('fotorama.fit'),
    ))
    ->BsText(array(
      'text' => __('Ratio', VTCORE_LANGUAGE),
      'description' => __('Width divided by height. Recommended if you’re using percentage width.', VTCORE_LANGUAGE),
      'name' => $this->convertElementName('ratio'),
      'value' => $this->getContext('fotorama.ratio'),
    ))
    ->BsText(array(
      'text' => __('Margin', VTCORE_LANGUAGE),
      'description' => __('Horizontal margins for frames in pixels.', VTCORE_LANGUAGE),
      'name' => $this->convertElementName('margin'),
      'value' => $this->getContext('fotorama.margin'),
      'suffix' => 'px',
      'validators' => array(
        'number' => __('Only numeric character allowed', VTCORE_LANGUAGE),
      )
    ))
    ->BsText(array(
      'text' => __('Glimpse', VTCORE_LANGUAGE),
      'description' => __('Glimpse size of nearby frames in pixels or percents.', VTCORE_LANGUAGE),
      'name' => $this->convertElementName('glimpse'),
      'value' => $this->getContext('fotorama.glimpse'),
      'validators' => array(
        'csssize' => __('Invalid size', VTCORE_LANGUAGE),
      )
    ));

    $this->accordion->addPanel('media', array(
      'title' => __('Media', VTCORE_LANGUAGE),
      'content' => $this->object->getChildrens(),
    ));

    // Navigation Panel
    $this->object
      ->resetChildren()
      ->BsRow()
      ->lastChild()
      ->BsCheckbox(array(
        'text' => __('Keyboard', VTCORE_LANGUAGE),
        'description' => __('Enables keyboard navigation.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('keyboard'),
        'checked' => (boolean) $this->getContext('fotorama.keyboard'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))

      ->BsCheckbox(array(
        'text' => __('Click', VTCORE_LANGUAGE),
        'description' => __('Moving between frames by clicking.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('click'),
        'checked' => (boolean) $this->getContext('fotorama.click'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))
      ->BsCheckbox(array(
        'text' => __('Swipe', VTCORE_LANGUAGE),
        'description' => __('Moving between frames by swiping.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('swipe'),
        'checked' => (boolean) $this->getContext('fotorama.swipe'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))
      ->BsCheckbox(array(
        'text' => __('Trackpad', VTCORE_LANGUAGE),
        'description' => __('Enables trackpad support and horizontal mouse wheel as well.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('trackpad'),
        'checked' => (boolean) $this->getContext('fotorama.trackpad'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))
      ->getParent()
      ->BsSelect(array(
        'text' => __('Nav', VTCORE_LANGUAGE),
        'description' => __('Navigation style.', VTCORE_LANGUAGE),
        'options' => array(
          'dots' => __('iPhone Style Dots', VTCORE_LANGUAGE),
          'thumbs' => __('Thumbnails', VTCORE_LANGUAGE),
          'false' => __('Nothing', VTCORE_LANGUAGE),
        ),
        'name' => $this->convertElementName('nav'),
        'value' => $this->getContext('fotorama.nav'),
      ))
      ->BsText(array(
        'text' => __('Nav Width', VTCORE_LANGUAGE),
        'description' => __('Navigation width.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('navwidth'),
        'value' => $this->getContext('fotorama.navwidth'),
      ))
      ->BsSelect(array(
        'text' => __('Arrows', VTCORE_LANGUAGE),
        'description' => __('Turns on navigation arrows over the frames.', VTCORE_LANGUAGE),
        'options' => array(
          'true' => __('Enable', VTCORE_LANGUAGE),
          'false' => __('Disable', VTCORE_LANGUAGE),
          'always' => __('Always', VTCORE_LANGUAGE),
        ),
        'name' => $this->convertElementName('arrows'),
        'value' => $this->getContext('fotorama.arrows'),
      ))
      ->BsSelect(array(
        'text' => __('Nav Position', VTCORE_LANGUAGE),
        'description' => __('Navigation container position relative to stage.', VTCORE_LANGUAGE),
        'options' => array(
          'false' => __('None', VTCORE_LANGUAGE),
          'top' => __('Top', VTCORE_LANGUAGE),
          'bottom' => __('Bottom', VTCORE_LANGUAGE),

        ),
        'name' => $this->convertElementName('navposition'),
        'value' => $this->getContext('fotorama.navposition'),
      ));

    $this->accordion->addPanel('navigation', array(
      'title' => __('Navigation', VTCORE_LANGUAGE),
      'content' => $this->object->getChildrens(),
    ));


    // Thumbnail panel
    $this->object
      ->resetChildren()
      ->BsText(array(
        'text' => __('Thumbnail Width', VTCORE_LANGUAGE),
        'description' => __('Thumbnail width in pixels.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('thumbwidth'),
        'value' => $this->getContext('fotorama.thumbwidth'),
        'suffix' => 'px',
        'validators' => array(
          'number' => __('Only numeric character allowed', VTCORE_LANGUAGE),
        )
      ))
      ->BsText(array(
        'text' => __('Thumbnail Height', VTCORE_LANGUAGE),
        'description' => __('Thumbnail height in pixels.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('thumbheight'),
        'value' => $this->getContext('fotorama.thumbheight'),
        'suffix' => 'px',
        'validators' => array(
          'number' => __('Only numeric character allowed', VTCORE_LANGUAGE),
        )
      ))
      ->BsText(array(
        'text' => __('Thumbnail Margin', VTCORE_LANGUAGE),
        'description' => __('Size of thumbnail margins.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('thumbmargin'),
        'value' => $this->getContext('fotorama.thumbmargin'),
        'suffix' => 'px',
        'validators' => array(
          'number' => __('Only numeric character allowed', VTCORE_LANGUAGE),
        )
      ))
      ->BsText(array(
        'text' => __('Thumbnail Border Width', VTCORE_LANGUAGE),
        'description' => __('Border width of the active thumbnail.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('thumbborderwidth'),
        'value' => $this->getContext('fotorama.thumbborderwidth'),
        'suffix' => 'px',
        'validators' => array(
          'number' => __('Only numeric character allowed', VTCORE_LANGUAGE),
        )
      ))
      ->BsSelect(array(
        'text' => __('Thumb Fit', VTCORE_LANGUAGE),
        'description' => __('How to fit thumbnail into its frame', VTCORE_LANGUAGE),
        'options' => array(
          'contain' => __('Contain', VTCORE_LANGUAGE),
          'cover' => __('Cover', VTCORE_LANGUAGE),
          'scaledown' => __('Scale Down', VTCORE_LANGUAGE),
          'none' => __('None', VTCORE_LANGUAGE),
        ),
        'name' => $this->convertElementName('thumbfit'),
        'value' => $this->getContext('fotorama.thumbfit'),
      ));

    $this->accordion->addPanel('thumbnail', array(
      'title' => __('Thumbnail', VTCORE_LANGUAGE),
      'content' => $this->object->getChildrens(),
    ));


    // Animation Panel
    $this->object
      ->resetChildren()
      ->BsRow()
      ->lastChild()
      ->BsCheckbox(array(
        'text' => __('Loop', VTCORE_LANGUAGE),
        'description' => __('Enables loop.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('loop'),
        'checked' => (boolean) $this->getContext('fotorama.loop'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))
      ->BsCheckbox(array(
        'text' => __('Stop Autoplay on touch', VTCORE_LANGUAGE),
        'description' => __('Stops slideshow at any user action with the fotorama.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('stopautoplayontouch'),
        'checked' => (boolean) $this->getContext('fotorama.stopautoplayontouch'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))
      ->BsCheckbox(array(
        'text' => __('Shuffle', VTCORE_LANGUAGE),
        'description' => __('Shuffles frames at launch.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('shuffle'),
        'checked' => (boolean) $this->getContext('fotorama.shuffle'),
        'switch' => true,
        'grids' => array(
          'columns' => array(
            'mobile' => '12',
            'tablet' => '6',
            'small' => '6',
            'large' => '6',
          ),
        ),
      ))
      ->getParent()
      ->BsSelect(array(
        'text' => __('Transition', VTCORE_LANGUAGE),
        'description' => __('Defines what transition to use', VTCORE_LANGUAGE),
        'options' => array(
          'slide' => __('Slide', VTCORE_LANGUAGE),
          'crossfade' => __('Crossfade', VTCORE_LANGUAGE),
          'dissolve' => __('Dissolve', VTCORE_LANGUAGE),
        ),
        'name' => $this->convertElementName('transition'),
        'value' => $this->getContext('fotorama.transition'),
      ))
      ->BsSelect(array(
        'text' => __('Click Transition', VTCORE_LANGUAGE),
        'description' => __('Defines alternative transition to use on click.', VTCORE_LANGUAGE),
        'options' => array(
          'slide' => __('Slide', VTCORE_LANGUAGE),
          'crossfade' => __('Crossfade', VTCORE_LANGUAGE),
          'dissolve' => __('Dissolve', VTCORE_LANGUAGE),
        ),
        'name' => $this->convertElementName('clicktransition'),
        'value' => $this->getContext('fotorama.clicktransition'),
      ))
      ->BsSelect(array(
        'text' => __('Direction', VTCORE_LANGUAGE),
        'description' => __('Sets the frames direction: ltr or rtl.', VTCORE_LANGUAGE),
        'options' => array(
          'ltr' => __('Left to right', VTCORE_LANGUAGE),
          'rtl' => __('Right to left', VTCORE_LANGUAGE),
        ),
        'name' => $this->convertElementName('direction'),
        'value' => $this->getContext('fotorama.direction'),
      ))
      ->BsText(array(
        'text' => __('Transition Duration', VTCORE_LANGUAGE),
        'description' => __('Animation length in milliseconds.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('transitionduration'),
        'value' => $this->getContext('fotorama.transitionduration'),
        'suffix' => 'miliseconds',
        'validators' => array(
          'number' => __('Only numeric character allowed', VTCORE_LANGUAGE),
        )
      ))
      ->BsText(array(
        'text' => __('Start Index', VTCORE_LANGUAGE),
        'description' => __('Index or id of the frame that will be shown upon initialization of the fotorama.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('startindex'),
        'value' => $this->getContext('fotorama.startindex'),
        'validators' => array(
          'alphanumeric' => __('Only alphanumeric character allowed', VTCORE_LANGUAGE),
        ),
      ))
      ->BsText(array(
        'text' => __('Autoplay', VTCORE_LANGUAGE),
        'description' => __('Enables slideshow. Turn it on with true or any interval in milliseconds.', VTCORE_LANGUAGE),
        'name' => $this->convertElementName('autoplay'),
        'value' => $this->getContext('fotorama.autoplay'),
        'validators' => array(
          'alphanumeric' => __('Only alphanumeric character allowed', VTCORE_LANGUAGE),
        )
      ));

    $this->accordion->addPanel('transition', array(
      'title' => __('Animation', VTCORE_LANGUAGE),
      'content' => $this->object->getChildrens(),
    ));


    unset($this->accordion);

    $this->object = NULL;
    unset($this->object);
  }

}