@model HeuristicLab.Services.Optimization.Web.Models.ExperimentViewModel
<script type="text/template" id="node_template">
  <li><%= title%></li>  
</script>

<script type="text/template" id="tree_template">
  <div id="<%= id %>" class="treeStyle">
    <ul>      
    </ul>
  </div>
</script>

<script type="text/template" id="draggable_template">
  <div id="<%= nodeId %>" data-isExperiment="<%= isExperiment%>" data-name="<%= title%>" class="dragables"><p><%= title %></p></div>
</script>

<script type="text/template" id="stepwizard_template">
  <input style="margin-top:5px;" class="remove-button" name="RemoveNode" type="button" value="Remove" disabled="disabled" />
  <input style="margin-top:5px;" class="variate-button" name="VariateNode" type="button" value="Variate" disabled="disabled" />
</script>           

<script type="text/template" id="parameter_template">
<div>
  <div class="leftEntry"><%= Name %>:</div>
  <div class="rightEntry"></div>  
</div>
</script>       

<script type="text/template" id="validationhints_template">
<div class="validator" title="<%= header %>">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
  <%= text %>
  </p>
</div>
</script>       

<script type="text/template" id="variationdialog_template">
<div class="variationDialog" title="Variate algorithm">
  <h1>Select parameter</h1>
  <select class="variationDialogContent">  
  </select>
  <input type="checkbox" name="active" /> Active
  <div class="variationDetails">          
  </div>  
</div>
</script>       

<script type="text/template" id="variationentry_template">
<option data-index='<%= Index %>'><%= Name %></option>
</script>       

<script type="text/template" id="variationcontent_template">
<div>
  
  
</div>
</script>       

<script type="text/template" id="variation_boolean_template">
<p>Boolean paramter: True / False</p>
</script>       

<script type="text/template" id="variation_number_template">
<div>
    <input type="button" name="generate" value="Generate..."/>    
    <div></div>
</div>
</script>       

<script type="text/template" id="checkbox_template">
<div>
    <input type="checkbox" name="<%=name%>"
        <% if (checked) { %>
            checked
        <% } %>
    />
    <% if (!hideText) { %>
         <%=text%><br/>
    <% } %>
</div>
</script>   

<script type="text/template" id="variation_generator_template">
<div title="Generate Values">
 <div class="leftEntry">Minimum:</div>
 <div class="rightEntry"><input type="text" name="minimum" value="0"/></div>  
 <div class="leftEntry">Maximum:</div>
 <div class="rightEntry"><input type="text" name="maximum" value="2"/></div>  
 <div class="leftEntry">Step:</div>
 <div class="rightEntry"><input type="text" name="step" value="1"/></div>  
</div>
</script>       

<script type="text/template" id="loading_template">
<div>
  <p>Loading ... </p>
  <img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading animation" class="loader" />  
</div>
</script>    

<script type="text/javascript">
    var controller = new OAAS_CONTROLLER.ExperimentPageController();
    $(document).ready(function () {
        controller.create();
    });
</script>
<noscript>
    <p>You need JavaScript to view this page! Please activate it in your browser settings.</p>
</noscript>

<h2>Experiment</h2>

<div id="stepWizard" class="wizard swMain">
  <ul>
    <li>
      <a href="#step1">
        <label class="stepNumber">1</label>
        <span class="stepDesc">
          Structure<br />
          <small>Build your experiment</small>
        </span>
      </a>
    </li>
    <li>
      <a href="#step2">
        <label class="stepNumber">2</label>
        <span class="stepDesc">
          Customization<br />
          <small>Change experiment parameters</small>
        </span>
      </a>
    </li>
    <li>
      <a href="#step3">
        <label class="stepNumber">3</label>
        <span class="stepDesc">
          Experiment Details<br />
          <small>Set name of experiment</small>
        </span>
      </a>
    </li>
  </ul>
  <div id="step1">
  <fieldset>    
    <div>
    <p>Experiment Tree:</p>
    </div>
    <div id="container" class="treeStyle"></div>    
    <p>Choose an algorithm:</p>
    <div id="algorithms">
        <span>Loading ... <img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading animation" />  </span>        
    </div>
    <div class="clearer"></div>
    <p>Choose from your stored experiments:</p>
    <div id="experiments">
        <span>Loading ... <img src="@Url.Content("~/Content/ajax-loader.gif")" alt="Loading animation" />  </span>        
    </div>
  </fieldset>
  </div>
  <div id="step2">
    <h2>Click on a experiment to adjust its parameters:</h2>
    <div id="container2" class="treeStyle"></div>
  </div>
  <div id="step3">
    <div class="editor-label">
      <label for="name">Experiment Template Name:</label>
    </div>

    <div class="editor-field">
      <input id="name" name="Name" type="text" value="My Experiment" />
    </div>

    <div class="editor-label">
      <label for="name">Run experiment immediately?</label>
    </div>

    <div class="editor-field">
      <input id="runImmediately" name="RunImmediately" type="checkbox" />
    </div>

    <div class="editor-label">
      <label for="name">Repititions</label>
    </div>

    <div class="editor-field">
      <input id="repititions" name="Repititions" type="text" value="1" disabled="disabled" />
    </div>

    <div class="editor-label">
      <label for="name">Group</label>
    </div>

    <div class="editor-field">
      <input id="group" name="Group" type="text" value="TESTAZURE" disabled="disabled" />
    </div>
  </div>    
</div>

<div id="parameterDialog">
  <div id="parameterDialog-content">
  </div>
</div>

<div id="loadingDialog">
</div>

@section submenu {
    <ul>
        <li class="selected">@Html.ActionLink("Build", "New", "Experiment")</li>    
        <li>@Html.ActionLink("Edit", "NewEdit", "Experiment")</li>
        <li>@Html.ActionLink("Status", "Index", "Status")</li>
    </ul>
}