// class: one of the classes in our school
var Class = function (grade, clas, total) {
    this.grade = grade;
    this.clas = clas;
    // human-readable ID
    this.id = this.grade + '-' + this.clas;
    this.total = total;
    this.points = $.jStorage.get(this.grade + "_" + this.clas + "_" + "points", 0);
    this.time = $.jStorage.get(this.grade + "_" + this.clas + "_" + "time", 0);
};

// save a class to local storage
Class.prototype.save = function () {
    $.jStorage.set(this.grade + "_" + this.clas + "_" + "points", this.points);
    $.jStorage.set(this.grade + "_" + this.clas + "_" + "time", this.time);
};

// modify a class's points or time
Class.prototype.changePoints = function (change) {
    this.points = this.points + change;
    this.save();
    updateClasses();
}
Class.prototype.changeTime = function (change) {
    this.time = this.time + change;
    this.save();
    updateClasses();
}

// now set up all our classes
var classes = [
    new Class(5, 1, 30),
    new Class(5, 2, 30),
    new Class(5, 3, 30),
    new Class(6, 1, 19),
    new Class(6, 2, 18),
    new Class(6, 3, 19)
];

// method to sort them
classes.sortClasses = function () {
    function classesComparison(a, b)
    {
        if (a.points < b.points)
            return 1;
        if (b.points < a.points)
            return -1;
        return 0;
    }
    this.sort(classesComparison);
}

// function to update the HTML display of classes
function updateClasses ()
{
    // first update the HTML displayed

    classes.sortClasses();
    $classes = $('#classes');
    $classes.html("");

    function appendClassHTML (clas, index, array)
    {
        // strings for display

        // background colour should be green for two classes with the highest points (and our array is sorted by points)
        var colour = index < 2 ? ' style="background-color: lightgreen;"' : '';

        // time
        var minutes = '' + Math.floor(clas.time / 60);
        var seconds = '' + (clas.time - minutes * 60);
        if (seconds.length == 1)
            seconds = "0" + seconds;

        // build and append HTML

        var html = '<div class="col-md-2"' + colour + '>'
            + '<h1>' + clas.id + '</h1>'
            + '<p class="text-center">'
            + '<a id="' + clas.id + 'points" class="btn btn-info btn-lg">' + clas.points + ' points</a>'
            + '</p>'
            + '<p class="text-center">'
            + '<a id="' + clas.id + 'time" class="btn btn-warning">' + minutes + ':' + seconds + ' this week</a>'
            + '</p>'
            + '<p class="text-center">'
            + '<a id="' + clas.id + 'random" class="btn btn-success">Lucky number</a>'
            + '</p>'
            + '</div>';

        $classes.append(html);
    }
    classes.forEach(appendClassHTML);

    // now put functions on the buttons we just added to our HTML

    function powerClassButtons (clas, index, array)
    {
        var $pointsbutton = $('#' + clas.id + 'points');
        $pointsbutton.button();
        $pointsbutton.click(function () {
            // get the change from user
            var change = parseInt(prompt("Change points by how much?", 0));

            // give grade 5 their bonus
            if (clas.grade == 5)
                change = change * 1.5;

            // modify class points
            classes[index].changePoints(change);
        });

        var $timebutton = $('#' + clas.id + 'time');
        $timebutton.button();
        $timebutton.click(function () {
            var change = parseInt(prompt("Change time by how many seconds?",
                                         timeWastingClock.getTime().time - 1));
            classes[index].changeTime(change);
        });

        var $randombutton = $('#' + clas.id + 'random');
        $randombutton.button();
        $randombutton.click(function () {
            alert(getRandomInt(1, clas.total));
        });
    }
    classes.forEach(powerClassButtons);
}

$.ionSound({
    sounds: [
        {
            name: "klaxon"
        },
        {
            name: "button_tiny",
        },
        {
            name: "cheonjae",
        },
        {
            name: "onetwothree",
        },
        {
            name: "school_bell",
        }
    ],
    // volume: 0.5,
    path: "sounds/",
    preload: true
});

function MyFlipClock (obj, options)
{
    options.autoStart = false;
    FlipClock.Factory.call(this, obj, 0, options);
    this.go = function (seconds) {
        this.setTime(seconds);
        this.start();
    };
    this.reset = function () {
        this.stop();
        this.setTime(0);
    };
    this.custom = function () {
        var minutes = parseInt(prompt('Number of minutes', '0'));
        var seconds = parseInt(prompt('Number of seconds', '0'));
        this.go(minutes * 60 + seconds);
    };
}
MyFlipClock.prototype = new FlipClock.Factory;

var timeWastingClock = new MyFlipClock($('.time-wasting-clock'), {
    callbacks:{
        interval:function () {
            $.ionSound.play("button_tiny");
            if (timeWastingClock)
                var time = timeWastingClock.getTime().time;
            else
                time = 0;
            $.jStorage.set("time_wasted", time);
        }
    }
});
timeWastingClock.setTime($.jStorage.get("time_wasted", 0));

timeWastingClock.running = false;
timeWastingClock.reset = $.proxy(function () {
    if (this.getTime() != 1)
    {
        if (confirm('Are you sure?'))
        {
            if (this.running)
            {
                $('#timeWastingClockGo').html('Start <u>t</u>imer');
                this.stop();
                this.running = false;
            }
            $.jStorage.set('time_wasted', 0);
            this.setTime(0);
        }
    }
}, timeWastingClock);
timeWastingClock.toggle = $.proxy(function () {
    if (this.running)
    {
        $('#timeWastingClockGo').html('Start <u>t</u>imer');
        this.stop();
        this.running = false;
    }
    else
    {
        $('#timeWastingClockGo').html('Stop <u>t</u>imer');
        this.start();
        this.running = true;
    }
}, timeWastingClock);

var activityClock = new MyFlipClock($('.activity-countdown'), {
    countdown:true,
    callbacks:{
        stop:function () {
            $.ionSound.play("cheonjae");
        }
    }
});

$(document).bind('keydown', 't', timeWastingClock.toggle);
$(document).bind('keydown', 'j', timeWastingClock.toggle);
$(document).bind('keydown', 'space', timeWastingClock.toggle);
$(document).bind('keydown', 'd', toggleDateStyle);

$(document).bind('keydown', 'k', function (){$.ionSound.play("klaxon");});
$(document).bind('keydown', 'o', function (){$.ionSound.play("onetwothree");});
$(document).bind('keydown', 'b', function (){$.ionSound.play("school_bell");});

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

// mplungjan on stack overflow: http://stackoverflow.com/a/15397495
function nth(d) {
    if(d>3 && d<21) return 'th'; // thanks kennebec
    switch (d % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
    }
}

function toggleDateStyle()
{
    var currentDate = $('#date').html();
    var today = new Date();

    var month = "January,February,March,April,May,June,July,August,September,October,November,December"
        .split(",")[today.getMonth()];
    var day = "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday"
        .split(",")[today.getDay()];
    var date = today.getDate();
    var British = day + " " + date + "<sup>" + nth(date) + "</sup> " + month + " " + today.getFullYear();
    var American = day + " " + month + " " + date + "<sup>" + nth(date) + "</sup>, " + today.getFullYear();

    if ($.jStorage.get("date_style", 0) == 0)
    {
        $('#date').html(American);
        $.jStorage.set("date_style", 1);
    }
    else
    {
        $('#date').html(British);
        $.jStorage.set("date_style", 0);
    }
}

// set initial date to British style
if ($.jStorage.get("date_style", 0) == 0)
    $.jStorage.set("date_style", 1);
else
    $.jStorage.set("date_style", 0);
toggleDateStyle();

// expire chosen date style each day
$.jStorage.setTTL("date_style", 86400);

$(document).bind('keydown', 's', timeWastingClock.reset);
$(document).bind('keydown', 'r', activityClock.reset);
$(document).bind('keydown', 'c', activityClock.custom);

$(document).bind('keydown', '0', function (){activityClock.go(30);});
$(document).bind('keydown', '1', function (){activityClock.go(60);});
$(document).bind('keydown', '9', function (){activityClock.go(90);});
$(document).bind('keydown', '2', function (){activityClock.go(120);});
$(document).bind('keydown', '3', function (){activityClock.go(180);});
$(document).bind('keydown', '4', function (){activityClock.go(240);});
$(document).bind('keydown', '5', function (){activityClock.go(300);});
$(document).bind('keydown', '6', function (){activityClock.go(360);});
$(document).bind('keydown', '7', function (){activityClock.go(420);});
$(document).bind('keydown', '8', function (){activityClock.go(480);});

$(document).ready(function(){
    $('#klaxon').button();
    $('#klaxon').click(function (){$.ionSound.play("klaxon");});

    $('#bell').button();
    $('#bell').click(function (){$.ionSound.play("school_bell");});

    $('#one-two-three').button();
    $('#one-two-three').click(function (){$.ionSound.play("onetwothree");});

    $('#timeWastingClockGo').button();
    $('#timeWastingClockGo').click(timeWastingClock.toggle);

    $('#timeWastingClockReset').button();
    $('#timeWastingClockReset').click(timeWastingClock.reset);

    $('#activityClockReset').button();
    $('#activityClockReset').click(activityClock.reset);

    $('#activityClockCustom').button();
    $('#activityClockCustom').click(activityClock.custom);

    $('#activityClock30s').button();
    $('#activityClock30s').click(function (){activityClock.go(30);})

    $('#activityClock60s').button();
    $('#activityClock60s').click(function (){activityClock.go(60);})

    $('#activityClock90s').button();
    $('#activityClock90s').click(function (){activityClock.go(90);})

    $('#activityClock120s').button();
    $('#activityClock120s').click(function (){activityClock.go(120);})

    $('#activityClock180s').button();
    $('#activityClock180s').click(function (){activityClock.go(180);})
    
    $('#activityClock240s').button();
    $('#activityClock240s').click(function (){activityClock.go(240);})

    $('#activityClock300s').button();
    $('#activityClock300s').click(function (){activityClock.go(300);})

    $('#date-toggle').button();
    $('#date-toggle').click(function (){toggleDateStyle();});

    $('#reset-clocks').button();
    $('#reset-clocks').click(function (){
        if (confirm("Are you sure?"))
            classes.forEach(function (clas) {
                clas.time = 0;
                clas.save();
            });
        updateClasses();
    });

    $('#backup-to-textarea').button();
    $('#backup-to-textarea').click(function (){
        var now = new Date();
        var text = "\n========================= [ " + now.toString() + "] ====\n";
        var i = 0;
        for (i = 0; i < classes.length; i++)
        {
            text = text
                + 'Class: '
                + classes[i].grade 
                + '-' 
                + classes[i].clas 
                + "\t" 
                + 'Points: ' 
                + classes[i].points 
                + "\t" 
                + 'Time wasted this week so far (seconds): ' 
                + classes[i].time 
                + "\n";
        }
        var text = text + "=========================================================================\n";
        $('#backup').html('<textarea id="backup-textarea">' + text + "</textarea>");
        
        // select all text in the textarea on click: http://stackoverflow.com/a/5797700
        $("#backup-textarea").focus(function() {
            var $this = $(this);
            $this.select();

            // Work around Chrome's little problem
            $this.mouseup(function() {
                // Prevent further mouseup intervention
                $this.unbind("mouseup");
                return false;
            });
        });
    });

    updateClasses();
});