/**
 * Draft Web Design - Interactive Functionality
 *  - Drop down menus
 *  - Calendar scrolling
 *  - Splash interaction
 */

/**
 * Global Variables
 */

// The current open drop down menu
var menu_current;

// The current splash image
var splash_current = 1;
// The new splash for change_splash
var splash_new;
// The total number of splash images
var splash_total;
// The interval of rotation for splash
var splash_interval;

// The calendar list
var list_active_scroll = false;

/**
 * Initialization Functions
 */

function init() {
    init_menu();
    init_calendar();
    init_splash();
}

function init_menu() {
    // Get the menu objects
    var menu = $('#nav');
    var items = menu.find('.links a.link');

    items.each(function() {
        var name = this.id.substr(4);
        new nav(name, $(this));
    });
}

function init_calendar() {
    // Get the up/down objects
    var up = $('#list_up');
    var down = $('#list_down');
    var body = $('#calendar .list');

    // Prevent the up and down links from being active
    up.bind('click', function(e) {
       e.preventDefault();
    });
    down.bind('click', function(e) {
       e.preventDefault();
    });

    // Bind scrolling up to the up button
    up.bind('mousedown',{up: up}, function(e) {
        // Get the data
        var up = e.data.up;
        // Start scrolling
        calendar_start_scroll('up', up);

        // Bind the functions to stop scrolling
        // onmouseup, anywhere on the page
        $(document).bind('mouseup', {up: up}, function(e) {
            calendar_stop_scroll(e.data.up);
        });
        // onmouseout, of the button
        up.bind('mouseout', {up: up}, function(e) {
            calendar_stop_scroll(e.data.up);
        });
    });
    
    // Bind scrolling down to the down button
    down.bind('mousedown',{down:down}, function(e) {
        // Get the data
        var down = e.data.down;
        // Start scrolling
        calendar_start_scroll('down', down);

        // Bind the functions to stop scrolling
        // onmousedown, anywhere on the page
        $(document).bind('mouseup', {down: down}, function(e) {
            calendar_stop_scroll(e.data.down);
        });
        // onmouseout, of the button
        down.bind('mouseout', {down: down}, function(e) {
            calendar_stop_scroll(e.data.down);
        });
    });
}

function init_splash() {
    // Get splash objects
    var splash  = $('#splash');
    var body    = splash.children('.body');
    var nav     = splash.children('.nav');
    var items   = nav.find('.splash_nav');
    splash_total = items.length;

    // Set up interval rotation to advance splash
    splash_interval = setInterval(advance_splash, 4000);

    // Set up the onclick function to change the splash
    /*
    items.each(function() {
        $(this).bind('click', function(e) {
            e.preventDefault(); // prevent the link action
            var id = this.id.split('_'); // e.g. id: splash_nav_1
            splash_new = id[2]; // e.g.: 1
            change_splash(e);
            // Clear the interval rotation and remake it
            clearInterval(splash_interval);
            splash_interval = setInterval(advance_splash, 3000);
        });
    });
    */
}

/**
 * Calendar List
 */

function calendar_start_scroll(direction, element) {
    if(direction == 'up') {
        list_active_scroll = setInterval(function() {
            var body = $('#calendar .list');
            var start = body.scrollTop();
            body.scrollTop(start-2);
        }, 20);
    }
    else {
        list_active_scroll = setInterval(function() {
            var body = $('#calendar .list');
            var start = body.scrollTop();
            body.scrollTop(start+2); // isn't setting the scroll correctly
        }, 20);
    }
}

function calendar_stop_scroll(element) {
    // Stop the scrolling
    clearInterval(list_active_scroll);
    // Clear the onmouseup event (which calls this function)
    $(document).unbind('mouseup');
    // Clear the onmouseout event (which calls this function)
    element.unbind('mouseout');
}

/**
 * Menu Interaction
 */

function nav(name, element) {
    // The name of the nav (get_involved, etc)
    this.name = name;
    // The actual jQuery object
    if(element == null) {
        this.element = $('nav_'+name);
    }
    else {
        this.element = element;
    }
    // The actual drop down menu
    this.menu = $('#'+name);
    // The timeout object for hiding the menu
    this.hideTimeout = null;

    // Initialize
    this.init();
}

nav.prototype.init = function() {
    // Link: On mouse over - show the menu, or cancel the hide timer
    this.element.bind('mouseover', {self: this}, function(e) {
        // If there's already a menu open, close it
        if(menu_current != null && menu_current != e.data.self) {
            menu_current.hide(false); // hide the menu
            clearTimeout(menu_current.hideTimeout); // cancel the timeout
        }

        // If the timeout has started, cancel it
        if(e.data.self.hideTimeout != null) {
            clearTimeout(e.data.self.hideTimeout);
        }

        // Set this menu as the current menu
        menu_current = e.data.self;

        // Show the menu
        e.data.self.show();
    });
    // Link: On mouse out - set the timer to hide the menu
    this.element.bind('mouseout', {self: this}, function(e) {
        e.data.self.hideTimeout = setTimeout(function () {e.data.self.hide(true);}, 750);
    });

    // Menu: On mouse over - cancel the hide timer
    this.menu.bind('mouseover', {self: this}, function(e) {
        // If the timeout has started, cancel it
        if(e.data.self.hideTimeout != null) {
            clearTimeout(e.data.self.hideTimeout);
        }
    });
    // Menu: On mouse out - set the timer to hide the menu
    this.menu.bind('mouseout', {self: this}, function(e) {
        e.data.self.hideTimeout = setTimeout(function () {e.data.self.hide(true);}, 750);
    });
}

nav.prototype.show = function() {
    this.menu.show();
}

nav.prototype.hide = function(fade) {
    if(fade) {
        this.menu.fadeOut();
    }
    else {
        this.menu.hide();
    }
}

/**
 * Splash Interaction
 */

// Advance the splash by one
function advance_splash() {
    // Advance the splash by one
    splash_new = (splash_current*1)+1;
    // Make sure the new splash is still within the corrent range
    if(splash_new > splash_total) {
        splash_new = 1;
    }
    change_splash();
}

// Change the splash from the current one to a new one
function change_splash() {
    // Make sure that current and now splash are not the same
    if(splash_current == splash_new) {
        splash_new = null;
    }
    // Make the change
    if(splash_current != null && splash_new != null) {
        // Fade out the old splash image
        $('#splash_'+splash_current).fadeOut(1500);
        // Fade out the old splash description &fFade in the new splash description
        setTimeout(function() {
            if(splash_current == 1) {
                var fadeOut = splash_total;
            }
            else {
                var fadeOut = splash_current-1;
            }
            
            var fadeIn = splash_current;
            $('#splash_nav_'+fadeOut).hide();
            $('#splash_nav_'+fadeIn).show();
        }, 750);
        // Fade in the new splash image
        $('#splash_'+splash_new).fadeIn(1500);
        // Set the splash_new to the splash_current
        splash_current = splash_new;
        splash_new = null;
    }
}

$(init);