//
// TODO:
//
// - button to hide activity clock and display div with clock that
// counts up, for a stopwatch which we occasionally need
//

// class: one of the classes in our school
var Class = function (grade, clas, total, modifier) {
    this.grade = grade;
    this.clas = clas;
    this.modifier = modifier;
    // 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, 25, 1.5),
    new Class(5, 2, 25, 1.5),
    new Class(5, 3, 25, 1.5),
    new Class(6, 1, 25, 1),
    new Class(6, 2, 25, 1),
    new Class(6, 3, 25, 1),
    new Class(6, 4, 25, 1)
];

// 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();
    $classes1 = $('#classes-1');
    $classes1.html("");
    $classes2 = $('#classes-2');
    $classes2.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;"' : '';

        // column width
        var width = index < 3 ? 4 : 3

        // 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-' + width + '"' + colour + '>'
        var html = '<div class="col-md-' + width + '">'
            + '<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>';

        if (index < 3)
            $classes1.append(html);
        else
            $classes2.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
            var multiplier = parseFloat(prompt("Multiplier to previous change?", clas.modifier))
            change = parseInt(change * multiplier);

            // 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: "too_noisy",
        },
        {
            name: "sit_down_quickly",
        },
        {
            name: "school_bell",
        }
    ],
    // volume: 0.5,
    path: "sounds/",
    preload: true
});

// function to make a FlipClock with a few additional features.  Not
// as neat a constructor as I would like because I don't fully
// understand how jQuery works
function MyFlipClock (jq, obj)
{
    var thisClock = new FlipClock(jq, obj);

    thisClock.go = $.proxy(function (seconds) {
        this.setTime(seconds);
        this.start();
    }, thisClock);
    thisClock.reset = $.proxy(function () {
        thisClock.stop();
        thisClock.setTime(0);
    }, thisClock);
    thisClock.custom = $.proxy(function () {
        var minutes = parseInt(prompt('Number of minutes', '0'));
        var seconds = parseInt(prompt('Number of seconds', '0'));
        thisClock.go(minutes * 60 + seconds);
    }, thisClock);

    return thisClock;
}

var timeWastingClock = MyFlipClock($('.time-wasting-clock'), {
    autoStart:false,
    callbacks:{
        interval:function () {
            $.ionSound.play("button_tiny");
            var time = timeWastingClock.getTime().time;
            $.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 = MyFlipClock($('.activity-countdown'), {
    autoStart:false,
    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");});

    $('#too-noisy').button();
    $('#too-noisy').click(function (){$.ionSound.play("too_noisy");});

    $('#sit-down-quickly').button();
    $('#sit-down-quickly').click(function (){$.ionSound.play("sit_down_quickly");});

    $('#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\n\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 + "===========================================================================";
        $('#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();
});