@{
    ViewData["Title"] = "LiveFavicon";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Tinycon</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Miscellaneous</a>
            </li>
            <li class="active breadcrumb-item">
                <strong>Tinycon</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Tinycon</h5>
                </div>

                <div class="ibox-content">

                    <strong>A small library for manipulating the favicon</strong>
                    <p>
                        Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.
                    </p>

                    <p>
                        Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.
                    </p>

                    <div class="text-center p-lg">

                        <a href="#" class="btn btn-white" id="iconExample1">Set icon to 1</a>
                        <a href="#" class="btn btn-white" id="iconExample2">Set icon to 1000</a>
                        <a href="#" class="btn btn-white" id="iconExample3">Set icon to string 'In'</a>
                        <a href="#" class="btn btn-primary" id="iconExample4">Set icon with custom color</a>

                    </div>

                    <h3>
                        <a aria-hidden="true" href="#options" class="anchor" id="user-content-options"><span class="octicon octicon-link"></span></a>Options
                    </h3>
                    <p>Tinycon can take a range of options to customise the look</p>
                    <ul class="task-list">
                        <li>width: the width of the alert bubble</li>
                        <li>height: the height of the alert bubble</li>
                        <li>font: a css string to use for the fontface (recommended to leave this)</li>
                        <li>colour: the foreground font colour</li>
                        <li>background: the alert bubble background colour</li>
                        <li>fallback: should we fallback to a number in brackets for browsers that don't support canvas/dynamic favicons? Boolean, or use the string 'force' to ensure a title update even in supported browsers.</li>
                        <li>abbreviate: should tinycon shrink large numbers such as 1000 to an abbreviated version (1k). Boolean, defaults to true</li>
                    </ul>

                    <p><strong>Example usage</strong></p>
                    <pre>
Tinycon.setBubble(6);
Tinycon.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    colour: '#ffffff',
    background: '#549A2F',
    fallback: true
});
                            </pre>

                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <environment names="Development,Staging,Production">
        <script src="~/lib/tinycon/tinycon.min.js"></script>
    </environment>

    <script type="text/javascript">
        $(document).ready(function () {

            $('#iconExample1').click(function () {

                Tinycon.setBubble(1);

                Tinycon.setOptions({
                    background: '#f03d25'
                });
            });

            $('#iconExample2').click(function () {

                Tinycon.setBubble(1000);

                Tinycon.setOptions({
                    background: '#f03d25'
                });
            });

            $('#iconExample3').click(function () {

                Tinycon.setBubble('In');

                Tinycon.setOptions({
                    background: '#f03d25'
                });
            });

            $('#iconExample4').click(function () {

                Tinycon.setOptions({
                    background: '#e0913b'
                });
                Tinycon.setBubble(8);

            });

        });
    </script>
}