$(document).ready(function() {
    $("#file").change(function() {
        var input_upload = $('#file').val().replace(/C:\\fakepath\\/i, '');
        var clean = input_upload.replace(/.mp3/i, '');
        $("#file_name").val(clean);
    });
});

/* -------------------- Check Browser --------------------- */

function browser() {

    var isOpera = !!(window.opera && window.opera.version);  // Opera 8.0+
    var isFirefox = testCSS('MozBoxSizing');                 // FF 0.8+
    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
    var isChrome = !isSafari && testCSS('WebkitTransform');  // Chrome 1+
    //var isIE = /*@cc_on!@*/false || testCSS('msTransform');  // At least IE6

    function testCSS(prop) {
        return prop in document.documentElement.style;
    }

    if (isOpera) {

        return false;

    } else if (isSafari || isChrome) {

        return true;

    } else {

        return false;

    }

}

/* ---------- IE8 list style hack (:nth-child(odd)) ---------- */

jQuery(document).ready(function($) {

    if ($('.messagesList').width()) {

        if (jQuery.browser.version.substring(0, 2) == "8.") {

            $('ul.messagesList li:nth-child(2n+1)').addClass('odd');

        }

    }

});

$(document).ready(function() {


    $("#username").focus(function() {

        $(this).parent(".input-prepend").addClass("input-prepend-focus");

    });

    $("#username").focusout(function() {

        $(this).parent(".input-prepend").removeClass("input-prepend-focus");

    });

    $("#password").focus(function() {

        $(this).parent(".input-prepend").addClass("input-prepend-focus");

    });

    $("#password").focusout(function() {

        $(this).parent(".input-prepend").removeClass("input-prepend-focus");

    });


    /* ---------- Add class .active to current link  ---------- */
    $('ul.main-menu li a').each(function() {

        if ($($(this))[0].href == String(window.location)) {

            $(this).parent().addClass('active');

        }

    });

    $('ul.main-menu li ul li a').each(function() {

        if ($($(this))[0].href == String(window.location)) {

            $(this).parent().addClass('active');
            $(this).parent().parent().show();

        }

    });

    /* ---------- Submenu  ---------- */

    $('.dropmenu').click(function(e) {

        e.preventDefault();

        $(this).parent().find('ul').slideToggle();

    });

    /* ---------- Acivate Functions ---------- */
    template_functions();
    init_masonry();
    sparkline_charts();
    charts();
    calendars();
    growlLikeNotifications();
    widthFunctions();

    if (jQuery.browser.version.substring(0, 2) == "8.") {

        //disable jQuery Knob

    } else {

        circle_progess();

    }

    chart();
    messageLike();

});

/* ---------- Like/Dislike ---------- */

function messageLike() {

    if ($('.messagesList')) {

        $('.messagesList').on('click', '.star', function() {

            $(this).removeClass('star');

            $(this).addClass('dislikes');

            //here add your function

        });

        $('.messagesList').on('click', '.dislikes', function() {

            $(this).removeClass('dislikes');

            $(this).addClass('star');

            //here add your function

        });

    }

}

/* ---------- Check Retina ---------- */

function retina() {

    retinaMode = (window.devicePixelRatio > 1);

    return retinaMode;

}

/* ---------- Chart ---------- */

function chart() {

    if ($('.verticalChart')) {

        $('.singleBar').each(function() {

            var theColorIs = $(this).parent().parent().parent().css("background");

            var percent = $(this).find('.value span').html();

            $(this).find('.value span').css('color', theColorIs);

            $(this).find('.value').animate({height: percent}, 2000, function() {

                $(this).find('span').fadeIn();

            });

        });

    }

}

/* ---------- Masonry Gallery ---------- */

function init_masonry() {
    var $container = $('.masonry-gallery');

    var gutter = 6;
    var min_width = 250;
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.masonry-thumb',
            gutterWidth: gutter,
            isAnimated: true,
            columnWidth: function(containerWidth) {
                var num_of_boxes = (containerWidth / min_width | 0);

                var box_width = (((containerWidth - (num_of_boxes - 1) * gutter) / num_of_boxes) | 0);

                if (containerWidth < min_width) {
                    box_width = containerWidth;
                }

                $('.masonry-thumb').width(box_width);

                return box_width;
            }
        });
    });
}

/* ---------- Numbers Sepparator ---------- */

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1.$2");
    return x;
}

/* ---------- Template Functions ---------- */

function template_functions() {

    /* ---------- ToDo List Action Buttons ---------- */

    $(".todo-remove").click(function() {

        $(this).parent().parent().fadeTo("slow", 0.00, function() { //fade
            $(this).slideUp("slow", function() { //slide up
                $(this).remove(); //then remove from the DOM
            });
        });


        return false;
    });

    $(".todo-list").find('.action').each(function() {

        $(this).click(function() {

            if ($(this).hasClass('icon-check-empty')) {

                $(this).removeClass('icon-check-empty');
                $(this).addClass('icon-check');

                $(this).parent().css('text-decoration', 'line-through');

            } else {

                $(this).removeClass('icon-check');
                $(this).addClass('icon-check-empty');

                $(this).parent().css('text-decoration', 'none');

            }

            return false;

        });

    });



    /* ---------- Skill Bars ---------- */
    $(".meter > span").each(function() {

        var getColor = $(this).parent().css('borderTopColor');

        $(this).css('background', getColor);

        $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 3000);
    });

    /* ---------- Disable moving to top ---------- */
    $('a[href="#"][data-top!=true]').click(function(e) {
        e.preventDefault();
    });

    /* ---------- Text editor ---------- */
    $('.cleditor').cleditor();

    /* ---------- Datapicker ---------- */
    $('.datepicker').datepicker();

    /* ---------- Notifications ---------- */
    $('.noty').click(function(e) {
        e.preventDefault();
        var options = $.parseJSON($(this).attr('data-noty-options'));
        noty(options);
    });

    /* ---------- Uniform ---------- */
    $("input:checkbox, input:radio, input:file").not('[data-no-uniform="true"],#uniform-is-ajax').uniform();

    /* ---------- Choosen ---------- */
    $('[data-rel="chosen"],[rel="chosen"]').chosen();

    /* ---------- Tabs ---------- */
    $('#myTab a:first').tab('show');
    $('#myTab a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });

    /* ---------- Makes elements soratble, elements that sort need to have id attribute to save the result ---------- */
    $('.sortable').sortable({
        revert: true,
        cancel: '.btn,.box-content,.nav-header',
        update: function(event, ui) {
            //line below gives the ids of elements, you can make ajax call here to save it to the database
            //console.log($(this).sortable('toArray'));
        }
    });

    /* ---------- Tooltip ---------- */
    $('[rel="tooltip"],[data-rel="tooltip"]').tooltip({"placement": "bottom", delay: {show: 400, hide: 200}});

    /* ---------- Popover ---------- */
    $('[rel="popover"],[data-rel="popover"]').popover();

    /* ---------- File Manager ---------- */
    var elf = $('.file-manager').elfinder({
        url: 'misc/elfinder-connector/connector.php'  // connector URL (REQUIRED)
    }).elfinder('instance');

    /* ---------- Star Rating ---------- */
    $('.raty').raty({
        score: 4 //default stars
    });

    /* ---------- Uploadify ---------- */
    $('#file_upload').uploadify({
        'swf': 'misc/uploadify.swf',
        'uploader': 'misc/uploadify.php'
                // Put your options here
    });

    /* ---------- Fullscreen ---------- */
    $('#toggle-fullscreen').button().click(function() {
        var button = $(this), root = document.documentElement;
        if (!button.hasClass('active')) {
            $('#thumbnails').addClass('modal-fullscreen');
            if (root.webkitRequestFullScreen) {
                root.webkitRequestFullScreen(
                        window.Element.ALLOW_KEYBOARD_INPUT
                        );
            } else if (root.mozRequestFullScreen) {
                root.mozRequestFullScreen();
            }
        } else {
            $('#thumbnails').removeClass('modal-fullscreen');
            (document.webkitCancelFullScreen ||
                    document.mozCancelFullScreen ||
                    $.noop).apply(document);
        }
    });

    /* ---------- Datable ---------- */
    $('.datatable').dataTable({
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
    $('.btn-close').click(function(e) {
        e.preventDefault();
        $(this).parent().parent().parent().fadeOut();
    });
    $('.btn-minimize').click(function(e) {
        e.preventDefault();
        var $target = $(this).parent().parent().next('.box-content');
        if ($target.is(':visible'))
            $('i', $(this)).removeClass('chevron-up').addClass('chevron-down');
        else
            $('i', $(this)).removeClass('chevron-down').addClass('chevron-up');
        $target.slideToggle();
    });
    $('.btn-setting').click(function(e) {
        e.preventDefault();
        $('#myModal').modal('show');
    });


    /* ---------- Progress  ---------- */

    $(".simpleProgress").progressbar({
        value: 89
    });

    $(".progressAnimate").progressbar({
        value: 1,
        create: function() {
            $(".progressAnimate .ui-progressbar-value").animate({"width": "100%"}, {
                duration: 10000,
                step: function(now) {
                    $(".progressAnimateValue").html(parseInt(now) + "%");
                },
                easing: "linear"
            })
        }
    });

    $(".progressUploadAnimate").progressbar({
        value: 1,
        create: function() {
            $(".progressUploadAnimate .ui-progressbar-value").animate({"width": "100%"}, {
                duration: 20000,
                easing: 'linear',
                step: function(now) {
                    $(".progressUploadAnimateValue").html(parseInt(now * 40.96) + " Gb");
                },
                complete: function() {
                    $(".progressUploadAnimate + .field_notice").html("<span class='must'>Upload Finished</span>");
                }
            })
        }
    });

    if ($(".taskProgress")) {

        $(".taskProgress").each(function() {

            var endValue = parseInt($(this).html());

            $(this).progressbar({
                value: endValue
            });

            $(this).parent().find(".percent").html(endValue + "%");

        });

    }

    if ($(".progressBarValue")) {

        $(".progressBarValue").each(function() {

            var endValueHTML = $(this).find(".progressCustomValueVal").html();

            var endValue = parseInt(endValueHTML);

            $(this).find(".progressCustomValue").progressbar({

                value: 1,
                create: function() {
                    $(this).find(".ui-progressbar-value").animate({"width": endValue + "%"}, {
                        duration: 5000,
                        step: function(now) {

                            $(this).parent().parent().parent().find(".progressCustomValueVal").html(parseInt(now) + "%");
                        },
                        easing: "linear"
                    })
                }
            });

        });

    }


    /* ---------- Custom Slider ---------- */
    $(".sliderSimple").slider();

    $(".sliderMin").slider({
        range: "min",
        value: 180,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderMinLabel").html("$" + ui.value);
        }
    });

    $(".sliderMin-1").slider({
        range: "min",
        value: 50,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderMin1Label").html("$" + ui.value);
        }
    });

    $(".sliderMin-2").slider({
        range: "min",
        value: 100,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderMin2Label").html("$" + ui.value);
        }
    });

    $(".sliderMin-3").slider({
        range: "min",
        value: 150,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderMin3Label").html("$" + ui.value);
        }
    });

    $(".sliderMin-4").slider({
        range: "min",
        value: 250,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderMin4Label").html("$" + ui.value);
        }
    });

    $(".sliderMin-5").slider({
        range: "min",
        value: 350,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderLabel").html("$" + ui.value);
        }
    });

    $(".sliderMin-6").slider({
        range: "min",
        value: 450,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderLabel").html("$" + ui.value);
        }
    });

    $(".sliderMin-7").slider({
        range: "min",
        value: 550,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderLabel").html("$" + ui.value);
        }
    });

    $(".sliderMin-8").slider({
        range: "min",
        value: 650,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderLabel").html("$" + ui.value);
        }
    });


    $(".sliderMax").slider({
        range: "max",
        value: 280,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $(".sliderMaxLabel").html("$" + ui.value);
        }
    });

    $(".sliderRange").slider({
        range: true,
        min: 0,
        max: 500,
        values: [192, 470],
        slide: function(event, ui) {
            $(".sliderRangeLabel").html("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
        }
    });

    $("#sliderVertical-1").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
    });

    $("#sliderVertical-2").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 40,
    });

    $("#sliderVertical-3").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 30,
    });

    $("#sliderVertical-4").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 15,
    });

    $("#sliderVertical-5").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 40,
    });

    $("#sliderVertical-6").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 80,
    });

    $("#sliderVertical-7").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
    });

    $("#sliderVertical-8").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 40,
    });

    $("#sliderVertical-9").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 30,
    });

    $("#sliderVertical-10").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 15,
    });

    $("#sliderVertical-11").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 40,
    });

    $("#sliderVertical-12").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 80,
    });

}

/* ---------- Circle Progess Bars ---------- */

function circle_progess() {

    var divElement = $('div'); //log all div elements

    if (retina()) {

        $(".whiteCircle").knob({
            'min': 0,
            'max': 100,
            'readOnly': true,
            'width': 240,
            'height': 240,
            'bgColor': 'rgba(255,255,255,0.5)',
            'fgColor': 'rgba(255,255,255,0.9)',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true
        });

        $(".circleStat").css('zoom', 0.5);
        $(".whiteCircle").css('zoom', 0.999);


    } else {

        $(".whiteCircle").knob({
            'min': 0,
            'max': 100,
            'readOnly': true,
            'width': 120,
            'height': 120,
            'bgColor': 'rgba(255,255,255,0.5)',
            'fgColor': 'rgba(255,255,255,0.9)',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true
        });

    }



    $(".circleStatsItemBox").each(function() {

        var value = $(this).find(".value > .number").html();
        var unit = $(this).find(".value > .unit").html();
        var percent = $(this).find("input").val() / 100;

        countSpeed = 2300 * percent;

        endValue = value * percent;

        $(this).find(".count > .unit").html(unit);
        $(this).find(".count > .number").countTo({

            from: 0,
            to: endValue,
            speed: countSpeed,
            refreshInterval: 50

        });

        //$(this).find(".count").html(value*percent + unit);

    });

}



/* ---------- Calendars ---------- */

function calendars() {


    $('#external-events div.external-event').each(function() {

        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#main_calendar').fullCalendar({
        header: {
            left: 'title',
            right: 'prev,next today,month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d + 4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

    $('#main_calendar_phone').fullCalendar({
        header: {
            left: 'title',
            right: 'prev,next'
        },
        defaultView: 'agendaDay',
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d + 4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });


    $('#calendar').fullCalendar({
        header: {
            left: 'title',
            right: 'prev,next today,month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        }
    });

}

/* ---------- Sparkline Charts ---------- */

function sparkline_charts() {

    //generate random number for charts
    randNum = function() {
        //return Math.floor(Math.random()*101);
        return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
    }

    var chartColours = ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'];

    //sparklines (making loop with random data for all 7 sparkline)
    i = 1;
    for (i = 1; i < 9; i++) {
        var data = [[1, 3 + randNum()], [2, 5 + randNum()], [3, 8 + randNum()], [4, 11 + randNum()], [5, 14 + randNum()], [6, 17 + randNum()], [7, 20 + randNum()], [8, 15 + randNum()], [9, 18 + randNum()], [10, 22 + randNum()]];
        placeholder = '.sparkLineStats' + i;

        if (retina()) {

            $(placeholder).sparkline(data, {
                width: 160, //Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
                height: 80, //Height of the chart - Defaults to 'auto' (line height of the containing tag)
                lineColor: '#ffffff', //Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
                fillColor: 'rgba(255,255,255,0.2)', //Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
                spotColor: '#ffffff', //The CSS colour of the final value marker. Set to false or an empty string to hide it
                maxSpotColor: '#ffffff', //The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
                minSpotColor: '#ffffff', //The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
                spotRadius: 2, //Radius of all spot markers, In pixels (default: 1.5) - Integer
                lineWidth: 1//In pixels (default: 1) - Integer
            });

            $(placeholder).css('zoom', 0.5);

        } else {

            if ($.browser.msie && parseInt($.browser.version, 10) === 8) {

                $(placeholder).sparkline(data, {
                    width: 80, //Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
                    height: 40, //Height of the chart - Defaults to 'auto' (line height of the containing tag)
                    lineColor: '#ffffff', //Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
                    fillColor: '#ffffff', //Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
                    spotColor: '#ffffff', //The CSS colour of the final value marker. Set to false or an empty string to hide it
                    maxSpotColor: '#ffffff', //The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
                    minSpotColor: '#ffffff', //The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
                    spotRadius: 2, //Radius of all spot markers, In pixels (default: 1.5) - Integer
                    lineWidth: 1//In pixels (default: 1) - Integer
                });

            } else {

                $(placeholder).sparkline(data, {
                    width: 80, //Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
                    height: 40, //Height of the chart - Defaults to 'auto' (line height of the containing tag)
                    lineColor: '#ffffff', //Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
                    fillColor: 'rgba(255,255,255,0.2)', //Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
                    spotColor: '#ffffff', //The CSS colour of the final value marker. Set to false or an empty string to hide it
                    maxSpotColor: '#ffffff', //The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
                    minSpotColor: '#ffffff', //The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
                    spotRadius: 2, //Radius of all spot markers, In pixels (default: 1.5) - Integer
                    lineWidth: 1//In pixels (default: 1) - Integer
                });

            }

        }

    }

    if ($(".boxchart")) {

        if (retina()) {

            $(".boxchart").sparkline('html', {
                type: 'bar',
                height: '120', // Double pixel number for retina display
                barWidth: '8', // Double pixel number for retina display
                barSpacing: '2', // Double pixel number for retina display
                barColor: '#ffffff',
                negBarColor: '#eeeeee'}
            );

            $(".boxchart").css('zoom', 0.5);

        } else {

            $(".boxchart").sparkline('html', {
                type: 'bar',
                height: '60',
                barWidth: '4',
                barSpacing: '1',
                barColor: '#ffffff',
                negBarColor: '#eeeeee'}
            );

        }

    }

}

/* ---------- Charts ---------- */

function charts() {

    function randNum() {
        return ((Math.floor(Math.random() * (1 + 40 - 20))) + 20) * 1200;
    }

    function randNum2() {
        return ((Math.floor(Math.random() * (1 + 40 - 20))) + 20) * 500;
    }

    function randNum3() {
        return ((Math.floor(Math.random() * (1 + 40 - 20))) + 20) * 300;
    }

    function randNum4() {
        return ((Math.floor(Math.random() * (1 + 40 - 20))) + 20) * 100;
    }

    /* ---------- Chart with points ---------- */
    if ($("#stats-chart2").length)
    {
        var pageviews = [[1, 5 + randNum()], [1.5, 10 + randNum()], [2, 15 + randNum()], [2.5, 20 + randNum()], [3, 25 + randNum()], [3.5, 30 + randNum()], [4, 35 + randNum()], [4.5, 40 + randNum()], [5, 45 + randNum()], [5.5, 50 + randNum()], [6, 55 + randNum()], [6.5, 60 + randNum()], [7, 65 + randNum()], [7.5, 70 + randNum()], [8, 75 + randNum()], [8.5, 80 + randNum()], [9, 85 + randNum()], [9.5, 90 + randNum()], [10, 85 + randNum()], [10.5, 80 + randNum()], [11, 75 + randNum()], [11.5, 80 + randNum()], [12, 75 + randNum()], [12.5, 70 + randNum()], [13, 65 + randNum()], [13.5, 75 + randNum()], [14, 80 + randNum()], [14.5, 85 + randNum()], [15, 90 + randNum()], [15.5, 95 + randNum()], [16, 5 + randNum()], [16.5, 15 + randNum()], [17, 15 + randNum()], [17.5, 10 + randNum()], [18, 15 + randNum()], [18.5, 20 + randNum()], [19, 25 + randNum()], [19.5, 30 + randNum()], [20, 35 + randNum()], [20.5, 40 + randNum()], [21, 45 + randNum()], [21.5, 50 + randNum()], [22, 55 + randNum()], [22.5, 60 + randNum()], [23, 65 + randNum()], [23.5, 70 + randNum()], [24, 75 + randNum()], [24.5, 80 + randNum()], [25, 85 + randNum()], [25.5, 90 + randNum()], [26, 85 + randNum()], [26.5, 80 + randNum()], [27, 75 + randNum()], [27.5, 80 + randNum()], [28, 75 + randNum()], [28.5, 70 + randNum()], [29, 65 + randNum()], [29.5, 75 + randNum()], [30, 80 + randNum()]];
        var visits = [[1, randNum2() - 10], [2, randNum2() - 10], [3, randNum2() - 10], [4, randNum2()], [5, randNum2()], [6, 4 + randNum2()], [7, 5 + randNum2()], [8, 6 + randNum2()], [9, 6 + randNum2()], [10, 8 + randNum2()], [11, 9 + randNum2()], [12, 10 + randNum2()], [13, 11 + randNum2()], [14, 12 + randNum2()], [15, 13 + randNum2()], [16, 14 + randNum2()], [17, 15 + randNum2()], [18, 15 + randNum2()], [19, 16 + randNum2()], [20, 17 + randNum2()], [21, 18 + randNum2()], [22, 19 + randNum2()], [23, 20 + randNum2()], [24, 21 + randNum2()], [25, 14 + randNum2()], [26, 24 + randNum2()], [27, 25 + randNum2()], [28, 26 + randNum2()], [29, 27 + randNum2()], [30, 31 + randNum2()]];
        var visitors = [[1, 5 + randNum3()], [2, 10 + randNum3()], [3, 15 + randNum3()], [4, 20 + randNum3()], [5, 25 + randNum3()], [6, 30 + randNum3()], [7, 35 + randNum3()], [8, 40 + randNum3()], [9, 45 + randNum3()], [10, 50 + randNum3()], [11, 55 + randNum3()], [12, 60 + randNum3()], [13, 65 + randNum3()], [14, 70 + randNum3()], [15, 75 + randNum3()], [16, 80 + randNum3()], [17, 85 + randNum3()], [18, 90 + randNum3()], [19, 85 + randNum3()], [20, 80 + randNum3()], [21, 75 + randNum3()], [22, 80 + randNum3()], [23, 75 + randNum3()], [24, 70 + randNum3()], [25, 65 + randNum3()], [26, 75 + randNum3()], [27, 80 + randNum3()], [28, 85 + randNum3()], [29, 90 + randNum3()], [30, 95 + randNum3()]];
        var newVisitors = [[1, randNum4() - 10], [2, randNum4() - 10], [3, randNum4() - 10], [4, randNum4()], [5, randNum4()], [6, 4 + randNum4()], [7, 5 + randNum4()], [8, 6 + randNum4()], [9, 6 + randNum4()], [10, 8 + randNum4()], [11, 9 + randNum4()], [12, 10 + randNum4()], [13, 11 + randNum4()], [14, 12 + randNum4()], [15, 13 + randNum4()], [16, 14 + randNum4()], [17, 15 + randNum4()], [18, 15 + randNum4()], [19, 16 + randNum4()], [20, 17 + randNum4()], [21, 18 + randNum4()], [22, 19 + randNum4()], [23, 20 + randNum4()], [24, 21 + randNum4()], [25, 14 + randNum4()], [26, 24 + randNum4()], [27, 25 + randNum4()], [28, 26 + randNum4()], [29, 27 + randNum4()], [30, 31 + randNum4()]];

        var plot = $.plot($("#stats-chart2"),
                [{data: visitors,
                        label: "Visits",
                        lines: {show: true,
                            fill: false,
                            lineWidth: 2
                        },
                        shadowSize: 0
                    }, {
                        data: pageviews,
                        bars: {show: true,
                            fill: false,
                            barWidth: 0.1,
                            align: "center",
                            lineWidth: 5,
                        }
                    }
                ], {

            grid: {hoverable: true,
                clickable: true,
                tickColor: "rgba(255,255,255,0.05)",
                borderWidth: 0
            },
            legend: {
                show: false
            },
            colors: ["rgba(255,255,255,0.8)", "rgba(255,255,255,0.6)", "rgba(255,255,255,0.4)", "rgba(255,255,255,0.2)"],
            xaxis: {ticks: 15, tickDecimals: 0, color: "rgba(255,255,255,0.8)"},
            yaxis: {ticks: 5, tickDecimals: 0, color: "rgba(255,255,255,0.8)"},
        });

        /*
         [ { data: visitors, label: "Visits"}], {
         series: {
         lines: { show: true,
         lineWidth: 2
         },
         points: { show: true,
         lineWidth: 2
         },
         shadowSize: 0
         },
         grid: { hoverable: true,
         clickable: true,
         tickColor: "rgba(255,255,255,0.025)",
         borderWidth: 0
         },
         legend: {
         show: false
         },
         colors: ["rgba(255,255,255,0.8)", "rgba(255,255,255,0.6)", "rgba(255,255,255,0.4)", "rgba(255,255,255,0.2)"],
         xaxis: {ticks:15, tickDecimals: 0},
         yaxis: {ticks:5, tickDecimals: 0},
         });
         */



        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#dfeffc',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#stats-chart2").bind("plothover", function(event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

    }

    function randNumFB() {
        return ((Math.floor(Math.random() * (1 + 40 - 20))) + 20);
    }

    /* ---------- Chart with points ---------- */
    if ($("#facebookChart").length)
    {
        var likes = [[1, 5 + randNumFB()], [2, 10 + randNumFB()], [3, 15 + randNumFB()], [4, 20 + randNumFB()], [5, 25 + randNumFB()], [6, 30 + randNumFB()], [7, 35 + randNumFB()], [8, 40 + randNumFB()], [9, 45 + randNumFB()], [10, 50 + randNumFB()], [11, 55 + randNumFB()], [12, 60 + randNumFB()], [13, 65 + randNumFB()], [14, 70 + randNumFB()], [15, 75 + randNumFB()], [16, 80 + randNumFB()], [17, 85 + randNumFB()], [18, 90 + randNumFB()], [19, 85 + randNumFB()], [20, 80 + randNumFB()], [21, 75 + randNumFB()], [22, 80 + randNumFB()], [23, 75 + randNumFB()], [24, 70 + randNumFB()], [25, 65 + randNumFB()], [26, 75 + randNumFB()], [27, 80 + randNumFB()], [28, 85 + randNumFB()], [29, 90 + randNumFB()], [30, 95 + randNumFB()]];

        var plot = $.plot($("#facebookChart"),
                [{data: likes, label: "Fans"}], {
            series: {
                lines: {show: true,
                    lineWidth: 2,
                    fill: true, fillColor: {colors: [{opacity: 0.5}, {opacity: 0.2}]}
                },
                points: {show: true,
                    lineWidth: 2
                },
                shadowSize: 0
            },
            grid: {hoverable: true,
                clickable: true,
                tickColor: "#f9f9f9",
                borderWidth: 0
            },
            colors: ["#3B5998"],
            xaxis: {ticks: 6, tickDecimals: 0},
            yaxis: {ticks: 3, tickDecimals: 0},
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#dfeffc',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#facebookChart").bind("plothover", function(event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

    }

    function randNumTW() {
        return ((Math.floor(Math.random() * (1 + 40 - 20))) + 20);
    }

    /* ---------- Chart with points ---------- */
    if ($("#twitterChart").length)
    {
        var followers = [[1, 5 + randNumTW()], [2, 10 + randNumTW()], [3, 15 + randNumTW()], [4, 20 + randNumTW()], [5, 25 + randNumTW()], [6, 30 + randNumTW()], [7, 35 + randNumTW()], [8, 40 + randNumTW()], [9, 45 + randNumTW()], [10, 50 + randNumTW()], [11, 55 + randNumTW()], [12, 60 + randNumTW()], [13, 65 + randNumTW()], [14, 70 + randNumTW()], [15, 75 + randNumTW()], [16, 80 + randNumTW()], [17, 85 + randNumTW()], [18, 90 + randNumTW()], [19, 85 + randNumTW()], [20, 80 + randNumTW()], [21, 75 + randNumTW()], [22, 80 + randNumTW()], [23, 75 + randNumTW()], [24, 70 + randNumTW()], [25, 65 + randNumTW()], [26, 75 + randNumTW()], [27, 80 + randNumTW()], [28, 85 + randNumTW()], [29, 90 + randNumTW()], [30, 95 + randNumTW()]];

        var plot = $.plot($("#twitterChart"),
                [{data: followers, label: "Followers"}], {
            series: {
                lines: {show: true,
                    lineWidth: 2,
                    fill: true, fillColor: {colors: [{opacity: 0.5}, {opacity: 0.2}]}
                },
                points: {show: true,
                    lineWidth: 2
                },
                shadowSize: 0
            },
            grid: {hoverable: true,
                clickable: true,
                tickColor: "#f9f9f9",
                borderWidth: 0
            },
            colors: ["#1BB2E9"],
            xaxis: {ticks: 6, tickDecimals: 0},
            yaxis: {ticks: 3, tickDecimals: 0},
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#dfeffc',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#twitterChart").bind("plothover", function(event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

    }


    if ($("#activeUsers").length) {
        var d1 = [];

        for (var i = 0; i <= 160; i += 1) {
            d1.push([i, parseInt(Math.random() * 123123)]);
        }

        var stack = 0, bars = true, lines = false, steps = false;

        function plotWithOptions2() {

            $.plot($("#activeUsers"), [d1], {
                series: {
                    bars: {show: bars,
                        fill: true,
                        barWidth: 0.1,
                        align: "center",
                        lineWidth: 5,
                        fillColor: {colors: [{opacity: 1}, {opacity: 0.5}]}
                    },
                },
                grid: {hoverable: true,
                    clickable: true,
                    tickColor: "#f6f6f6",
                    borderWidth: 0,
                },
                colors: ["#CBE968"],
                xaxis: {ticks: 0, tickDecimals: 0, tickFormatter: function(v, a) {
                        return v
                    }},
                yaxis: {ticks: 5, tickDecimals: 0, tickFormatter: function(v) {
                        return v
                    }},

            });
        }

        plotWithOptions2();

    }

    /* ---------- Chart with points ---------- */
    if ($("#stats-chart").length)
    {
        var visitors = [[1, randNum() - 10], [2, randNum() - 10], [3, randNum() - 10], [4, randNum()], [5, randNum()], [6, 4 + randNum()], [7, 5 + randNum()], [8, 6 + randNum()], [9, 6 + randNum()], [10, 8 + randNum()], [11, 9 + randNum()], [12, 10 + randNum()], [13, 11 + randNum()], [14, 12 + randNum()], [15, 13 + randNum()], [16, 14 + randNum()], [17, 15 + randNum()], [18, 15 + randNum()], [19, 16 + randNum()], [20, 17 + randNum()], [21, 18 + randNum()], [22, 19 + randNum()], [23, 20 + randNum()], [24, 21 + randNum()], [25, 14 + randNum()], [26, 24 + randNum()], [27, 25 + randNum()], [28, 26 + randNum()], [29, 27 + randNum()], [30, 31 + randNum()]];

        var plot = $.plot($("#stats-chart"),
                [{data: visitors, label: "visitors"}], {
            series: {
                lines: {show: true,
                    lineWidth: 3,
                    fill: true, fillColor: {colors: [{opacity: 0.5}, {opacity: 0.2}]}
                },
                points: {show: true},
                shadowSize: 2
            },
            grid: {hoverable: true,
                clickable: true,
                tickColor: "#eee",
                borderWidth: 0,
            },
            colors: ["#b1d3d4"],
            xaxis: {ticks: 11, tickDecimals: 0},
            yaxis: {ticks: 11, tickDecimals: 0},
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#dfeffc',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#stats-chart").bind("plothover", function(event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });



        $("#sincos").bind("plotclick", function(event, pos, item) {
            if (item) {
                $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                plot.highlight(item.series, item.datapoint);
            }
        });
    }



    /* ---------- Chart with points ---------- */
    if ($("#sincos").length)
    {
        var sin = [], cos = [];

        for (var i = 0; i < 14; i += 0.5) {
            sin.push([i, Math.sin(i) / i]);
            cos.push([i, Math.cos(i)]);
        }

        var plot = $.plot($("#sincos"),
                [{data: sin, label: "sin(x)/x"}, {data: cos, label: "cos(x)"}], {
            series: {
                lines: {show: true,
                    lineWidth: 2,
                },
                points: {show: true},
                shadowSize: 2
            },
            grid: {hoverable: true,
                clickable: true,
                tickColor: "#dddddd",
                borderWidth: 0
            },
            yaxis: {min: -1.2, max: 1.2},
            colors: ["#FA5833", "#2FABE9"]
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#dfeffc',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#sincos").bind("plothover", function(event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });



        $("#sincos").bind("plotclick", function(event, pos, item) {
            if (item) {
                $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                plot.highlight(item.series, item.datapoint);
            }
        });
    }

    /* ---------- Flot chart ---------- */
    if ($("#flotchart").length)
    {
        var d1 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.25)
            d1.push([i, Math.sin(i)]);

        var d2 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.25)
            d2.push([i, Math.cos(i)]);

        var d3 = [];
        for (var i = 0; i < Math.PI * 2; i += 0.1)
            d3.push([i, Math.tan(i)]);

        $.plot($("#flotchart"), [
            {label: "sin(x)", data: d1},
            {label: "cos(x)", data: d2},
            {label: "tan(x)", data: d3}
        ], {
            series: {
                lines: {show: true},
                points: {show: true}
            },
            xaxis: {
                ticks: [0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
            },
            yaxis: {
                ticks: 10,
                min: -2,
                max: 2
            },
            grid: {tickColor: "#dddddd",
                borderWidth: 0
            },
            colors: ["#FA5833", "#2FABE9", "#FABB3D"]
        });
    }

    /* ---------- Stack chart ---------- */
    if ($("#stackchart").length)
    {
        var d1 = [];
        for (var i = 0; i <= 10; i += 1)
            d1.push([i, parseInt(Math.random() * 30)]);

        var d2 = [];
        for (var i = 0; i <= 10; i += 1)
            d2.push([i, parseInt(Math.random() * 30)]);

        var d3 = [];
        for (var i = 0; i <= 10; i += 1)
            d3.push([i, parseInt(Math.random() * 30)]);

        var stack = 0, bars = true, lines = false, steps = false;

        function plotWithOptions() {
            $.plot($("#stackchart"), [d1, d2, d3], {
                series: {
                    stack: stack,
                    lines: {show: lines, fill: true, steps: steps},
                    bars: {show: bars, barWidth: 0.6},
                },
                colors: ["#FA5833", "#2FABE9", "#FABB3D"]
            });
        }

        plotWithOptions();

        $(".stackControls input").click(function(e) {
            e.preventDefault();
            stack = $(this).val() == "With stacking" ? true : null;
            plotWithOptions();
        });
        $(".graphControls input").click(function(e) {
            e.preventDefault();
            bars = $(this).val().indexOf("Bars") != -1;
            lines = $(this).val().indexOf("Lines") != -1;
            steps = $(this).val().indexOf("steps") != -1;
            plotWithOptions();
        });
    }

    /* ---------- Device chart ---------- */

    var data = [
        {label: "Desktop", data: 73},
        {label: "Mobile", data: 27}
    ];

    /* ---------- Donut chart ---------- */
    if ($("#deviceChart").length)
    {
        $.plot($("#deviceChart"), data,
                {
                    series: {
                        pie: {
                            innerRadius: 0.6,
                            show: true
                        }
                    },
                    legend: {
                        show: true
                    },
                    colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
                });
    }

    var data = [
        {label: "iOS", data: 20},
        {label: "Android", data: 7},
        {label: "Linux", data: 11},
        {label: "Mac OSX", data: 14},
        {label: "Windows", data: 48}
    ];

    /* ---------- Donut chart ---------- */
    if ($("#osChart").length)
    {
        $.plot($("#osChart"), data,
                {
                    series: {
                        pie: {
                            innerRadius: 0.6,
                            show: true
                        }
                    },
                    legend: {
                        show: true
                    },
                    colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
                });
    }

    /* ---------- Pie chart ---------- */
    var data = [
        {label: "Internet Explorer", data: 12},
        {label: "Mobile", data: 27},
        {label: "Safari", data: 85},
        {label: "Opera", data: 64},
        {label: "Firefox", data: 90},
        {label: "Chrome", data: 112}
    ];

    if ($("#piechart").length)
    {
        $.plot($("#piechart"), data,
                {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    legend: {
                        show: false
                    },
                    colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
                });

        function pieHover(event, pos, obj)
        {
            if (!obj)
                return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
        }
        $("#piechart").bind("plothover", pieHover);
    }

    /* ---------- Donut chart ---------- */
    if ($("#donutchart").length)
    {
        $.plot($("#donutchart"), data,
                {
                    series: {
                        pie: {
                            innerRadius: 0.5,
                            show: true
                        }
                    },
                    legend: {
                        show: false
                    },
                    colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
                });
    }




    // we use an inline data source in the example, usually data would
    // be fetched from a server
    var data = [], totalPoints = 300;
    function getRandomData() {
        if (data.length > 0)
            data = data.slice(1);

        // do a random walk
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 50;
            var y = prev + Math.random() * 10 - 5;
            if (y < 0)
                y = 0;
            if (y > 100)
                y = 100;
            data.push(y);
        }

        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }

    // setup control widget
    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function() {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1)
                updateInterval = 1;
            if (updateInterval > 2000)
                updateInterval = 2000;
            $(this).val("" + updateInterval);
        }
    });

    /* ---------- Realtime chart ---------- */
    if ($("#serverLoad").length)
    {
        var options = {
            series: {shadowSize: 1},
            lines: {show: true, lineWidth: 3, fill: true, fillColor: {colors: [{opacity: 0.9}, {opacity: 0.9}]}},
            yaxis: {min: 0, max: 100, tickFormatter: function(v) {
                    return v + "%";
                }},
            xaxis: {show: false},
            colors: ["#FA5833"],
            grid: {tickColor: "#f9f9f9",
                borderWidth: 0,
            },
        };
        var plot = $.plot($("#serverLoad"), [getRandomData()], options);
        function update() {
            plot.setData([getRandomData()]);
            // since the axes don't change, we don't need to call plot.setupGrid()
            plot.draw();

            setTimeout(update, updateInterval);
        }

        update();
    }

    if ($("#serverLoad2").length)
    {
        var options = {
            series: {shadowSize: 1},
            lines: {show: true, lineWidth: 2, fill: true, fillColor: {colors: [{opacity: 0.9}, {opacity: 0.9}]}},
            yaxis: {min: 0, max: 100, tickFormatter: function(v) {
                    return v + "%";
                }, color: "rgba(255,255,255,0.8)"},
            xaxis: {show: false, color: "rgba(255,255,255,0.8)"},
            colors: ["rgba(255,255,255,0.95)"],
            grid: {tickColor: "rgba(255,255,255,0.15)",
                borderWidth: 0,
            },
        };
        var plot = $.plot($("#serverLoad2"), [getRandomData()], options);
        function update() {
            plot.setData([getRandomData()]);
            // since the axes don't change, we don't need to call plot.setupGrid()
            plot.draw();

            setTimeout(update, updateInterval);
        }

        update();
    }

    if ($("#realtimechart").length)
    {
        var options = {
            series: {shadowSize: 1},
            lines: {fill: true, fillColor: {colors: [{opacity: 1}, {opacity: 0.1}]}},
            yaxis: {min: 0, max: 100},
            xaxis: {show: false},
            colors: ["#F4A506"],
            grid: {tickColor: "#dddddd",
                borderWidth: 0
            },
        };
        var plot = $.plot($("#realtimechart"), [getRandomData()], options);
        function update() {
            plot.setData([getRandomData()]);
            // since the axes don't change, we don't need to call plot.setupGrid()
            plot.draw();

            setTimeout(update, updateInterval);
        }

        update();
    }
}

function growlLikeNotifications() {

    $('#add-sticky').click(function() {

        var unique_id = $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a sticky notice!',
            // (string | mandatory) the text inside the notification
            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
            // (string | optional) the image to display on the left
            image: 'img/avatar.jpg',
            // (bool | optional) if you want it to fade out on its own or just sit there
            sticky: true,
            // (int | optional) the time you want it to be alive for before fading out
            time: '',
            // (string | optional) the class name you want to apply to that specific message
            class_name: 'my-sticky-class'
        });

        // You can have it return a unique id, this can be used to manually remove it later using
        /* ----------
         setTimeout(function(){

         $.gritter.remove(unique_id, {
         fade: true,
         speed: 'slow'
         });

         }, 6000)
         */

        return false;

    });

    $('#add-regular').click(function() {

        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a regular notice!',
            // (string | mandatory) the text inside the notification
            text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
            // (string | optional) the image to display on the left
            image: 'img/avatar.jpg',
            // (bool | optional) if you want it to fade out on its own or just sit there
            sticky: false,
            // (int | optional) the time you want it to be alive for before fading out
            time: ''
        });

        return false;

    });

    $('#add-max').click(function() {

        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a notice with a max of 3 on screen at one time!',
            // (string | mandatory) the text inside the notification
            text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
            // (string | optional) the image to display on the left
            image: 'img/avatar.jpg',
            // (bool | optional) if you want it to fade out on its own or just sit there
            sticky: false,
            // (function) before the gritter notice is opened
            before_open: function() {
                if ($('.gritter-item-wrapper').length == 3)
                {
                    // Returning false prevents a new gritter from opening
                    return false;
                }
            }
        });

        return false;

    });

    $('#add-without-image').click(function() {

        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a notice without an image!',
            // (string | mandatory) the text inside the notification
            text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
        });

        return false;
    });

    $('#add-gritter-light').click(function() {

        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a light notification',
            // (string | mandatory) the text inside the notification
            text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
            class_name: 'gritter-light'
        });

        return false;
    });

    $('#add-with-callbacks').click(function() {

        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a notice with callbacks!',
            // (string | mandatory) the text inside the notification
            text: 'The callback is...',
            // (function | optional) function called before it opens
            before_open: function() {
                alert('I am called before it opens');
            },
            // (function | optional) function called after it opens
            after_open: function(e) {
                alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
            },
            // (function | optional) function called before it closes
            before_close: function(e, manual_close) {
                var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
                alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
            },
            // (function | optional) function called after it closes
            after_close: function(e, manual_close) {
                var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
                alert('I am called after it closes. ' + manually);
            }
        });

        return false;
    });

    $('#add-sticky-with-callbacks').click(function() {

        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'This is a sticky notice with callbacks!',
            // (string | mandatory) the text inside the notification
            text: 'Sticky sticky notice.. sticky sticky notice...',
            // Stickeh!
            sticky: true,
            // (function | optional) function called before it opens
            before_open: function() {
                alert('I am a sticky called before it opens');
            },
            // (function | optional) function called after it opens
            after_open: function(e) {
                alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
            },
            // (function | optional) function called before it closes
            before_close: function(e) {
                alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
            },
            // (function | optional) function called after it closes
            after_close: function() {
                alert('I am a sticky called after it closes');
            }
        });

        return false;

    });

    $("#remove-all").click(function() {

        $.gritter.removeAll();
        return false;

    });

    $("#remove-all-with-callbacks").click(function() {

        $.gritter.removeAll({
            before_close: function(e) {
                alert("I am called before all notifications are closed.  I am passed the jQuery object containing all  of Gritter notifications.\n" + e);
            },
            after_close: function() {
                alert('I am called after everything has been closed.');
            }
        });
        return false;

    });


}


/* ---------- Additional functions for data table ---------- */
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
{
    return {
        "iStart": oSettings._iDisplayStart,
        "iEnd": oSettings.fnDisplayEnd(),
        "iLength": oSettings._iDisplayLength,
        "iTotal": oSettings.fnRecordsTotal(),
        "iFilteredTotal": oSettings.fnRecordsDisplay(),
        "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
        "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
    };
}
$.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function(oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function(e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };

            $(nPaging).addClass('pagination').append(
                    '<ul>' +
                    '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
                    '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
                    '</ul>'
                    );
            var els = $('a', nPaging);
            $(els[0]).bind('click.DT', {action: "previous"}, fnClickHandler);
            $(els[1]).bind('click.DT', {action: "next"}, fnClickHandler);
        },

        "fnUpdate": function(oSettings, fnDraw) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

            if (oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            } else if (oPaging.iPage <= iHalf) {
                iStart = 1;
                iEnd = iListLength;
            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }

            for (i = 0, iLen = an.length; i < iLen; i++) {
                // remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                // add the new list items and their event handlers
                for (j = iStart; j <= iEnd; j++) {
                    sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                    $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
                            .insertBefore($('li:last', an[i])[0])
                            .bind('click', function(e) {
                                e.preventDefault();
                                oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                                fnDraw(oSettings);
                            });
                }

                // add / remove disabled classes from the static elements
                if (oPaging.iPage === 0) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
});

/* ---------- Page width functions ---------- */

$(window).bind("resize", widthFunctions);

function widthFunctions(e) {

    var winHeight = $(window).height();
    var winWidth = $(window).width();

    var contentHeight = $("#content").height();

    if (winHeight) {

        $("#content").css("min-height", winHeight);

    }

    if (contentHeight) {

        $("#sidebar-left2").css("height", contentHeight);

    }

    if (winWidth < 980 && winWidth > 750) {

        if ($("#sidebar-left").hasClass("span2")) {

            $("#sidebar-left").removeClass("span2");
            $("#sidebar-left").addClass("span1");

        }

        if ($("#content").hasClass("span10")) {

            $("#content").removeClass("span10");
            $("#content").addClass("span11");

        }


        $("a").each(function() {

            if ($(this).hasClass("quick-button-small span1")) {

                $(this).removeClass("quick-button-small span1");
                $(this).addClass("quick-button span2 changed");

            }

        });

        $(".circleStatsItem, .circleStatsItemBox").each(function() {

            var getOnTablet = $(this).parent().attr('onTablet');
            var getOnDesktop = $(this).parent().attr('onDesktop');

            if (getOnTablet) {

                $(this).parent().removeClass(getOnDesktop);
                $(this).parent().addClass(getOnTablet);

            }

        });

        $(".box").each(function() {

            var getOnTablet = $(this).attr('onTablet');
            var getOnDesktop = $(this).attr('onDesktop');

            if (getOnTablet) {

                $(this).removeClass(getOnDesktop);
                $(this).addClass(getOnTablet);

            }

        });

        $(".widget").each(function() {

            var getOnTablet = $(this).attr('onTablet');
            var getOnDesktop = $(this).attr('onDesktop');

            if (getOnTablet) {

                $(this).removeClass(getOnDesktop);
                $(this).addClass(getOnTablet);

            }

        });

        $(".statbox").each(function() {

            var getOnTablet = $(this).attr('onTablet');
            var getOnDesktop = $(this).attr('onDesktop');

            if (getOnTablet) {

                $(this).removeClass(getOnDesktop);
                $(this).addClass(getOnTablet);

            }

        });

    } else {

        if ($("#sidebar-left").hasClass("span1")) {

            $("#sidebar-left").removeClass("span1");
            $("#sidebar-left").addClass("span2");

        }

        if ($("#content").hasClass("span11")) {

            $("#content").removeClass("span11");
            $("#content").addClass("span11");

        }

        $("a").each(function() {

            if ($(this).hasClass("quick-button span2 changed")) {

                $(this).removeClass("quick-button span2 changed");
                $(this).addClass("quick-button-small span1");

            }

        });

        $(".circleStatsItem, .circleStatsItemBox").each(function() {

            var getOnTablet = $(this).parent().attr('onTablet');
            var getOnDesktop = $(this).parent().attr('onDesktop');

            if (getOnTablet) {

                $(this).parent().removeClass(getOnTablet);
                $(this).parent().addClass(getOnDesktop);

            }

        });

        $(".box").each(function() {

            var getOnTablet = $(this).attr('onTablet');
            var getOnDesktop = $(this).attr('onDesktop');

            if (getOnTablet) {

                $(this).removeClass(getOnTablet);
                $(this).addClass(getOnDesktop);

            }

        });

        $(".widget").each(function() {

            var getOnTablet = $(this).attr('onTablet');
            var getOnDesktop = $(this).attr('onDesktop');

            if (getOnTablet) {

                $(this).removeClass(getOnTablet);
                $(this).addClass(getOnDesktop);

            }

        });

        $(".statbox").each(function() {

            var getOnTablet = $(this).attr('onTablet');
            var getOnDesktop = $(this).attr('onDesktop');

            if (getOnTablet) {

                $(this).removeClass(getOnTablet);
                $(this).addClass(getOnDesktop);

            }

        });

    }

    if ($('.timeline')) {

        $('.timeslot').each(function() {

            var timeslotHeight = $(this).find('.task').outerHeight();

            $(this).css('height', timeslotHeight);

        });

    }

}