/**
 * Base.js - Start of all js for Menu.
 */
// Set up the new namespacing
var Menu = Menu || {};
var T_menu_init = null;

DEBUG = false;

/**
 * This is the load point for all on page load functions
 * they are wrapped around functionality to make sure the
 * page is ready before anything is executed.
 */
Menu.init = function ()
{
    // When the page is finished loading...
    Event.observe(window, 'load', function () {
    
        // Register the events that will fire every time 
        // a certain AJAX event occurs.
        Ajax.Responders.register({
            onComplete: function () {
                
                // Also, make sure you update the menu history navigation for
                // the new elements
                if (typeof reinitializeDashboardView!= "undefined") {
                    reinitializeDashboardView();
                }
                
            }
            
        });
        
        // Register any other events that should happen
        Event.observe(window, 'resize', function () {
            clearTimeout(T_menu_init);
            T_menu_init = setTimeout(Menu.setFooterPosition, 50);
        });
        
        // register showing and hiding stuff for the profile page
        if (typeof table_names != 'undefined') {
            table_names.each(function (table_name) {
                
                for (var i = 0; i < ids[table_name].length; i++) {
                    var field_to_highlight = ids[table_name][i];
                    
                    hookEventsFor(field_to_highlight, table_name);
                
                    // When the person clicks down, see about removing the help if necessary
                    // Don't hide the box if the helpbox itself is clicked
                    Event.observe(document, 'mousedown', function(event) {
                        if ($$('.help-box').length) {
                            var el = Event.element(event);
                            var is_helpbox = (el.className == "help-box" ? true : false);
                            var has_helpbox_parent = (typeof el.up(".help-box") != "undefined" ? true : false);
                            
                            if (!is_helpbox && !has_helpbox_parent) {
                                hideHelpFor(field_to_highlight, table_name);
                            }
                        }
                    });
                }
          });

        }
        
        // Make sure the footer min-height position is set properly
        Menu.setFooterPosition();
        
        // and the notification box
        Menu.bounceNewBox();
        
        // If editorial content has images linking to themselves, remove the link
        $$(".contentSectionBody a img").each(function(element) {
            var elLink = element.up("a");
            if (element.src === elLink.href) {
                elLink.href="#";
                elLink.style.cursor="default";
            }
        });
    });
    
}

/**
 * These are some commands that will run even before the page
 * has completed loading. This is primarily meant to 
 * fetch the layout images, and register some events,
 * so we don't have blocky boxes suddenly becoming rounded, 
 * and aren't relying on the flaky onLoad inline event.
 */
Menu.preLoader = function ()
{
    // Reusable loading images stored in an array
    var image_prefix = "/images/";
    var img_arr = ["ajax-loading-balls.gif",
                   "corners/green_on_green_circle.gif",
                   "corners/white_on_grey_circle.gif",
                   "corners/white_on_green_circle.gif",
                   "vert_detailed_top.png",
                   "vert_detailed_bottom.png",
                   "vert_simple.png"];
    
    // load them up
    for (var i = img_arr.length - 1; i >= 0; i--) {
        var temp_image = new Image();
        temp_image.src = [image_prefix,img_arr[i]].join("");
    }

    // And initialize the page
    Menu.init();
    
}

/**
 * This function should be set to run after all ajax calls, to do any page
 * cleanup and other bits. Based on the structure of the response, it will
 * return true if the response 'looks' valid, and false if the response is
 * like a full page. Currently, this simply checks for the DOCTYPE string.
 */
Menu.postAjaxUpdate = function (transport)
{
    var response;
    if (typeof transport == 'undefined') {
        return true;
    }
    
    if (typeof transport.responseText != 'undefined') {
        response = transport.responseText;
    }
    
    // We got some response text, but it isn't a server error page (probably log in page)
    if (response && transport.status != 500) {
        // because we check required login and redirect elsewhere, make sure some other
        // page isn't seeping in.
        if (!DEBUG) {
            if (response.substr(0,10).search(/DOCTYPE/) > 0) {
            
                // Create a new container element with some text, and place it in 
                var message = new Element('div', {'class': 'status_problem'}).update("There was a problem loading your page. We apologize for this inconvenience.<br /> Please refresh this page in order to view the content correctly. (Error 6002)");
                $('middlecolumn').update().appendChild(message);
                return false;
            } else {
                // use the return value of this method to do special things you need 
                return true;
            }
        } else {
            return true;
        }
    } else {
        // This is likely some mal-formed error page which wasn't escaped, and just dumped in
        if (typeof console != 'undefined') {
            console.log("error page dumped in... check formatting!");
        }
        return false;
    }

}

/**
 * This function will adjust the footer on the page to sit properly
 * at the bottom. It will adjust for the tallest item, and be below
 * that. This changes the minimum height, so that the page can be larger if needed.
 *
 * This is accomplished by taking the full page height, and removing the height
 * of the footer, and it's position from the top. That is added to the current
 * height of the adjusted element to result in the appropriate footer height.
 * 
 * This returns a reference to the element that was actually adjusted.
 */
var IE_RESIZE_PREV_SIZE = 0;
var MARGIN_PADDING_OFFSET = 25;
Menu.setFooterPosition = function ()
{
    
    // Set the variable to adjust. It always is either middlecolumn or logged_off_middlecolumn
    if ($('middlecolumn'))
        elementToAdjust = 'middlecolumn';
    else 
        elementToAdjust = 'logged_off_middlecolumn';
        
    var footerobj = $('footer');
    var elemAdj = $(elementToAdjust);
    
    // objects for the height of the page
    var menuAdj = $('menu_container');
    var headerAdj = $('header_dos');
    
    var menuHeight = ((menuAdj) ? menuAdj.offsetHeight : 0);
    
    // IE fires many resize events for no reason at all. This checks if the
    // values are actually different and keeps it if so
    var biggestHeight = Math.max(menuHeight, elemAdj.offsetHeight);
    
    if (document.viewport.getHeight() != IE_RESIZE_PREV_SIZE && (document.viewport.getHeight()-footerobj.offsetHeight) > (menuHeight+headerAdj.offsetHeight)) {
        
        var newValue = document.viewport.getHeight() - footerobj.offsetHeight - footerobj.offsetTop;
        newValue += biggestHeight;
        
        // Removing values which make up the collection of vertical paddings
        // and margins in the base template, which comes to about 25 pixels
        newValue -= MARGIN_PADDING_OFFSET;
        
        new Effect.Morph(elementToAdjust, {
            duration: 0.1,
            style: "min-height: " + newValue + "px"
        });
        
        if (Menu.isIE() && Menu.isIE() < 7.0) {
            elemAdj.style.height = newValue + "px";
        }
        
        IE_RESIZE_PREV_SIZE = document.viewport.getHeight();
    }
    
    return elemAdj;
}

Menu.clearFooterPosition = function (elementName)
{
    
    $(elementName).setStyle({
      height: ""
    });
    
}

/**
 * Function for loading big loading images (for instance, when changing items on
 * zoom widget). This simply sets a class on the specified element instead of
 * creating an image resource.
 *
 * inTarget - where you are putting that new class
 *
 * This returns the image container element.
 */
Menu.createLoadingImg = function (inTarget)
{
    var tg = $(inTarget);
    // set the class for the target to be 'loading'
    tg.update().addClassName('loading');
    
    // Guarantee it enough height to show the image (about 100 pixels)
    if (tg.offsetHeight < 100) tg.style.height = "100px";
    return tg;
}

/**
 * Function for hiding any big loading images that have been created by the
 * createLoadingImg call. Also remove any special height given, letting the
 * element return to its natural height.
 *
 * inTarget - where you are removing that loading image
 *
 * This returns the element where the call was made, regardless of whether a loading
 * image was there.
 */
Menu.removeLoadingImg = function (inTarget)
{
    var tg = $(inTarget);
    tg.removeClassName('loading');
    tg.style.height = null;
    
    return tg;
}

/**
 * This function will create the styling necessary to dynamically generate a
 * regular box with rounded white corners.
 *
 * It puts the box (with the withId) in the named container)
 *
 * Like most prototype-y things, it returns the extended element that was created.
 */
Menu.createWhiteBox = function (withId, inNamedContainer) {
   /** It should look like the following
    * <div class="white box" id=withId>
    * <div class="topWhiteCorner">
    *    <div>&nbsp;</div>
    * </div>
    * <div class="box" id=withId_content><!-- content here --></div>
    * <div class="bottomWhiteCorner">
    *    <div>&nbsp;</div>
    * </div>
    * </div>
    *
    * http://code.google.com/p/dombuilder/
    */
    
    var space = new Element("div").update("&nbsp;");
    var space2= new Element("div").update("&nbsp;"); 
    
    // top border
    var topBorder = new Element("div", {"class": "topWhiteCorner"});
    
    // bottom border
    var bottomBorder = new Element("div", {"class": "bottomWhiteCorner"});
    
    var contentSection = new Element("div", {"class" : "white box", "id" : withId+"_content"});
    
    var container = new Element("div", {"class" : "white box", "id": withId});
    
    // and stitch them together
    container.appendChild(topBorder);
    container.appendChild(contentSection);
    container.appendChild(bottomBorder);
    
    // and the spaces where they belong
    topBorder.appendChild(space2);
    bottomBorder.appendChild(space);
    
    // and stick the whole bit where it belongs
    //$(inNamedContainer).innerHTML = "";
    $(inNamedContainer).appendChild(container);
    
    return container;
}

/**
 * Return the Internet Explorer Version, or zero (if it isn't IE)
 */
Menu.isIE = function()
{
    
    //if (typeof(console) != 'undefined') {
    //    console.log("Consider using Prototype's Browser method (Prototype.Browser)");
    //}
    
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
        
        var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
        return parseFloat(ieversion);
        
    } else {
        
        return 0;
        
    }
    
}

/**
 * This is a wrapper for opening popup windows for help pages, which can include
 * both the page name, and any internal page anchors.
 *
 *  @param contentPage {string} wiki-type page to open (like Keyword_Help[#Page_Anchor])
 *  @param dimensions {string } [optional] window dimensions (like width=x,height=y)
 * Returns nothing
 */
Menu.openHelp = function(contentPage, dimensions)
{
    var dimen = ((typeof dimensions != 'undefined') ? dimensions : "width=580,height=340");
    window.open('/pages/popup/'+contentPage + '/', 'keyword_help','status=0, toolbar=0,'+dimen+',scrollbars=1,location=0,resizeable=0');
}

/**
 * This sets a cookie so that new-feature reminders are dismissed
 * permanently (not just hidden, but no longer sent over)
 *
 * Returns nothing
 */
Menu.killNewFlag = function() {
    new Ajax.Request("/homepage/stop_new_search_reminder", {
        method: 'GET',
        asynchronous: true
    });
    
    $("new_box").fade({duration: 0.3});
}

/**
 * We'll be labeling new content occasionally. This is a javascript method to handle
 * showing those.
 *
 * Returns nothing
 */
Menu.bounceNewBox = function() {
    var newFeature = $('search_field');
    var boxToMove = $('new_box');
    
    if (newFeature && boxToMove) {
        // Use Tween() to make the box slide a bit when the field is hovered over.
        newFeature.observe("mouseover", function(event) {
            new Effect.Tween(boxToMove, parseFloat(boxToMove.style.top.substr(0,2)), 36, {duration: 0.25}, function(p) {boxToMove.style.top = p+"px";});
        });
        newFeature.observe("mouseout", function(event) {
            new Effect.Tween(boxToMove, parseFloat(boxToMove.style.top.substr(0,2)), 24, {duration: 0.25}, function(p) {boxToMove.style.top = p+"px";});
        });
        
    }
}

/**
 * use the Posts' IDs to get the location of the thumbnail image, then place
 * it in the referenced element 'src' attribute (skip elements that aren't IMG)
 *
 * Returns boolean whether the element was modified or not
 */
Menu.setThumbnail = function (element)
{
    var el = $(element.id);
    if (el.tagName.toLowerCase() === "img" && el.src !== "/pages/id/"+el.id+".jpg") {
        el.src = "/pages/id/"+el.id+".jpg";
        return true;
    }
    return false;
}