@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}

@section header
{
   <script id="scriptInit" type="text/javascript">
       $(document).ready(function () {
           $("#clickhflipcard").wijflipcard();
           $("#clickvflipcard").wijflipcard({ animation: { direction: "vertical" } });
           $("#clicknoaniflipcard").wijflipcard({ animation: { disabled: true } });
           $("#hoverhflipcard").wijflipcard({ triggerEvent: "mouseenter" });
           $("#hovervflipcard").wijflipcard({ triggerEvent: "mouseenter", animation: { direction: "vertical" } });
           $("#noaniflipcard").wijflipcard({ triggerEvent: "mouseenter", animation: { disabled: true } });
       });
    </script> 

}
<h2>Overview</h2>
 <style type="text/css">
        .cardcontainer
        {
            padding: 0 80px 40px 80px;
            float: left;
        }

        .cardcontainer img
        {
            vertical-align: middle;
            display: block;
            margin: auto;
            text-align: center;
        }

        .wijmo-wijflipcard .wijmo-wijflipcard-panel
        {
            padding: 1em;
        }

        .bignumber
        {
            font-size: 3em;
            font-weight: 100;
            text-align: center;
            display: block;
            color: #999;
            margin-top: 50px;
        }

        .details
        {
            text-align: center;
            display: block;
        }

        .datatable
        {
            width: 100%;
        }

        .datatable th, .datatable td
        {
            border-bottom: 1px solid #333;
        }

        .datatable td
        {
            text-align: right;
            font-weight: 100;
        }

        .info
        {
            font-weight: 100;
            margin-top: 40px;
            text-align: center;
        }

        .info .ui-icon
        {
            display: inline-block;
        }

    </style>
  <div class="main demo">
            <!-- Begin demo markup -->

            <div class="cardcontainer" style="padding: 0 80px 40px 80px; float: left;">
                <div id="clickhflipcard" class="positive">
                    <div>
                        <!-- Front Panel -->
                        <div class="bignumber">$593K</div>
                        <div class="details">Q1 Sales</div>
                    </div>
                    <div>
                        <!-- Back Panel -->
                        <table class="datatable" cellspacing="0">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Jan</th>
                                    <td>$182,092</td>
                                </tr>
                                <tr>
                                    <th>Feb</th>
                                    <td>$223,234</td>
                                </tr>
                                <tr>
                                    <th>Mar</th>
                                    <td>$187,340</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <td>$592,666</td>
                                </tr>
                            </tfoot>
                        </table>
                        <p class="info">
                            <span class="ui-icon ui-icon-info"></span>Up 18% ($123K)
                        </p>
                    </div>
                </div>
                <br /><br />Click Action, Horizontal Flip
            </div>
            <div class="cardcontainer" style="padding: 0 80px 40px 80px; float: left;">
                <div id="clickvflipcard">
                    <div>
                        <!-- Front Panel -->
                        <div class="bignumber">$593K</div>
                        <div class="details">Q1 Sales</div>
                    </div>
                    <div>
                        <!-- Back Panel -->
                        <table class="datatable" cellspacing="0">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Jan</th>
                                    <td>$182,092</td>
                                </tr>
                                <tr>
                                    <th>Feb</th>
                                    <td>$223,234</td>
                                </tr>
                                <tr>
                                    <th>Mar</th>
                                    <td>$187,340</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <td>$592,666</td>
                                </tr>
                            </tfoot>
                        </table>
                        <p class="info">
                            <span class="ui-icon ui-icon-info"></span>Up 18% ($123K)
                        </p>
                    </div>
                </div>
                <br /><br />Click Action, Vertical Flip
            </div>
            <div class="cardcontainer" style="padding: 0 80px 40px 80px; float: left;">
                <div id="clicknoaniflipcard">
                    <div>
                        <!-- Front Panel -->
                        <div class="bignumber">$593K</div>
                        <div class="details">Q1 Sales</div>
                    </div>
                    <div>
                        <!-- Back Panel -->
                        <table class="datatable" cellspacing="0">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Jan</th>
                                    <td>$182,092</td>
                                </tr>
                                <tr>
                                    <th>Feb</th>
                                    <td>$223,234</td>
                                </tr>
                                <tr>
                                    <th>Mar</th>
                                    <td>$187,340</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <td>$592,666</td>
                                </tr>
                            </tfoot>
                        </table>
                        <p class="info">
                            <span class="ui-icon ui-icon-info"></span>Up 18% ($123K)
                        </p>
                    </div>
                </div>
                <br /><br />Click Action; No Aimation
            </div>
            <div class="cardcontainer" style="padding: 0 80px 40px 80px; float: left;">
                <div id="hoverhflipcard">
                    <div>
                        <!-- Front Panel -->
                        <div class="bignumber">$593K</div>
                        <div class="details">Q1 Sales</div>
                    </div>
                    <div>
                        <!-- Back Panel -->
                        <table class="datatable" cellspacing="0">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Jan</th>
                                    <td>$182,092</td>
                                </tr>
                                <tr>
                                    <th>Feb</th>
                                    <td>$223,234</td>
                                </tr>
                                <tr>
                                    <th>Mar</th>
                                    <td>$187,340</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <td>$592,666</td>
                                </tr>
                            </tfoot>
                        </table>
                        <p class="info">
                            <span class="ui-icon ui-icon-info"></span>Up 18% ($123K)
                        </p>
                    </div>
                </div>
                <br /><br />Hover Action, Horizontal Flip
            </div>
            <div class="cardcontainer" style="padding: 0 80px 40px 80px; float: left;">
                <div id="hovervflipcard">
                    <div>
                        <!-- Front Panel -->
                        <div class="bignumber">$593K</div>
                        <div class="details">Q1 Sales</div>
                    </div>
                    <div>
                        <!-- Back Panel -->
                        <table class="datatable" cellspacing="0">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Jan</th>
                                    <td>$182,092</td>
                                </tr>
                                <tr>
                                    <th>Feb</th>
                                    <td>$223,234</td>
                                </tr>
                                <tr>
                                    <th>Mar</th>
                                    <td>$187,340</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <td>$592,666</td>
                                </tr>
                            </tfoot>
                        </table>
                        <p class="info">
                            <span class="ui-icon ui-icon-info"></span>Up 18% ($123K)
                        </p>
                    </div>
                </div>
                <br /><br />Hover Action, Vertical Flip
            </div>
            <div class="cardcontainer" style="padding: 0 80px 40px 80px; float: left;">
                <div id="noaniflipcard">
                    <div>
                        <!-- Front Panel -->
                        <div class="bignumber">$593K</div>
                        <div class="details">Q1 Sales</div>
                    </div>
                    <div>
                        <!-- Back Panel -->
                        <table class="datatable" cellspacing="0">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Jan</th>
                                    <td>$182,092</td>
                                </tr>
                                <tr>
                                    <th>Feb</th>
                                    <td>$223,234</td>
                                </tr>
                                <tr>
                                    <th>Mar</th>
                                    <td>$187,340</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <td>$592,666</td>
                                </tr>
                            </tfoot>
                        </table>
                        <p class="info">
                            <span class="ui-icon ui-icon-info"></span>Up 18% ($123K)
                        </p>
                    </div>
                </div>
                <br /><br />Hover Action, No Animation
            </div>

            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
@section description
{
    <p>
         FlipWidget is a wijmo widget that will flip easily your elements in two directions using different mouse events.
    </p>
}

