var marginLeft = 0;
var width = 0;
var step = 932;
var lastitem = 0;

$(window).load(function () {
    // afmetingen inhoud berekenen
    $("div#makeMeScrollable div.scrollableArea div.image").each(function () {
        width = width + $(this).outerWidth();
    });

    $("div#makeMeScrollable div.scrollableArea").css({ "width": width });
    $("div#makeMeScrollable div.scrollableArea").css({ "marginLeft": marginLeft + "px" });
});

$(document).ready(function () {
    $("div#makeMeScrollable div.scrollableArea div.image").each(function () {
        width = width + $(this).outerWidth();
    });

    var sizeOfdiv = width;
    var containerWidth = $("#makeMeScrollable").outerWidth();   // breedte van de container
    var outsideWidth = sizeOfdiv - containerWidth;              // breedte van wat buiten container ligt

    var minMarginLeft = 0;                                              // hoever naar links?
    var maxMarginLeft = sizeOfdiv - (2 * sizeOfdiv) + containerWidth;   // hoever naar rechts? >> 2x elementen + breedte van container

   // Aangepaste tekst op homepage, aangepast lettertype - René
    // ER ZIJN NOG    
    var site_tagline = $(".sticker .content .regel_1").html();
    if (site_tagline != null) {
        var site_len = site_tagline.length;
        var x = 390 - (12 * site_len);
        var r = Raphael("er_zijn_nog", 125, 35);
        var text = r.print(20, 0, site_tagline, r.getFont("FuturaTEE"), 15).attr({ fill: '#FFF', 'text-anchor': 'end' });
        text.rotate(-15, 130, 90);
    }

    // AANTAL HUIZEN
    var site_tagline = $(".sticker .content .regel_2").html();
    if (site_tagline != null) {
        var site_len = site_tagline.length;
        var x = 390 - (12 * site_len);
        var r = Raphael("aantal_huizen", 125, 50);
        var text = r.print(20, 0, site_tagline, r.getFont("FuturaTEE"), 15).attr({ fill: '#FFF', 'text-anchor': 'end' });
        text.rotate(-15, 140, 100);
    }

    // TE KOOP / TE HUUR
    var site_tagline = $(".sticker .content .regel_3").html();
    if (site_tagline != null) {
        var site_len = site_tagline.length;
        var x = 390 - (12 * site_len);
        var r = Raphael("te_koop", 125, 35);
        var text = r.print(20, 0, site_tagline, r.getFont("FuturaTEE"), 15).attr({ fill: '#FFF', 'text-anchor': 'end' });
        text.rotate(-15, 120, 90);
    }
    // Orginele variant
//    // ER ZIJN NOG    
//    var site_tagline = $(".sticker .content .regel_1").html();
//    if (site_tagline != null) {
//        var site_len = site_tagline.length;
//        var x = 390 - (12 * site_len);
//        var r = Raphael("er_zijn_nog", 125, 35);
//        var text = r.print(20, 0, site_tagline, r.getFont("FuturaTEE-Bold"), 15).attr({ fill: '#FFF', 'text-anchor': 'end' });
//        text.rotate(-15, 130, 90);
//    }

//    // AANTAL HUIZEN
//    var site_tagline = $(".sticker .content .regel_2").html();
//    if (site_tagline != null) {
//        var site_len = site_tagline.length;
//        var x = 390 - (12 * site_len);
//        var r = Raphael("aantal_huizen", 125, 50);
//        var text = r.print(20, 0, site_tagline, r.getFont("FuturaTEE"), 15).attr({ fill: '#FFF', 'text-anchor': 'end' });
//        text.rotate(-15, 140, 100);
//    }

//    // TE KOOP / TE HUUR
//    var site_tagline = $(".sticker .content .regel_3").html();
//    if (site_tagline != null) {
//        var site_len = site_tagline.length;
//        var x = 390 - (12 * site_len);
//        var r = Raphael("te_koop", 125, 35);
//        var text = r.print(20, 0, site_tagline, r.getFont("FuturaTEE-Bold"), 10).attr({ fill: '#FFF', 'text-anchor': 'end' });
//        text.rotate(-15, 120, 90);
//    }

    $(".pijl_links").click(function () {
        if ((parseInt($("div#makeMeScrollable div.scrollableArea").css("marginLeft")) + step) > minMarginLeft) {
            marginLeft = minMarginLeft;
        }
        else {
            marginLeft += step
        }

        $("div.scrollableArea").animate({
            marginLeft: marginLeft + "px"
        });
    });

    $(".pijl_rechts").click(function () {
        if ((parseInt($("div#makeMeScrollable div.scrollableArea").css("marginLeft")) - step) < maxMarginLeft) {
            marginLeft = maxMarginLeft;
        }
        else {
            marginLeft -= step
        }

        $("div.scrollableArea").animate({
            marginLeft: marginLeft + "px"
        });
    });

    $('.projecthoofd, .agenda').hover(function () {
        $(this).stop(true, true).css({
            backgroundPosition: "-197px 0px"
        }).animate({
            backgroundPosition: "0px 0px"
        }, 500);
    },
        function () {
            $(this).stop().css({
                backgroundPosition: "-197px 0px"
            });
        }
    );

    var currentItem = ""
    var maxMargin = 664;

    $(".gallery").find(".item").each(function () {
        if ($(this).hasClass("active")) {
            currentItem = $(this).attr("class")
            currentItem = currentItem.replace("item", "")
            currentItem = currentItem.replace("active", "")
            currentItem = currentItem.replace("item_", "")
            currentItem = trim(currentItem)
        }

        var itemWidth = $(this).outerWidth();
        maxMargin -= itemWidth;
    });

    //console.log(maxMargin)

    // wisselen van foto via klik op thumbnail
    $(".gallery").find(".item").each(function () {
        var url = $(this).attr("strurl");

        $(this).click(function () {
            $(".project_plaat").show();
            $("#video").html("");

            $(".gallery .item.active").removeClass("active");

            if ($(this).hasClass("active") == false) {
                $(this).addClass("active");

                var item = $(this).attr("class")
                item = item.replace("item", "")
                item = item.replace("active", "")
                item = item.replace("item_", "")
                item = trim(item)
            }

            // als er meer dan 4 items zijn en men klikt op item 4 of hoger margin-left - 100
            if (item >= 4 && $(".gallery .item").length > 4) {
                var itemWidth = $(this).outerWidth();
                var marginLeft = $(".gallery .items").css("marginLeft");

                if (currentItem < item) {
                    marginLeft = parseInt(marginLeft.replace("px", ""));
                    marginLeft = marginLeft - itemWidth;

                    //console.log(maxMargin)
                    //console.log(marginLeft)

                    if (marginLeft < maxMargin) {
                        marginLeft = maxMargin;
                    }
                }
                else {
                    marginLeft = parseInt(marginLeft.replace("px", ""));
                    marginLeft = marginLeft + itemWidth;
                }

                $(".gallery .items").css({ "marginLeft": marginLeft + "px" });
            }
            // als er meer dan 4 items zijn en men klikt op item 3 of lager margin-left 0
            if (item < 3 && $(".gallery .item").length > 4) {
                $(".gallery .items").css({ "marginLeft": "0px" });
            }

            currentItem = item

            if ($(this).hasClass("video") == false) {
                $("#video").hide();
                $(".project_plaat").show();

                $("#galleryItem").val(item);
                $("#projectAfbeelding").attr("src", url);
				var tmpUrl = url.replace("446", "1000").replace("688", "1000");

				$("#projectAfbeeldingUrl").attr("href", tmpUrl);
				
            }
            else {
                $(".project_plaat").hide();
                $("#video").show();

                $("#galleryItem").val(item);

                var videoid = url;
                $("#video").each(function () {
                    var video = jwplayer("video").setup({
                        flashplayer: "/jwplayer/player.swf",
                        file: "/video/1114_110505 Animatie Blok0" + videoid + ".flv",
                        image: "/img/video-" + videoid + ".jpg",
                        height: 411,
                        width: 688,
                        autostart: true,
                        allowfullscreen: true,
                        allowscriptaccess: "always",
                        controlbar: 'bottom'
                    });
                });
            }
        });

        // hoogste id bepalen
        var itemid = $(this).attr("class")
        itemid = itemid.replace("item", "")
        itemid = itemid.replace("active", "")
        itemid = itemid.replace("video", "")
        itemid = itemid.replace("item_", "")
        itemid = parseInt(trim(itemid))

        if (itemid > lastitem) { lastitem = itemid; }

    });

    // wisselen van foto via linker pijltje
    // wisselen van foto via rechter pijltje
    $(".project_details").find(".pijl_links_project").each(function () {
        $(this).click(function () {
            var currentid = parseInt($("#galleryItem").val());
            var openitem = currentid - 1;

            if (openitem == 0) {
                openitem = lastitem;
            }

            // als er meer dan 4 items zijn en men klikt op item 4 of hoger margin-left - 100
            if (openitem >= 4 && $(".gallery .item").length > 4) {

                var itemWidth = $(this).outerWidth();
                var marginLeft = $(".gallery .items").css("marginLeft");

                if (currentid < openitem) {
                    marginLeft = parseInt(marginLeft.replace("px", ""));
                    marginLeft = marginLeft - itemWidth;

                    //console.log(maxMargin)
                    //console.log(marginLeft)

                    if (marginLeft < maxMargin) {
                        marginLeft = maxMargin;
                    }
                }
                else {
                    marginLeft = parseInt(marginLeft.replace("px", ""));
                    marginLeft = marginLeft + itemWidth;
                }

                $(".gallery .items").css({ "marginLeft": marginLeft + "px" });
            }
            // als er meer dan 4 items zijn en men klikt op item 3 of lager margin-left 0
            if (openitem < 3 && $(".gallery .item").length > 4) {
                $(".gallery .items").css({ "marginLeft": "0px" });
            }
            
            // wisselen van active class
            $(".gallery .item.active").removeClass("active");
            $(".gallery .item_" + openitem).addClass("active");

            $(".gallery .item.active").removeClass("active");
            $(".gallery .item_" + openitem).addClass("active");

            // url ophalen
            var url = $(".gallery .item_" + openitem).attr("strurl");

            if ($(".gallery .item_" + openitem).hasClass("video") == false) {
                $("#video").hide();
                $(".project_plaat").show();

                $("#galleryItem").val(openitem);
                $("#projectAfbeelding").attr("src", url);
				var tmpUrl = url.replace("446", "1000").replace("688", "1000");
				$("#projectAfbeeldingUrl").attr("href", tmpUrl);
            }
            else {
                $(".project_plaat").hide();
                $("#video").show();

                $("#galleryItem").val(openitem);

                var videoid = url;
                $("#video").each(function () {
                    var video = jwplayer("video").setup({
                        flashplayer: "/jwplayer/player.swf",
                        file: "/video/1114_110505 Animatie Blok0" + videoid + ".flv",
                        image: "/img/video-" + videoid + ".jpg",
                        height: 411,
                        width: 688,
                        autostart: true,
                        allowfullscreen: true,
                        allowscriptaccess: "always",
                        controlbar: 'bottom'
                    });
                });
            }


        });
    });

    // wisselen van foto via rechter pijltje
    $(".project_details").find(".pijl_rechts_project").each(function () {
        $(this).click(function () {
            var currentid = parseInt($("#galleryItem").val());
            var openitem = currentid + 1;

            if (openitem > lastitem) {
                openitem = 1;
            }

            // als er meer dan 4 items zijn en men klikt op item 4 of hoger margin-left - 100
            if (openitem >= 4 && $(".gallery .item").length > 4) {

                var itemWidth = $(this).outerWidth();
                var marginLeft = $(".gallery .items").css("marginLeft");

                if (currentid < openitem) {
                    marginLeft = parseInt(marginLeft.replace("px", ""));
                    marginLeft = marginLeft - itemWidth;

                    //console.log(maxMargin)
                    //console.log(marginLeft)

                    if (marginLeft < maxMargin) {
                        marginLeft = maxMargin;
                    }
                }
                else {
                    marginLeft = parseInt(marginLeft.replace("px", ""));
                    marginLeft = marginLeft + itemWidth;
                }

                $(".gallery .items").css({ "marginLeft": marginLeft + "px" });
            }
            // als er meer dan 4 items zijn en men klikt op item 3 of lager margin-left 0
            if (openitem < 3 && $(".gallery .item").length > 4) {
                $(".gallery .items").css({ "marginLeft": "0px" });
            }

            // wisselen van active class
            $(".gallery .item.active").removeClass("active");
            $(".gallery .item_" + openitem).addClass("active");

            $(".gallery .item.active").removeClass("active");
            $(".gallery .item_" + openitem).addClass("active");

            // url ophalen
            var url = $(".gallery .item_" + openitem).attr("strurl");

            if ($(".gallery .item_" + openitem).hasClass("video") == false) {
                $(".project_plaat").show();
                $("#video").hide();

                $("#galleryItem").val(openitem);
                $("#projectAfbeelding").attr("src", url);
				
				var tmpUrl = url.replace("446", "1000").replace("688", "1000");
				$("#projectAfbeeldingUrl").attr("href", tmpUrl);
            }
            else {
                $(".project_plaat").hide();
                $("#video").show();

                $("#galleryItem").val(openitem);

                var videoid = url;
                $("#video").each(function () {
                    var video = jwplayer("video").setup({
                        flashplayer: "/jwplayer/player.swf",
                        file: "/video/1114_110505 Animatie Blok0" + videoid + ".flv",
                        image: "/img/video-" + videoid + ".jpg",
                        height: 411,
                        width: 688,
                        autostart: true,
                        allowfullscreen: true,
                        allowscriptaccess: "always",
                        controlbar: 'bottom'
                    });
                });
            }


        });
    });

    $(".kavel").each(function () {
        $(this).tipTip({
            defaultPosition: "left",
            content: $(this).find(".tipContent").html()
        });
    });
});

function trim (myString)
{
    return myString.replace(/^s+/g,'').replace(/s+$/g,'')
}

function gotoMap() {
    $("#kaarten").show();
    $.scrollTo($("#kaarten"), 500);
}

/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
; (function (d) { var k = d.scrollTo = function (a, i, e) { d(window).scrollTo(a, i, e) }; k.defaults = { axis: 'xy', duration: parseFloat(d.fn.jquery) >= 1.3 ? 0 : 1 }; k.window = function (a) { return d(window)._scrollable() }; d.fn._scrollable = function () { return this.map(function () { var a = this, i = !a.nodeName || d.inArray(a.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) != -1; if (!i) return a; var e = (a.contentWindow || a).document || a.ownerDocument || a; return d.browser.safari || e.compatMode == 'BackCompat' ? e.body : e.documentElement }) }; d.fn.scrollTo = function (n, j, b) { if (typeof j == 'object') { b = j; j = 0 } if (typeof b == 'function') b = { onAfter: b }; if (n == 'max') n = 9e9; b = d.extend({}, k.defaults, b); j = j || b.speed || b.duration; b.queue = b.queue && b.axis.length > 1; if (b.queue) j /= 2; b.offset = p(b.offset); b.over = p(b.over); return this._scrollable().each(function () { var q = this, r = d(q), f = n, s, g = {}, u = r.is('html,body'); switch (typeof f) { case 'number': case 'string': if (/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)) { f = p(f); break } f = d(f, this); case 'object': if (f.is || f.style) s = (f = d(f)).offset() } d.each(b.axis.split(''), function (a, i) { var e = i == 'x' ? 'Left' : 'Top', h = e.toLowerCase(), c = 'scroll' + e, l = q[c], m = k.max(q, i); if (s) { g[c] = s[h] + (u ? 0 : l - r.offset()[h]); if (b.margin) { g[c] -= parseInt(f.css('margin' + e)) || 0; g[c] -= parseInt(f.css('border' + e + 'Width')) || 0 } g[c] += b.offset[h] || 0; if (b.over[h]) g[c] += f[i == 'x' ? 'width' : 'height']() * b.over[h] } else { var o = f[h]; g[c] = o.slice && o.slice(-1) == '%' ? parseFloat(o) / 100 * m : o } if (/^\d+$/.test(g[c])) g[c] = g[c] <= 0 ? 0 : Math.min(g[c], m); if (!a && b.queue) { if (l != g[c]) t(b.onAfterFirst); delete g[c] } }); t(b.onAfter); function t(a) { r.animate(g, j, b.easing, a && function () { a.call(this, n, b) }) } }).end() }; k.max = function (a, i) { var e = i == 'x' ? 'Width' : 'Height', h = 'scroll' + e; if (!d(a).is('html,body')) return a[h] - d(a)[e.toLowerCase()](); var c = 'client' + e, l = a.ownerDocument.documentElement, m = a.ownerDocument.body; return Math.max(l[h], m[h]) - Math.min(l[c], m[c]) }; function p(a) { return typeof a == 'object' ? a : { top: a, left: a} } })(jQuery);