<div >
  <script type='text/javascript' id='script_visualization_type_options'>

    var advanced_types = { 
      one_row_count : true,
      one_row_numeric : false,
      one_row_total : false,
      multi_row_count : true,
      multi_row_numeric: false,
      multi_row_total : false 
    };
    var can_be_stacked = {
      one_row_count : false,
      one_row_numeric : false,
      one_row_total : false,
      multi_row_count : true,
      multi_row_numeric: true,
      multi_row_total : true 
     }
    var custom_report_visualization_types = new Array();
    function custom_report_update_visualization_types(style) {
      if (!custom_report_visualization_types) {
        return;
      }
      if (!custom_report_visualization_types[style]) {
        return;
      }
      var list = custom_report_visualization_types[style];    
      var options = $("displayVisualizationFieldTypes");
      if (!options) {
        return;
      }
      var selected  = -1;
      if (options.selectedIndex >= 0) {
        list.each(function(type,i) {
          if (type == options[options.selectedIndex].value) {
            selected = i;
          }
        });
      }

      var new_selected = false;
      options.length = 0;
      list.each(function(type,i) {
        var label = $(type+ '_label');
        if (label) {
          name = label.get('text');
        } else {
          name = type;
        }
        var option = new Option(name,type);
        if ( advanced_types[type] ) {
          option.setAttribute('class', 'custom_report_visualization_advanced');
        }
        options[i] = option;
        if ( (selected  == -1 ) || (i == selected)) {
          option.selected = true;
          new_selected = type;
        }
      });
      custom_report_show_visualization_type(new_selected);
      toggleAdvanced( custom_report_visualization_advanced_status );
    }

    function custom_report_show_visualization_type(type) {
      var chart_option = $('visualization_type_options_' + type);
      if (!chart_option) {
        return;
      }
      var visualization_options = $$('.custom_report_visualization_options');
      if (!visualization_options) {	   
        return;
      }
      visualization_options.each(function(option) {
        var option_id = option.getProperty('id');
        if (option_id == 'visualization_type_options_'+type
          || ( can_be_stacked[type] && option_id == "stacked_visualization_type_options" ) ) {
          option.setStyles({'display':"block", 'visibility':"visible"});
        } else {
          option.setStyles({'display':"none", 'visibility':"hidden"});
        }
      });
    }

    var custom_report_visualization_advanced_status = 0;
    function toggleAdvanced( on ) {
      if ( on ) {
        custom_report_visualization_advanced_status = 1;
        $$('.custom_report_visualization_advanced').setStyles({'display':"inline", 'visibility':"visible"});
        $('show_advanced').hide();
      } else {
        custom_report_visualization_advanced_status = 0;
        $$('.custom_report_visualization_advanced').setStyles({'display':"none", 'visibility':"hidden"});
        $('show_advanced').show();
      }
    }

  </script>
  <span title="Select chart options and view this report as a chart" class="button Visualization_submit_options_toggle" >Visualize</span>
  <!-- div class="button clickableText Visualization_submit_options_toggle" >(Options)</div -->
  <div class="optionsMenu toggable windowFloats=true windowDraggable=true" id="Visualization_submit_options_menu">
    <div class="optionsMenuTitle window_drag"> Visualization Options <span class="custom_report_visualization_advanced">(Advanced)</span></div> 	 
    <br/>
    <span class="field_head"><label>Chart Style</label></span>
    Choose the chart style.
    <span class="form_field">
      <select name="style" id="visualization_styles" onchange='custom_report_update_visualization_types(this.options[this.selectedIndex].value)'>	
      </select>
    </span>
    <br/>
    <span class="field_head"><label>Displayed Fields</label></span>
    Choose the way you wish to select fields to display.
    <span class="form_field">
      <select  name='displayFieldsType' id="displayVisualizationFieldTypes" onchange='custom_report_show_visualization_type(this.options[this.selectedIndex].value)'>	
      </select>
    </span>
    <br/>


    <div id='visualization_type_options_one_row_total' class='custom_report_visualization_options'>

      <h3>One Field --  Total</h3>
      <span style='display:none'>One field (Total)</span>
      Displays one field with the total numbers with that value for that field.
      <br/>
      <span class="field_head"><label>First Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_total:0:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <input type='hidden' name='displayFieldsTypes:one_row_total:1:formfield' value='total'/>
    </div>

    <div id='visualization_type_options_one_row_count' class='custom_report_visualization_options'>
      <h3>Two Fields -- Total on the Second One</h3>
      Displays two fields with the the total numbers on the second field
      <br/>
      <span style='display:none'>Two fields (Total on Second)</span>
      <span class="field_head"><label>First Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_count:0:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_count:1:formfield" class='reportformfield'>>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field Total</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_count:1:aggregate" class='reportformfield_aggregate'>
	  <option value='count' selected='selected'>Total Number</option>
	  <option value='count_distinct'>Total Distinct</option>
	</select>
      </span>     
    </div>

    <div id='visualization_type_options_one_row_numeric' class='custom_report_visualization_options'>
      <h3>Two Fields -- Second One is Numeric</h3>
      Displays two fields one which has a numeric value
      <br/>
      <span style='display:none'>Two fields (Numeric)</span>
      <span class="field_head"><label>First Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_numeric:0:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_numeric:1:formfield" class='reportformfield_numeric'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field Aggregation</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:one_row_numeric:1:aggregate" class='reportformfield_aggregate'>
	  <option value='none'>None</option>
	  <option value='sum'>Sum</option>
	  <option value='maximum'>Maximum</option>
	  <option value='minimum'>Minimum</option>
	  <option value='average'>Average</option>
	  <option value='count'>Total Number</option>
	  <option value='count_distinct'>Total Distinct</option>
	</select>
      </span>     
    </div>







    <div id='visualization_type_options_multi_row_total' class='custom_report_visualization_options'>
      <h3> Total on Two Fields</h3>
      Displays the total for two fields
      <br/>
      <span style='display:none'>Two fields (Total)</span>
      <span class="field_head"><label>First Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_total:0:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_total:1:formfield" class='reportformfield'>
	</select>
      </span>
      <input type='hidden' name='displayFieldsTypes:multi_row_total:2:formfield' value='total'/>
    </div>

    <div id='visualization_type_options_multi_row_count' class='custom_report_visualization_options'>
      <h3>Three Fields --  Total on the Third One</h3>
      <span style='display:none'>Three fields (Total on Third)</span>
      <span class="field_head"><label>First Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_count:0:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_count:1:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Third Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_count:2:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Third Field Aggregation</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_count:2:aggregate" class='reportformfield_aggregate'>
	  <option value='count'>Total Number</option>
	  <option value='count_distinct'>Total Distinct</option>
	</select>
      </span>     
    </div>
    
    <div id='visualization_type_options_multi_row_numeric' class='custom_report_visualization_options'>
      <h3>Three Fields --  Third One is Numeric</h3>
      Displays three fields one of which is numeric.
      <br/>
      <span style='display:none'>Three fields (Numeric)</span>
      <span class="field_head"><label>First Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_numeric:0:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Second Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_numeric:1:formfield" class='reportformfield'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Third Field</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_numeric:2:formfield" class='reportformfield_numeric'>
	</select>
      </span>
      <br/>
      <span class="field_head"><label>Third Field Aggregation</label></span>
      <span class="form_field">
	<select name="displayFieldsTypes:multi_row_numeric:2:aggregate" class='reportformfield_aggregate'>
	  <option value='sum'>Sum</option>
	  <option value='maximum'>Maximum</option>
	  <option value='minimum'>Minimum</option>
	  <option value='average'>Average</option>
	  <option value='count'>Total Number</option>
	  <option value='count_distinct'>Total Distinct</option>
	</select>
      </span>     
    </div>
    

    <div id="stacked_visualization_type_options" class="custom_report_visualization_options">
      <input type="checkbox" name="global_options:isStacked" value="1" id="multi_row_total_isStacked"/><label for="multi_row_total_isStacked">Stack Second Field</label>
    </div>
    

    <br/>



    <p />
    <br/>
    <span   title="Chart this data"    id='Visualization_submit'  class="multiformsubmit button">Visualize</span> 
    <span class="button optionsMenuButton Visualization_submit_options_hide window_hide"> Close </span>
    <div style="float: right;">
      <span class="button" id="show_advanced" onClick="toggleAdvanced(1)">Show Advanced Options</span>
      <span id="show_standard" class="button custom_report_visualization_advanced" onClick="toggleAdvanced(0)">Show Standard Options</span>
    </div>
  </div>
</div>
