{combine_css path="$PWG_CUMULUS_PLUGIN_CSS/admin.css"}
{combine_css path="$PWG_CUMULUS_PLUGIN_CSS/colorpicker.css"}

{combine_script id="colorpicker" require="jquery" path="$PWG_CUMULUS_PLUGIN_JS/colorpicker.js"}
{footer_script require="colorpicker"}{literal}
$(function() {
$('input.pwg-picker')
  .each(function() {
      if ($(this).val() !== undefined) {
        if ($(this).val().indexOf('#',0)==-1) {
           $(this).css('background-color', '#'+$(this).val());
        } else {
           $(this).css('background-color', $(this).val());
        }
      }
    })
  .ColorPicker({
    onSubmit: function(hsb, hex, rgb, el) {
        $(el).val(hex);
        $(el).ColorPickerHide();
        $(el).css('background-color', '#'+hex);
      },
    onBeforeShow: function () {
        $(this).ColorPickerSetColor(this.value);
      }
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});
});
{/literal}{/footer_script}

<div class="titrePage">
  <h2>{'Cumulus Tags Cloud Plugin'|@translate}</h2>
</div>

<p>
{'That plugin display tags using a flash movie that rotates them in 3D. It works like a regular tags cloud but in a more amazing and exciting way.'|@translate}
</p>

<p>
{'You can choose that mode for tags default display mode by adding (or changing) in the configuration file'|@translate}  <strong>include/config_local.inc.php</strong> :<p>
<pre>
$conf['tags_default_display_mode'] = 'cumulus';
</pre>

<form method="post" action="" class="general">
  <fieldset>
    <legend>{'Animation width and height'|@translate}</legend>
    <p class="field">
      <label>{'Width'|@translate}
	<input type="text" name="pwg_cumulus_width" value="{$PWG_CUMULUS_WIDTH}">
      </label>
    </p>
    <p class="field">
      <label>{'Height'|@translate}
      <input type="text" name="pwg_cumulus_height" value="{$PWG_CUMULUS_HEIGHT}">
      </label>
    </p>
  </fieldset>
  
  <fieldset>
    <legend>{'Tags size'|@translate}</legend>
    <p class="field">
      <label>{'Coefficient'|@translate}
	<input type="text" name="pwg_cumulus_coeff" value="{$PWG_CUMULUS_COEFF}">
      </label>      
    </p>
  </fieldset>
  
  <fieldset>
    <legend>{'Animation colors'|@translate}</legend>
    <div id="picker" style="float: right;"></div>
    <p class="field">
      <label>{'Color 1'|@translate}
	<input class="pwg-picker" type="text" name="pwg_cumulus_color1" value="{$PWG_CUMULUS_COLOR1}">
      </label>      
    </p>
    <p class="field">
    <label>{'Color 2'|@translate}
      <input class="pwg-picker" type="text" name="pwg_cumulus_color2" value="{$PWG_CUMULUS_COLOR2}">
    </label>      
    </p>
    <p class="field">
      <label>{'Mouseover color'|@translate}
	<input class="pwg-picker" type="text" name="pwg_cumulus_hicolor" value="{$PWG_CUMULUS_HICOLOR}">
      </label>      
    </p>
  </fieldset>
  <p><input class="submit" type="submit" name="submit" value="{'Submit'|@translate}"></p>
</form>