{combine_css path="$PWG_PHOTO_WIDGET_PLUGIN_CSS/admin.css"}
{combine_css path="themes/default/js/plugins/chosen.css"}
{combine_css path="$PWG_PHOTO_WIDGET_PLUGIN_CSS/colorpicker.css"}

{combine_script id="jquery.chosen" load="footer" path="themes/default/js/plugins/chosen.jquery.min.js"}
{combine_script id="colorpicker" require="jquery" path="$PWG_PHOTO_WIDGET_PLUGIN_JS/colorpicker.js"}

{footer_script require="colorpicker"} 
{literal}
$(function() {
    $('input.pwg-picker')
	.each(function() {
	    if ($(this).val() !== undefined) {
		$(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}


{footer_script require="jquery.chosen"} 
{literal}
$(function() {
    $('input[name=pw_all_categories]').change(function() {
	if ($(this).attr('value')==0) {
	    $('#pw-select-categories').removeClass('hide');
	} else {
	    $('#pw-select-categories').addClass('hide');
	}
    });

    $('#pw-select-categories select').chosen();
});
{/literal}
{/footer_script}

<div class="titrePage">
  <h2>{'Photo Widget Plugin'|@translate}</h2>
</div>

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

<p>
{'You can choose that mode for displaying one, severals or all categories'|@translate}
<p>

<form method="post" action="" class="general">
<fieldset>
  <legend>{'Main configuration'|@translate}</legend>
  <p class="field radio"><span>{'All categories'|@translate} ?</span>
    {html_radios name="pw_all_categories" options=$PW_CAT_CHOICES selected=$PW_ALL_CATEGORIES}
  </p>

  <p class="field pw-categories{if $PW_ALL_CATEGORIES==1} hide{/if}" id="pw-select-categories">
    <label>{'Applicable categorie(s)'|@translate}</label>
    <select data-placeholder="{'Applicable categorie(s)'|@translate}" name="pw_categories[]" multiple="multiple" size="{$pw_categories|@count|@max:3}">
      <option value="__none__"></option>
      {html_options options=$all_categories selected=$all_categories_selected}
    </select>
  </p>
</fieldset>
<fieldset>
  <legend>{'Animation size'|@translate}</legend>
  <p class="field">
    <label>{'Width'|@translate}
      <input type="text" name="pw_width" value="{$PW_WIDTH}">
    </label>
  </p>
  <p class="field">
    <label>{'Height'|@translate}
      <input type="text" name="pw_height" value="{$PW_HEIGHT}">
    </label>
  </p>
</fieldset>
<fieldset>
  <legend>{'Animation background color'|@translate}</legend>
  <div id="picker" style="float: right;"></div>
  <p class="field">
    <label>{'Color'|@translate}</label>
    <input class="pwg-picker" type="text" name="pw_bgcolor" value="{$PW_BGCOLOR}">
  </p>
</fieldset>
<p><input class="submit" type="submit" name="submit" value="{'Submit'|@translate}"></p>
</form>