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

{combine_script id="colorpicker" require="jquery" path="$PWG_CUMULUS_PLUGIN_JS/colorpicker.js"}
{combine_script id="colorpicker.instance" require="colorpicker" path="$PWG_CUMULUS_PLUGIN_JS/colorpicker.instance.js"}

<p>{'Animation configuration : size, tags colors, tags size'|@translate}</p>

<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>
    <p class="info">({'Width or height can be null to allow animation using all the space'|@translate})</p>
  </fieldset>

  <fieldset>
    <legend>{'Animation width and height in menu'|@translate}</legend>
    <p class="field">
      <label>{'Width'|@translate}
	<input type="text" name="pwg_cumulus_width_in_menu" value="{$PWG_CUMULUS_WIDTH_IN_MENU}">
      </label>
    </p>
    <p class="field">
      <label>{'Height'|@translate}
      <input type="text" name="pwg_cumulus_height_in_menu" value="{$PWG_CUMULUS_HEIGHT_IN_MENU}">
      </label>
    </p>
    <p class="info">({'Width or height can be null to allow animation using all the space'|@translate})</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>{'Transparent mode for background'|@translate}
	<input type="checkbox" id="pwg_cumulus_mode_transparent" name="pwg_cumulus_mode_transparent" value="1"
	       {if $PWG_CUMULUS_MODE_TRANSPARENT} checked="checked"{/if}>
      </label>
      <span class="info">({'Check the checkbox to use transparent mode for background'|@translate})</span>
    </p>
    <p class="field" id="pwg_cumulus_p_bgcolor">
      <label>{'Background color'|@translate}
	<input class="pwg-picker" type="text" name="pwg_cumulus_bgcolor" value="{$PWG_CUMULUS_BGCOLOR}">
      </label>      
    </p>
    <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>