[%# This Source Code Form is subject to the terms of the Mozilla Public
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
  #
  # This Source Code Form is "Incompatible With Secondary Licenses", as
  # defined by the Mozilla Public License, v. 2.0.
  #%]

[% PROCESS global/variables.none.tmpl %]

[% inline_style = BLOCK %]
strong.required:before {
  content: "* ";
  color: red;
}
#yui-history-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
}
#standard {
  margin-top: 2em;
}
#standard img {
  vertical-align: middle;
}
#standard a {
  cursor: pointer;
}
[% END %]
[% inline_javascript = BLOCK %]
  var Dom = YAHOO.util.Dom;
  var Event = YAHOO.util.Event;
  var History = YAHOO.util.History;
  var mdn = {
    _initial_state: 'initial',
    _current_state: 'initial',
    _current_type:  'bug',
    _required_fields: {
      'bug': {
        'bug_actions': 'Please enter some text for "What did you do?"',
        'bug_actual_results': 'Please enter some text for "What happened?"',
        'bug_expected_results': 'Please enter some text for "What should have happened?"',
      },
      'feature': {
        'feature_problem': 'Please enter some text for "What problem would this solve?"',
        'feature_identification': 'Please enter some text for "How do you know that the users identified above have this problem?"',
        'feature_solution': 'Please enter some text for "How are the users identified above solving this problem now?"',
        'feature_suggestions': 'Please enter some text for "Do you have any suggestions for solving the problem?"'
      },
      'change': {
        'change_feature': 'Please enter some text for "What feature should be changed? Please provide the URL of the feature if possible"',
        'change_problem_solving': 'Please enter some text for "What problems would this solve?"',
        'change_audience': 'Please enter some text for "Who would use this?"',
        'change_interface': 'Please enter some text for "What would users see?"',
        'change_process': 'Please enter some text for "What would users do? What would happen as a result?"',
      }
    },
    setState: function(state, request_type, no_set_history) {
      if (state == 'detail') {
        request_type = request_type || this._getRadioValueByClass('request_type');
        if (request_type == 'bug') {
          Dom.get('detail_header').innerHTML = '<h2>[% terms.Bug %] Report</h2>';
          Dom.get('secure_type').innerHTML = 'report';
        }
        if (request_type == 'feature') {
          Dom.get('detail_header').innerHTML = '<h2>Feature Request</h2>';
          Dom.get('secure_type').innerHTML = 'request';
          Dom.removeClass('detail_feature_other_forms', 'bz_default_hidden');
        }
        if (request_type == 'change') {
          Dom.get('detail_header').innerHTML = '<h2>Change Request</h2>';
          Dom.get('secure_type').innerHTML = 'request';
        }
        Dom.addClass('detail_' + this._current_type, 'bz_default_hidden');
        Dom.removeClass('detail_' + request_type, 'bz_default_hidden');
        if (request_type != 'feature') {
          Dom.addClass('detail_feature_other_forms', 'bz_default_hidden');
        }
        this._current_type = request_type;

      }
      Dom.addClass(this._current_state + '_form', 'bz_default_hidden');
      Dom.removeClass(state + '_form', 'bz_default_hidden');
      this._current_state = state;
      if (History && !no_set_history) {
        History.navigate('h', state +
                         (request_type ? '|' + request_type : ''));
      }
      return true;
    },
    validateAndSubmit: function() {
      var alert_text = '';
      var request_type = this._current_type;
      if (!isFilledOut('component')) alert_text += 'Please select a "Component".\n';
      if (!isFilledOut('short_desc')) alert_text += 'Please enter a "Summary".\n';
      for (require_type in this._required_fields) {
        if (require_type == request_type) {
          for (field in this._required_fields[require_type]) {
            if (!isFilledOut(field))
              alert_text += this._required_fields[require_type][field] + "\n";
          }
        }
      }

      // Feature audience radio input
      if (request_type == 'feature') {
        var audience = document.getElementsByName('feature_audience');
        var found = 0;
        for(var i = 0, l = audience.length; i < l; i++) {
          if (audience[i].checked) {
              found = 1;
              if (audience[i].id == 'feature_audience_other'
                  && document.getElementById('feature_audience_other_text').value == '')
              {
                alert_text += 'Please enter a value for "Other" in "Who has this problem?"';
              }
          }
        }
        if (!found) {
          alert_text += 'Please select a value for "Who has this problem?"';
        }
      }

      if (alert_text != '') {
        alert(alert_text);
        return false;
      }
      var whiteboard = Dom.get('status_whiteboard');
      whiteboard.value = "[specification][type:" + request_type.toLowerCase() + "]";
      if (request_type == 'feature') {
        Dom.get('bug_severity').value = 'enhancement';
      }
      return true;
    },
    _getRadioValueByClass: function(class_name) {
      var elements = Dom.getElementsByClassName(class_name);
      for (var i = 0,  l = elements.length; i < l; i++) {
        if (elements[i].checked) return elements[i].value;
      }
    },
    init: function() {
      var bookmarked_state = History.getBookmarkedState('h');
      this._initial_state = bookmarked_state || 'initial';
      try {
        History.register('h', this._initial_state, mdn.onStateChange);
        History.initialize('yui-history-field', 'yui-history-iframe');
        History.onReady(function () {
          mdn.onStateChange(History.getCurrentState('h'), true);
        });
      }
      catch(e) {
        console.log('error initializing history: ' + e);
        History = false;
      }
    },
    onStateChange: function(state, no_set_history) {
      var state_data = state.split('|');
      mdn.setState(state_data[0], state_data[1], no_set_history);
    }
  };
  Event.onDOMReady(mdn.init);
  Event.on('show_detail', 'click', function() { mdn.setState('detail'); });
[% END %]

[% PROCESS global/header.html.tmpl
   title = "Mozilla Developer Network Feedback"
   style = inline_style
   javascript = inline_javascript
   yui = [ 'history' ]
   javascript_urls = [ 'extensions/BMO/web/js/form_validate.js' ]
%]

<iframe id="yui-history-iframe" src="extensions/BMO/web/yui-history-iframe.txt"></iframe>
<input id="yui-history-field" type="hidden">

<h1>Mozilla Developer Network Feedback</h1>

<form method="post" action="post_bug.cgi" enctype="multipart/form-data"
      onSubmit="return mdn.validateAndSubmit();">
  <input type="hidden" name="format" value="mdn">
  <input type="hidden" name="product" value="Mozilla Developer Network">
  <input type="hidden" name="rep_platform" value="All">
  <input type="hidden" name="op_sys" value="Other">
  <input type="hidden" name="version" value="unspecified">
  <input type="hidden" name="bug_severity" id="bug_severity" value="normal">
  <input type="hidden" name="token" value="[% token FILTER html %]">
  <input type="hidden" name="status_whiteboard" id="status_whiteboard" value="">

  <div id="initial_form">
    <p>
      <input type="radio" name="request_type" class="request_type"
             id="request_type_bug" value="bug" checked="checked">
        <label for="request_type_bug">Report a [% terms.bug %]</label><br>
      <input type="radio" name="request_type" class="request_type"
             id="request_type_feature" value="feature">
        <label for="request_type_feature">Request a new feature</label><br>
      <input type="radio" name="request_type" class="request_type"
             id="request_type_change" value="change">
        <label for="request_type_change">Request a change to an existing feature</label><br>
      <br>
      <input id="show_detail" type="button" value="Next">
    </p>
  </div>

  <div id="detail_form" class="bz_default_hidden">
    <p id="detail_header"></p>

    <div id="detail_feature_other_forms" class="bz_default_hidden">
      <p>
        This form lets you to request new features on MDN. Please use the
        different specific [% terms.bug %] forms for…<br>
        <ul>
          <li>
            <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network#h=detail%7Cbug">
              Reporting a software [% terms.bug %] in MDN</a>
          </li>
          <li>
            <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer%20Documentation&component=General">
              Requesting changes to content or localizations in MDN</a>
          </li>
          <li>
            <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer%20Engagement&component=Events%20Request">
              Requesting sponsorship for your developer event</a>
          </li>
        </ul>
      </p>
    </div>

    <p>
      <strong class="required">Component</strong><br>
      <select name="component" id="component" size="7" aria-required="true" class="required">
        [% FOREACH c = product.components %]
          [% NEXT IF NOT c.is_active %]
          <option value="[% c.name FILTER html %]" title="[% c.description FILTER html %]"
            [%- IF c.name == default.component_ %]
              selected="selected"
            [% END %]>
            [% c.name FILTER html -%]
          </option>
        [%- END %]
      </select>
    </p>

    <p>
      <strong class="required">Summary</strong><br>
      <input type="text" name="short_desc" id="short_desc" size="60">
    </p>

    <div id="detail_bug" class="bz_default_hidden">
      <p>
        <strong class="required">What did you do?</strong><br>
        <textarea name="bug_actions" id="bug_actions" rows="5" cols="60">
1.&nbsp;
2.&nbsp;
3.&nbsp;</textarea>
      </p>
      <p>
        <strong class="required">What happened?</strong><br>
        <textarea name="bug_actual_results" id="bug_actual_results" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">What should have happened?</strong><br>
        <textarea name="bug_expected_results" id="bug_expected_results" rows="5" cols="60"></textarea>
      </p>
    </div>

    <div id="detail_feature" class="bz_default_hidden">
      <p>
        <strong class="required">
          What problem would this solve?
       </strong><br>
        <textarea name="feature_problem" id="feature_problem" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">Who has this problem?</strong><br>
        <input type="radio" name="feature_audience" class="feature_audience"
               id="feature_audience_all" value="All visitors to MDN">
        <label for="feature_audience_all">All visitors to MDN</label><br>
        <input type="radio" name="feature_audience" class="feature_audience"
               id="feature_audience_registered" value="Registered users of MDN">
        <label for="feature_audience_registered">Registered users of MDN</label><br>
        <input type="radio" name="feature_audience" class="feature_audience"
               id="feature_audience_contributors" value="All contributors to MDN">
        <label for="feature_audience_contributors">All contributors to MDN</label><br>
        <input type="radio" name="feature_audience" class="feature_audience"
               id="feature_audience_core" value="Core contributors to MDN">
        <label for="feature_audience_core">Core contributors to MDN</label><br>
        <input type="radio" name="feature_audience" class="feature_audience"
               id="feature_audience_staff" value="Staff contributors to MDN">
        <label for="feature_audience_staff">Staff contributors to MDN</label><br>
        <input type="radio" name="feature_audience" class="feature_audience"
               id="feature_audience_other" value="Other"
               onchange="document.getElementById('feature_audience_other_text').focus();">
        <label for="feature_audience_other">Other (please explain)</label><br>
        <input type="text" name="feature_audience_other_text"
               id="feature_audience_other_text">
      </p>
      <p>
        <strong class="required">
          How do you know that the users identified above have this problem?<br>
          What experiment did you run? What data are you considering?<br>
          (If you did not run an experiment or do not have any data yet, that’s OK;
           please say so.)
        </strong><br>
        <textarea name="feature_identification" id="feature_identification"
                  rows="5" cols="60"></textarea>
      <p>
        <strong class="required">
          How are the users identified above solving this problem now?
        </strong><br>
        <textarea name="feature_solution" id="feature_solution" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">
          Do you have any suggestions for solving the problem? Please explain
          in detail.
        </strong><br>
        <textarea name="feature_suggestions" id="feature_suggestions" rows="5" cols="60"></textarea>
      </p>
    </div>

    <div id="detail_change" class="bz_default_hidden">
      <p>
        <strong class="required">What feature should be changed? Please provide the URL of the feature if possible.</strong><br>
        <textarea name="change_feature" id="change_feature" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">What problems would this solve?</strong><br>
        <textarea name="change_problem_solving" id="change_problem_solving" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">Who would use this?</strong><br>
        <textarea name="change_audience" id="change_audience" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">What would users see?</strong><br>
        <textarea name="change_interface" id="change_interface" rows="5" cols="60"></textarea>
      </p>
      <p>
        <strong class="required">What would users do? What would happen as a result?</strong><br>
        <textarea name="change_process" id="change_process" rows="5" cols="60"></textarea>
      </p>
    </div>

    <p id="detail_description">
      <strong>Is there anything else we should know?</strong><br>
      <textarea name="description" id="description" rows="5" cols="60"></textarea>
    </p>

    <p id="detail_secure">
      <input type="checkbox" name="groups" id="groups"
             value="[% product.default_security_group FILTER html %]">
      <label for="groups">
        <strong>This <span id="secure_type">report</span> is about a problem
        that is putting users at risk. It should be kept hidden from the public
        until it is resolved.</strong>
      </label>
    </p>

    <input type="submit" id="commit" value="Submit"></td>
  </div>
</form>

<div id="standard">
  <a href="enter_bug.cgi?format=__standard__&product=[% product.name FILTER uri %]">
    <img src="extensions/BMO/web/images/advanced.png" width="16" height="16" border="0"></a>
  <a href="enter_bug.cgi?format=__standard__&product=[% product.name FILTER uri %]">
    Switch to the standard [% terms.bug %] entry form</a>
</div>

[% PROCESS global/footer.html.tmpl %]