$(document).ready(function() {

    replaceChecks();
    $(".checkers").click(function() {
        $('img.notAvailable').toggleClass('notAvailableChecked');
        $('.checkers').toggleClass('checkers2');

    });

    var $largeImage = $(".largeImage");

    var width = $largeImage.width(), height = $largeImage.height(); //largeView, max width is 785 px, always (two divs) centered
    if (width > 785) {
        $largeImage.attr("width", 785); //margin-right does not matter for info, image+info fills screen
        var margin2 = ((940 - (785 + 150)) / 2) + 155; //find margin (150px info + 5px spacing) (785 is the resized imagewidth)
        $(".theImage").attr("style", "margin-right:" + margin2 + "px;"); //margin for theImage
    } else {
        //***********
        //*** this centers the smaller images

        //var margin = ((940-(width+150))/2); //center both divs
        //var margin2 = margin + 155;
        //$(".theText").attr("style", "margin-right:"+margin+"px;"); //top:"+top+"px;");
        //$(".theImage").attr("style", "margin-right:" + margin2 + "px;");

        //************
        //*** this resizes small images to big ones

        $largeImage.attr("width", 785);
        var margin2 = ((940 - (785 + 150)) / 2) + 155;
        $(".theImage").attr("style", "margin-right:" + margin2 + "px;");

        //************
        //*** toggle above two blocks for interchanged behaviour
        //************
    }
    var $theText = $(".theText");
    $theText.css('bottom', '60px').css('right',(-1 * $theText.width() - 10) + 'px');
    /*
    var bottom = $largeImage.height(); //align information on painting with the bottom of the image
    if (bottom == 0) {
    $largeImage.bind('load', function() {
    $(".theText").attr("style", "bottom: -" + $(this).height() + "px");
    });

    } else {
    $(".theText").attr("style", "bottom: -" + (bottom) + "px");
    }*/
    $largeImage = null;






    //###################################################################                

    //                //fading image on homepage (turned off)
    //                
    //                //find clientsize (max image displaysize)                  
    //                var displayWidth = 0, displayHeight = 0;
    //                    if( typeof( window.innerWidth ) == 'number' ) {
    //                        //Non-IE
    //                        displayWidth = window.innerWidth;
    //                        displayHeight = window.innerHeight;
    //                    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )){
    //                        //IE 6+ in 'standards compliant mode'
    //                        displayWidth = document.documentElement.clientWidth;
    //                        displayHeight = document.documentElement.clientHeight;
    //                    }
    //              
    //                //resize bg filling div to fullscreen
    //                $(".willFadeDiv").each(function() {
    //                    $(this).css("width", displayWidth, 2);
    //                    $(this).css("height", displayHeight, 2);
    //                    $(this).css("top", (-(0.5*displayHeight)), 2);
    //                    });
    //                
    //                //resize image to largets as possible (height = max, width = proportional)
    //               $(".willFade").each(function(){
    //                   var origWidth = this.width, origHeight = this.height;
    //                        //regular sizes
    //                            newHeight = displayHeight;
    //                            newWidth = origWidth * ( newHeight / origHeight);
    //                        //if image is wider than usual it wouldn't fit on screen, so:
    //                        if (newWidth > displayWidth) {
    //                            newWidth = displayWidth;
    //                            newHeight = origHeight * ( newWidth / origWidth);
    //                            }
    //                        
    //                        $(this).height(newHeight).width(newWidth);
    //                        $(".willFade").each(function() {
    //                            $(this).css("top", (-(0.5*newHeight)), 2);
    //                            $(this).css("margin-left", (-(0.5*newWidth)), 2);
    //                            });
    //                    
    //                });
    //                
    //                setTimeout(function(){
    //                    $(".willFade").hide(2000);
    //                    $(".willFadeDiv").fadeOut(2000);
    //                }, 2000);
    //        

    //###################################################################    
});
        
        
var boxes;
var imgCheck = '/Images/checkbox-aangevinkt.png';
var imgUncheck = '/Images/checkbox.png';
 
function replaceChecks(){ 
   
    boxes = document.getElementsByTagName('input');
    for(var i=0; i < boxes.length; i++) {
        if(boxes[i].getAttribute('type') == 'checkbox') { 
            var img = document.createElement('img');
            if(boxes[i].checked) {
                img.src = imgCheck;
            } else {
                img.src = imgUncheck;
            }
            img.id = 'checkImage'+i;
            img.onclick = new Function('checkChange('+i+')');
            boxes[i].parentNode.insertBefore(img, boxes[i]);
            boxes[i].style.display='none'; 
        }
    }
}
function checkChange(i) {
    if(boxes[i].checked) {
        boxes[i].checked = '';
        document.getElementById('checkImage'+i).src=imgUncheck;
    } else {
        boxes[i].checked = 'checked';
        document.getElementById('checkImage'+i).src=imgCheck;
    }
}

jQuery.fn.extend({
    /**
    * Returns get parameters.
    *
    * If the desired param does not exist, null will be returned
    *
    * To get the document params:
    * @example value = $(document).getUrlParam("paramName");
    * 
    * To get the params of a html-attribut (uses src attribute)
    * @example value = $('#imgLink').getUrlParam("paramName");
    */
    getUrlParam: function(strParamName) {
        strParamName = escape(unescape(strParamName));

        var returnVal = new Array();
        var qString = null;

        if ($(this).attr("nodeName") == "#document") {
            //document-handler

            if (window.location.search.search(strParamName) > -1) {

                qString = window.location.search.substr(1, window.location.search.length).split("&");
            }

        } else if ($(this).attr("src") != "undefined") {

            var strHref = $(this).attr("src")
            if (strHref.indexOf("?") > -1) {
                var strQueryString = strHref.substr(strHref.indexOf("?") + 1);
                qString = strQueryString.split("&");
            }
        } else if ($(this).attr("href") != "undefined") {

            var strHref = $(this).attr("href")
            if (strHref.indexOf("?") > -1) {
                var strQueryString = strHref.substr(strHref.indexOf("?") + 1);
                qString = strQueryString.split("&");
            }
        } else {
            return null;
        }


        if (qString == null) return null;


        for (var i = 0; i < qString.length; i++) {
            if (escape(unescape(qString[i].split("=")[0])) == strParamName) {
                returnVal.push(qString[i].split("=")[1]);
            }

        }


        if (returnVal.length == 0) return null;
        else if (returnVal.length == 1) return returnVal[0];
        else return returnVal;
    }
});