// http://nnattawat.github.io/flip/

function FlipBinary() {
    var that = this;
    this.endOfDay = null;
    this.startOfDay = null; 
    //  set up the .card divs, those
    //  elements that flip
    //
    //  allow them to grow on mouseover
    $('.card').not('.notThis').addClass('grow').css('cursor','crosshair');
    //  loop through the individual cards
    $('.card').each(function (i, c) {
        //  grab the card
        var $c = $(c);
        //  store the decimal value
        var dv = $c.find('.back').text();
        //  set up the options for the card flip
        var x = {
            'axis': 'y',
            'speed': 400,
            'ignoreClick': true,
            'trigger': 'none'
        };
        //  store the decimal value in the div
        $c.attr('title', dv);
        //   alternate the flip axis
        if (i % 2 === 0) {
            x.axis = 'x';
        }
        //  set the flip options
        $c.flip(x);
    });
    /**
     * Create and display the binary values of elements
     * once a second...just like a clock
     * @param  {string} what    the type of element being parsed (seconds, day ect.)
     * @param  {int} value   the current value for that second
     * @param  {int} padding the length needed for the binary string being displayed
     * <= this.setClock() && this.makeDates() && this.runClock()
     * => this.makeDate()
     */
    function getBi(what, value, padding) {
        //  turn the value into a binary string
        var bi = Number(value).toString(2),
            //  store the value for display
            biDisplay = bi,
            //  difference from the required length to the actual length
            diff = padding - bi.length,
            i = 0,
            z = '',
            $card;
        //  create any padding need for the string
        while (i < diff) {
            z += '0';
            i += 1;
        }
        //  assemble the full string
        bi = z + bi;
        //  loop through each 0 || 1 of the binary string
        _.forEach(bi, function (r, i) {
            //  grab the dom element (.card) by the index of the what or element being parsed
            //  example $('#' + 's' + 4) === seconds.eq(4)
            $card = $('#' + what + i);
            //  if 0 and $card is showing its on/1 value
            //  turn it off
            if (Number(r) === 0 && $card.hasClass('isOn')) {
                $card.removeClass('isOn').addClass('isOff');
                $card.flip(false);
            } else if (Number(r) === 1 && $card.hasClass('isOff')) {
                //  if 1 and $card is not showing its  on/1 value
                //  turn it on
                $card.removeClass('isOff').addClass('isOn');
                $card.flip(true);
            }
        });
        //  output the unpadded binary string
        $('#bi' + what).text(biDisplay);
        //  based on what is being parsed/displayed
        //  amend  the display
        //  h = hours
        if (what === 'h') {
            // show hide the am/pm icon
            if (value < 12) {
                $('.fa-moon-o').addClass('hide').hide();
                $('.fa-sun-o').removeClass('hide').show();
            } else {
                $('.fa-sun-o').addClass('hide').hide();
                $('.fa-moon-o').removeClass('hide').show();
            }
            //  display the hours
            $('#hours').text(moment().format('HH') + ' / ' + moment().format('hh'));
            //  refresh the icon is visible at noon
            if (value === 12) {
                $('#ampm').flip(true);
                //  midnight -> need a new Date
            } else if (value === 0) {
                that.makeDates();
            }
        } else if (what === 'm') {
            $('#minutes').text(moment().format('mm'));
        } else if (what === 's') {
            $('#seconds').text(moment().format('ss'));
        } else if (what === 'wd') {
            $('#wd').html(value + ' / ' + moment().format('ddd'));
        } else if (what === 'd') {
            $('#d').text(value);
        } else if (what === 'mh') {
            $('#mh').text(value + ' / ' + moment().format('MMMM'));
        }

    }
    /**
     * Set the Weekday, day and montth
     * Called at start up and at 00:00:00 each day
     * <= this.setClock() && getBi()
     * => this.getBi()
     */
    this.makeDates = function () {
        var now = moment();
        that.endOfDay = moment().endOf('d').unix();
        that.startOfDay = moment().startOf('d').unix();
        //  show the sun/moon - am/pm card
        $('#ampm').flip(true);
        //  weekday
        getBi('wd', now.weekday(), 4);
        // day
        getBi('d', now.format('DD'), 5);
        // month
        getBi('mh', now.format('MM'), 4);
    };
    this.startEnd = function(){
        var u = moment().unix(),
        	a = that.endOfDay - u,
            p = u - that.startOfDay;
        $('#a').text(a);
        $('#p').text(p);
        $('#bip').text(p.toString(2));
        $('#bia').text(a.toString(2));
    };
    /**
     * Set the 1 second redraw of the date/time display
     * using the moment.js libary
     * <= this.setClock()
     * => getBi() && this.makeDates()
     */
    this.runClock = function () {
        setInterval(function () {
            // grab and store the current time
            var now = moment(),
                x = now.seconds();
            that.startEnd();
            //  seconds must be parsed...well..every second
            //  's' = what
            //   x  = value
            //   6  = padding (the length required for the binary string)
            getBi('s', x, 6);
            //  set minutes, just once a minute
            if (x === 0) {
                x = now.minutes();
                getBi('m', x, 6);
                //  set the hours just once an hour
                if (x === 0) {
                    x = now.hours();
                    getBi('h', x, 5);
                    //  set the day just once a day
                    if (x === 0) {
                        that.makeDates();
                    }
                }
            }
        }, 1000);
    };
    /**
     * Set up the clock prior to running
     * s = seconds
     * m = minutes
     * h = hours
     */
    this.setClock = function () {
        var now = moment();
        that.makeDates();
        getBi('h', now.hours(), 5);
        getBi('m', now.minutes(), 6);
        getBi('s', now.seconds(), 6);
        //  call the setInterval()
        that.runClock();
    };
    /**
     * Set the display values to either decimal or binary
     * @param  {string} style the style to display
     * <= $('#sbd').click()
     * => \\
     */
    this.changeStyle = function (style) {
        // show binary, just 1 and 0
        if (style === 'bi') {
            $('.front').not('.notThis').text('0');
            $('.back').not('.notThis').text('1');
            $('.output').addClass('hide').hide();
            return;
        }
        $('.output').removeClass('hide').show();
        //  set the decimal values
        $('.front').each(function (i, e) {
            $(e).not('.notThis').empty().text($(e).parent().attr('title'));
        });
        $('.back').each(function (i, e) {
            $(e).not('.notThis').empty().text($(e).parent().attr('title'));
        });
    };
    /**
     * Add some fun to the sun/moon icons - spin them
     */
    $('#ampm').on("mouseover", function () {
        var $i = $(this).find('i').not(':hidden');
        $i.addClass('fa-spin');
    }).on("mouseout", function () {
        var $i = $(this).find('i').not(':hidden');
        $i.removeClass('fa-spin');
    });
}
// create and run the clock
var f = new FlipBinary();
f.setClock();
//  switch binary/decimal display
$('#sbd').on("click", function (e) {
    var style = $(this).attr('data-showing');
    e.preventDefault();
    if (style === 'dec') {
        f.changeStyle('bi');
        $(this)
            .attr('data-showing', 'bi')
            .text('Show Integers')
        	.removeClass("btn-danger")
        	.addClass('btn-success');
        return;
    }
    f.changeStyle('dec');
    $(this)
        .attr('data-showing', 'dec')
        .text('Hide Integers')
    	.removeClass("btn-success")
        .addClass('btn-danger');
});
//  flip.js has a lot of things going on when you click a $('div').flip()
//  I just want the animation, therefore stop propagation
$(document).on("click", function (e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
});