String.prototype.trim = function () { return this.replace(/^\s+|\s+$/, ''); };

var slideMaxWidth = 1200;
var slideActive = 1;
var slideLast = 5;

var slideOmvatWidth = 0;
var menuKleur = "white";

var mouseX = 0;
var mouseY = 0;

$().mousemove(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

var compositieUrl = '/nl/impressies/composities.aspx';
function SetCompositionUrl(url) {
    compositieUrl = url;
}

$(document).ready(function () {

    homeVideoSize();
    serieSlideSize();
    $(window).resize(function () {
        homeVideoSize();
        serieSlideSize();
    });

    $('.slideButton').mouseover(function () {
        $(this).stop().animate({
            backgroundColor: '#CCCCCC', color: '#000'
        }, 300);
    });

    $('.slideButton').mouseout(function () {
        $(this).stop().animate({
            backgroundColor: '#000', color: '#FFF'
        }, 600);
    });

    $('#slide1').mouseover(function () {
        slideActive = 1;
        startSlideAnim();
    });

    $('#slide2').mouseover(function () {
        slideActive = 2;
        startSlideAnim();
    });

    $('#slide3').mouseover(function () {
        slideActive = 3;
        startSlideAnim();
    });

    $('#slide4').mouseover(function () {
        slideActive = 4;
        startSlideAnim();
    });

    $('#slide5').mouseover(function () {
        slideActive = 5;
        startSlideAnim();
    });

    $('#imgSlide1').mousemove(function (e) {
        slideImgSetOff(1, false);
    });

    $('#imgSlide2').mousemove(function (e) {
        slideImgSetOff(2, false);
    });

    $('#imgSlide3').mousemove(function (e) {
        slideImgSetOff(3, false);
    });

    $('#imgSlide4').mousemove(function (e) {
        slideImgSetOff(4, false);
    });

    $('#imgSlide5').mousemove(function (e) {
        slideImgSetOff(5, false);
    });

    $("#imgSlide1").click(function () {
        window.location = compositieUrl + '?SerNr=1&compNr=1';
    });

    $("#imgSlide2").click(function () {
        window.location = compositieUrl + '?SerNr=2&compNr=1';
    });

    // juiste Link nog
    $("#imgSlide3").click(function () {
        window.location = compositieUrl + '?SerNr=3&compNr=1';
    });

    $("#imgSlide4").click(function () {
        window.location = compositieUrl + '?SerNr=4&compNr=1';
    });

    $("#imgSlide5").click(function () {
        window.location = compositieUrl + '?SerNr=5&compNr=1';
    });

    doMenuBlend();

    window.onresize = function (event) {
        homeVideoSize();
    }
});

function doMenuBlend() {
    if (menuKleur == "darkgray") {
        $("#leftOmvat").stop().animate({
            backgroundColor: '#414042'
        }, 1000);

        $("#logoOrange").stop().fadeOut(1000);
        $("#logoWhite").stop().fadeOut(1000);
        $("#logoBlack").stop().fadeOut(1000);
        $("#logoDarkGray").stop().fadeIn(1000);
    }

    if (menuKleur == "gray") {
        $("#leftOmvat").stop().animate({
            backgroundColor: '#CCC'
        }, 1000);

        $("#logoOrange").stop().fadeOut(1000);
        $("#logoWhite").stop().fadeIn(1000);
        $("#logoBlack").stop().fadeOut(1000);
        $("#logoDarkGray").stop().fadeOut(1000);
    }

    if (menuKleur == "white") {
        $("#leftOmvat").stop().animate({
            backgroundColor: '#FFF'
        }, 1000);

        $("#logoOrange").stop().fadeIn(1000);
        $("#logoWhite").stop().fadeOut(1000);
        $("#logoBlack").stop().fadeOut(1000);
        $("#logoDarkGray").stop().fadeOut(1000);
    }
    if (menuKleur == "black") {
        $("#leftOmvat").stop().animate({
            backgroundColor: '#000'
        }, 1000);

        $("#logoBlack").stop().fadeIn(1000);
        $("#logoWhite").stop().fadeOut(1000);
        $("#logoOrange").stop().fadeOut(1000);
        $("#logoDarkGray").stop().fadeOut(1000);
    }

    if (menuKleur == "lichtblack") {
        $("#leftOmvat").stop().animate({
            backgroundColor: '#242423'
        }, 1000);

        $("#logoBlack").stop().fadeIn(1000);
        $("#logoWhite").stop().fadeOut(1000);
        $("#logoOrange").stop().fadeOut(1000);
        $("#logoDarkGray").stop().fadeOut(1000);
    }


}

function blendMenu(menuKleurNaar) {
    menuKleur = menuKleurNaar;
}

var wait = 0;

function slideImgSetOff(imgNr, animate) {
    if (slideActive == imgNr || animate) {
        var imageWidth = $("#imgSlide" + imgNr).width();
        var omvatWidth = slideOmvatWidth;
        if (omvatWidth > imageWidth) omvatWidth = imageWidth;
        var slideLeft = $("#contentOmvat").offset().left;

        var scale = imageWidth / (omvatWidth - imageWidth);

        if (animate) {
            $("#imgSlide" + imgNr).stop().animate({
                marginLeft: ((mouseX - slideLeft) / scale) + "px"
            }, 400);

            wait = 20;
        } else {
            if (wait > 0) {
                wait--;
            } else {
                $("#imgSlide" + imgNr).stop().css({
                    marginLeft: ((mouseX - slideLeft) / scale) + "px"
                });
            }
        }
    }
}

var newsAnimInterval = null;
//start de nieuws animatie op de homepage
function HomeNewsAnim() {

    clearInterval(newsAnimInterval);

    $(".HomeNewsOuter").height($(".HomeNewsInner").height() + 8);
    $(".HomeNewsOuter").width($(".HomeNewsInner").width() + 8);
    $(".HomeNews").css("left", SeGetRandom(300, 500)).css("top", SeGetRandom(50, 450));
    $(".HomeNews").fadeIn(5000).delay(8000).fadeOut(5000);


    newsAnimInterval = setInterval(HomeNewsAnim, 25000);

}

//random geheel getal genereren tussen twee waardes
function SeGetRandom(min, max) {
    var randomNum = Math.random() * (max - min);

    // Round to the closest integer and return it
    return (Math.round(randomNum) + min);
}


function startSlideAnim() {

    if (slideLast != slideActive) {
        slideLast = slideActive;

        slideMaxWidth = Math.min($("#imgSlide" + slideActive).width(), 1400);

        var omvatWidth = $("#contentOmvat").width();
        if (omvatWidth > slideMaxWidth) omvatWidth = slideMaxWidth;
        if (omvatWidth < 200) omvatWidth = 200;

        slideOmvatWidth = omvatWidth;

        if (slideActive == 1) {
            slide1Width = omvatWidth - 8 - 204 - 12;
            slide2Width = 50;
            slide3Width = 50;
            slide4Width = 50;
            slide5Width = 50;
        }
        else if (slideActive == 3) {
            slide1Width = 50;
            slide2Width = 50;
            slide3Width = omvatWidth - 8 - 204 - 12;
            slide4Width = 50;
            slide5Width = 50;
        }
        else if (slideActive == 4) {
            slide1Width = 50;
            slide2Width = 50;
            slide3Width = 50;
            slide4Width = omvatWidth - 8 - 204 - 12;
            slide5Width = 50;
        }
        else if (slideActive == 5) {
            slide1Width = 50;
            slide2Width = 50;
            slide3Width = 50;
            slide4Width = 50;
            slide5Width = omvatWidth - 8 - 204 - 12;
        }
        else {
            slide1Width = 50;
            slide2Width = omvatWidth - 8 - 204 - 12;
            slide3Width = 50;
            slide4Width = 50;
            slide5Width = 50;
        }

        slideImgSetOff(1, true);
        slideImgSetOff(2, true);
        slideImgSetOff(3, true);
        slideImgSetOff(4, true);
        slideImgSetOff(5, true);

        $("#slide1").stop().animate({
            width: slide1Width + "px"
        }, 600, function () {
            //slideImgSetOff(1, false);
        }
        );

        $("#slide2").stop().animate({
            width: slide2Width + "px"
        }, 600, function () {
            //slideImgSetOff(2, false);
        }
        );

        $("#slide3").stop().animate({
            width: slide3Width + "px"
        }, 600, function () {
            //slideImgSetOff(3, false);
        }
        );

        $("#slide4").stop().animate({
            width: slide4Width + "px"
        }, 600, function () {
            //slideImgSetOff(4, false);
        }
        );

        $("#slide5").stop().animate({
            width: slide5Width + "px"
        }, 600, function () {
            //slideImgSetOff(5, false);
        }
        );
    }
}

var slides2 = new Array("First_bathroom_01.jpg", "First_bathroom_02.jpg", "First_bathroom_03.jpg", "First_Toilet_01.jpg", "First_Toilet_02.jpg", "First_Toilet_03.jpg", "First_Toilet_04.jpg", "First_Toilet_05.jpg", "First_Toilet_06.jpg");
var slides3 = new Array("Wash_Me_bathroom_01.jpg", "Wash_Me_bathroom_02.jpg", "Wash_Me_bathroom_03.jpg", "Wash_Me_bathroom_04.jpg", "Wash_Me_bathroom_05.jpg", "Wash_Me_toilet_01.jpg");
var slides1 = new Array("Match_Me_bathroom_01.jpg", "Match_Me_bathroom_02.jpg", "Match_Me_bathroom_03.jpg", "Match_Me_bathroom_04.jpg", "Match_Me_bathroom_05.jpg", "Match_Me_bathroom_06.jpg", "Match_Me_bathroom_07.jpg");
var slides4 = new Array("Mini_Wash_Me_toilet_01.jpg", "Mini_Wash_Me_toilet_02.jpg", "Mini_Wash_Me_toilet_03.jpg", "Mini_Wash_Me_toilet_04.jpg", "Mini_Wash_Me_toilet_05.jpg", "Mini_Wash_Me_toilet_06.jpg", "Mini_Wash_Me_toilet_07.jpg");
var slides5 = new Array("Flush_toilet_01.jpg", "Flush_toilet_02.jpg", "Flush_toilet_03.jpg", "Flush_toilet_04.jpg", "Flush_toilet_05.jpg", "Flush_toilet_06.jpg");
var slides = new Array(slides1, slides2, slides3, slides4, slides5);

function serieButtonClick(slideNr, fotoNr) {
    $("#slide" + slideNr + " .slideButtonSelect").stop().removeClass("slideButtonSelect").addClass("slideButton");
    $("#slideButton" + slideNr + "" + fotoNr).stop().unbind('mouseover mouseout');
    $("#slideButton" + slideNr + "" + fotoNr).css("color", "");
    $("#slideButton" + slideNr + "" + fotoNr).css("background-color", "");
    $("#slideButton" + slideNr + "" + fotoNr).addClass("slideButtonSelect").removeClass("slideButton");

    $("#imgSlide" + slideNr).attr("src", "/images/clou/composities/" + slides[slideNr - 1][fotoNr - 1]);
    $("#imgSlide" + slideNr).click(function () {
        window.location = compositieUrl + "?serNr=" + slideNr + "&compNr=" + fotoNr;
    });


    $('.slideButton').mouseover(function () {
        $(this).stop().animate({
            backgroundColor: '#CCCCCC', color: '#000'
        }, 300);
    });

    $('.slideButton').mouseout(function () {
        $(this).stop().animate({
            backgroundColor: '#000', color: '#FFF'
        }, 600);
    });
}



function serieSlideSize() {
    if ($('#imgSlide1').is('*')) {
        var omvatWidth = $("#contentOmvat").width();
        if (omvatWidth > slideMaxWidth) omvatWidth = slideMaxWidth;
        if (omvatWidth < 200) omvatWidth = 200;

        slideOmvatWidth = omvatWidth;

        var omvatHeight = $("#contentOmvat").height();
        if (omvatHeight > 800) {
            omvatHeight = 800;
            $("#contentOmvat").css({
                height: "800px"
            });

            $("#leftOmvat").css({
              //  height: "800px"
            });
        }

        $("#imgSlide1").css({
            marginTop: (omvatHeight - 800) + "px"
        });

        $("#imgSlide2").css({
            marginTop: (omvatHeight - 800) + "px"
        });

        $("#imgSlide3").css({
            marginTop: (omvatHeight - 800) + "px"
        });

        $("#imgSlide4").css({
            marginTop: (omvatHeight - 800) + "px"
        });

        $("#imgSlide5").css({
            marginTop: (omvatHeight - 800) + "px"
        });

        if (slideActive == 1) {
            slide1Width = omvatWidth - 8 - 204 - 12;
            slide2Width = 50;
            slide3Width = 50;
            slide4Width = 50;
            slide5Width = 50;
        }
        else if (slideActive == 3) {
            slide1Width = 50;
            slide2Width = 50;
            slide3Width = omvatWidth - 8 - 204 - 12;
            slide4Width = 50;
            slide5Width = 50;
        }
        else if (slideActive == 4) {
            slide1Width = 50;
            slide2Width = 50;
            slide3Width = 50;
            slide4Width = omvatWidth - 8 - 204 - 12;
            slide5Width = 50;
        }
        else if (slideActive == 5) {
            slide1Width = 50;
            slide2Width = 50;
            slide3Width = 50;
            slide4Width = 50;
            slide5Width = omvatWidth - 8 - 204 - 12;
        }
        else {
            slide1Width = 50;
            slide2Width = omvatWidth - 8 - 204 - 12;
            slide3Width = 50;
            slide4Width = 50;
            slide5Width = 50;
        }

        $("#contentSerie").css({
            width: (omvatWidth - 8) + "px"
        });

        $("#slide1").css({
            width: slide1Width + "px"
        });

        $("#slide2").css({
            width: slide2Width + "px"
        });

        
    }
}

function homeVideoSize() {
    var docHeight = $(document).height();
    var winWidth = $("#contentHome").width();

    var videoWidth = docHeight * 1.77777777777777;
    var videoHeight = docHeight;

    var winOff = (videoWidth - winWidth) / 2;

    var agent = navigator.userAgent.toLowerCase();
    var is_iphone = (agent.indexOf('iphone') != '-1');
    var is_ipad = (agent.indexOf('ipad') != '-1');
    if (is_iphone || is_ipad) {
        winOff = 0;
        videoWidth = 600;
        videoHeight = 400;
    }

    $("#video").css({
        height: videoHeight + "px",
        width: videoWidth + "px",
        marginLeft: "-" + winOff + "px"
    });
}


var COMPOSITIONDELAY = 300; //millisecondes

//zet vertraging op mouse over van een compositie
function StartCompositionDelay(element, targetHeight, imgWidth, imgHeight) {
    $("#pnlComposities").everyTime(COMPOSITIONDELAY, function () {
        CompositionMouseover(element, targetHeight, imgWidth, imgHeight, true);
    }, 1);
}

//verwijdert de mouseover vertraging
function StopCompositionDelay() {
    $("#pnlComposities").stopTime(COMPOSITIONDELAY);
}

/* Mouse over van een compositie. element = de container div */
function CompositionMouseover(element, targetHeight, imgWidth, imgHeight, ignoreDelay) {
    var jqueryElement = $(element);


    //ignoreDelay wordt standaard niet meegegeven, waardoor deze functie vertraagd zal worden aangeroepen
    if (ignoreDelay == null) {
        StartCompositionDelay(element, targetHeight, imgWidth, imgHeight);
        return;
    }


    //eerste alle medium panels (behalve de huidige) sluiten met mouseout logica
    $(".CompositionMedium").each(
                            function (index, el) {
                                if (el.id != element.id) {

                                    CompositionMouseout(el, imgWidth, imgHeight);
                                }
                            }
    )

    //als het element in de kleine state is
    if (jqueryElement.hasClass("CompositionSmall")) {

        jqueryElement.removeClass("CompositionSmall");
        jqueryElement.removeClass("CompositionLarge");
        jqueryElement.addClass("CompositionMedium");

        //animeer naar de nieuwe hoogte
        var newHeight = targetHeight + "px";

        //bereken nieuwe afbeeldinh breedte en hoogte
        var medWidth = 0.4575 * imgWidth;
        var medHeight = 0.4575 * imgHeight;

        // Verberg klein afbeelding toon grote
        $(".imgContainer", jqueryElement).stop().animate({ height: "183px", width: "183px" }, 400);
        $(".imgContainer", jqueryElement).children().stop().animate({ height: medHeight + "px", width: medWidth + "px" }, 500);
        $(".CompositionImageContainer", jqueryElement).stop().animate({ height: "183px", width: "183px" }, 400);
        //$(".CompositionFooter", jqueryElement).stop().animate({ marginLeft: "180px" }, 400);
        jqueryElement.stop().animate({ height: newHeight, minWidth: "600px", minHeight: "0px", backgroundColor: "white", paddingTop: "18px", paddingBottom: "18px", color: "black" }, 500,
            function () {
                //maak hand icoontje actief
                jqueryElement.css("cursor", "pointer");
                //click event handler toevoegen
                jqueryElement.click(function () { CompositionClick(jqueryElement, targetHeight, imgWidth, imgHeight) });
                jqueryElement.css("height", "auto");
                //toon artikelen
                $(".ArticleContainer", jqueryElement).stop().animate({ height: "130px", minHeight: "130px", marginBottom: "0px" }, 200, function () { $(".ArticleContainer", jqueryElement).css("height", "auto"); });
            }
        );


    } //if hasclass small

}

/* klik event voor vanuit medium state naar large te gaan en terug 
Om terug te kunnen gaan moet ook de (Server side berekende) mediumHeight als integer worden meegegeven.
*/
function CompositionClick(element, mediumHeight, imgWidth, imgHeight) {

    var jqueryElement = $(element);

    //mouseout weghalen
    jqueryElement.attr('onmouseout', '');
    jqueryElement.unbind('mouseleave');

    //indien large, dan terug naar medium
    if (jqueryElement.hasClass("CompositionLarge")) {


        $(".ArticleContainer", jqueryElement).stop().animate({ height: "1px", minHeight: "1px", marginBottom: "48px" }, 150);

        //afbeelding terug naar medium animeren
        var medWidth = 0.4575 * imgWidth;
        var medHeight = 0.4575 * imgHeight;

        $(".imgContainer", jqueryElement).stop().animate({ height: "183px", width: "183px" }, 400);
        $(".imgContainer", jqueryElement).children().stop().animate({ height: medHeight + "px", width: medWidth + "px" }, 400);
        $(".CompositionImageContainer", jqueryElement).stop().animate({ height: "183px", width: "183px" }, 400);
        $(".ArticleContainer", jqueryElement).stop().animate({ height: "130px", minHeight: "130px", marginBottom: "0px" }, 200, function () { $(".ArticleContainer", jqueryElement).css("height", "auto"); });

        //animeer naar medium
        jqueryElement.stop().animate({
            height: mediumHeight, minWidth: "600px", minHeight: "0px", backgroundColor: "white", paddingTop: "18px", paddingBottom: "18px", color: "black"
        }, 500, function () {
            jqueryElement.addClass("CompositionMedium");
            jqueryElement.removeClass("CompositionLarge");
            jqueryElement.removeClass("CompositionSmall");

        });

    } //if large
    else {

        //else naar large
        jqueryElement.removeClass("CompositionMedium");
        jqueryElement.addClass("CompositionLarge");
        jqueryElement.removeClass("CompositionSmall");

        //breedte van omvattend element en afbeelding container
        var minW = "1240px";
        var newW = "750px";

        if (!$('.imgDrawingContainer', jqueryElement).length) {

            minW = "600px";
            newW = "400px";
        }

        //animeer het element naar large (400px)
        jqueryElement.stop().animate({
            height: "400px", minWidth: minW, paddingTop: "18px", paddingBottom: "18px"
        }, 500, function () {

        });


        $(".imgContainer", jqueryElement).stop().animate({ height: "400px", width: "400px" }, 500);
        $(".imgContainer", jqueryElement).children().stop().animate({ height: imgHeight + "px", width: imgWidth + "px" }, 500);
        $(".CompositionImageContainer", jqueryElement).stop().animate({ height: "400px", width: newW }, 500);
        $(".ArticleContainer", jqueryElement).stop().animate({ height: "348px", minHeight: "347px", marginBottom: "0px" }, 400);
    }
}



//functie om compositie in 1 keer van small naar large te laten animeren
function CompositionLarge(element, mediumHeight, imgWidth, imgHeight) {
    var jqueryElement = $(element);
    jqueryElement.addClass("CompositionLarge");
    jqueryElement.removeClass("CompositionSmall");

    //maak hand icoontje actief
    jqueryElement.css("cursor", "pointer");
    //click event handler toevoegen
    jqueryElement.click(function () { CompositionClick(jqueryElement, mediumHeight, imgWidth, imgHeight) });
    jqueryElement.css("height", "auto");
    //toon artikelen
    $(".ArticleContainer", jqueryElement).stop().animate({ height: "130px", minHeight: "130px", marginBottom: "0px" }, 200, function () { $(".ArticleContainer", jqueryElement).css("height", "auto"); });


    //breedte van omvattend element en afbeelding container
    var minW = "1240px";
    var newW = "750px";

    if (!$('.imgDrawingContainer', jqueryElement).length) {

        minW = "600px";
        newW = "400px";
    }

    //animeer het element naar large (400px)
    jqueryElement.stop().animate({
        height: "400px", minWidth: minW, paddingTop: "18px", paddingBottom: "18px", backgroundColor: "white"
    }, 500, function () {

    });

    $(".imgContainer", jqueryElement).stop().animate({ height: "400px", width: "400px" }, 500);
    $(".imgContainer", jqueryElement).children().stop().animate({ height: imgHeight + "px", width: imgWidth + "px" }, 500);
    $(".CompositionImageContainer", jqueryElement).stop().animate({ height: "400px", width: newW }, 500);
    $(".ArticleContainer", jqueryElement).stop().animate({ height: "348px", minHeight: "347px", marginBottom: "0px" }, 400);
}

/* Mouse out van een compositie. Deze wordt nu niet meer on mouseout aangeroepen, maar als sluit-mechnisme in de mouse over. 
element = de container div 
*/
function CompositionMouseout(element, imgWidth, imgHeight) {
    //annuleer lopende vertraging
    StopCompositionDelay();

    //bereken de kleine afmeting. 0.23 = de factor in verhouding met het grote formaat
    var smallWidth = 0.23 * imgWidth;
    var smallHeight = 0.23 * imgHeight;

    //de meegegeven waardes voor width en height zijn van het mouse OVER element. Daarom opzoeken in ImageSizes var indien beschikbaar.
    if (ImageSizes[element.id] != null) {
        smallWidth = 0.23 * ImageSizes[element.id].width;
        smallHeight = 0.23 * ImageSizes[element.id].height;
    }

    var jqueryElement = $(element);

    $(".imgContainer", jqueryElement).stop().animate({ height: "92px", width: "92px" }, 300);
    $(".imgContainer", jqueryElement).children().stop().animate({ height: smallHeight + "px", width: smallWidth + "px" }, 300);
    $(".CompositionImageContainer", jqueryElement).stop().animate({ height: "92px", width: "92px" }, 300);
    $(".ArticleContainer", jqueryElement).stop().animate({ height: "1px", minHeight: "1px", marginBottom: "48px" }, 5);

    //$(".CompositionFooter", jqueryElement).stop().animate({ marginLeft: "90px" }, 300);
    //animeer terug naar de kleine hoogte (92px)
    jqueryElement.stop().animate({
        height: "92px", minWidth: "600px", minHeight: "0px", backgroundColor: "black", paddingTop: "0px", paddingBottom: "0px", color: "white"
    }, 300, function () {
        jqueryElement.removeClass("CompositionMedium");
        jqueryElement.removeClass("CompositionLarge");
        jqueryElement.addClass("CompositionSmall");
        jqueryElement.unbind('click');
        jqueryElement.css("cursor", "auto");
        $(".ArticleContainer", jqueryElement).stop().animate({ height: "1px", minHeight: "1px" }, 5);
    });



}

var ImageSizes = new Object();


//init de compositie op klein formaat
function InitComposition(element, imgWidth, imgHeight) {
    ImageSizes[element.id] = new Object();
    ImageSizes[element.id].width = imgWidth;
    ImageSizes[element.id].height = imgHeight;

    var smallWidth = 0.23 * imgWidth;
    var smallHeight = 0.23 * imgHeight;
    var jqueryElement = $(element);
    $(".imgContainer", jqueryElement).stop().animate({ height: "92px", width: "92px" });
    $(".imgContainer", jqueryElement).children().stop().animate({ height: smallHeight + "px", width: smallWidth + "px" });

}

//scroll naar een bepaald element op het scherm
function ScrollToElement(theElement) {

    var selectedPosX = 0;
    var selectedPosY = 0;

    while (theElement != null) {
        selectedPosX += theElement.offsetLeft;
        selectedPosY += theElement.offsetTop;
        theElement = theElement.offsetParent;
    }

    window.scrollTo(selectedPosX, selectedPosY);

}




/*********************************************************************
* No onMouseOut event if the mouse pointer hovers a child element 
* *** Please do not remove this header. ***
* This code is working on my IE7, IE6, FireFox, Opera and Safari
* 
* Usage: 
* <div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');"> 
*		So many childs 
*	</div>
*
* @Author Hamid Alipour Codehead @ webmaster-forums.code-head.com		
**/
function is_child_of(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

function fixOnMouseOut(element, event, pvFunction) {
    var current_mouse_target = null;
    if (event.toElement) {
        current_mouse_target = event.toElement;
    } else if (event.relatedTarget) {
        current_mouse_target = event.relatedTarget;
    }
    if (!is_child_of(element, current_mouse_target) && element != current_mouse_target) {
        if (pvFunction != null) {
            pvFunction();
        }
    }
}
/*********************************************************************/

/* mouseout / mouseover live events voor artikel meer info uitklappers */
function ArticleMoreInfoLiveEvent() {
    $(".artikelOmvat").live('mouseover mouseout', function (event) {
        var jqueryElement = $(this);
        //alert($('.ArtikelMeerInfoOmvat', jqueryElement).attr("class"))

        //alert(event.type);
        if (event.type == 'mouseover') {

            if ($('.ArtikelMeerInfoOmvat', jqueryElement).hasClass("collapsed")) {
                $('.ArtikelMeerInfoOmvat', jqueryElement).stop();
                $('.ArtikelMeerInfoOmvat', jqueryElement).addClass("expanded");
                $('.ArtikelMeerInfoOmvat', jqueryElement).removeClass("collapsed");
                $('.ArtikelMeerInfoOmvat', jqueryElement).show();
            }

        } else {
            if ($('.ArtikelMeerInfoOmvat', jqueryElement).hasClass("expanded")) {
                $('.ArtikelMeerInfoOmvat', jqueryElement).stop();
                $('.ArtikelMeerInfoOmvat', jqueryElement).addClass("collapsed");
                $('.ArtikelMeerInfoOmvat', jqueryElement).removeClass("expanded");
                $('.ArtikelMeerInfoOmvat', jqueryElement).hide();
            }

        }
    });
}


/************** Begin Webshop **************/

//wel / niet expanden na een ajax request
var WS_SLIDE = true;

function WebshopAjaxStart() {
    //CollapseGroups();
}

function WebshopAjaxEnd() {

    if (WS_SLIDE) {
        ExpandGroups();
    }


    // als er een product is geselecteerd, dan de slideshow verbergen
    if ($(".ShopProductCombination").length > 0) {
        $(".ShopTitle").hide();
        $(".ShopSlides").slideUp();
        $("#pnlSlideShow").slideUp();

    }
    else {
        //slideshow tonen
        $(".ShopSlides").show();
        $(".ShopSlideShowDots").show();
        $(".ShopTitle").show();
        $("#pnlSlideShow").show();

    }

    WebshopScrollbar();
}


/*
Maakt scrollbar o.b.v. aantal gevonden items
*/
function WebshopScrollbar() {



    //bereken vaste breedte van de verschuivende div obv aantal gevonden items (in groepen overzicht)
    var groups = $(".ShopGroupButton");
    if (groups.length > 0) {
        var newWidth = groups.length * ($(groups[0]).width() + 20);
        $(".ClouScrollContainer").width(newWidth);

    }
    else {
        //bij 0 gevonden items toch genoeg plaats maken om tekst te tonen
        $(".ClouScrollContainer").width($("#content").outerWidth());
    }


    //breedte van de buitenste div laten meeschalen
    var scrollWidth = $("#content").outerWidth();

    var pnlClouScroll = $("#pnlClouScroll");
    //indien het de eerste groep betreft
//    if ($(".ShopGroupIntroButton").length > 0) {
//        pnlClouScroll.css("height", "180px");
//    }
//    else {
//        pnlClouScroll.css("min-height", "250px");
//    }
    pnlClouScroll.width(scrollWidth);
    pnlClouScroll.jScrollPane({ showArrows: true });

    SetAlternativeScrollbars();


    var jspDrag = $('.jspDrag');
    jspDrag.append("<div class='DotsHorizontal' style='bottom:0px'></div>");
    jspDrag.append("<div class='DotsHorizontal' style='top:0px'></div>");
    jspDrag.append("<div class='DotsVertical' style='left:0px'></div>");
    jspDrag.append("<div class='DotsVertical' style='right:0px'></div>");

}

/* 
selecteert een webshop groep door eerst te animeren en daarna een callback vanuit de (onzichtbare) linkbutton te simuleren 
*/
function WebshopSelect(ajaxMgr, target) {

    //naar links scrollen
    if ($(".ClouScrollContainer").length > 0) {
        $(".ClouScrollContainer").slideUp(200,
            function () {
                //raise de callback met als target een van de gekozen linkbuttons
                ajaxMgr.ajaxRequestWithTarget(target, '');
            }
        );
    }
    else if ($("#pnlProductDetails").length > 0) {
        $("#pnlProductDetails").slideUp(400,
                function () {
                    //raise de callback met als target een van de gekozen linkbuttons
                    ajaxMgr.ajaxRequestWithTarget(target, '');
                }
            );
    }
    else {
        //raise de callback direct met als target een van de gekozen linkbuttons
        ajaxMgr.ajaxRequestWithTarget(target, '');
    }
} //WebshopSelect

//toon de alternatieven van een product combinatie na een klik op het linkje
function SeToggleAlternatives(linkElement) {
    var pnlAlternatives = $(".ShopProductAlternatives", $(linkElement).parent());
    if (pnlAlternatives.is(":visible")) {
        pnlAlternatives.stop().fadeOut(
            function () {
                //scrollbars bijstellen
                WebshopScrollbar();
            }
        );

        $($(linkElement)[0]).text("> show alternatives");
    }
    else {

        pnlAlternatives.fadeIn(function () {
            //alternatieven panel erbij tonen
            pnlAlternatives.css("opacity", "1");
            WebshopScrollbar();

        }


        );
        $($(linkElement)[0]).fadeOut(); //linkje verbergen
    }
}

//stel de scrollbars in voor de alternatieven
function SetAlternativeScrollbars() {


    //schermbreedte bepalen van rechter (witte) vak
    var screenWidth = $("#content").outerWidth() - 500;


    //inclusieve artikelen
    $(".ShopProductAltIncludedScrollPane").each(function (i, el) {
        var scrollPaneOuter = $(el);

        //alleen voor de zichtbare alternatieven de scrollbars bijwerken
        if ($(".ShopProductAlternatives", scrollPaneOuter).is(":visible")) {

            //bepaal aantal alternatieven in deze groep van alternatieven
            var intAlternatives = $(".ShopProductAlternative", scrollPaneOuter).length;
            var intScrollWidth = intAlternatives * 458;

            $(".jspContainer", scrollPaneOuter).css("width", screenWidth);
            $(".ShopProductCombination", scrollPaneOuter).css("width", intScrollWidth);

            $(".ShopProductAlternatives", scrollPaneOuter).css("width", intScrollWidth);
            scrollPaneOuter.css("width", screenWidth);
            scrollPaneOuter.jScrollPane({ showArrows: true });
        }
    });



    //exclusieve artikelen
    screenWidth = $("#content").outerWidth() - 75;

    $(".ShopProductAltExcludedScrollPane").each(function (i, el) {

        var scrollPaneOuter = $(el);

        //alleen voor de zichtbare alternatieven de scrollbars bijwerken
        if ($(".ShopProductAlternatives", scrollPaneOuter).is(":visible")) {

            //bepaal aantal alternatieven in deze groep van alternatieven
            var intAlternatives = $(".ShopProductAlternative", scrollPaneOuter).length;
            var intScrollWidth = (intAlternatives) * 458 + 490;

            $(".jspContainer", scrollPaneOuter).css("width", screenWidth);
            $(".ShopProductCombination", scrollPaneOuter).css("width", intScrollWidth);


            scrollPaneOuter.css("width", screenWidth);
            scrollPaneOuter.jScrollPane({ showArrows: true });
        }
    });

}

function CollapseGroups() {
    $(".ClouScrollContainer").slideUp(200);
}

//schuift de groepen weer uit na een ajax event
function ExpandGroups() {

    $(".ClouScrollContainer").css("left", -$(".ClouScrollContainer").outerWidth()).stop().animate({ left: -20 }, 400);
}


//gaat af on resize van venster
function ShopWindowResize() {
    //afbeelding schalen met vaste verhouding. de schaal is uitgerekend op de aspx
    if (wsImageScale > 0) {
        var pnlContainer = $("#content");
        $(".SlideImg", $(".ShopSlide")).width(pnlContainer.width());
        $(".SlideImg", $(".ShopSlide")).height(pnlContainer.width() * wsImageScale);
    }

    //opnieuw de bolletjes tekenen
    slideShowInstance.ShowControls();

    //hoofd scrollbar goedzetten relatief aan breedte scherm
    $(".jspContainer").css("width", $("#content").width() - 55);


    WebshopScrollbar();
}


/* 
Klasse voor de webshop slideshow 
*/
function WebshopSlideshow() {
    this._prexIndex = 0;            //index van de vorige foto
    this._index = 0;                //index van huidige foto
    this._slides = $(".ShopSlide"); //de slide divjes
    this._timer = null;             //hier komt een timertje in bij het starten van de slideshow
    this._interval = 6500;          //interval van fotowissel in ms

}

//vorige slide tonen
WebshopSlideshow.prototype.MoveLeft = function () {
    this.Stop();
    this._prevIndex = this._index;
    this._index--;
    if (this._index < 0) {
        this._index = this._slides.length - 1;
    }
    this.ShowCurrent();
    this.ShowControls();
}
//naar de volgende slide
WebshopSlideshow.prototype.MoveRight = function () {
    this.Stop();
    this.Next();
}

//toont de slide met de opgegeven index
WebshopSlideshow.prototype.MoveTo = function (index) {
    this.Stop();
    this._prevIndex = this._index;
    this._index = index;
    this.ShowCurrent();
    this.ShowControls();
}
//toont de slide op de huidige index
WebshopSlideshow.prototype.ShowCurrent = function () {
    var me = this;

    if (me._index != me._prevIndex) {
        //bepaal of de huidige slide naar links of rechts moet worden geanimeerd
        var goLeft = me._index <= me._prevIndex;

        // eerst de vorige slide uit het scherm animeren
        var prevSlide = $(me._slides[me._prevIndex]);
        prevSlide.animate({ left: goLeft ? prevSlide.outerWidth() : -prevSlide.outerWidth() }, 'slow', function () {
            //daarna de huidige slide naar juiste left animeren
            me._slides.hide(); //allemaal verbergen
            var slide = $(me._slides[me._index]);
            slide.css("left", goLeft ? -slide.outerWidth() : slide.outerWidth());
            slide.show();
            slide.animate({ left: 0 }, 'slow');
        }
        );
    } //index != prevIndex
} //ShowCurrent

//start de slideshow
WebshopSlideshow.prototype.Start = function () {
    var me = this;

    //zet de next functie in een timer, zodat steeds een volgende foto wordt getoond
    this._timer = window.setInterval(function () { me.Next(); }, me._interval);

    //geef de de dots een breedte afhankelijk van het aantal, zodat ze goed in het midden staan
    //  $(".ShopSlideShowDotsInner").width((this._slides.length * 15 + 20).toString() + "px");
}

//stop met het automatisch wisselen van foto's
WebshopSlideshow.prototype.Stop = function () {
    // this._slides.stop();
    var me = this;
    window.clearInterval(me._timer);
    this._timer = null;
}

//Naar de volgende foto (links naar rechts)
WebshopSlideshow.prototype.Next = function () {
    this._prevIndex = this._index;
    this._index++;
    if (this._index >= this._slides.length) {
        this._index = 0;
    }

    this.ShowCurrent();
    this.ShowControls();
}

//Toont de buttons onderaan aan de hand van de huidige index
WebshopSlideshow.prototype.ShowControls = function () {
    var container = $(".ShopSlideShowDotsInner");
    container.empty(); //leegmaken
    for (var i = 0; i < this._slides.length; i++) {
        if (i == this._index) {
            container.append("<div class='ShopDot' onclick='ShopSlideGoTo(" + i.toString() + ");'><img src='/images/clou/DotBig.gif' /></div>");
        }
        else {
            container.append("<div class='ShopDot' onclick='ShopSlideGoTo(" + i.toString() + ");'><img src='/images/clou/DotSmall.gif' /></div>");
        }
    }
}   //ShowControls


//globale variabele van type WebshopSlideShow
var slideShowInstance;

//init functie
function InitShopSlideshow() {
    if ($(".ShopProductCombination").length > 0) {
        $(".ShopTitle").hide();
        $(".ShopSlides").slideUp();
        $("#pnlSlideShow").slideUp();

    }

    slideShowInstance = new WebshopSlideshow();

    //geef de de dots een breedte afhankelijk van het aantal, zodat ze goed in het midden staan
    $(".ShopSlideShowDotsInner").width((slideShowInstance._slides.length * 15 + 20).toString() + "px");

    slideShowInstance.MoveTo(1);

}

//globale goto functie
function ShopSlideGoTo(index) {
    slideShowInstance.MoveTo(index);
}

//selecteer het icoontje en start animatie
var move = $("#ShopSelectAnimate");

//laat zien dat er een product/compositie besteld wordt door het winkelwagen icoon over het scherm te verplaatsen
function AnimateSelect(element) {
    WS_SLIDE = null; //niet de product details/groepen expanden na ajax request

    //bepaal from en to positie
    var posFrom = $(element).offset(); //van geselecteerde item
    var posTo = $("#hplShoppingCart").offset(); //naar bestel link rechtsboven

    //indien icoontje nog niet toegevoegd, dan toevoegen
    if (move == null || move.length == 0) {
        $("body").append("<div id='ShopSelectAnimate' style='position: absolute; width: 85px; height: 61px; background: white; z-index:8000;'><img src='/images/clou/shoppingcart.png' alt=''/></div>");
        move = $("#ShopSelectAnimate");
    }


    //start positie zetten en div tonen. Daarna direct animeren
    move.css({ left: posFrom.left, top: posFrom.top });

    move.stop().animate({
        top: posTo.top,
        left: posTo.left
    },
        1100,
        function () {
            move.hide();
            WS_SLIDE = true; //sliden weer toestaan
        }
    );
    move.show();


} //Animateselect

/* maakt printbaar venster met order informatie */
function PrintOrder(html) {

    var printStr = '<html><head><link type="text/css" rel="stylesheet" href="/css/Clou.css" /><link type="text/css" rel="stylesheet" href="/css/SeShop.css" /><style>'
    printStr += "*{ font: 11.5px/19px 'DroidSansRegular' , Arial, sans-serif;}body{padding: 25px;}a{display: none;} input{display: none;} .extraInfo{display: none;}"; //verberg linkjes en knoppen
    printStr += "</style><title>Print order</title></head><body>";

    printStr += html; //de tabel met order info

    printStr += "</body>";
    w = window.open("", "OrderOverview", "width=800,height=500,toolbar=no,titlebar=0,status=0,menubar=yes,location=0,scrollbars=1");
    //w = window.open("","Order overview","width=800,height=600,location=1,scrollbars=1");
    //w.document.title = 'Order overview';
    w.document.write(printStr);
    w.print();
    w.location.reload();

}

/* de eerste groepen in de webshop */
function SeIntroGroupMouseOver(panel) {
    var $panel = $(panel);
    $panel.stop().animate({ backgroundColor: "#8CC63F"});

    $(".ShopGroupText", $panel).stop().animate({ color: "white" });
    $(".ShopArrowDot", $panel).stop().animate({ backgroundColor: "white" });

}

function SeIntroGroupMouseOut(panel) {
    var $panel = $(panel);
    $panel.stop().animate({ backgroundColor: "#F0F0F0" });
    $(".ShopGroupText", $panel).stop().animate({ color: "black" });
    $(".ShopArrowDot", $panel).stop().animate({ backgroundColor: "#8CC63F" });


}

/************** Eind webshop **************/