<?php
/**
* @package   Warp Theme Framework
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

$styles = array('default');
$styles_css = array();

if ($path = $this['path']->path('theme:styles')) {
    foreach (glob("$path/*") as $dir) {

        $styles[] = $style = basename($dir);

        if (!file_exists($dir.'/style.less')) {
            $styles_css[] = $style;
        }
    }
}

?>
<p class="tm-preset-select uk-form-controls-condensed">
    <select id="tm-presets" class="uk-hidden" name="<?php echo $name ?>" data-selected="<?php echo $value ?>" data-style-css="<?php echo htmlspecialchars(json_encode($styles_css)) ?>" data-style-selector>
        <?php
            foreach ($styles as $style) {
                printf('<option value="%s" class="attached enabled">%s</option>', $style, $style);
            }
        ?>
    </select>
</p>

<script type="text/javascript">
jQuery(function($) {

    $(document).ready(function(){
        $("#tm-presets option").each(function() {
          //get values of all option
          var val = $(this).val();
          var activeval = $('#tm-presets').data("selected");

          //create boxes like checkbox
          $(".tm-preset-select").append('<div class="selectbox" data-color="' + val + '"><span class="tm-' + val + '" title="'+val+'"></span></div>');
          $(".selectbox[data-color='"+activeval+"']").addClass("active");
        });

        //remove empty selectbox
        $('.selectbox[data-color=""]').remove();

        //change select box on click
        $(".selectbox").click(function() {
          //remove selected from others
          $(".selectbox").removeClass("active");
          //do active to selected
          $(this).addClass("active");
          //get value
          var optVal = $(this).data("color");
          $("#tm-presets").val(optVal) 
        });

        //change select box on dropdown change
        $("#tm-presets").change(function(){
            var optVal = $(this).val();
          $(".selectbox").removeClass("active");
          $(".selectbox[data-color='"+optVal+"']").addClass("active");
        });
    });
});
</script>