// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};

jQuery.easing.easeOutExpo =function (x, t, b, c, d) {
	return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
};

jQuery(function ($) {
    /**
    * Most jQuery.serialScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
    * @see http://flesler.demos.com/jquery/scrollTo/
    * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.serialScroll.
    */
    // If the philosophy link exists, set the philosophy link on the about us page to active
    // when the user first visits the page.
    var lastSelected = null;
    if (document.getElementById('philosophyLink0') != null)
        lastSelected = document.getElementById('philosophyLink0').parentNode;
		
    var isScrolling = false;
	$("#prev").hide();
    $('#aboutuscontainer').serialScroll({
        target: '#aboutus',
        items: 'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
        prev: 'img.prev1', // Selector to the 'prev' button (absolute!, meaning it's relative to the document)
        next: 'img.next2', // Selector to the 'next' button (absolute too)
        axis: 'x', // The default is 'y' scroll on both ways
        navigation: '#navigation li a',
        duration: 2000, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		easing: "easeOutExpo", 
        force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		cycle: false,
        onBefore: function (e, elem, $pane, $items, pos)
		{
			$("#prev").add($("#next")).show();
		
			if( pos == 0 )
			{
				$("#prev").hide();
			}
			else if( pos == $items.length-1 )
			{
				$("#next").hide();
			}
            
			isScrolling = true;
            
            e.preventDefault();
            if (this.blur) this.blur();
			
            // use the active link style for the current pane's link.
            try 
			{
                if (lastSelected != null)
                    lastSelected.className = "";

                // Set the style of the current scroller element index nav link on the sidenav
                document.getElementById('philosophyLink' + pos.toString()).parentNode.className = "aboutLeftSideBarSubNavLinkActive";
                // 
                lastSelected = document.getElementById('philosophyLink' + pos.toString()).parentNode;
            }
            catch (err) { }
        },
        onAfter: function (elem) {
            isScrolling = false;
        }
    });

        $('#flipbookcontainer').serialScroll({
            target: '#flipbook',
            items: 'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev: 'img.prev', // Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next: 'img.next', // Selector to the 'next' button (absolute too)
            axis: 'x', // The default is 'y' scroll on both ways
            navigation: '#navigation li a',
            duration: 2000, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
    		easing: "easeOutExpo",
            force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
    		cycle: false,
            onBefore: function (e, elem, $pane, $items, pos) {
    		
    			$("#prev").add($("#next")).show();
    			if( pos == 0 )
    			{
    				$("#prev").hide();
    			}
    			else if( pos == $items.length-1 )
    			{
    				$("#next").hide();
    			}
    		
                //those arguments with a $ are jqueryfied, elem isn't.
                e.preventDefault();
                if (this.blur) this.blur();

            },
            onAfter: function (elem) {
                //'this' is the element being scrolled ($pane) not jqueryfied
            }
        });

        $('#flipbookcontainer2').serialScroll({
            target: '#flipbook',
            items: 'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev: 'img.prev', // Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next: 'img.next', // Selector to the 'next' button (absolute too)
            axis: 'x', // The default is 'y' scroll on both ways
            navigation: '#navigation li a',
            duration: 2000, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
    		easing: "easeOutExpo",
            force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
    		cycle: false,
            onBefore: function (e, elem, $pane, $items, pos) {
    		
    			$("#prev").add($("#next")).show();
    			if( pos == 0 )
    			{
    				$("#prev").hide();
    			}
    			else if( pos == $items.length-1 )
    			{
    				$("#next").hide();
    			}
    		
                //those arguments with a $ are jqueryfied, elem isn't.
                e.preventDefault();
                if (this.blur) this.blur();

            },
            onAfter: function (elem) {
                //'this' is the element being scrolled ($pane) not jqueryfied
            }
        });

	    $('#flipbookcontainer3').serialScroll({
	        target: '#flipbook',
	        items: 'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
	        prev: 'img.prev', // Selector to the 'prev' button (absolute!, meaning it's relative to the document)
	        next: 'img.next', // Selector to the 'next' button (absolute too)
	        axis: 'x', // The default is 'y' scroll on both ways
	        navigation: '#navigation li a',
	        duration: 2000, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
			easing: "easeOutExpo",
	        force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
			cycle: false,
	        onBefore: function (e, elem, $pane, $items, pos) {
			
				$("#prev").add($("#next")).show();
				if( pos == 0 )
				{
					$("#prev").hide();
				}
				else if( pos == $items.length-1 )
				{
					$("#next").hide();
				}
			
	            //those arguments with a $ are jqueryfied, elem isn't.
	            e.preventDefault();
	            if (this.blur) this.blur();
	
	        },
	        onAfter: function (elem) {
	            //'this' is the element being scrolled ($pane) not jqueryfied
	        }
	    });

    // Load up the dots for the concepts page
    $("#conceptpanelist").each(function () {
        var elem = $(this);
        var liCount = elem.children("li").length;
        for (var i = 0; i < liCount; i++) {
            // Set the initial dotstate on if it's the first item in the list; otherwise, off.
            var dotState = "off";
            if (i == 0) dotState = "on";
            $('#dotscontainer').append("<div><img id=\"dots" + i.toString() + " class=\"dots\" src=\"" + imageBaseUrl + " images/navigation/concepts_dot_" + dotState + ".png\" alt=\"current\" /></div>");
        }
    });

    // PNG Fix for concepts container
    if (document.getElementById('concepts') != null) {
        $(document).pngFix();
    }

    $('#conceptscontainer').serialScroll({
        target: '#concepts',
        items: 'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
        prev: 'img.prev', // Selector to the 'prev' button (absolute!, meaning it's relative to the document)
        next: 'img.next', // Selector to the 'next' button (absolute too)
        axis: 'x', // The default is 'y' scroll on both ways
        navigation: '#navigation li a',
        duration: 3500, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		easing: "easeOutExpo",
        force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
        onBefore: function (e, elem, $pane, $items, pos) {
           
			$("#prev").add($("#next")).show();
			if( pos == 0 )
			{
				$("#prev").hide();
			}
			else if( pos == $items.length-1 )
			{
				$("#next").hide();
			}
			
            e.preventDefault();
            if (this.blur)
                this.blur();
            // hide the tooltip
            $('#contentTooltip').hide();
            // show the dots for the current page.
            try {
                // we have to clear otu the dots container to refresh with the current dot.
                // this was a hack since it would have been nice to pull by id.
                document.getElementById('dotscontainer').innerHTML = "";
                // Hide all of the navigation dot images that are not current then show the current dot only.
                var i = 0;
                for (i = 0; i < $items.length; i++) {
                    // Set the initial dotstate on if it's the first item in the list; otherwise, off.
                    var dotState = "off";
                    if (i == pos) dotState = "on";

                    $('#dotscontainer').append("<div><img id=\"dots" + i.toString() + " class=\"dots\" src=\"" + imageBaseUrl + "images/navigation/concepts_dot_" + dotState + ".png\" alt=\"current\" /></div>");
                    // Fade out all the concept's meta divs except the target pane's
                    if (i != pos)
                        $('#conceptsMeta' + i.toString()).animate({ opacity: 0 }, 1000);
                }

                // Fade in the target meta div
                $('#conceptsMeta' + pos.toString()).animate({ opacity: 1 }, 1000);
            }
            catch (err) {
                alert(err.Message);
            }
        },
        onAfter: function (elem) {

        }
    });

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');

		//Get the screen height and width
        var maskHeight = $(top.document).height();
        var maskWidth = $(top.window).width();
        
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
        // $('#mask').css({ 'width': maskWidth, 'height': maskHeight , 'background-color': '#000000', 'position': 'absolute', 'top': '0'});

        //transition effect		
        $('#mask').fadeIn(500);
        $('#mask').fadeTo("fast", 0.8);

        //Get the window height and width   maskHeight;
        var winH = $(window).height();
        var winW = maskWidth;
		
        //Set the popup window to center
        //$('#dialog').css('position', 'absolute');
        //$('#dialog').css('top', (winH / 2 + $(window).scrollTop()-35) - videoHeight / 2);
        //$('#dialog').css('left', winW / 2 - videoWidth / 2);
        //$('.modalWindow').css('left', winW / 2 - $('.modalWindow').width()/2);

        
        $('.modalWindow').css('position', 'absolute');
        $('.modalWindow').css('top', winH / 2 + ($(window).scrollTop()-35)/2 - $('.modalWindow').height()/ 2);
        $('.modalWindow').css('left', $('#container').width() / 2 - $('.modalWindow').width()/2);
        
        //transition effect
        $(id).fadeIn(500);

    });
    
    //if close button is clicked
    $('.modalWindow .modalClose').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.modalWindow').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.modalWindow').hide();
    });

    //tooltip for concepts map
    $("#womensConceptMap > area, #womensConceptMap1 > area, #womensConceptMap2 > area").tooltip({
        extraClass: 'contentTooltip',
        id: 'contentTooltip',
        track: true,
        bodyHandler: function () {
            var url = $(this).url().toString();
            return "<div><h3>" + this.tooltipText + "</h3></div>";
        },
        fixPNG: true,
        showURL: false,
        showBody: " - ",
        fade: 999,
        timeout: 0
    });

    //tooltip for icon project map
    $("#iconProjectMap > area").tooltip({
        extraClass: 'contentTooltip',
        id: 'contentTooltip',
        track: true,
        bodyHandler: function () {
            var url = $(this).url().toString();
            return "<div><h3>" + this.tooltipText + "</h3>";
        },
        fixPNG: true,
        showURL: false
    });

    // set up rollover
    $(".asSeenInEntryImage img").hover(
			function () {
			    this.src = this.src.replace("_off", "_on");
			},
			function () {
			    this.src = this.src.replace("_on", "_off");
			}
		);

    var index = 0;
    var length = 4;
    //click handler to trigger leftnav philosophy scroller
    $('.aboutLeftSideBarSubNavLink a').click(function (event) {
        try {
            if (!isScrolling) {
                // set the index
                index = event.target.id.replace("philosophyLink", "");
                // go to the specified link index
                $('#aboutus').trigger('goto', [index]);
                // update the active item
                $('#aboutus').trigger('notify', [index]);
            }
        }
        catch (e) {
        }
    });

    //click handler to trigger leftnav philosophy scroller
    $('#prev').click(function (event) {
        try {
            if (!isScrolling) {
                index = (index == 0) ? length : Number(index) - 1;

                // go to the specified link index
                $('#aboutus').trigger('goto', [index]);
            }

        }
        catch (e) {
        }
    });

    //click handler to trigger leftnav philosophy scroller
    $('#next').click(function (event) {
        try {
            if (!isScrolling) {
                index = (index == length) ? 0 : Number(index) + 1;


                // go to the specified link index
                $('#aboutus').trigger('goto', [index]);
            }


        }
        catch (e) {
        }
    });

    // Hide the tooltip when the mouse hovers over the bottom meta info or top nav of the concepts page
    $('.conceptsBottomNavContainer, .conceptsnavcontainer').hover(function (event) {
        try {
            $('#contentTooltip').hide();
        }
        catch (e) {
        }
    });
});