@{
    ViewBag.Title = "Overview";
	Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$('#ratingSelect').wijrating();
			$('#ratingRadio').wijrating();
			$('#ratingDiv').wijrating({ value: 4 });

			//$('.wijmo-wijrating-reset').addClass('ui-state-default ui-corner-all').append('<span class="ui-icon ui-icon-close"></span>');
		});
	</script>
}
<h2>Overview</h2>
<div class="main demo">
    <!-- Begin demo markup -->
    <h4>Select</h4>
    <div>
        <select id="ratingSelect">
            <option value="1">Below Average</option>
            <option value="2">Average</option>
            <option selected="selected" value="3">Above Average</option>
            <option value="4">Awesome</option>
            <option value="5">Epic</option>
        </select>
    </div>
    <h4>Radio</h4>
    <div>
        <div id="ratingRadio">
            <label for="input1a">
                Below Average</label>
            <input type="radio" id="input1a" value="1" name="rating" />
            <label for="input2a">
                Average</label>
            <input type="radio" checked="checked" id="input2a" value="2" name="rating" />
            <label for="input3a">
                Above Average</label>
            <input type="radio" id="input3a" value="3" name="rating" />
            <label for="input4a">
                Awesome</label>
            <input type="radio" id="input4a" value="4" name="rating" />
            <label for="input5a">
                Epic</label>
            <input type="radio" id="input5a" value="5" name="rating" />
        </div>
    </div>
    <h4>DIV</h4>
    <div>
        <div id="ratingDiv">
        </div>
    </div>
    <!-- End demo markup -->
    <div class="demo-options">
        <!-- Begin options markup -->
        <!-- End options markup -->
    </div>
</div>

@section description
{
	<p>The wijrating widget that generates a customizable star rating widget automatically.</p>
	<p> The widget is based on a set of select options, or radio inputs, or div with widget options. </p>
}