/*
 * @brief Menu library for nicholasbarker.com
 * @author H <h@singinghorsestudio.com>
 */

(function($) {
    $.fn.fade_in_sequence = function(fade_in_time, time_between) {
        /*
         * @brief Animate fade ins one after the other as a squence
         */
        time_between = typeof(time_between) == 'undefined' ? 0 : time_between;
        fade_in_time = typeof(fade_in_time) == 'undefined' ? 500 : fade_in_time;
     
        // The amount of remaining time until the animation is complete is initially 
        // set to the value of the entire animation duration
        var remaining_time = $(this).size() * (fade_in_time + time_between);

        var i = 0;
        return $(this).each(function() {
            // wait until previous element has finished fading and time_between has elapsed
            $(this).delay(i++ * (fade_in_time + time_between));
            remaining_time -= (fade_in_time + time_between);

            // only fade this item in if it's not on our skip list
            if ($(this).attr('id').substring(0,8) != 'not_fade') {
                $(this).fadeIn(fade_in_time, function() {
                    $(".visible_arrow").filter(":first").fadeOut().removeClass("visible_arrow");
                });
            } else {                
                // we still need to keep account of the time we didn't use up fading then
                $(this).delay(fade_in_time);
            }
     
            // wait until the animation is over to fill up the queue.
            $(this).delay(remaining_time + time_between);
        });
    };
})(jQuery);

var MENU = (function($) {
    var _menu = {};
    _menu.menu_items = [];
    _menu.render = function() {
        /*
         * @brief draws menu on the screen
         */

        // find the menu div and add the items to it
        $.each(this.menu_items, function(index, this_menu) {
            var menu_div = '<div id="' + this_menu.id + '" class="menu_item not-selected" ' +
                'style="background-color:' + this_menu.colour + ';"> ' +
                '<div style="position: relative; top: 2.2em;">' + this_menu.title + '</div>' +
                '<span class="visible_arrow" style="position: absolute; top: 2px; left: -14px; background-color:' + this_menu.colour + ';"><img src="images/arrow.png"></span>' +
                '</div>';

            $('#menu').append(menu_div);

            // sort out the hover
            $('#'+this_menu.id).hover(
                function () {
                    $(this).css({'background-color': this_menu.hoverColour});
                }, 
                function () {
                    $(this).css({'background-color': this_menu.colour});
                }
            );

            // create a click event for the menu item
            $('#'+this_menu.id).bind('click', {click_function: this_menu.click, id: this_menu.id, sub_menu: this_menu.sub_menu}, function(event) {
                // NB-92 weirdness happens if we redraw the same menus.
                if ($('#'+this_menu.id).hasClass('selected'))
                {
                    return;
                }

                // stop any previous animations
                $('.menu_item').stop(true, true).css({
                    left: 0
                });

                // fade out and prepare removal of any previous sub-menu that's showing
                $('.menu_sub_item').addClass('goodbye').fadeOut(1000);
                $('.menu_sub_item').children().addClass('goodbye').fadeOut(1000);
                $('#sub_menu_image').remove();

                // mark the menu item as selected and the rest as not-selected
                $('.selected').removeClass('selected').addClass('not-selected');
                $('#'+this_menu.id).addClass('selected').removeClass('not-selected');
                
                // bounce out the selected menu item so the user gets some feedback
                $('.selected').animate({
                        left: '+=120'
                        }, 2000, 'easeOutBounce');

                if ( !jQuery.browser.msie ) 
                { 
                    $('.selected').fadeTo(700, 1.0); 
                }
                else
                {
                    // *TODO internet explorer friendly fade out
                }

                $('.selected').css({
                    'background-image': 'url(images/transparent.png)'
                        });
                $('.selected').animate({
                    left: 0
                }, 2000, 'easeOutBounce');

                // darken out the not-selected menu items
                if ( !jQuery.browser.msie ) 
                { 
                    $('.not-selected').fadeTo(700, 0.65); 
                }
                else
                {
                    // *TODO internet explorer friendly fade out
                }

                $('.not-selected').css({
                    'background-image': 'url(images/semitrans.png)'
                });

                // render the new sub-menu
                $.each(event.data.sub_menu, function(index, sub_menu) {
                    var menu_div = '<div id="' + sub_menu.id + '" class="menu_sub_item" ' +
                        'style="background-color:' + sub_menu.colour + '"> ' +
                        '<div style="position: relative; top: 2.2em;">' + sub_menu.title + '</div>' +
                        '</div>';
                        
                    $('#menu').append(menu_div);

                    // sort out the hover
                    $('#'+sub_menu.id).hover(
                        function () {
                            $(this).css({'background-color': sub_menu.hoverColour});
                        }, 
                        function () {
                            $(this).css({'background-color': sub_menu.colour});
                        }
                    );

                    // where is our top level menu item positioned?
                    var position =  $('#menu').children(':eq(' + index + ')').position();

                    // put this menu item into the right place
                    $('#menu').children(':last').css({
                        left: position.left + 120,
                        top: position.top
                    });

                    
                    // add the on click event for this sub-menu item -- much easier than the top level menus!
                    $('#'+sub_menu.id).bind('click', {click_function: sub_menu.click}, function(event) {
                        if($.isFunction(event.data.click_function)) {
                            event.data.click_function();
                        }
                    });

                });

                // add the arrow
                $("div[id*='not_fade']").not('.goodbye').append('<div id="sub_menu_arrow" style="position: absolute; z-index: -1; top: 2px; left: -11px; background-color:' + this_menu.colour + ';"><img id="sub_menu_image" src="images/arrow.png"></div>');

                // now fade the sub menus in (delay it a bit first!)
                $('.menu_sub_item').not('.goodbye').delay(500).fade_in_sequence(400, 10);

                // and fade in the one we skipped over, and finally remove the old ones
                $("div[id*='not_fade']").delay(1200).fadeIn(1000, function() {
                    $('.goodbye').remove();
                });

                // remove the next and prior buttons in case they've been left over from previous content
                $('#next').fadeOut();
                $('#prior').fadeOut();

                // and finally call the click, but only call it if it's actually a function
                if ($.isFunction(event.data.click_function)) {
                    event.data.click_function();
                }

            });

        });

	var width = $(window).width();
	var resize_timeout = null;
        // make sure if the user re-sizes the browser, we reset
        $(window).resize(function() {
		var on_resize = function() {
		    $('.selected').removeClass('selected').addClass('not-selected');
		    $(window.location.reload());
		}

                var new_width = $(window).width();
		// check if the new width is actually different. Internet explorer tells you when anything has resized!!!
		if ((width != new_width) && !jQuery.browser.msie)
		{
		    if (resize_timeout)
                    {
			window.clearTimeout(resize_timeout);
		    }
		    resize_timeout = window.setTimeout(on_resize, 10);
		}
		width = new_width;
        });
    };


    _menu.animate_intro = function() {
        /*
         * @brief show the animated intro.  This will only be seen once!
         */
        if (jQuery.browser.msie)
	{
	    // disable menu clicking in internet explorer, it just can't handle it!
	    $('#menu').children().attr('disabled', 'true');
        }
        $('#main_jplayer').jPlayer("play");
        $('#menu').children().fade_in_sequence(500);

	$('#menu').children(':first').animate( {left:0 }, 1, function() {
	    if (jQuery.browser.msie)
	    {
		// reenable menu clicking in internet explorer once the main menu is rendered
                $('#menu').children().removeAttr('disabled');
	    }
	    }).animate({
                left: '+=120'
            }, 2000, 'easeOutBounce').animate({
                left: 0
	    }, 2000, 'easeOutBounce');
    };

    _menu.animate = function(menu_item) {
        /*
         * @brief animates the menu so that menu_item is opened
         */
    };

    _menu.add_menu = function(menu_item, parent_id) {
        /*
         * @brief add a new menu item
         */
        if (parent_id == null) {
            // by default, we'll add to the top level menu
            // first, add a sub-menu that we can take advantage of later
            menu_item['sub_menu'] = menu_item['sub_menu'] || [];
            this.menu_items.push(menu_item);
        } else {
            // find the parent_id in the menu, and add to the contents
            $.each(this.menu_items, function(index, this_menu) {
                if (this_menu.id == parent_id) {
                    this_menu.sub_menu.push(menu_item);
                }
            });
        }
    };

    _menu.show_page_content = function(page_content_name) {
        /*
         * @brief Grab content from the server and shove it into the content area
         */
        $.ajax({
            type: 'GET',
            url: '/' + page_content_name,
            dataType: 'html',
            success: function(html) {
                $('#page_content').fadeTo(
                    700, 0, function() {
                    $(this).html(html).fadeTo(
                        700, 1
                    );
                });
            }
        });
    };

    return _menu;
})(jQuery);

/*
 * Helper functions for next/prev page buttons
 */

function setNext(val) {
    if(!val) {
        $(function () {
            $('#next').fadeOut();
        });
    } else {
        $(function () {
            $('#next').unbind('click');
            $('#next').fadeIn().click(function () {
                MENU.show_page_content(val);
                $(this).fadeOut();
            });
        });
    }
}

function setPrior(val) {
    if(!val) {
        $(function () {
            $('#prior').fadeOut();
        });
    } else {
        $(function () {
            $('#prior').unbind('click');
            $('#prior').fadeIn().click(function () {
                MENU.show_page_content(val);
                $(this).fadeOut();
            });
        });
    }
}