window.skills_template = null; // either 'skill' or 'skill_match'

// use comma as decimal separator
$.validator.methods.number = function (value, element) {
    return this.optional(element) || /^-?\d+(?:,\d+)?$/.test(value);
};

$(function () {

    change_background();
    
    init_client_components(document);

    //if ($('#SkillPickerSelect').length > 0) {
    $.getJSON('/Job/Picker', init_skill_picker);
    //}

    $('#RemoveSkill').live('click', function () {
        $(this).closest('.SkillsViewModel').remove();
        renum_skills_view_model();
        return false;
    });

    $('.HideNote').live('click', function () {
        var hideBtn = $(this);
        var restoreBtn = hideBtn.siblings('.RestoreNote');
        $.post(hideBtn.attr('href'), function () {
            if ($('[id=ShowHideNotes]').attr("data-showing-hidden") == "True") {
                hideBtn.hide();
                restoreBtn.show();
            }
            else {
                hideBtn.closest('tr').hide('slow', function () {
                    hideBtn.closest('tr').remove();
                });
            }
        });
        return false;
    });

    $('.RestoreNote').live('click', function () {
        var restoreBtn = $(this);
        var hideBtn = restoreBtn.siblings('.HideNote');
        $.post(restoreBtn.attr('href'), function () {
            hideBtn.show();
            restoreBtn.hide();
        });
        return false;
    });

});

function change_background() {

    var randnum = Math.random();
    var inum = 4;
    // Change this number to the number of colors you are using.
    var rand1 = Math.round(randnum * (inum - 1)) + 1;
    var rand2 = Math.round(randnum * (inum - 1)) + 1;

    colors = new Array
    colors[1] = '#E6E6E6';
    colors[2] = '#948678';
    colors[3] = '#787878';
    colors[4] = '#646B8C';

    var color = colors[rand1];
    document.bgColor = color;

    images = new Array
    images[1] = 'url(/content/img/body-bg.png)';
    images[2] = 'url(/content/img/body-bg4.png)';
    images[3] = 'url(/content/img/body-bg5.png)';
    images[4] = 'url(/content/img/body-bg16.png)';

    var image = images[rand2];
    document.body.style.backgroundImage = image;
}

function init_client_components(context) {

    if (context != document) {
        // validation of forms that are loaded using ajax
        $.validator.unobtrusive.parse(context)
    }

    // collapsable/expandable blocks
    $('.Block a[data-content]', context).each(function (index, _elem) {
        var elem = $(_elem);
        var parent = elem.closest(".Block");
        var content = $("#" + elem.attr('data-content'));

        $(elem).click(function () {
            if (parent.hasClass('expanded')) {
                parent.removeClass('expanded').addClass('closed');
                content.slideUp();
            } else {
                parent.addClass('expanded').removeClass('closed');
                content.slideDown();
            }
            return false;
        });
    });

    // select
    $("select", context).each(function () {
        init_combo_with_sb(this);
    });

    // jWYSIWYG
    $(".wysiwyg").each(function () {
        // hack due to FinancialInformation hidden by default
        var _this = $(this);
        if (_this.attr('name') != 'FinancialInformation')
            init_wysiwyg(_this);
    });

    // file input with stype
    $("input[type='file']").each(function () {
        var input = $(this);
        var fileinputs = input.wrap($('<div>')).parent();
        fileinputs.addClass('fileinputs');

        var fakeFileUpload = $('<div>').addClass('fakefile');
        var fakeInput = $('<input>').addClass('fakeinput');
        var fakeButton = $('<input>').attr('type', 'button').attr('id', 'Add_button').val('Change');
        fakeFileUpload.append(fakeInput);
        fakeFileUpload.append(fakeButton);

        input.addClass('file');
        fileinputs.append(fakeFileUpload);

        input[0].relatedElement = fakeInput[0];

        input[0].onchange = input[0].onmouseout = function () {
            this.relatedElement.value = this.value;
        }
    });
}

function init_wysiwyg(target) {
    target.wysiwyg({
        initialContent: '',
        controls: {
            subscript: { visible: false },
            superscript: { visible: false },
            code: { visible: false }
        }
    });
}

function init_combo_with_sb(target) {
    if (R4IT_IS_MOBILE) return;

    var _this = $(target);
    _this.addClass('round_sb');
    if (_this.parent().hasClass('Double'))
        _this.addClass('short');
    else
        _this.addClass('large');

    window.setTimeout(function () {
        _this.sb({ fixedWidth: true });
    }, 0);
}

function safe_sb_refresh(target) {
    if (R4IT_IS_MOBILE) return;

    target.sb("refresh");
}

function lookup(source, property, value) {
    var res = null;
    $.each(source, function (index, elem) {
        if (elem[property] == value) {
            res = elem;
            return false;
        }
    });
    return res;
}

function fill_combo(target, source, value, text, first, selectedValue) {
    target.empty();
    target.append($("<option>").text(first));

    $.each(source, function (index, elem) {
        var opt = $("<option>").attr('value', elem[value]).text(elem[text]);
        if (selectedValue == elem[value])
            opt.attr('selected', 'selected');
        target.append(opt);
    });

    safe_sb_refresh(target);
}

function init_skill_picker(skills) {

    var picker = $('#SkillPickerSelect');
    var category_combo = $('select[name=Category]', picker);
    var skill_combo = $('select[name=Skill]', picker);
    var add_button = $('#Add_skill_button');
    add_button.click(function () {
        picker.show();
        add_button.hide();
        return false;
    });

    $('#Close_picker', picker).click(function () {
        picker.hide();
        add_button.show();
        return false;
    });

    $('#Ok_button', picker).click(function () {
        picker.hide();
        add_button.show();

        var category = lookup(skills, 'Id', parseInt(category_combo.val()));
        if (category == null) {
            alert('pick a category');
            return false;
        }
        var skill = lookup(category.Skills, 'Id', parseInt(skill_combo.val()));
        if (skill == null) {
            alert('pick a skill');
            return false;
        }

        add_skill_view_model(picker, { Category: category.Category, Name: skill.Name, SkillId: skill.Id, Score: null, LowerBound: 1, UpperBound: 5 });

        return false;
    });

    fill_combo(category_combo, skills, 'Id', 'Category', ' - Pick a category - ');
    fill_combo(skill_combo, [], null, null, ' - Pick a skill - ');

    category_combo.change(function () {
        // lookup category
        var selected_category = lookup(skills, 'Id', parseInt(category_combo.val()));

        fill_combo(skill_combo, selected_category.Skills, 'Id', 'Name', ' - Pick a skill - ');
    });
}


//<div class="skill-box">
//  <a href="#" class="right"><img src="images/close.png"></a>
//  <label>Linux configuration</label>
//  <div class="levels">Level: <button class="on">1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button></div>
//</div>
function add_skill_view_model(before, skillViewModel) {
    var div = $('<div/>').addClass('skill-box').addClass('SkillsViewModel');
    var anch = $('<a/>').addClass('right').attr('id','RemoveSkill').attr('href','#');
    anch.append($('<img/>').attr('src','/Content/img/close.png'));
    div.append(anch);
    var label = $('<label/>').text(skillViewModel.Category + ' - ' + skillViewModel.Name);
    div.append(label);
    div.append($('<input/>').attr('type', 'hidden').attr('data-member', 'SkillId').val(skillViewModel.SkillId));
    div.append($('<input/>').attr('type', 'hidden').attr('data-member', 'Name').val(skillViewModel.Name));
    div.append($('<input/>').attr('type', 'hidden').attr('data-member', 'Category').val(skillViewModel.Category));

    if (window.skills_template == 'skill') {
        // skill with score
        var div_graph = $('<div/>').addClass('levels').append('Level: ');
        var score = $('<input/>').attr('type', 'hidden').attr('data-member', 'Score').val(skillViewModel.Score);
        div.append(score).append(div_graph);

        var read_field = function () {
            // clear current on
            $('.on', div_graph).removeClass('on');
            // mark on
            if (score.val() != '') {
                $('[data-value=' + score.val() + ']', div_graph).addClass('on');
                label.text(skillViewModel.Category + ' - ' + skillViewModel.Name + ': ' + score.val());
            } else {
                label.text(skillViewModel.Category + ' - ' + skillViewModel.Name);
            }
        };

        for (var i = 1; i <= 5; i++) {
            var wrapper = $('<button/>').attr('data-value', i).text(i);
            div_graph.append(wrapper);

            wrapper.click(function () {
                score.val($(this).attr('data-value'));
                read_field();
                return false;
            });
        }

        read_field();

    }
    else {
        alert('not implemented');
    }

    before.before(div);

    renum_skills_view_model();
}


function _load_skill_view_models(source) {
    var picker = $('#SkillPickerSelect');
    $.each(source || [], function (index, elem) {
        add_skill_view_model(picker, elem);
    });
    renum_skills_view_model();
}

function load_skill_view_models(source) {
    window.skills_template = 'skill';
    _load_skill_view_models(source);

}

function load_skill_match_view_models(source) {
    window.skills_template = 'skill_match';
    _load_skill_view_models(source);
}

function renum_skills_view_model() {
    $('.SkillsViewModel').each(function (index, elem) {
        $('input', $(elem)).each(function (_, input) {
            var prefix = window.skills_template == 'skill' ? 'SkillsViewModel' : 'SkillMatchesViewModel';
            $(input).attr('name', prefix + '[' + index + '].' + $(input).attr('data-member'));
        });
    });
}