function bindSkinToneSelector() {
    $(".testSelectLabel").click(function () {
        var target = $(this).attr("for");
        $(".testSelectLabel").css("borderColor", "#fff");
        $(this).css("borderColor", "#000");
        selectSkinTone(target);
    });
}

function LoadSkinTone(callback) {
    var hair = $('.selector select[name="hair"]').val();
    var eyes = $('.selector select[name="eyes"]').val();
    var skin = $('.selector select[name="skin"]').val();

    StartSkinToneLoading();

    var url = "/complexion/Color/" + hair + "/" + eyes + "/" + skin;
    $.getJSON(
        url,
        function (result) {

            StopSkinToneLoading();
            if (result) {

                var cookieVal = Get_Cookie("skinTone", null);

                $("label[for=testSelect1] div:eq(0)").css("background-color", "#" + result[0].ColorCode1);
                $("label[for=testSelect1] h4:eq(0)").text(result[0].ColorName1);
                $("label[for=testSelect1] div:eq(1)").css("background-color", "#" + result[0].ColorCode2);
                $("label[for=testSelect1] h4:eq(1)").text(result[0].ColorName2);
                $("#testSelect1").attr("value", result[0].Tone);

                $("label[for=testSelect2] div:eq(0)").css("background-color", "#" + result[1].ColorCode1);
                $("label[for=testSelect2] h4:eq(0)").text(result[1].ColorName1);
                $("label[for=testSelect2] div:eq(1)").css("background-color", "#" + result[1].ColorCode2);
                $("label[for=testSelect2] h4:eq(1)").text(result[1].ColorName2);
                $("#testSelect2").attr("value", result[1].Tone);

                if (cookieVal == result[0].Tone) {
                    $("#testSelect1").click();
                    $("label[for=testSelect1]").css("borderColor", "#000");
                }
                else if (cookieVal == result[1].Tone) {
                    $("#testSelect2").click();
                    $("label[for=testSelect2]").css("borderColor", "#000");
                }
                else {
                    Set_Cookie("skinTone", null, 600);
                }

                bindSkinToneSelector();
            }

            if (callback) {
                callback();
            }
        });
}


// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name, variable) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f

    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');


        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');

        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;

            // we need to handle case where cookie has no value but exists (no = sign, that is):
            var cookieContent = a_all_cookies[i];
            cookieContent = cookieContent.substring(cookie_name.length + 2);
            return cookieContent;
            break;

            var vals = cookieContent.split('&');
            for (var j = 0; j < vals.length; j++) {
                var key = vals[j].split('=')[0];
                if (key == variable) return vals[j].split('=')[1];
            }

            cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}

function Set_Cookie(name, value, expires, path, domain, secure) {
    var today = new Date();
    today.setTime(today.getTime());

    /*
    if the expires variable is set, make the correct
    expires time, the current script below will set
    it for x number of days, to make it for hours,
    delete * 24, for minutes, delete * 60 * 24
    */
    if (expires) {
        expires = expires * 1000 * 60 * 60 * 24;
    }

    var expires_date = new Date(today.getTime() + (expires));

    document.cookie = name + "=" + escape(value) +
    ((expires) ? ";expires=" + expires_date.toGMTString() : "") +
    ((path) ? ";path=" + path : "") +
    ((domain) ? ";domain=" + domain : "") +
    ((secure) ? ";secure" : "");
}

function ValidateComplexion(showValidate) {
    
    var result = true;

    result = result && ValidateSelect("hair", showValidate);
    result = result && ValidateSelect("eyes", showValidate);
    result = result && ValidateSelect("skin", showValidate);
    result = result && ValidateSkinTone(showValidate);

    return result;
}

function Ok_Click(showValidate) {
    var result = ValidateComplexion(showValidate);

//    if (result) {
//        StartLoading();

//        var url = "/complexion";

//        $.getJSON(
//            url,
//            function (result) {
//                DisplayComplexion("foundation", result.Foundation);
//                DisplayComplexion("additional", result.Additional);
//            });
//    }
}

function StartLoading() {
    $(".complexion ul").html("");
    $(".complexion ul").append("<li class='loading'>&nbsp;</li>");
}

function DisplayComplexion(name, colors) {
    var container = $(".complexion #" + name);
    container.html("");

    for (var i = 0; i < colors.length; i++) {
        container.append("<li><div style='background-color: #" + colors[i].code + ";'> </div>" + colors[i].name + "</li>");
    }
}

function ValidateSelect(name, showValidate) {

    if ($("select[name='" + name + "'] option:selected").length == 0) {
        if(showValidate) $("select[name='" + name + "']").css("border", "solid 2px #f00");
        return false;
    }

    $("select[name='" + name + "']").css("border", "solid 1px #aaa");
    Set_Cookie(name, $("select[name='" + name + "'] option:selected").val(), 600);

    return true;
}

function ValidateSkinTone(showValidate) {
    if ($("input[name=toneTest]:checked").length) {
        var val = $("input[name=toneTest]:checked").val();
        Set_Cookie("skinTone", val, 600);
        $("#skinToneContainer").css("borderColor", "#fff");
        return true;
    }
    else {
        if (showValidate) $("#skinToneContainer").css("borderColor", "#f00");
        Set_Cookie("skinTone", null, 600);
        return false;
    }
    
}

function help(type) {
    $("#" + type + "Help").toggle("fast");
}

function StartSkinToneLoading() {
    $("#skinToneLoading").show(0);
    $(".testSelectLabel").hide(0);
}

function StopSkinToneLoading() {
    $("#skinToneLoading").hide(0);
    $(".testSelectLabel").show(0);
}

function selectSkinTone(id) {
    $("#" + id).attr("checked", "checked");
}

function BeginEdit(id) {
    $("#" + id + " .view").hide(0);
    $("#" + id + " .edit").show(0);
}

function EndEdit(id) {
    $("#" + id + " .view").show(0);
    $("#" + id + " .edit").hide(0);
}