$.fn.extend({
    equalHeight: function () {
        var tmp_iMax = 0;
        return this.css("min-height", 0).each(function () { tmp_iMax = Math.max($(this).height(), tmp_iMax); }).css("min-height", tmp_iMax);
    }
});

$.extend({
    hexToRgb: function (hex) {
        if (hex.charAt(0) == '#') hex = hex.substring(1);
        else if (hex.substr(0, 3) == "rgb") return (hex.substring(hex.indexOf("(") + 1, hex.indexOf(")")));
        return parseInt(hex.substr(0, 2), 16) + ',' + parseInt(hex.substr(2, 2), 16) + ',' + parseInt(hex.substr(4, 2), 16);
    },
    initializeLines: function () {
        $("#Lines").each(function () {
            var tmp_oCanvas = this;
            var tmp_oContext = tmp_oCanvas.getContext("2d");
            var tmp_oDrawLine = function (context, color, x, y, marginLeft) {
                x += marginLeft;
                var tmp_iWidth = context.canvas.width - 60;
                tmp_iWidth -= marginLeft;
                context.fillStyle = context.createLinearGradient(x, 0, tmp_iWidth + x, 0);
                context.fillStyle.addColorStop(0, 'rgba(' + color + ',0)');
                context.fillStyle.addColorStop(1, 'rgba(' + color + ',0.8)');
                context.fillRect(x, y, tmp_iWidth, 2);
            };
            tmp_oDrawLine(tmp_oContext, "0,0,0", 60, 0, 80);
            tmp_oDrawLine(tmp_oContext, $.hexToRgb($("#Title").css("color")), 30, 20, 40);
            tmp_oDrawLine(tmp_oContext, "183,183,183", 0, 40, 0);
        })
    },
    initializeLogo: function () {
        $("#Logo").each(function () {
            var tmp_oCanvas = $("#LogoCanvas");
            if (!tmp_oCanvas.length) tmp_oCanvas = $.canvas.create("LogoCanvas", $(this).width(), $(this).height()).appendTo("#Logo");
            var tmp_oImage = new Image();
            var tmp_oContext = tmp_oCanvas[0].getContext("2d");
            tmp_oImage.onload = function () {
                var tmp_oContext = tmp_oCanvas[0].getContext("2d");
                tmp_oContext.fillStyle = $("#Title").css("color");
                tmp_oContext.fillRect(0, 0, tmp_oContext.canvas.width, tmp_oContext.canvas.height);
                tmp_oContext.fillStyle = tmp_oContext.createLinearGradient(0, 0, 0, tmp_oContext.canvas.height);
                tmp_oContext.fillStyle.addColorStop(0, 'rgba(0,0,0,0)');
                tmp_oContext.fillStyle.addColorStop(1, 'rgba(0,0,0,0.7)');
                tmp_oContext.fillRect(0, 0, tmp_oContext.canvas.width, tmp_oContext.canvas.height);
                tmp_oContext.drawImage(tmp_oImage, 0, 0)
            };
            tmp_oImage.src = "/qios.webspace2/gfx/bg_logo.png";
        });
    },
    overlay: {
        show: function () { $("#Overlay:hidden").css({ opacity: 0, display: "block" }).animate({ opacity: 0.5 }, 250); },
        hide: function () { $("#Overlay:visible").animate({ opacity: 0 }, 250, function () { $("#Overlay").css({ display: "none" }); }); }
    },
    gallery: {
        selectImages: function (parent) {
            return parent.find("a").filter(function () { return /(jpe?g|png|gif)$/i.test($(this).attr('href')); });
        },

        //initializes the gallery and gallery overlay
        initialize: function () {

            //enable navigation on gallery thumbs
            $(".GalleryPart a.Next").click(function () { $.gallery.navigate($(this).parents(".GalleryPart"), 1, true); return false; });
            $(".GalleryPart a.Previous").click(function () { $.gallery.navigate($(this).parents(".GalleryPart"), -1, true); return false; });

            //enable navigation on gallery images
            $("#GalleryOverlay a.Next").click(function () { $.gallery.navigate($("#GalleryOverlay"), 1, false); return false; });
            $("#GalleryOverlay a.Previous").click(function () { $.gallery.navigate($("#GalleryOverlay"), -1, false); return false; });
            $("#GalleryOverlay a.Close").click(function () { $.gallery.hide(); return false; });

            //hide gallery on click and esc
            $("#GalleryOverlay").each(function () {
                $(this).click($.gallery.hide);
                $(document).keyup(function (e) { if (e.keyCode == 27) $.gallery.hide(); });
            });

            //show gallery on image link click
            $(".ContentPart").each(function () {
                $.gallery.selectImages($(this)).click(function () {
                    var tmp_oData = $(this).parents(".GalleryPart").data("gallery");
                    if (tmp_oData == null) {
                        tmp_oData = { current: 0, images: null };
                        var tmp_oLink = this;
                        tmp_oData.images = $.map(
                            $.gallery.selectImages($(this).parents(".ContentPart:eq(0)")).filter(function () { return !$(this).parents(".GalleryPart").length }),
                            function (e, i) {
                                if (e == tmp_oLink) tmp_oData.current = i;
                                return { url: $(e).attr("href") };
                            });
                    }
                    $.gallery.show($(this).attr("href"), tmp_oData);
                    return false;
                });
            });

            //handle the load event of the galleryimage
            $("#GalleryOverlay .Image").load(function () {
                if (this.src.indexOf("blank.gif") > -1) return;
                $(this).add("#GalleryOverlay").removeClass("Loading");
                $("#GalleryOverlayImageContainer").css({ marginLeft: $(this).width() / -2, marginTop: $(this).height() / -2 });
            });
        },

        //navigates in the gallery (or the thumbnail gallery)
        navigate: function (dataContainer, offset, thumb) {
            var tmp_oData = dataContainer.data("gallery");
            tmp_oData.current += offset;
            if (tmp_oData.current < 0) tmp_oData.current = tmp_oData.images.length - 1;
            else if (tmp_oData.current >= tmp_oData.images.length) tmp_oData.current = 0;

            if (thumb) $(".Image", dataContainer).attr("src", tmp_oData.images[tmp_oData.current].thumburl).parent("a").attr("href", tmp_oData.images[tmp_oData.current].url);
            else $.gallery.show(tmp_oData.images[tmp_oData.current].url, tmp_oData);
        },

        //shows the image in a gallery popup
        show: function (url, data) {
            $.gallery.clear();
            $.overlay.show();
            $("#GalleryOverlay").data("gallery", data);
            $("#GalleryOverlay:hidden").css({ opacity: 0, display: "block" }).animate({ opacity: 1 }, 250);
            //$("#GalleryOverlay .Image").attr("src", url).add("#GalleryOverlay").addClass("Loading");
            $("#GalleryOverlay .Image").add("#GalleryOverlay").addClass("Loading");
            setTimeout(function () { $("#GalleryOverlay .Image").attr("src", url); }, 1);
        },

        //hides the gallery popup
        hide: function () {
            $.overlay.hide();
            $("#GalleryOverlay:visible").animate({ opacity: 0 }, 250, function () { $("#GalleryOverlay").css({ display: "none" }); $.gallery.clear(); });
        },

        //clears the gallery popup
        clear: function () {
            $("#GalleryOverlay").data("gallery", null);
            $("#GalleryOverlay .Image").attr("src", "/qios.webspace2/gfx/pic_blank.gif");
        }
    },
    canvas: {

        //adds a path of a rounded rectangle to the canvas
        addRoundedRectanglePath: function (context, x, y, width, height, radius) {
            radius = radius || height / 2
            context.beginPath();
            context.moveTo(x + radius, y);
            context.lineTo(x + width - radius, y);
            context.quadraticCurveTo(x + width, y, x + width, y + radius);
            context.lineTo(x + width, y + height - radius);
            context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
            context.lineTo(x + radius, y + height);
            context.quadraticCurveTo(x, y + height, x, y + height - radius);
            context.lineTo(x, y + radius);
            context.quadraticCurveTo(x, y, x + radius, y);
            context.closePath();
        },

        //blends the canvases using a blending mode and puts the pixel data on the target canvas
        //note that most blending modes don't handle transparency correctly, so we used white backgrounds in the canvases
        blend: function (targetContext, contexts, mode) {
            if (typeof (targetContext.getImageData) == "undefined") return;
            var tmp_oImageData1 = contexts[0].getImageData(0, 0, targetContext.canvas.width, targetContext.canvas.height);
            var tmp_oPixels1 = tmp_oImageData1.data;
            for (var j = 1; j < contexts.length; j++) {
                var tmp_oImageData2 = contexts[j].getImageData(0, 0, targetContext.canvas.width, targetContext.canvas.height);
                var tmp_oPixels2 = tmp_oImageData2.data;
                for (var i = 0, il = tmp_oPixels1.length; i < il; i += 4) {
                    tmp_oPixels1[i] = mode(tmp_oPixels2[i], tmp_oPixels1[i]);             //red
                    tmp_oPixels1[i + 1] = mode(tmp_oPixels2[i + 1], tmp_oPixels1[i + 1]); //green
                    tmp_oPixels1[i + 2] = mode(tmp_oPixels2[i + 2], tmp_oPixels1[i + 2]); //blue
                }
            }
            targetContext.putImageData(tmp_oImageData1, 0, 0);
        },

        //all possible blending modes
        blendModes: {
            normal: function (a, b) { return a; },
            lighten: function (a, b) { return (b > a) ? b : a; },
            darken: function (a, b) { return (b > a) ? a : b; },
            multiply: function (a, b) { return (a * b) / 255; },
            average: function (a, b) { return (a + b) / 2; },
            add: function (a, b) { return Math.min(255, a + b); },
            substract: function (a, b) { return (a + b < 255) ? 0 : a + b - 255; },
            difference: function (a, b) { return Math.abs(a - b); },
            negation: function (a, b) { return 255 - Math.abs(255 - a - b); },
            screen: function (a, b) { return 255 - (((255 - a) * (255 - b)) >> 8); },
            exclusion: function (a, b) { return a + b - 2 * a * b / 255; },
            overlay: function (a, b) { return b < 128 ? (2 * a * b / 255) : (255 - 2 * (255 - a) * (255 - b) / 255); },
            softLight: function (a, b) { return b < 128 ? (2 * ((a >> 1) + 64)) * (b / 255) : 255 - (2 * (255 - ((a >> 1) + 64)) * (255 - b) / 255); },
            hardLight: function (a, b) { return blendingModes.overlay(b, a); },
            colorDodge: function (a, b) { return b == 255 ? b : Math.min(255, ((a << 8) / (255 - b))); },
            colorBurn: function (a, b) { return b == 0 ? b : Math.max(0, (255 - ((255 - a) << 8) / b)); },
            linearDodge: function (a, b) { return blendingModes.add(a, b); },
            linearBurn: function (a, b) { return blendingModes.substract(a, b); },
            linearLight: function (a, b) { return b < 128 ? blendingModes.linearBurn(a, 2 * b) : blendingModes.linearDodge(a, (2 * (b - 128))); },
            vividLight: function (a, b) { return b < 128 ? blendingModes.colorBurn(a, 2 * b) : blendingModes.colorDodge(a, (2 * (b - 128))); },
            pinLight: function (a, b) { return b < 128 ? blendingModes.darken(a, 2 * b) : blendingModes.lighten(a, (2 * (b - 128))); },
            hardMix: function (a, b) { return blendingModes.vividLight(a, b) < 128 ? 0 : 255; },
            reflect: function (a, b) { return b == 255 ? b : Math.min(255, (a * a / (255 - b))); },
            glow: function (a, b) { return blendingModes.reflect(b, a); },
            phoenix: function (a, b) { return Math.min(a, b) - Math.max(a, b) + 255; }
        },

        //clears the canvas using a solid or transparent background (depending on the browser)
        clear: function (context) {
            //we want transparent backgrounds on compatibility mode, because we lay the canvases on top of each other instead of blending them into one
            if (typeof (G_vmlCanvasManager) == 'undefined') {
                context.fillStyle = "white";
                context.fillRect(0, 0, context.canvas.width, context.canvas.height);
            } else {
                context.clearRect(0, 0, context.canvas.width, context.canvas.height);
            }
        },

        //paints a custom menu shade
        paintShade: function (context, x, y, width, height, opacity, reverse, vertical) {
            if (typeof (reverse) == 'undefined' || typeof (vertical) == 'undefined') {
                context.fillStyle = 'rgba(0,0,0,' + opacity + ')';
            } else {
                context.fillStyle = vertical == 0 ? context.createLinearGradient(x, 0, x + width, 0) : context.createLinearGradient(0, 0, 0, height);
                context.fillStyle.addColorStop(0, 'rgba(0,0,0,' + (reverse ? 0 : opacity) + ')');
                context.fillStyle.addColorStop(1, 'rgba(0,0,0,' + (reverse ? opacity : 0) + ')');
            }

            $.canvas.addRoundedRectanglePath(context, x, y, width, height);
            context.fill();
        },

        //creates and initializes a new canvas or reuses the last canvas with the same id
        create: function (id, width, height, clear) {
            var tmp_oCanvas = $("<canvas>").attr({ id: id, width: width, height: height })
            if (typeof (tmp_oCanvas[0].getContext) == 'undefined') G_vmlCanvasManager.initElement(tmp_oCanvas[0]);
            return tmp_oCanvas;
        }
    },
    menu: {
        initialize: function () {
            $("#Menu ul").each(function () {

                //create configuration object
                var tmp_oConfig = {
                    width: $(this).outerWidth(),
                    height: $(this).outerHeight(),
                    paddingLeft: parseInt($(this).css("padding-left")),
                    paddingRight: parseInt($(this).css("padding-right")),
                    background: [
                        { reverse: 0, vertical: 0, opacity: 0.5 },
                        { reverse: 0, vertical: 1, opacity: 0.3 },
                        { reverse: 1, vertical: 0, opacity: 0.3 },
                        { reverse: 1, vertical: 0, opacity: 0.3 }
                    ],
                    itemColors: [],
                    itemContexts: [],
                    targetContext: null,
                    backgroundContext: null
                };

                //extend configuration object for each li past the initial config
                while (tmp_oConfig.background.length < $("li", this).length) {
                    tmp_oConfig.background.push({ color: "128,128,128", reverse: 1, vertical: 0, opacity: 0.5 })
                }

                //create a canvas that will be displayed behind the menu
                tmp_oConfig.targetContext = $.canvas.create("MenuCanvas", tmp_oConfig.width, tmp_oConfig.height, false).prependTo("#Menu")[0].getContext("2d");

                //add a background canvas that will contain various gray bars
                tmp_oConfig.backgroundContext = $.canvas.create("MenuBackgroundCanvas", tmp_oConfig.width, tmp_oConfig.height, true).appendTo("#Menu")[0].getContext("2d");

                //create a canvas for each listitem in the menu
                $("li", this).each(function (index) {
                    var tmp_oCanvas = $.canvas.create("MenuItemCanvas_" + index, tmp_oConfig.width, tmp_oConfig.height, true);
                    $(tmp_oConfig.backgroundContext.canvas).before(tmp_oCanvas);
                    tmp_oConfig.itemColors.push($(this).css("backgroundColor"));
                    tmp_oConfig.itemContexts.push(tmp_oCanvas[0].getContext("2d"));

                    //remove the html background color
                    $(this).css("background-color", "transparent");
                });

                //show the menuitem overlay now that the background is set to transparent
                $(this).css("visibility", "visible");

                //store the config in the ul for later use
                $(this).data("config", tmp_oConfig);

            });
        },
        paintBackground: function () {
            $("#Menu ul").each(function () {

                //get the configuration object
                var tmp_oConfig = $(this).data("config");

                //clear the current background canvas
                $.canvas.clear(tmp_oConfig.backgroundContext);

                //draw the background for each item
                $("li", this).each(function (index) {
                    var tmp_bFirst = index == 0;
                    var tmp_bLast = $(this).is(":last-child");

                    //add gray background gradients for each item
                    $.canvas.paintShade(
                        tmp_oConfig.backgroundContext,
                        tmp_bFirst ? 0 : this.offsetLeft,
                        0,
                        $(this).width() + (tmp_bFirst ? tmp_oConfig.paddingLeft : 0) + (tmp_bLast ? tmp_oConfig.paddingRight : 0),
                        tmp_oConfig.height,
                        tmp_oConfig.background[index].opacity,
                        tmp_oConfig.background[index].reverse,
                        tmp_oConfig.background[index].vertical
                        );

                    //some additional glyphs on the background layer
                    if (index == 1) $.canvas.paintShade(tmp_oConfig.backgroundContext, this.offsetLeft - 25, 0, 40, $(this).height(), 0.15);
                    else if (index == 3) $.canvas.paintShade(tmp_oConfig.backgroundContext, this.offsetLeft - 13, 0, 40, $(this).height(), 0.15);
                    else if (index == 4) $.canvas.paintShade(tmp_oConfig.backgroundContext, this.offsetLeft, 0, 50, $(this).height(), 0.2);
                });
            });
        },
        paintOverlay: function () {
            $("#Menu ul").each(function () {
                var tmp_oConfig = $(this).data("config");
                $("li", this).each(function (index) {
                    var tmp_oContext = tmp_oConfig.itemContexts[index];
                    $.canvas.clear(tmp_oContext);
                    tmp_oContext.fillStyle = tmp_oConfig.itemColors[index];
                    $.canvas.addRoundedRectanglePath(tmp_oContext, this.offsetLeft, 0, $(this).width(), tmp_oConfig.height);
                    tmp_oContext.fill();
                });
            });
        },
        paint: function () {
            $("#Menu ul").each(function () {
                var tmp_oConfig = $(this).data("config");
                $.canvas.blend(tmp_oConfig.targetContext, [tmp_oConfig.backgroundContext].concat(tmp_oConfig.itemContexts), $.canvas.blendModes.multiply);
            });
        },
        debug: function () {
            $("#Menu ul").each(function () {
                $("#ContentContainer").css("display", "none");
                $("#MenuBackgroundCanvas").css({ display: "block", top: 40, zIndex: 100, border: "2px solid green" });
                $("li", this).each(function (i) {
                    $("#MenuItemCanvas_" + i).css({ display: "block", top: ((i + 2) * 40), zIndex: 1002, border: "2px solid red" });
                });
            });
        }
    }
});

$(function () {

    //give columns the same height
    $(window).load(function () { $("#ContentContainer .ContentPart").equalHeight(); }).load();

    //autosize google maps parts
    $(".GoogleMapsPart").each(function () { $("iframe", this).width($(this).width()).height($(this).width()); });

    $(".GalleryPart").each(function () { $(".GalleryImageLink img").css("max-width", $(this).width()); })

    //auto size the menu
    $("#Menu").each(function () {
        var tmp_iSpace = $(this).innerWidth() - $("ul", this).outerWidth();
        var tmp_iItemCount = $("ul li", this).length;
        var tmp_iMod = tmp_iSpace % tmp_iItemCount;
        tmp_iMod--; //rounding issue on FF
        tmp_iSpace = tmp_iSpace / tmp_iItemCount;
        $("ul li a", this).each(function (index) {
            $(this).css("min-width", $(this).width() + tmp_iSpace + (index == 0 ? tmp_iMod : 0));
        });
    });

    //initialize image gallery
    if (!document.editor) $.gallery.initialize();

    //add canvas element to display the menu background 
    if (document.editor) {
        $("#Menu ul").css("visibility", "visible");
    } else {
        //for IE8 the ready event is sometimes too soon to paint
        $.menu.initialize();
        $(window).load(function () {
            $.menu.paintBackground();
            $.menu.paintOverlay();
            $.menu.paint();
        }).load()
    }

    //draw logo / lines
    if (!document.editor) {
        if (typeof (G_vmlCanvasManager) == 'undefined') {
            $.initializeLogo();
            $.initializeLines();
        }
        else {
            $(window).load(function () {
                $.initializeLogo();
                $.initializeLines();
            });
        }
    }
});