$(document).ready(function () {


    function makeScrollable(wrapper, scrollable) {
        // Get jQuery elements
        var wrapper = $(wrapper), scrollable = $(scrollable);

        wrapper.css({ overflow: 'hidden' });

        scrollable.slideDown('slow', function () {
            enable();
        });

        function enable() {
            // height of area at the top at bottom, that don't respond to mousemove
            var inactiveMargin = 100;
            // Cache for performance
            var wrapperWidth = wrapper.width();
            var wrapperHeight = wrapper.height();
            // Using outer height to include padding too
            var scrollableHeight = scrollable.outerHeight() + 2 * inactiveMargin;

            //When user move mouse over menu			
            wrapper.mousemove(function (e) {
                var wrapperOffset = wrapper.offset();
                // Scroll menu
                var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;

                if (top < 0) {
                    top = 0;
                }

                wrapper.scrollTop(top);
            });
        }
    }

    makeScrollable($('.sc_wrapper'), $('.sc'));


    //-----------------------------------------------------------
    // js for the tab coloring
    //

    $(".tab").click(function () {
        $('.activeTab').removeClass('activeTab');
        $(this).addClass('activeTab');
    });

    //-----------------------------------------------------------
    // for documentation on jquery-based hashchanging, see:
    // http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/

    var cache = { '': $('.defaultPage') };

    $(window).bind('hashchange', function (e) {
        var url = e.fragment;
        if (url == '')
            url = 'home/index.html'

        if (url == 'home/index.html') {
            $('#content').animate({ width: '642px', backgroundColor: '#39444f' }, function () {
                $('#api').slideDown();
                loadNewContent(url);
            });

        }
        else {
            $('#api').slideUp(function () {

                $('#content').animate({ width: '796px', backgroundColor: '#efefef' }, function () {
                    loadNewContent(url);
                });
            });
        }

        processTabs(url);
    });

    $(window).trigger('hashchange');

    function loadNewContent(url) {
        $('a.currentNav').removeClass('currentNav');

        // Hide any visible ajax content.
        $('.content').children(':visible').hide();

        //add the clas "currentNav" to whichever div was just clicked only if the url isn't empty
        url && $('a[href="#' + url + '"]').addClass('currentNav');


        if (cache[url]) {
            cache[url].fadeIn();
        } else {
            cache[url] = $('<div class="page"/>').appendTo('#content').load(url);
        };
    }
    //-----------------------------------------------------------
    function processTabs(url) {
        var dir, page;

        //if there is a compound url with slashes...
        if (url.indexOf('/') != -1) {
            //...we want the directory that we're in...
            dir = url.substring(0, url.indexOf('/'));
            if (dir == 'projects' && url != 'projects/index.html') {
                dir = url.substring(url.indexOf('/')+1, url.indexOf('/', url.indexOf('/')+1))

            }
            //...and the specific page.
            page = url.substring(0, url.indexOf('.html'));
        }
        else {
            //otherwise, assume you are on the index page of whatever directory the url is
            dir = url;
            page = url + '/index.html';
        };

        // find each set of tabs and hide them unless their id == dir
        // we want to ensure that all tabs that should be hidden are hidden
        // before trying to fadeIn the correct set of new tabs
        $('.secondaryNavigation').each(function () {
            if ($(this).attr('id') != dir)
                $(this).hide();
        });

        $('.secondaryNavigation').each(function () {
            if ($(this).attr('id') == dir) {
                $(this).fadeIn(400);

                $(this).children().each(function () {
                    $(this).find('div').removeClass('activeTab');

                    if ($(this).attr('id') == page)
                        $(this).find('div').addClass('activeTab');
                });
            };
        });
    }
});