﻿Function.prototype.createCallback = function() {
    var A = arguments; var B = this; return function() { return B.apply(window, A); };
}

Function.prototype.createDelegate = function(scope, arguments, appendArgs) {
    var D = this; return function() { var F = arguments || arguments; if (appendArgs === true) { F = Array.prototype.slice.call(arguments, 0); F = F.concat(arguments); } else { if (typeof appendArgs == "number") { F = Array.prototype.slice.call(arguments, 0); var E = [appendArgs, 0].concat(arguments); Array.prototype.splice.apply(F, E); } } return D.apply(scope || window, F); };
};

var WWW = function(theme, splashStart) {
    this.splashStart = splashStart;
    this.zIndex = 100;
    this.theme = theme;
    this.bg = $($('div#mainBG, div#mainBG-splash')[0]);
    this.splash = $('div#Splash');
    this.splashAnimSrc = null;
    this.main = $('div#Main');
    this.mainAnimSrc = null;
    this.mainBg = null;
    this.cache = {};
    this.scrolling = false;
    this.cancelToFront = false;
    this.initCache = function(type, id) {
        if (!this.cache[this.theme])
            this.cache[this.theme] = {};
        if (!this.cache[this.theme][type])
            this.cache[this.theme][type] = {};
    }
    this.getCache = function(type, id) {
        this.initCache(type, id);
        return this.cache[this.theme][type][id]
    };
    this.addCache = function(type, id, value) {
        this.initCache(type, id);
        this.cache[this.theme][type][id] = value;
        return value;
    };
    this.getJson = function(theme, id, type, next, callback) {
        $.ajax({
            type: 'POST'
            , url: 'Service.asmx/GetJson'
            , data: '{theme: "' + theme + '",id:"' + id + '", type:"' + type + '", next:"' + next + '"}'
            , contentType: 'application/json; charset=utf-8'
            , dataType: 'json'
            , success: callback
            , error: function(xhr, result) {
                //TODO: general handler
                alert('mislukt');
            }
        });
    };
    this.changeThemeMain = function(e) {
        var t = e.target;
        var id = t.getAttribute("oid");
        t.blur();

        if (id && this.theme != id) {
            this.theme = id;
            if (!this.getCache('main', 'main'))
                this.getJson(this.theme, 'main', 'main', false, function(result) {
                    var json = eval('(' + result.d + ')');
                    this.addCache('main', 'main', json);
                } .createDelegate(this));

            if (this.cases.timeOutId)
                clearTimeout(this.cases.timeOutId);

            this.mainBg.css("display", "none");
            this.mainAnimSrc.animate({
                opacity: 0
            }
            , 500
            , function() {
                document.body.className = this.theme;

                if (this.cases.isOpen() === true)
                    this.cases.toggle(null, false);
                if (this.news.isOpen() === true)
                    this.news.toggle(null, false);

                this.splash.css("display", "block");
                this.main.css("display", "none");
                this.bg.animate({
                    left: "310px"
            , top: "120px"
                }
            , 500
            , function() {
                this.splashAnimSrc.animate({
                    opacity: 1
                }
            , 500
            , function() {
                this.splashAnimSrc.css("opacity", null);
            } .createDelegate(this));
            } .createDelegate(this));
            } .createDelegate(this));
        }
        return false;
    }
    this.changeThemeSplash = function(e) {
        var t = e.target;
        var id = t.getAttribute("oid");
        t.blur();

        if (id && this.theme != id) {
            this.theme = id;

            if (!this.getCache('main', 'main'))
                this.getJson(this.theme, 'main', 'main', false, function(result) {
                    var json = eval('(' + result.d + ')');
                    this.addCache('main', 'main', json);
                } .createDelegate(this));

            this.splashAnimSrc.animate({
                opacity: 0
            }
            , 500
            , function() {
                document.body.className = this.theme;
                this.splashAnimSrc.animate({
                    opacity: 1
                }
            , 500
            , function() {
                this.splashAnimSrc.css("opacity", null);
            } .createDelegate(this));
            } .createDelegate(this));
        }
        return false;
    }
    this.toggleTheme = function(e) {
        var t = e.target;
        t.blur();

        this.splashAnimSrc.animate({
            opacity: 0
        }
        , 500
        , function() {
            this.bg.animate({
                left: "-11px"
                , top: "-52px"
            }
        , 500, function() {
            this.splash.css("display", "none");
            this.main.css("display", "block");
            this.print(this.getCache('main', 'main'));
            this.mainAnimSrc.animate({
                opacity: 1
            }
            , 500
            , function() {
                this.mainAnimSrc.css("opacity", null);
                this.mainBg.css("display", "block");
            } .createDelegate(this))
        } .createDelegate(this));
        } .createDelegate(this));

        return false;
    }
    this.print = function(json) {
        if (json) {
            this.pages.init(json.pages);
            this.cases.init(json.cases);
            this.news.init(json.news);
        }
    }
    this.init = function() {
        this.splashAnimSrc = this.splash.find('div.top, div#box1, div#box2, div#box3');
        this.mainAnimSrc = this.main.find('div#ContentHouder, div#caseContainer, div#nieuwsContainer');
        this.mainBg = this.main.find('div#footer div.footerBg, div.div#caseBG, div#nieuwsBG');
        this.splash.find("div.top a").click(this.changeThemeSplash.createDelegate(this));
        this.splash.find("div#box3 a").click(this.toggleTheme.createDelegate(this));
        this.main.find("div.top a").click(this.changeThemeMain.createDelegate(this));
        if (this.splashStart) {
            this.mainAnimSrc.css("opacity", "0");
            this.mainBg.css("display", "none");
        }
        else
            this.splashAnimSrc.css("opacity", "0");
    }
    this.doScroll = function(up, down, dir, target, container) {
        if (this.scrolling === false) {
            if ((dir == "up" && up.hasClass("syn-scroll-top-active") === true) || (dir == "down" && down.hasClass("syn-scroll-down-active") === true)) {
                var x = 75 * (dir == "down" ? -1 : 1);

                var top = target[0].offsetTop + x;
                if (top > 0)
                    top = 0;

                target.css("top", top + "px");
                this.scrolling = false;

                if (top == 0) {
                    up.removeClass('syn-scroll-top-active');
                    down.addClass('syn-scroll-down-active');
                }
                else if (target.innerHeight() + top < container.outerHeight()) {
                    down.removeClass('syn-scroll-down-active');
                    up.addClass('syn-scroll-top-active');
                }
                else {
                    up.addClass('syn-scroll-top-active');
                    down.addClass('syn-scroll-down-active');
                }
            }
        }
    }
    this.initScroll = function(up, down, target, container) {
        up.removeClass('syn-scroll-top-active');
        down.removeClass('syn-scroll-down-active');
        target.css("top", "0px");

        if (target.innerHeight() > container.outerHeight()) {
            up.show();
            down.show();
            down.addClass('syn-scroll-down-active');
        }
        else {
            up.hide();
            down.hide();
        }
    }

    this.pages = {
        p: this
        , ct: $("div#ContentBox")
        , bg: $("div#rechtsBG")
        , spacer: null
        , spacerBox: null
        , menu: null
        , content: null
        , change: function(e) {
            var t = e.target;
            var id = t.getAttribute("oid");
            t.blur();

            this.menu.children('li').removeClass('active');
            $(t).parent('li:first').addClass('active');

            var c = this.p.getCache('pages', id);
            if (c)
                this.print(c);
            else
                this.p.getJson(this.p.theme, id, "page", false, function(result) {
                    var json = eval('(' + result.d + ')');
                    this.print(this.p.addCache('pages', json.id, json));
                } .createDelegate(this));

            if (this.p.cases.isOpen() === true)
                this.p.cases.toggle();
            if (this.p.news.isOpen() === true)
                this.p.news.toggle();
            return false;
        }
        , print: function(json) {
            this.content.html('<h1>' + json.name + '</h1>' + json.text);
            if (json.hideBg === true)
                this.spacerBox.css("display", "none");
            else
                this.spacerBox.css("display", "block");

            this.setHeight();
        }
        , setHeight: function() {
            this.spacer.css("height", "175px");
            var height = this.bg.height() - 175 - 75;
            if (height > 175) {
                this.spacer.css("height", height + "px");
            }
        }
        , init: function(col) {
            if (!col) {
                this.menu = this.ct.find("div.menu ul");
                this.content = this.ct.find("div#content");
                this.spacer = this.bg.find("div.spacer");
                this.spacerBox = this.bg.find("div.spacerBox");

                this.bg.css("backgroundPosition", "left bottom");
                this.setHeight();
            }
            else {
                this.menu.empty();
                for (var i = 0; i < col.length; i++) {
                    var c = col[i];
                    if (i == 0)
                        this.print(this.p.addCache('pages', c.id, c))

                    this.menu.append('<li' + (i == 0 ? ' class="active"' : '') + '><a href="?theme=' + this.p.theme + '&pageId=' + c.id + '" oid="' + c.id + '">' + c.name + '</a></li>');
                }
            }

            this.menu.find("a").click(this.change.createDelegate(this));
        }
    }

    this.cases = {
        p: this
        , bg: $("div#caseBG")
        , ct: $("div#caseContainer")
        , msg: $("div#case-aankondiging")
        , close: null
        , menu: null
        , content: null
        , scrollUp: null
        , scrollDown: null
        , isOpen: function() {
            return this.ct.height() == 412;
        }
        , initSlide: function() {
            if (this.isOpen() === false)
                this.timeOutId = setTimeout(this.slide.createDelegate(this), 5000);
        }
        , slide: function() {

            var active = $(this.menu.find('li.active a, li.activeFirst a')[0]).parent()[0];
            var next = $($(active).next('li[oid]')[0]).children('a')[0];

            this.change({ target: (next || this.menu.find('li:first a')[0]) }, true);
            this.initSlide();
        }
        , toggle: function(e, animate) {
            this.p.cancelToFront = true;
            this.bg.css("visibility", "hidden");
            if (this.isOpen() === true) {
                this.close.css("visibility", "hidden");
                this.ct.animate({
                    height: "170px"
                    , width: "238px"
                }
                , animate === false ? 1 : 500
                , function() {
                    this.msg.css("display", "block");
                    this.bg.height(176);
                    this.bg.width(244);
                    this.bg.css("visibility", "visible");
                    this.initSlide();
                } .createDelegate(this));
            }
            else {
                this.p.zIndex++;
                this.msg.css("display", "none");
                this.bg.css("zIndex", this.p.zIndex);
                this.ct.css("zIndex", this.p.zIndex);
                this.ct.animate({
                    height: "412px"
                     , width: "600px"
                }
                , animate === false ? 1 : 500
                , function() {
                    this.bg.height(418);
                    this.bg.width(606);
                    this.close.css("visibility", "visible");
                    this.bg.css("visibility", "visible");
                } .createDelegate(this));
            }

            return false;
        }
        , change: function(e, slide) {
            var t = e.target;
            t.blur();
            $(t).parents('a:first').blur();

            if (this.timeOutId)
                clearTimeout(this.timeOutId);

            this.menu.children('li').removeClass('active');
            this.menu.children('li').removeClass('activeFirst');
            var li = $(t).parents('li:first')[0];
            var id = li.getAttribute("oid");
            if (li.getAttribute("pos") == 1)
                $(li).addClass('activeFirst');
            else
                $(li).addClass('active');

            if (slide !== true) {

                if (this.isOpen() === false) {
                    this.toggle();
                }
            }

            this.aIn(id);

            return false;
        }
        , loading: false
        , animating: false
        , aIn: function(id) {
            this.animating = true;
            var c = this.p.getCache('cases', id);

            if (!c)
                this.p.getJson(this.p.theme, id, "case", false, function(result) {
                    var json = eval('(' + result.d + ')');

                    this.aOut(this.p.addCache('cases', json.id, json));

                } .createDelegate(this));

            this.contentAnimSrc.animate({
                opacity: 0
            }
            , 500
            , function() {
                this.animating = false;

                if (c)
                    this.aOut(c);
                else {
                    c = this.p.getCache('cases', id);
                    if (c)
                        this.aOut(c);
                }
            } .createDelegate(this));
        }
        , aOut: function(json) {
            if (this.animating === false) {
                this.print(json);

                this.contentAnimSrc.animate({
                    opacity: 1
                }
                , 500
                , function() {
                    this.contentAnimSrc.css("opacity", null);
                } .createDelegate(this));
            }
        }
        , print: function(json) {
            this.content.top.css("background-image", 'url(' + json.image + ')');
            this.content.topText.css("color", json.color);
            this.content.topText.html('<h4>' + json.name + '</h4>' + json.text1);
            var text = json.text2;
            if (json.link)
                text += '<a href="' + json.link + '" target="_blank">' + json.link + '</a>';
            if (json.images.length > 0) {
                text += '<ul class="infoImageMenu">';
                for (i = 0; i < json.images.length; i++) {
                    var image = json.images[i];
                    text += '<li><a href="' + json.images[i] + '" rel="nieuwsImg" class="img"><img src="S_Proxy.axd?f=' + json.images[i] + '&amp;v=20080208040213&amp;co=false&amp;z=false&amp;o=6|100|75|2" width="100" height="75" alt="Afbeelding' + i + '"  /></a></li>';
                }
                text += '</ul><div style="clear:both"></div>';
            }
            this.content.botText.html(text);
            this.content.botText.find('ul.infoImageMenu a').fancybox();
            this.p.initScroll(this.scrollUp, this.scrollDown, this.content.botText, this.left);
        }
        , init: function(col) {
            if (!col) {
                this.menu = this.ct.find("div.rechts ul.second");
                this.left = this.ct.find("div.links");
                this.contentAnimSrc = this.ct.find("div#case div.top, div#case div.bot div.caseTxt");
                this.content = {
                    item: this.ct.find("div#case div.caseItem")
                , top: this.ct.find("div#case div.top")
                , topText: this.ct.find("div#case div.top div.caseTopTxt")
                , bot: this.ct.find("div#case div.bot")
                , botText: this.ct.find("div#case div.bot div.caseTxt")
                }
                this.close = this.ct.find("a.closeBut");
                this.close.click(this.toggle.createDelegate(this));
                this.scrollUp = this.left.find("div.syn-scroll-top");
                this.scrollUp.click(function(e) {
                    this.p.doScroll(this.scrollUp, this.scrollDown, 'up', this.content.botText, this.left);
                    return false;
                } .createDelegate(this));
                this.scrollDown = this.left.find("div.syn-scroll-down");
                this.scrollDown.click(function(e) {
                    this.p.doScroll(this.scrollUp, this.scrollDown, 'down', this.content.botText, this.left);
                    return false;
                } .createDelegate(this));
                this.content.botText.mousewheel(function(e, delta) {
                    this.p.doScroll(this.scrollUp, this.scrollDown, (delta == 1 ? 'up' : 'down'), this.content.botText, this.left);
                    return false;
                } .createDelegate(this));
                this.p.initScroll(this.scrollUp, this.scrollDown, this.content.botText, this.left);
                this.ct.click(function() {
                    if (this.isOpen() === false) {
                        if (this.timeOutId)
                            clearTimeout(this.timeOutId);
                        this.toggle();
                    }

                    return false;
                } .createDelegate(this));

                this.content.botText.find('ul.infoImageMenu a').fancybox();
            }
            else {
                this.menu.empty();
                for (var i = 0; i < col.length; i++) {
                    var c = col[i];
                    if (i == 0)
                        this.print(this.p.addCache('cases', c.id, c))

                    this.menu.append('<li pos="' + i + 1 + '"' + (i == 0 ? ' class="activeFirst"' : '') + ' oid="' + c.id + '"><a href="?theme=' + this.p.theme + '&pageId=0&caseId=' + c.id + '"><span class="txt"><strong>' + c.name + '</strong></span></a></li>');
                }

                while (i < 7) {
                    this.menu.append('<li class="dummy"> </li>');
                    i++;
                }
            }

            this.menu.find("li:not(.dummy)").click(this.change.createDelegate(this));
            this.ct.click(function() {
                if (this.p.cancelToFront === false) {
                    if (this.ct.css("zIndex") < this.p.zIndex) {
                        this.p.zIndex++;
                        this.ct.css("zIndex", this.p.zIndex);
                    }
                }
                this.p.cancelToFront = false;
            } .createDelegate(this));

            if (this.p.theme)
                this.initSlide();


        }
    };

    this.news = {
        p: this
        , bg: $("div#nieuwsBG")
        , ct: $("div#nieuwsContainer")
        , scrollUp: null
        , scrollDown: null
        , close: null
        , menu: null
        , isOpen: function() {
            return this.ct.height() == 376;
        }
        , toggle: function(e, animate) {
            if (e && e.target && e.target.blur)
                e.target.blur();

            this.p.cancelToFront = true;

            this.bg.css("visibility", "hidden");
            if (this.isOpen() === true) {
                this.close.css("visibility", "hidden");
                this.ct.animate({
                    width: "238px"
                }
                , animate === false ? 1 : 500
                , function() {
                    this.ct.animate({
                        height: "187px"
                        , top: "356px"
                    }
                    , animate === false ? 1 : 500
                    , function() {
                        this.bg.height(187);
                        this.bg.width(244);
                        this.bg.css("top", 356);
                        this.bg.css("visibility", "visible");
                        this.p.cases.slide();
                    } .createDelegate(this));
                } .createDelegate(this));
            }
            else {
                if (this.p.cases.timeOutId)
                    clearTimeout(this.p.cases.timeOutId);

                this.p.zIndex++;
                this.bg.css("zIndex", this.p.zIndex);
                this.ct.css("zIndex", this.p.zIndex);
                this.ct.animate({
                    height: "376px"
                    , top: "170px"
                }
                , animate === false ? 1 : 500
                , function() {
                    this.ct.animate({
                        width: "623px"
                    }
                    , animate === false ? 1 : 500
                    , function() {
                        this.bg.height(382);
                        this.bg.width(629);
                        this.bg.css("top", 170);
                        this.close.css("visibility", "visible");
                        this.bg.css("visibility", "visible");
                    } .createDelegate(this));
                } .createDelegate(this));
            }

            return false;
        }
        , change: function(e) {
            var t = e.target;
            t.blur();
            $(t).parents('a:first').blur();

            this.menu.children('li').removeClass('active');
            this.menu.children('li').removeClass('activeFirst');
            var li = $(t).parents('li:first')[0];
            var id = li.getAttribute("oid");
            if (li.getAttribute("pos") == 1)
                $(li).addClass('activeFirst');
            else
                $(li).addClass('active');

            if (this.isOpen() === false)
                this.toggle();

            var c = this.p.getCache('news', id);
            if (c)
                this.print(c);
            else
                this.p.getJson(this.p.theme, id, 'news', false, function(result) {
                    var json = eval('(' + result.d + ')');
                    this.print(this.p.addCache('news', json.id, json));
                } .createDelegate(this));

            return false;
        }
        , print: function(json) {
            var text = json.text;
            if (json.images.length > 0) {
                text += '<ul class="infoImageMenu">';
                for (i = 0; i < json.images.length; i++) {
                    var image = json.images[i];
                    text += '<li><a href="' + json.images[i] + '" rel="nieuwsImg" class="img"><img src="S_Proxy.axd?f=' + json.images[i] + '&amp;v=20080208040213&amp;co=false&amp;z=false&amp;o=6|100|75|2" width="100" height="75" alt="Afbeelding' + i + '"  /></a></li>';
                }
                text += '</ul><div style="clear:both"></div>';
            }
            this.content.html('<h4>' + json.name + '</h4><div><div class="date">' + json.date + '</div>' + text + '</div>');

            this.content.find('ul.infoImageMenu a').fancybox();
            this.p.initScroll(this.scrollUp, this.scrollDown, this.content, this.left);
        }
        , init: function(col) {
            if (!col) {
                this.menu = this.ct.find("div.rechts ul");
                this.close = this.ct.find("a.closeBut");
                this.close.click(this.toggle.createDelegate(this));

                this.left = this.ct.find("div.links"); // container               
                this.scrollUp = this.left.find("div.syn-scroll-top");
                this.scrollDown = this.left.find("div.syn-scroll-down");
                this.content = this.ct.find("div#nieuws div.nieuwsTxt"); // target


                this.scrollUp.click(function(e) {
                    this.p.doScroll(this.scrollUp, this.scrollDown, 'up', this.content, this.left);
                    return false;
                } .createDelegate(this));

                this.scrollDown.click(function(e) {
                    this.p.doScroll(this.scrollUp, this.scrollDown, 'down', this.content, this.left);
                    return false;
                } .createDelegate(this));

                this.content.mousewheel(function(e, delta) {
                    this.p.doScroll(this.scrollUp, this.scrollDown, (delta == 1 ? 'up' : 'down'), this.content, this.left);
                    return false;
                } .createDelegate(this));

                this.content.find('ul.infoImageMenu a').fancybox();
                this.p.initScroll(this.scrollUp, this.scrollDown, this.content, this.left);

            }
            else {
                this.menu.empty();
                for (var i = 0; i < col.length; i++) {
                    var c = col[i];
                    if (i == 0)
                        this.print(this.p.addCache('news', c.id, c))

                    this.menu.append('<li pos="' + i + 1 + '" ' + (i == 0 ? ' class="activeFirst"' : '') + ' oid="' + c.id + '"><a href="?theme=' + this.p.theme + '&pageId=0&newsId=' + c.id + '"><span class="txt"><strong>' + c.name + '</strong><br/><span>' + c.subtitle + '</span></span></a></li>');
                }
                while (i < 7) {
                    this.menu.append('<li class="dummy"> </li>');
                    i++;
                }
            }
            this.menu.find("a").click(this.change.createDelegate(this));

            this.ct.click(function(event) {
                if (this.p.cancelToFront === false) {
                    if (this.ct.css("zIndex") < this.p.zIndex) {
                        this.p.zIndex++;
                        this.ct.css("zIndex", this.p.zIndex);
                    }
                }
                    
            } .createDelegate(this));
        }
    };

    this.contact = {
        p: this
        , ct: $("div#contactContainer")
        , open: $("a#contactbut")
        , sendButton: $("a#ContactButton")
        , close: null
        , toggle: function(e) {
            var t = e.target;
            t.blur();

            this.p.cancelToFront = true;

            if (this.ct.css('display') == 'none') {
                this.p.zIndex++;
                this.ct.css('display', 'block');
                this.ct.css("zIndex", this.p.zIndex);
            }
            else {
                this.ct.css('display', 'none');
            }
            return false;
        }
        , init: function() {
            this.ct.click(function() {
                if (this.p.cancelToFront === false) {
                    if (this.ct.css("zIndex") < this.p.zIndex) {
                        this.p.zIndex++;
                        this.ct.css("zIndex", this.p.zIndex);
                    }
                }
                this.p.cancelToFront = false;
            } .createDelegate(this));
            this.content = {
                mr: $("input#Contact_Geslacht_Man")[0]
                , mrs: $("input#Contact_Geslacht_Vrouw")[0]
                , firstName: $("input#Contact_VoorNaam")[0]
                , lastName: $("input#Contact_AchterNaam")[0]
                , phone: $("input#Contact_Telefoon")[0]
                , mail: $("input#Contact_Email")[0]
                , message: $("textarea#Contact_Bericht")[0]
            }
            this.open.click(this.toggle.createDelegate(this));
            this.close = this.ct.find("a.closeBut");
            this.close.click(this.toggle.createDelegate(this));
            this.sendButton.click(this.send.createDelegate(this));
        }
        , send: function() {
            $.ajax({
                type: 'POST'
                , url: 'Service.asmx/SendMessage'
                , data: "{" +
                    "mr: " + this.content.mr.checked +
                    ", mrs: " + this.content.mrs.checked +
                    ", firstName: '" + this.content.firstName.value + "'" +
                    ", lastName: '" + this.content.lastName.value + "'" +
                    ", phone: '" + this.content.phone.value + "'" +
                    ", mail: '" + this.content.mail.value + "'" +
                    ", message: '" + this.content.message.value + "'" +
                "}"
                , contentType: 'application/json; charset=utf-8'
                , dataType: 'json'
                , success: function(result) {
                    alert(result.d);
                } .createDelegate(this)
                , error: function(xhr, result) {
                    //TODO: general handler
                    alert('mislukt');
                }
            });
        }
    }

    this.init();
    this.pages.init();
    this.cases.init();
    this.news.init();
    this.contact.init();
}
