var g_data = null
g_data['homeurl'] = '/'
$(document).ready(function() {
    // Add in puzzle.css
    $('body').append('<link rel="stylesheet" href="/nb/frameworks/puzzle.css"></link>');
    // Add in /ext/jquery.easing.min.js
    $('body').append('<script type="text/javascript" src="/ext/jquery.easing.min.js"></script>');
    // No play buttons for each section
    $('body').append('<style>.section .tool{display:none;}</style>');

    // Update title
    if (g_data) {
        if (g_data.lessontitle) {
            $('header .editor-title h1').text(g_data.lessontitle);

        } else if (g_data.title) {
            $('header .editor-title h1').text(g_data.title);
        }
    }

    nb._formatContent = nb.formatContent;
    nb.formatContent = function() {};

    // Load the notebook
    var promise = nb.loadNotebook($('.nbbody').attr('nid'), $('.nbbody').attr('uid'));
    promise.then(function() {
        nb.viewMode();

        // Hide navigation button
        $('header .sliding-menu').css('display', 'none');

        // Set up home url
        $('header .command.home').attr('href', g_data['homeurl']);
        if (g_data.rateOnExit) {
            $('header .command.home')
                .attr('rate-activity', 'chapter')
                .attr('activity-id', g_data.chapterid)
                .attr('activity-title', g_data.title);
          
            // @tsilva HACK: this causes issues now because scope access
            // is not allowed while angular is running in production mode 
            // (we had it running in dev mode before); this code isn't needed
            // at all anyway as long as angular is bootstrapped
            /*
            var content = $('header .command.home');
            angular.element(document).injector().invoke(function($compile) {
                var scope = angular.element(content).scope();
                scope = scope ? scope : angular.element(document).data('angular-scope');
                debugger;
                $compile(content)(scope);
            });*/
        }

        // Hide save and edit buttons
        $('header .save').css('display', 'none');
        $('header .view').css('display', 'none');
        $('header .edit').css('display', 'none');

        // Don't use size if vertically split
        if (!$('.nbbody').hasClass('vsplit')) {
            // Set up the player size
            if (g_data['playersize']) {
                if (g_data['playersize'] == '0') {
                    $('.nbbody .nbcontent')
                        .css('width', 'auto')
                        .css('margin-left', '100px')
                        .css('margin-right', '100px');
                    $('.nbbody .viewer').css('display', 'none');
                    $('.nbbody .nbdivider').css('display', 'none');

                } else {
                    var playerSize = parseInt(g_data['playersize']);
                    var contentSize = 100 - playerSize;
                    $('.nbbody .nbcontent').css('width', contentSize + '%');
                    $('.nbbody .viewer').css('width', playerSize + '%');
                    $('.nbbody .nbdivider').css('left', contentSize + '%');
                }

            // Use player size of 60% for default
            } else {
                $('.nbbody .nbcontent').css('width', '40%');
                $('.nbbody .viewer').css('width', '60%');
                $('.nbbody .nbdivider').css('left', '40%');
            }
        }

        // Global help?
        if (g_data['globalhelp'] == 'true' && $('.nbcontent .section[data-type=texthelp]').length > 0) {
            $('body').append('<style>.nbcontent .section[data-type=texthelp]{display:none;}</style>');
            // Add help button
            var $help = $('<a href="#" class="btn-round blue micro" style="margin-left:10px">Help</a>');
            $help.on('click', function(evt) {
                evt.preventDefault();

                var contents = '';
                $('.nbcontent .section[data-type=texthelp] .section-content div').each(function() {
                    contents += $(this).html();
                });
                nb.showDialog('', '', contents);
            });
            $('header .editor-title').append($help);
        }

        // Global info/hint?
        if (g_data['globalinfo'] == 'true' && $('.nbcontent .section[data-type=texthint]').length > 0) {
            $('body').append('<style>.nbcontent .section[data-type=texthint]{display:none;}</style>');
            // Add info button
            var $help = $('<a href="#" class="btn-round blue micro" style="margin-left:10px">Info</a>');
            $help.on('click', function(evt) {
                evt.preventDefault();

                var contents = '';
                $('.nbcontent .section[data-type=texthint] .section-content div').each(function() {
                    contents += $(this).html();
                });
                nb.showDialog('', '', contents);
            });
            $('header .editor-title').append($help);
        }

        // No before unload
        window.removeEventListener('beforeunload', window.nb.beforeLeaving);

        // Add a play/stop button
        var $playstop = $('<div id="playstop"><a class="play btn-round orange medium" href="#"><span class="fa fa-play-circle"></span> Play</a><a class="stop btn-round red medium" href="#"><span class="fa fa-stop-circle"></span> Stop</a></div>');
        $('.viewer').append($playstop);
        $playstop.find('.play').on('click', function(e) {
            e.preventDefault();

            // Find a puzzle section and run it
            if (nb.runCode('solve')) {
                $('#playstop').addClass('playing');
            }
        });
        $playstop.find('.stop').on('click', function(e) {
            e.preventDefault();
            $('#playstop').removeClass('playing');

            $('.viewer iframe').attr('src', '/nb/project/' + $('.nbbody').attr('nid') + '/sandbox/-/');
        });
    });
});

function triggerPluginEvent(name, params, callback) {
    $('#playstop').removeClass('playing');

    // Wrong logic
    if (name == 'wrong') {
        showFlashAnimation('wrong', 'tryagain', callback);

    // Correct
    } else if (name == 'right') {
        if (callback) {
            callback();

        } else {
            showFlashAnimation('right', 'right1', function() {
                window.location = '/ide/plugins/done';
            });
        }

    // Syntax errors
    } else if (name == 'error') {
        if (window.parent && window.parent.nb) {
            var p = {
                'icon' : 'error',
                'title' : 'Oops!',
                'message' : 'It looks like you have a syntax error in your code.'
            };
            if (params) {
                p = $.extend(p, params);
            }
            window.parent.nb.showDialog(p.icon, p.title, p.message);
        }
    }

    if (window.parent && window.parent.nb) {
        window.parent.nb.runDone();
    }
}

var g_startTime = Date.now();
function showCongrats(doneCallback) {
    var $dialogHtml = $('<div class="dialog-modal-bg" style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:rgba(0,0,0,.7);">' +
        '<div class="congrats-box">' +
            '<div class="congrats-body">' +
                '<div class="stars"><div class="star one"><span class="icon-star-3"></span></div><div class="star two"><span class="icon-star-3"></span></div><div class="star three"><span class="icon-star-3"></span></div></div>'+
                                '<h2 style="font-size:32px;margin:-10px 0 10px;font-weight:400;">10 XP</h2>' +
                                '<div class="stats">' +
                '</div>' +
            '</div>' +
            '<div class="congrats-footer" style="position:relative">' +
                '<a class="redobutton button secondary hollow" href="#">Replay </a>' +
                '<a class="nextbutton button secondary" href="#">Next</a>' +
            '</div>' +
        '</div>' +
    '</div>');

    var time = Math.floor((Date.now() - g_startTime) / 1000);
    var mins = Math.floor(time / 60);
    var secs = time - mins * 60;
    if (secs < 10) {
        secs = '0' + secs;
    }
    time = mins + ':' + secs;
    $dialogHtml.find('.stats').append('<label><span>Time:</span><span>' + time + '</span></label>');

    $('body').append($dialogHtml);
    window.setTimeout(function(){
        $dialogHtml.find(".star.one").addClass('earned');
        window.setTimeout(function(){
            $dialogHtml.find(".star.two").addClass('earned');
            window.setTimeout(function(){
                $dialogHtml.find(".star.three").addClass('earned');
            }, 750);
        }, 750);
    }, 100);
    $dialogHtml.find('a.redobutton').click(function() {
        window.location.reload();
        return false;
    });
    var disabledSeconds = 10;
    var nextIsDisabled = false;
    $dialogHtml.find('a.nextbutton').click(function() {
        if (nextIsDisabled) {
            return false;
        }
        nextIsDisabled = true;
        setTimeout(function(){
            nextIsDisabled = false;
        }, disabledSeconds*1000);
        if (doneCallback) {
            doneCallback();
        }
        return false;
    });

    var $feedbackIcon = $('<img class="feedback-icon" src="/image/feedback/icon-feedback.png"/>');
    $('body').append($feedbackIcon);
    var $feedbackHtml = $(
        '<div class="feedback-box small" style="padding:20px 0;">' +
            '<div class="feedback-body">Share your feedback!</div>' +
            '<div class="feedback-body-content">' +
                '<a class="dismiss" href="#">×</a>' +
                '<h3>Rate this level</h3>' +
                '<ul>' +
                    '<li><a href="#" data-rating="0"><img src="/image/feedback/rating-meh-cropped.png"/><span>Bad</span></a></li>' +
                    '<li><a href="#" data-rating="1"><img src="/image/feedback/rating-good-cropped.png"/><span>Ok</span></a></li>' +
                    '<li><a href="#" data-rating="2"><img src="/image/feedback/rating-great-cropped.png"/><span>Great!</span></a></li>' +
                '</ul>' +
            '</div>' +
        '</div>');
    $('body').append($feedbackHtml);
    $feedbackHtml.find('li a').click(function() {
        $(this).parents('ul').find('li').addClass('disabled');
        $(this).parents('li').removeClass('disabled');
        $.ajax({
            url:'/api/activityrate',
            data:{
                activityType:'puzzle',
                activityId:'',
                activityContext:'',
                rating: $(this).attr('data-rating')
            }
        });
        $feedbackHtml.addClass('hidden');
        return false;
    });
    $feedbackHtml.find('a.dismiss').click(function() {
        $feedbackHtml.addClass('hidden');
        return false;
    });
    $feedbackHtml.click(function() {
        if ($(this).hasClass('small')) {
            $feedbackHtml.removeClass('hidden').removeClass('small');
            return false;
        }
    });
    $feedbackIcon.click(function() {
        $feedbackHtml.removeClass('hidden').removeClass('small');
        return false;
    });
}

function showFlashAnimation(baselayer, toplayer, doneCallback) {
    var maxSize = 450;
    $('#baselayer').detach();
    $('#toplayer').detach();
    $('body').append('<div id="baselayer" class="' + baselayer + '"></div>').append('<div id="toplayer" class="' + toplayer + '"></div>');
    $('#baselayer')
        .css('top', window.innerHeight / 2)
        .css('left', window.innerWidth / 2)
        .animate({
            width: maxSize,
            height: maxSize,
            top: (window.innerHeight - maxSize) / 2,
            left: (window.innerWidth - maxSize) / 2
        }, {
            duration: 1500,
            easing: 'easeOutElastic',
            complete: function() {
                $('#baselayer')
                    .animate({
                        width: 0,
                        height: 0,
                        top: window.innerHeight / 2,
                        left: window.innerWidth / 2
                    }, 500);
            }
        });
    window.setTimeout(function() {
        $('#toplayer')
            .css('top', window.innerHeight / 2)
            .css('left', window.innerWidth / 2)
            .animate({
                width: maxSize,
                height: maxSize,
                top: (window.innerHeight - maxSize) / 2,
                left: (window.innerWidth - maxSize) / 2
            }, {
                duration: 1000,
                easing: 'easeOutElastic',
                complete: function() {
                    $('#toplayer')
                        .animate({
                            width: 0,
                            height: 0,
                            top: window.innerHeight / 2,
                            left: window.innerWidth / 2
                        }, 500, function() {
                            if (baselayer == "right") {
                                showCongrats(doneCallback);

                            } else if (doneCallback) {
                                doneCallback();
                            }
                        });
                    }
            });
        }, 250);
};