var Viewport = function() {
    // Declare private variables.
    var viewportwidth;
    var viewportheight;

    // Test for documentElement existence.
    var deConditions = [
        typeof document.documentElement != 'undefined',
        typeof document.documentElement.clientWidth != 'undefined',
        document.documentElement.clientWidth != 0
    ];

    // If innerWidth is available, use it to retrieve dimensions.
    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth;
        viewportheight = window.innerHeight
    }
    // Otherwise, if documentElement is available, use it.
    else if (deConditions[0] && deConditions[1] && deConditions[2])
    {
        viewportwidth = document.documentElement.clientWidth;
        viewportheight = document.documentElement.clientHeight;
    }
    else
    // In any other case, use document.body properties.
    {
        viewportwidth = document.body.clientWidth;
        viewportheight = document.body.clientHeight;
    }

    // Return object with viewport dimensions.
    return {Width: viewportwidth, Height: viewportheight};
};

function _loading()
{
    $("loading-text").fade("toggle");
}

window.addEvent("domready", function() {
    SexyLightbox = new SexyLightBox({
        imagesdir: "js/sexylightbox/sexyimages"
    });

    $("layout").fade("hide");
    var l = _loading.periodical(1000);
    $("progress").set("tween", {duration: "short"});

    $each($$(".folio-section"), function (f) {
        f.fade("out");
    });

    $each($$("#menu div"), function(item) {
        item.addEvent("click", function() {
            openPage(this)
        });
        item.addEvent("mouseenter", function() {
            if (this.hasClass("active")) return false;
            this.addClass("hover");
            this.set("tween", {duration: 100});
            this.tween("width", 175);
        })
        item.addEvent("mouseleave", function() {
            if (this.hasClass("active")) return false;
            var that = this;
            (new Fx.Morph(
                this,
                {
                    duration: 100,
                    onComplete: function()
                    {
                        that.removeClass("hover");
                    }
                }
            )).start({width: 100})
        })
    });

    $each($$("#portfolio img"), function (item) {
        item.addEvent("mouseenter", function() {
            (new Fx.Morph(
                this,
                {
                    duration: 500,
                    wait: true
                }
            )).start({"border-color": "#ff0000"});
        });
        item.addEvent("mouseleave", function() {
            (new Fx.Morph(
                this,
                {
                    duration: 500,
                    wait: true
                }
            )).start({"border-color": "#ffffff"});
        });
    });

    $each($$("#sections span"), function (item) {
        item.addEvent("click", function() {
            $each($$(".folio-section"), function (f) {
                f.fade("out");
            });
            $each($$("#sections span"), function (s) {
                s.removeClass("active");
            });
            $("section-" + this.innerHTML).fade("in");
            this.addClass("active");
        });
    });

    var allImages = ["slide/1.png", "slide/2.png", "slide/3.png"];
    imgLoad = new Asset.images(allImages,
    {
        onProgress: function(counter, index)
        {
            if (counter == allImages.length - 1)
            {
                var backgroundSlide = new noobSlide({
                    box: $('box'),
                    items: [0, 1, 2],
                    autoPlay: true,
                    interval: 10000,
                    fxOptions:
                    {
                        duration: 300,
                        wait: "true"
                    },
                    size: Viewport().Width
                });

                (function() {$("layout").tween("opacity", 0, 1);}).delay(1000);
                (function() {openPage($$(".startup")[0])}).delay(2000);
                $clear(l);
                $$(".loading").fade("out");
            }
            var percentage = parseInt(counter / (allImages.length - 1)) * 150;
            $("progress").tween("width", percentage);
        }
    });
});

function openPage(o)
{
    if (o.className.toString().indexOf("outgoing#") > -1)
    {
        var data = o.className.toString().split("#");
        window.open(data[1].substr(0, data[1].indexOf(" ")), "", "");
        return;
    }
    if (o.className != "startup")
    {
        $each($$(".page"), function(i) {
            i.fade("out");
            i.setStyle("display", "none");
        });
    }
    $each($$("#menu div"), function(i) {
        i.removeClass("active");
        i.removeClass("hover");
    });
    var page = $$("#" + o.innerHTML + ".page");
    o.addClass("active");
    o.addClass("hover");
    page.setStyle("display", "block");
    page.tween("opacity", 0, 1);
}

function scrollLayer(layer, direction, elastic_arrows)
{
    var obj = $(layer);
    var fx = new Fx.Scroll(obj);
    var offset;
    var pos = obj.getScroll().y;
    var step = obj.getSize().y;
    var maxOffset = obj.getScrollSize().y;
    if (direction == "up")
    {
        offset = pos - step < maxOffset ? pos - step : maxOffset;
        fx.start(0, offset);
    }
    else if (direction == "down")
    {
        offset = pos + step < maxOffset ? pos + step : maxOffset;
        fx.start(0, offset);
    }
    if (elastic_arrows)
    {
        obj.getChildren(".arrows")[0].tween("top", offset > 0 ? offset : 0);
    }
}