var thHeight = 0;
var wHeight = 0;
var maxRepeat = 4;
var activeRij = 0;
var activeImg = 0;
var nextImg = 0;
var prevImg = 0;
var jsonStr = "";
var transBg = "";

$(window).bind('resize', function () {
    wHeight = $(window).height();
});

$(document).ready(function () {
    var string = "url=" + window.location;
    var hash = string.substring(string.indexOf("#"))

    if (hash == "#contact") {
        $("#contact").show();
    }

    $(".bigImage").css({ "top": $(window).height() + "px", "display": "block" });

    $(".rij").mouseover(function () {
        $(this).find(".hover").hide();
    });

    $(".rij").hover(function () {
        $(this).find(".hover").fadeOut(150);
    },
    function () {
        $(this).find(".hover").fadeIn(150);
    });

    $(".menu").hover(function () {
        $(this).find(".top").stop().animate({
            top: '28px'
        });
    },
    function () {
        $(this).find(".top").stop().animate({
            top: '0px'
        });
    });

    $("a.contact").click(function () {
        $("#contact").show();
    });

    $("a.home, a.press, a.closeButton").click(function () {
        $("#contact").hide();
        $(".areaClose").click();
    });

    $("div.logo a").click(function () {
        if ($("#contact").css("display") == "block") {
            $("#contact").hide();
        }
        else {
            $("#contact").show();
        }
    });

    getColors();
    initDimensions();
    getPhotos();

    // we creeëren van jsonStr een object
    var jsonObj = jQuery.parseJSON(jsonStr);

    $("a.image").live("click", function () {
        var id = $(this).attr("imageId");
        var rijId = "";

        rijId = $(this).closest("div.rij").attr("id");

        // toegevoegd 23-08-2011, Renier
        // Geen grote afbeelding bij Press

        if (rijId != "press") {
            if (rijId != "press") {
                rijId = rijId.replace("rij-", "")
                activeRij = parseInt(rijId) - 1;
            }
            else {
                activeRij = 0;
            }
            var rijEnd = 0;

            initGallery(id);

            $.ajax({
                async: false,
                url: "/ajax/get_afbeelding.aspx?ID=" + id + "&h=" + $(window).height() + "&t=" + Date(),
                success: function (data) {
                    $(".bigImage .image").html(data)
                }
            });

            $(".rijenContainer").animate({
                top: '-' + $(window).height() + "px"
            }, 500, function () {
                $(this).hide();
            });

            $(".bigImage").show().animate({
                top: "0px"
            }, 500);
        }
        else {
            return false;
        }

    });

    $(".areaClose").hover(function () {
        $(this).find(".button").fadeIn(200);
    },
    function () {
        $(this).find(".button").fadeOut(100);
    });

    $(".areaClose").live("click", function () {
        // toon de rijen
        $(".rijenContainer").show().animate({
            top: '0px'
        }, 500);
        // verberg de grote afbeelding
        $(".bigImage").animate({
            top: wHeight + "px"
        }, 500, function () {
            $(this).hide();
        });
        $(".button").hide();
    });

    $(".areaRight").hover(function () {
        $(this).find(".button").fadeIn(200);
    },
    function () {
        $(this).find(".button").fadeOut(100);
    });

    $(".areaRight").live("click", function () {
        $(this).hide();

        // bepalen id van 'volgende' afbeelding
        var id = jsonObj.rijen[activeRij].images[nextImg].id
        initGallery(id);

        // openen van volgende afbeelding
        $(".bigImage .image").after("<div class='image next' style='display: none;'></div>");
        $(".bigImage .image.next").css({ "left": ($(window).width()) + "px", "display": "block" });

        $.ajax({
            async: false,
            url: "/ajax/get_afbeelding.aspx?ID=" + id + "&h=" + $(window).height() + "&t=" + Date(),
            success: function (data) {
                $(".bigImage .image.next").html(data)
            }
        });

        $(".bigImage .image.active").stop().animate({
            left: "-" + $(window).width() + "px"
        }, 500, function () {

        });

        $(".bigImage .image.next").stop().animate({
            left: "0px"
        }, 500, function () {
            $(".bigImage .image.active").remove();
            $(".bigImage .image.next").addClass("active");
            $(".bigImage .image.next").removeClass("next");
            $(".areaRight").show();
        });
    });

    $(".areaLeft").hover(function () {
        $(this).find(".button").fadeIn(200);
    },
    function () {
        $(this).find(".button").fadeOut(100);
    });

    $(".areaLeft").live("click", function () {
        $(this).hide();

        // bepalen id van 'vorige' afbeelding
        var id = jsonObj.rijen[activeRij].images[prevImg].id
        initGallery(id);

        // openen van vorige afbeelding
        $(".bigImage .image").after("<div class='image prev' style='display: none;'></div>");
        $(".bigImage .image.prev").css({ "left": "-" + ($(window).width()) + "px", "display": "block" });

        $.ajax({
            async: false,
            url: "/ajax/get_afbeelding.aspx?ID=" + id + "&h=" + $(window).height() + "&t=" + Date(),
            success: function (data) {
                $(".bigImage .image.prev").html(data)
            }
        });

        $(".bigImage .image.active").animate({
            left: $(window).width() + "px"
        }, 500);

        $(".bigImage .image.prev").animate({
            left: "0px"
        }, 500, function () {
            $(".bigImage .image.active").remove();
            $(".bigImage .image.prev").addClass("active");
            $(".bigImage .image.prev").removeClass("prev");
            $(".areaLeft").show();
        });

    });

});

// Haal kleuren op en stel config in
function getColors() {
    $.ajax({
        async: false,
        url: "/ajax/get_colors.aspx?t=" + Date(),
        success: function (data) {
            var str = data;
            var obj = jQuery.parseJSON(str);

            // console.log(obj.top)
            if (obj.top != "" && obj.top.length == 7) {
                $("#top").css({ "backgroundColor": obj.top });
                $(".logo").css({ "backgroundColor": obj.top });
                $("#contact").css({ "backgroundColor": obj.top });
            }

            // console.log("tekst: " + obj.tekst)
            var colorTekst = $(".top a").css("color");

            if (obj.tekst != "" && obj.tekst.length == 7) {
                $(".top a").css({ "color": obj.tekst });
                colorTekst = $(".top a").css("color");
            }

            //console.log(obj.tekstOver)
            if (obj.tekstOver != "" && obj.tekstOver.length == 7) {
                $(".top a").hover(function () {
                    $(this).css({ "color": obj.tekstOver });
                },
                function () {
                    $(this).css({ "color": colorTekst });
                });
            }

            //console.log(obj.imgTop)
            if (obj.imgTop != "-") {
                $(".bigImage .areaClose .button").css({ "background": "transparent url(/" + obj.imgTop + ") 50% 50% no-repeat" });
            }

            // console.log(obj.imgLeft)
            if (obj.imgLeft != "-") {
                $(".bigImage .areaLeft .button").css({ "background": "transparent url(/" + obj.imgLeft + ") 50% 50% no-repeat" });
            }

            // console.log(obj.imgRight)
            if (obj.imgRight != "-") {
                $(".bigImage .areaRight .button").css({ "background": "transparent url(/" + obj.imgRight + ") 50% 50% no-repeat" });
            }

            // console.log(obj.imgTrans)
            if (obj.imgTrans != "-") {
                $("div.hover").each(function () {
                    $(this).css({ "background": "transparent url(/" + obj.imgTrans + ")" });
                });
            }
        }
    });
}

// bepaal grootte van scherm en de hoogte van de afbeeldingen
function initDimensions() {
    // groote van het scherm $(window).height() * $(window).width
    wHeight = $(window).height();
    thHeight = $(window).height() / 5;
    thHeight = Math.ceil(thHeight);
}

// haal afbeeldingen op
function getPhotos() {

    $(".rij").each(function () {
        // Haal foto's op per rij
        var id = $(this).attr("id")
        var width = 0
        var jsonRij = "";
        var helft = Math.floor($(window).width() / 2)
        var hover = "<div class='hover' style='" + $("div.hover").attr("style") + "'></div>"

        if (id != "press") {
            $(this).css({ "background": "url(/img/loader_new.gif) no-repeat " + helft + "px 50%" });
        }
         
        $.ajax({
            async: false,
            url: "/ajax/get_afbeeldingen.aspx?m=" + id + "&h=" + thHeight + "&w=" + $(window).width() + "&t=" + Date(),
            success: function (data) {
                // Zet de foto's in de juiste Rij
                $("#" + id).html(hover + data);
                $("#" + id).find("a").each(function () {
                    width = width + parseInt($(this).find("img").attr("iWidth"));
                    jsonRij += '{"id": "' + $(this).attr("imageId") + '"},'
                });

                $("#" + id + " .scrollableArea").width(width);
            }
        });

        if (jsonRij != "") {
            jsonStr += '{"id":"' + id + '", "images": [ ' + jsonRij.substring(0, jsonRij.length - 1) + ']},'
        }

        if (id == "press") {
            calc(id, width, 1)
        }
        else if (width <= $(window).width()) {
            calc(id, width, 1)
        }

    });

    jsonStr = '{"rijen": [' + jsonStr.substring(0, jsonStr.length - 1) + ']}'
    
}

function calc(rijId, iWidth, repeat) {
    var stoppen = false;

    if (rijId != "press") {
        $("#" + rijId + " .scrollableArea").find("a").each(function () {

            //iWidth = iWidth + parseInt($(this).find("img").attr("iWidth"));
            // console.log($(window).width() + " - " + iWidth)
            //console.log()

            if (iWidth < $(window).width()) {
                // dan clonen
                $(this).clone().appendTo("#" + rijId + " .scrollableArea");
            }

            iWidth = iWidth + parseInt($(this).find("img").attr("iWidth"));

            var areaWidth = $("#" + rijId + " .scrollableArea").width();
            $("#" + rijId + " .scrollableArea").width(iWidth);

        });

        if (iWidth > $(window).width()) {
            stoppen = true
        }

        if (!stoppen) {
            repeat = repeat + 1;
            if (repeat <= maxRepeat) {
                calc(rijId, iWidth, repeat)
            }
        }
    }
    else {

        var windowWidth = $(window).width()

        if (repeat <= 6) {

            // aanvullen waar nodig :: naar laatste 'rij'
            var $ul = $("#" + rijId + " ul:last-child")
            var iWidth = 0

            $ul.find("li").each(function () {
                iWidth += parseInt($(this).find("img").attr("iWidth"));
            });
            
            if (iWidth < $ul.width()) {
                $("#" + rijId).find("li").each(function () {
                    // kopieren naar laatste rij
                    $(this).clone().appendTo("#" + rijId + " ul:last-child");
                    
                    // nieuwe breedte
                    iWidth = iWidth + parseInt($(this).find("img").attr("iWidth"));

                    // nieuwe rij aanmaken?
                    if (iWidth > ($(window).width())) {
                        $("#" + rijId).append("<ul></ul>");
                        iWidth = 0;
                    }
                });
            } 
            
            if ($(".rij ul").length < 6 && repeat <= 6) {
                calc(rijId, iWidth, repeat + 1) 
            }

        }
    }

}

function initGallery(id) {
    // we creeëren van jsonStr een object
    var jsonObj = jQuery.parseJSON(jsonStr);

    // door huidige rij lopen voor opbouw van gallery
    $.each(jsonObj.rijen[activeRij].images, function (i) {
        // wat is huidige / geopende afbeelding (index)
        if (jsonObj.rijen[activeRij].images[i].id == id) {
            // active, volgende en vorige bepalen
            activeImg = i; nextImg = i + 1; prevImg = i - 1;
        }
        // bepalen van einde
        rijEnd = i
    });

    // volgende en vorige bepalen
    if (nextImg > rijEnd) { nextImg = 0 }
    if (prevImg < 0) { prevImg = rijEnd }
}