$(document).ready(function () {

    $("#smaskrifter").css('visibility', 'hidden');
    $("#smaskrifter").css('position', 'absolute');
    $("#smaskrifter").css('left', '-9999px');
    $("#tidsskrift").css('visibility', 'hidden');
    $("#tidsskrift").css('position', 'absolute');
    $("#tidsskrift").css('left', '-9999px');
    $("#upplevelse").css('visibility', 'hidden');
    $("#upplevelse").css('position', 'absolute');
    $("#upplevelse").css('left', '-9999px');
    $("#webb").css('visibility', 'hidden');
    $("#webb").css('position', 'absolute');
    $("#webb").css('left', '-9999px');
    $("#bok").css('visibility', 'hidden');
    $("#bok").css('position', 'absolute');
    $("#bok").css('left', '-9999px');
    $("#film").css('visibility', 'hidden');
    $("#film").css('position', 'absolute');
    $("#film").css('left', '-9999px');
    $("#artikel").css('visibility', 'hidden');
    $("#artikel").css('position', 'absolute');
    $("#artikel").css('left', '-9999px');
    $("#ljudupptagning").css('visibility', 'hidden');
    $("#ljudupptagning").css('position', 'absolute');
    $("#ljudupptagning").css('left', '-9999px');

    //Sätter en ny stil på diven som innehåller den färgade checkboxen
    $(".checkdiv").css('width', '15px');
    $(".checkdiv").css('height', '17px');
    $(".checkdiv").css('float', 'left');
    $(".checkdiv").css('margin-right', '5px');
    //$(".checkdiv").css('margin-top', '-5px');
    $(".checkdiv").css('padding-bottom', '3px');

    // ImagePath för sökvägen till filerna.
    var imagePath = "/Content/css/front/images/";

    // Lista som innehåller alla checkelement.
    var checkList = $("div[id^='check_']");

    // Skapar en array som skall hålla alla Ids.
    var checkListId = new Array();

    // Loopar igenom checkList och sparar undan id.
    for (var i = 0; i <= checkList.length - 1; i++) {
        $(checkList[i]).each(function () {
            // Mellanlagrar Id för att lagras i arrayen längre ner.
            var element = $(this).attr('id');

            // Lagrar CheckId till array.
            checkListId.push(element);
        });

        // Byter bild på div:en för varje element i array:en.
        document.getElementById(checkListId[i]).innerHTML = "<img id='check_" + (i + 1) + "unCheck' src='" + imagePath + "check_" + (i + 1) + "a.png' alt=''/><img id='check_" + (i + 1) + "checked' src='" + imagePath + "check_" + (i + 1) + "b.png' alt='' />";

        // Döljer alla checked-bilder.
        $("#" + "check_" + (i + 1) + "checked").css('display', 'none');
    }

    // Lägger på ett jQuery-toggle event på varje box.
    for (var j = 0; j <= checkListId.length - 1; j++) {
        // Hämtar ut DOMelementet.
        var domElement = document.getElementById(checkListId[j]);

        // Hämtar ut DOMelementets Id.
        var elementId = $(domElement).attr('id');

        // Skickar vidare elementet till addToggle.
        toggleCheckbox(domElement, elementId);
    }

    // addToggle
    // Säter jQuery.toggle event på inskickat element.
    function toggleCheckbox(domElement, elementId) {
        // Hämtar respektive bildelement.
        var elementToHide = document.getElementById(elementId + "unCheck");
        var elementToShow = document.getElementById(elementId + "checked");

        // Lägger på $.toggle på varje element.
        $(domElement).toggle(function () {
            // Första klick.

            $(elementToHide).css('display', 'none');
            $(elementToShow).css('display', 'inline');

            // Kollar Id och väljer checked / unChecked.
            if ($(domElement).attr('id') == 'check_1') {
                $('input[id=smaskrifter]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_2') {
                $('input[id=tidsskrift]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_3') {
                $('input[id=upplevelse]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_4') {
                $('input[id=webb]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_5') {
                $('input[id=bok]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_6') {
                $('input[id=film]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_7') {
                $('input[id=artikel]').attr('checked', true);
            }
            else if ($(domElement).attr('id') == 'check_8') {
                $('input[id=ljudupptagning]').attr('checked', true);
            }
        },
        function () {
            // Andra klick.
            $(elementToHide).css('display', 'inline');
            $(elementToShow).css('display', 'none');

            if ($(domElement).attr('id') == 'check_1') {
                $('input[id=smaskrifter]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_2') {
                $('input[id=tidsskrift]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_3') {
                $('input[id=upplevelse]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_4') {
                $('input[id=webb]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_5') {
                $('input[id=bok]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_6') {
                $('input[id=film]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_7') {
                $('input[id=artikel]').attr('checked', false);
            }
            else if ($(domElement).attr('id') == 'check_8') {
                $('input[id=ljudupptagning]').attr('checked', false);
            }
        });
       
    }
});