var iswebkit = (navigator.userAgent.match(/WebKit/i));
var meta_active = "meta_Home";
var portfolio_active = "portfolio_Websites";
var links_active = "links_Design";


$(function() {
    var $window = $(window);
    var $body = $("body");
    var $main = $("#main");
    var $popup = $("#popup");
    var $overlay = $("#overlay");

    // setup
    $window.resize(function() {
        if ($main.offset().left < ($window.width() - $main.width() - 1)) {
            var x = ($window.width() - $main.width() - 1);
            if (iswebkit) {
                $main.css('-webkit-transition-duration', '0ms');
                $main.css('-webkit-transform', 'translate(' + x + 'px)');
            } else
                $main.css({ left: x });
        }
    });

    $body.height($window.height());
    $body.bind("touchmove", function(event) {
        event.preventDefault();
        event.stopPropagation();
    });


    // splash
    var splash = 3000;
    $overlay.bind("click touchstart", function() { $overlay.stop(true).hide().css("background", "#000"); });
    $overlay.delay(splash).animate({ "opacity": "0.0" }, splash, "linear", function() { $overlay.hide().css("background", "#000"); });
    $("#content").show();

    /*
    // drag function ".scroller"
    $(".scroller").draggable({
    axis: 'x',
    stop: function dragCheck() {//check if the content borders stay within the screen									
    var offset = $(this).offset();
    if (offset.left > 0) {
    $(this).animate({ left: "0px" }, 600, "swing");
    }
    if (offset.left < ($(window).width() - $(this).width())) {
    $(this).animate({ left: ($(window).width() - $(this).width()) }, 600, "swing");
    }
    }
    });

    $(".scroller").mousedown(function(event) {
    $(this).css({ "cursor": "url(\"http://maps.google.com/mapfiles/closedhand.cur\"), -moz-grabbing" });
    });

    $(".scroller").mouseup(function(event) {
    $(this).css({ "cursor": "url(\"http://maps.google.com/mapfiles/openhand.cur\"), -moz-grab" });
    });

*/
    $('#klanten_sp').jScrollPane({ dragMinHeight: 40, dragMaxHeight: 40, scrollbarWidth: 42, scrollbarMargin: 1, animateTo: true, animateInterval: 400 });

    $('#links_sp').jScrollPane({ dragMinHeight: 40, dragMaxHeight: 40, scrollbarWidth: 42, scrollbarMargin: 1, animateTo: true, animateInterval: 400 });



    // meta navigation
    $("a.meta").bind("click touchend", function(event) {
        if (this.id != meta_active) {
            meta_active = this.id;

            $("a.meta").css({ color: "#666666" });
            $(this).css({ color: "#" + this.id.split('_')[2] });

            var target = $('.Is' + this.id.split('_')[1]);
            var offset = $(target).offset();

            var x = Math.max($main.offset().left - (offset.left - 46), ($(window).width() - $main.width() - 1));
            //alert(x); 
            if (iswebkit) {
                $main.css('-webkit-transition-duration', 600 + 'ms');
                $main.css('-webkit-transform', 'translate(' + x + 'px)');
            } else
                $main.animate({ left: x }, 600, "swing");
        }

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.meta").bind("mouseenter touchstart touchmove", function(event) {
        if (this.id != meta_active)
            $(this).stop().animate({ color: "#" + this.id.split('_')[2] }, "fast");

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.meta").bind("mouseleave touchcancel", function(event) {
        if (this.id != meta_active)
            $(this).stop().animate({ color: "#666666" }, "slow");

        event.preventDefault();
        event.stopPropagation();
    });


    /* portfolio navigation */
    $("a.portfolio").bind("click touchend", function(event) {
        if (this.id != portfolio_active) {
            portfolio_active = this.id;

            $("a.portfolio").stop().animate({ backgroundColor: "#333333" }, "slow");
            $(this).stop().animate({ backgroundColor: "#009dbc" }, "fast");

            $(".portfolio_section").hide();
            $("#Thumbs_" + this.id.split("_")[1]).show();
        }

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.portfolio").bind("mouseenter touchstart touchmove", function(event) {
        if (this.id != portfolio_active) {
            $(this).stop().animate({ backgroundColor: "#009dbc" }, "fast");
        }

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.portfolio").bind("mouseleave touchcancel", function(event) {
        if (this.id != portfolio_active) {
            $(this).stop().animate({ backgroundColor: "#333333" }, "slow");
        }

        event.preventDefault();
        event.stopPropagation();
    });



    /* links navigation */
    $("a.links").bind("click touchend", function(event) {
        if (this.id != links_active) {
            links_active = this.id;

            $("a.links").stop().animate({ backgroundColor: "#333333" }, "slow");
            $(this).stop().animate({ backgroundColor: "#990000" }, "fast");

            $(".links_section").hide();
            $("#Links_" + this.id.split("_")[1]).show();
            $('#links_sp')[0].scrollTo(0, 1);
        }

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.links").bind("mouseenter touchstart", function(event) {
        if (this.id != links_active) {
            $(this).stop().animate({ backgroundColor: "#990000" }, "fast");
        }

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.links").bind("mouseleave touchend", function(event) {
        if (this.id != links_active) {
            $(this).stop().animate({ backgroundColor: "#333333" }, "slow");
        }

        event.preventDefault();
        event.stopPropagation();
    });



    /* portfolio popup */
    portfolio_popup_setup = function() {
        $('#popup_sections').height($window.height() - 40);
        $popup.show();
        $('#popup_sections').jScrollPane({ dragMinHeight: 40, dragMaxHeight: 40, scrollbarWidth: 0, scrollbarMargin: 1, animateTo: false, animateInterval: 1 });
        portfolio_popup_scroll(20, 500);
    }

    portfolio_popup_scroll = function(y, t) {
        if (iswebkit) {
            $popup.css('-webkit-transition-duration', t + 'ms');
            $popup.css('-webkit-transform', 'translate(0px,' + y + 'px)');
        } else
            $popup.stop().animate({ "top": y }, t);
    }

    $("a.portfolio_popup").bind("click touchend", function(event) {
        $popup.hide();
        $("#popupbody").html("");
        $overlay.css({ "opacity": "0.0" }).show();
        portfolio_popup_scroll($window.height(), 1);

        var url = "Portfolio.aspx?ContentId=" + this.href.split('#')[1];

        $.ajax({ url: url, context: document.body, cache: false, success: function(data) {
            $("#popupbody").html(data);
            setTimeout("portfolio_popup_setup()", 1000);
        }
        });

        $overlay.animate({ "opacity": "0.7" }, 200, "linear");

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.portfolio_close").live("click touchend", function(event) {
        portfolio_popup_scroll($window.height(), 500);
        $overlay.animate({ "opacity": "0.0" }, 500, "linear", function() { $overlay.hide(); $popup.hide(); $('#popup_sections').jScrollPaneRemove(); });

        event.preventDefault();
        event.stopPropagation();
    });


    /* thumbs */
    $("span.thumbs").mouseenter(function(event) {
        $(this).children('img.normal').hide();
        $(this).children('img.hover').show();

        event.preventDefault();
        event.stopPropagation();
    });

    $("span.thumbs").mouseleave(function(event) {
        $(this).children('img.normal').show();
        $(this).children('img.hover').hide();

        event.preventDefault();
        event.stopPropagation();
    });

    $("a.link_popup_section").live("click touchend", function(event) {
        var sectionid = $(this).attr("id").split('_')[3];
        $("#popup_sections")[0].scrollTo("#popup_section_" + sectionid, 1);

        event.preventDefault();
        event.stopPropagation();
    });


    uitgelicht = function() {
        //alert("uitgelicht");

        $overlay.css({ "opacity": "0.0" }).show();
        $overlay.stop().animate({ "opacity": "0.7" }, 500, function() {
            var $image = $("#uitgelicht-taalkaarten");
            $image.css("top", ($window.height() - $image.height()) / 2);
            $image.css("left", ($window.width() - $image.width()) / 2);
            $image.show();
            $image.bind("click touchend", function(event) { $image.hide(); $overlay.stop().animate({ "opacity": "0.0" }, 500); });
        });
    }
});