$(document).ready(function() {
    $("#cont2>ul").width($(window).width());

    $("#cont2>ul .container").removeClass("hiddenul");
    $("#cont2>ul.active .container").show();

    var $subMenuLength = 0;

    var setPageWidth = function() {
        $("#cont2>ul").width($(window).width());
        $subMenuLength = $("#cont2>ul").width();
        var marginLeft = $subMenuLength * ($("#cont2>ul").index($("#cont2>ul.active")));
        $("#cont2").css({ "marginLeft": "-" + marginLeft + "px" });
    }

    $(window).scroll(setPageWidth).resize(setPageWidth);
    setPageWidth();


    var outCurIndex = $("#cont2>ul").index($("#cont2>ul.active"));
    if (outCurIndex != 0) {
        $(".bg").hide();
    }

    $(".submenu-item[href^=#]").click(function() {
        if ($("#cont2:animated").length > 0)
            return false;
        var curIndex = $("#cont2>ul").index($("#cont2>ul.active"));
        var myIndex = $(this).attr("href").replace("#", "");
        var scrollLength = curIndex - myIndex;

        //alert(curIndex);
        //alert(myIndex);

        if (myIndex != 0) {
            $(".bg").fadeOut();
        } else {
            $(".bg").fadeIn(800);
        }

        if (scrollLength != 0) {
            $("#cont2>ul.active div.container").fadeOut();
            $("#cont2>ul:eq(" + myIndex + ") div.container").show();
        
            $("#cont2>ul.active").removeClass("active");
            $("#cont2>ul:eq(" + myIndex + ")").addClass("active");

            //$("#cont2:not(:animated)").animate({"marginLeft": "+="+($subMenuLength*scrollLength)+"px"}, easingOption);
            //$("#cont2:not(:animated)").animate({"marginLeft": "+="+($subMenuLength*scrollLength)+"px"},{ duration: '100', easing: 'easeInOutQuad' });

            $("#cont2:not(:animated)").animate({ "marginLeft": "+=" + ($subMenuLength * scrollLength) + "px" }, 1200, 'easeOutExpo');

        }
        $("#submenu a").removeClass("subactive");
        $(this).addClass('subactive');
        Cufon.refresh();
        return false;
    });

    var curIndex = 0;
    var myIndex = $("#cont2>ul").index($("#cont2>ul.active"));
    var scrollLength = curIndex - myIndex;
    $("#cont2>ul.active").removeClass("active");
    $("#cont2>ul:eq(" + myIndex + ")").addClass("active");
    $("#cont2").css({ "marginLeft": ($subMenuLength * scrollLength) + "px" });
});