/* support/js/mr-frame324.js - Page framework #2, MartinRinehart.com
Copyright 2012, Martin Rinehart */

/* Table of Contents
*/

/**I Data */

    /* Note: the page which loads this file may define MRframe323, or
    MRframe323.medallion_img_src or MRframe323.site_customize() - any of 
    these can be used to override the defaults in this file. */

    /** The global. */
    if ( window.MRframe323 === undefined ) { MRframe323 = {}; }

    /** Default medallion img. */
    if ( MRframe323.medallion_img_src === undefined ) {
            MRframe323.medallion_img_src =  
            'support/graphics/medallion-fe-e-4020e0.jpg'; }

    /** Colors, master. */
    MRframe323.COLOR_accent         = '#00fcf8';
    if ( MRframe323.COLOR_background === undefined ) {
        MRframe323.COLOR_background = '#4020e0'; }
    MRframe323.COLOR_nohover        = '#f0f0ff';
    MRframe323.COLOR_offwhite       = '#f8f4f0';
    MRframe323.COLOR_white          = '#ffffff';
    MRframe323.COLOR_black          = '#000000';
    
    /** Colors, assignments. */
    MRframe323.COLOR_content        = MRframe323.COLOR_offwhite; 
    MRframe323.COLOR_logo_bottom    = MRframe323.COLOR_accent;
    MRframe323.COLOR_logo_top       = MRframe323.COLOR_background; 
    MRframe323.COLOR_M              = MRframe323.COLOR_offwhite; 
    MRframe323.COLOR_med            = MRframe323.COLOR_offwhite; 
    MRframe323.COLOR_med_bord       = MRframe323.COLOR_background; 
    MRframe323.COLOR_med_bg         = MRframe323.COLOR_accent; 
    MRframe323.COLOR_med_bg_bord    = MRframe323.COLOR_accent;
    MRframe323.COLOR_nav            = MRframe323.COLOR_background 
    MRframe323.COLOR_R              = MRframe323.COLOR_background; 
    MRframe323.COLOR_text           = MRframe323.COLOR_black;

    /** Device size range. */
    MRframe323.device_min_width = 176; // pixels
    MRframe323.device_max_width = 640;
    
    /** Incoming navigation path (if any). */
    MRframe323.nav_specs = '';
    
    /** */
    MRframe323.menu_height = 21;
    MRframe323.menu_specs = [];
    
/** Install custom default data, if any. */
    if ( MRframe323.site_customize ) { MRframe323.site_customize(); }
    
    /** Page divs. */
    MRframe323.divs = {};
    MRframe323.divs.nav = document.getElementById( 'nav' );
    MRframe323.divs.content = document.getElementById( 'content' );
    
    if ( MRframe323.divs.nav === null ) {
        MRframe323.divs.nav = document.createElement( 'div' );
            MRframe323.divs.nav.id = 'nav';
            if ( document.body.firstChild ) {
                document.body.insertBefore( 
                        MRframe323.divs.nav, document.body.firstChild );
            } else { document.body.appendChild( MRframe323.divs.nav ); }
    } else {
        MRframe323.nav_specs = MRframe323.divs.nav.innerHTML;
        MRframe323.divs.nav.innerHTML = '';
    }
    
    if ( MRframe323.divs.content === null ) {
        MRframe323.divs.content = document.createElement( 'div' );
        MRframe323.divs.content.id = 'content';
    }
    
    /** Compute menus array. */
    MRframe323.nav_specs = MRframe323.nav_specs.
            replace(  /\r/g, ' ' ). // CRs become spaces
            replace(  /\n/g, ' ' ); // LFs become spaces
    MRframe323.nav_specs = MRlib323.trim( MRframe323.nav_specs );

    if ( MRframe323.nav_specs !== '' ) {
        // wrap in '[' and ']', if not already wrapped
        if ( MRframe323.nav_specs.indexOf('[') !== 0 ) {
                MRframe323.nav_specs = '[' + MRframe323.nav_specs + ']'; }
        // instanct JSON parse        
        eval( 'MRframe323.menu_specs = ' + MRframe323.nav_specs );
    } // else '....menu_specs = []' (above)

    /* At this point we have at least two divs: first 'nav' and then
    'content'. 'MRframe323.nav_specs' holds an empty string or the content
    of 'nav'. 'nav' is empty. The content of 'content', if any, is unchanged. */
    
/**I Build */

/** Create DOM elements. */
MRframe323.build = function () {

    /**A Document Body */
    document.body.style.backgroundColor = MRframe323.COLOR_background;
    document.body.style.fontFamily = 'sans-serif';
    
    /** Logo, medallion floats. */
    margin_opacity = 0.2;
    
    /**A Logo */
    
        /**1 Logo */
        MRframe323.divs.logo = document.createElement( 'div' );
            var div = MRframe323.divs.logo;
            div.id = 'logo';
            div.style.backgroundColor = MRframe323.COLOR_accent;
            div.style.position = 'absolute';
            div.title = 'home page'
            div.onclick = function () { MRmenus323.go( 'index.html' ); },
            div.onmouseover = function () { this.style.cursor = 'pointer'; },
            div.onmouseout = function () { this.style.cursor = 'default' }
        document.body.insertBefore( div, MRframe323.divs.content );
        
    /**1 Float Background */
        MRframe323.divs.logo_bg = document.createElement( 'div' );
            MRframe323.divs.logo_bg.id = 'logo_bg';
            MRframe323.divs.logo_bg.style.backgroundColor = 
                    MRframe323.COLOR_content;
            MRframe323.divs.logo_bg.style.cssFloat = 'left';
            MRframe323.divs.logo_bg.style.styleFloat = 'left'; // MSIE bull
            // In case the content isn't as tall as the logo:
            MRlib323.set_opacity( MRframe323.divs.logo_bg, margin_opacity );
        document.body.insertBefore( MRframe323.divs.logo_bg, 
                MRframe323.divs.logo );
                
        /* Stacking order: nav, logo_bg, logo, content */
                    
    /**A Nav */
    MRframe323.divs.nav.style.backgroundColor = MRframe323.COLOR_nav;
    MRframe323.divs.nav.style.position = 'absolute';
    
    /**A Medallion */
        /**1 Medallion */
        MRframe323.divs.med = document.createElement( 'div' );
            MRframe323.divs.med.id = 'med';
            MRframe323.divs.med.style.backgroundColor =
                    MRframe323.COLOR_accent;
            MRframe323.divs.med.style.position = 'absolute';
            MRframe323.divs.med.style.borderLeftStyle = 'solid';
            MRframe323.divs.med.style.borderLeftColor = 
                    MRframe323.COLOR_background;
            MRframe323.divs.med.style.borderBottomStyle = 'solid';
            MRframe323.divs.med.style.borderBottomColor = 
                    MRframe323.COLOR_background;
            
            var img = document.createElement( 'img' );
                img.id = 'med_img';
                img.alt = 'Rotated text reading "Frontend Engineering".';
                img.border = 0;
                img.src = MRframe323.medallion_img_src;
                img.title = 'Your source for frontend engineering.';
                img.style.position = 'absolute';
                MRframe323.divs.med.appendChild( img );
                
        document.body.insertBefore( MRframe323.divs.med, 
                MRframe323.divs.content );
        
        /**1 Float Background */
        MRframe323.divs.med_bg = document.createElement( 'div' );
            MRframe323.divs.med_bg.id = 'med_bg';
            MRframe323.divs.med_bg.style.backgroundColor = 
                    MRframe323.COLOR_content;
            // In case the content isn't as tall as the medallion:
            MRlib323.set_opacity( MRframe323.divs.med_bg, margin_opacity );
            MRframe323.divs.med_bg.style.cssFloat = 'right';
            MRframe323.divs.med_bg.style.styleFloat = 'right'; // MSIE bull
        document.body.insertBefore( MRframe323.divs.med_bg, 
                MRframe323.divs.med );
        
        /* Stacking order: nav, logo_bg, logo, med_bg, med, content */
        
    /**A Content */
    
} // end: build()    
    
/**I Layout */

/** (Re)Size Everything */
MRframe323.layout = function () {

    /* The 'window_width' is the actual browser window size. The 'size'
    may be greater (if the 'window_width' is less than the design min) or less
    (if the 'window_width' is greater than the design max). */
    var window_width = MRlib323.window_size().width,
        size = window_width;

    if ( window_width === 0 ) { return 100; } 
        // MSIE kludge, retry in 100 millis
        
        // alert( 'frame layout(): window_width = ' + window_width );
    
    var min = MRframe323.device_min_width,
        max = MRframe323.device_max_width;
    if ( window_width < min ) { size = min; }
    else if ( window_width > max ) { size = max; }
    
    /* Self: the "M" and "R" positions are for the bounding divs, not for
    the letters themselves. */
    
    var round = Math.round;
    
    var body_margin  = round( (size *  0.0388) + -4.8276 ), // 20 to 2
        
        font_size    = round( (size *  0.0065) +  6.8621 ), // 11 to 8
        font_size_h1 = round( (size *  0.0302) +  8.6897 ), // 28 to 14
        font_size_h2 = round( (size *  0.0259) +  7.4483 ), // 24 to 12
        font_size_h3 = round( (size *  0.0216) +  6.2069 ), // 20 to 10
        font_size_h4 = round( (size *  0.0172) +  4.9655 ), // 16 to 8
        
    
        logo_margin  = round( (size *  0.0172) + -1.0345 ), // 10 to 2
        logo_size    = round( (size *  0.1897) + -1.3793 ), // 120 to 32
        logo_letter  = round( (size *  0.1616) + -3.4483 ), // 100 to 25
        logo_m_left  = round( (size *  0.0194) + -1.4138 ), // 11 to 2
        logo_m_top   = round( (size * -0.0237) +  3.1724 ), // -12 to -1 
        logo_r_left  = round( (size *  0.0560) +  2.1379 ), // 38 to 12
        logo_r_top   = round( (size *  0.0194) +  2.5862 ), // 15 to 6
        
        lup_height = 10;
        
        med_border_width = logo_margin,
        med_bradius  = round( (size *  0.0216) +  6.2069 ), // 20 to 10
        med_margin   = logo_margin,
        med_padding  = logo_margin,
        
        med_img_margin = logo_margin, 
        med_img_height = round( (size * 0.4138) + 119.1724 ), // 384 to 192
        med_img_right = med_img_margin,
        med_img_top = med_img_margin,
        med_img_width  =  round( (size * 0.0474) + 13.6552 ), // 44 to 22
        
        med_height = med_img_height + ( 2 * med_img_margin ),
        med_width = med_img_width + ( 2 * med_img_margin ),
        
        nav_height = MRframe323.menu_specs.length * MRframe323.menu_height +
                lup_height,
        nav_width = window_width - 
                ( 2 * body_margin ) - logo_size - med_width - med_border_width;
        content_padding = logo_margin;
        
    /**A Document Body */
    document.body.style.margin = body_margin + 'px';
    document.body.style.marginTop = body_margin + nav_height + 'px';
    document.body.style.fontSize = font_size + 'pt';
    style_font_size( 'h1', font_size_h1 );
    style_font_size( 'h2', font_size_h2 );
    style_font_size( 'h3', font_size_h3 );
    style_font_size( 'h4', font_size_h4 );
    
    /**A Logo */
        /**1 Logo */
        
        // first, clear it out
        MRlib323.remove_children( MRframe323.divs.logo );
        
        // then lay out the div
        set_ltwh( MRframe323.divs.logo, body_margin, body_margin,
                logo_size, logo_size );
            
        // slap on a coat of gradient paint    
        MRframe323.divs.logo.vg = 
                new MRlib323.VGradient( MRframe323.divs.logo, 0, 0, 
                logo_size, logo_size, 
                MRframe323.COLOR_logo_top, MRframe323.COLOR_logo_bottom ); 
                
        // add an M and an R
        MRlib323.delete_element_by_id( 'the_logo_m' );
        MRlib323.delete_element_by_id( 'the_logo_r' );

        var m = MRlib323.create_element( 'div', 'the_logo_m',
            {fontFamily: 'sans-serif', 
            fontSize: logo_letter + 'px', 
            fontWeight: 900,
            left: logo_m_left + 'px', 
            top:  logo_m_top + 'px', 
            position: 'absolute', 
            color: MRframe323.COLOR_M}, 
            {innerHTML: 'M'} );
        MRframe323.divs.logo.appendChild( m );

        var r = MRlib323.create_element( 'div', 'the_logo_r',
            {fontFamily: 'sans-serif', 
            fontSize: logo_letter + 'px', 
            fontWeight: 900,
            left: logo_r_left + 'px', 
            top:  logo_r_top + 'px', 
            position: 'absolute', color: MRframe323.COLOR_R}, 
            {innerHTML: 'R'} );                
        MRframe323.divs.logo.appendChild( r );
        
        /**1 Float Background */
        set_ltwh( MRframe323.divs.logo_bg, 0, 0, logo_size + logo_margin,
                logo_size - nav_height + logo_margin );
                
    /**A Medallion */
    
        /**1 Medallion */
        set_rtwh( MRframe323.divs.med, body_margin, body_margin,
            med_width, med_height );
        MRframe323.divs.med.style.borderLeftWidth = med_border_width + 'px';
        MRframe323.divs.med.style.borderBottomWidth = med_border_width + 'px';
        MRframe323.divs.med.style.borderRadius = '0 0 0 ' + med_bradius + 'px';
        var med_img = document.getElementById( 'med_img' );
            med_img.style.height = med_img_height + 'px';
            med_img.style.right  = med_img_right + 'px';
            med_img.style.top    = med_img_top + 'px';
            med_img.style.width  = med_img_width + 'px';

        /**1 Float Background */
        set_rtwh( MRframe323.divs.med_bg, 0, 0, 
                med_width + med_border_width + med_margin,
                med_height + med_border_width - nav_height /*+ med_margin*/ );
                
    /**A Content Div */
    MRframe323.divs.content.style.padding = content_padding + 'px';
    
    /**A Nav Div */
    
    /* Recompute this, to allow for vertical scrollbar. */
        nav_width = document.body.offsetWidth - // what's left inside margins
            logo_size - med_width - med_border_width;
// alert ('frame, nav_width = ' + nav_width + ', doc.b.offsetWidth = ' + document.body.offsetWidth );    
        /** Style the 'nav' div. */
        set_ltwh( MRframe323.divs.nav, body_margin + logo_size, body_margin, 
                nav_width, nav_height );

        if ( MRframe323.menus !== undefined ) {
        
            for ( var i in MRframe323.menus ) {
                var menu = MRframe323.menus[ i ];
                menu.layout( nav_width );
            }

        } else {
        
            MRframe323.menus = [];
            
            for ( var i in MRframe323.menu_specs ) {
                var spec = MRframe323.menu_specs[ i ];
                var data = MRmenus323.get_data( spec.id );
                var j = parseInt( i, 10 );
                MRframe323.menus[ i ] = 
                        new MRmenus323.Menu( 
                                MRframe323.divs.nav, // parent element
                                0, // left
                                j * MRframe323.menu_height, nav_width, // top
                                data, spec.punched 
                        );
            } // end: for ( i in menu_specs )

        } // end: else menus === undefined
        
        var lup = MRlib323.date2dd_Mon_yyyy( 
                new Date(document.lastModified) );

        var lup_span = MRlib323.create_attached_element( 
            MRframe323.divs.nav, 'span', 'lup_span',
                    {fontSize: '8pt',
                    position: 'absolute', 
                    right: '0px', 
                    top: nav_height - lup_height - 3 + 'px',
                    color: MRframe323.COLOR_white},
                    {innerHTML: 'last updated: ' + lup} 
        );
                    
    /** Set left, top, wid, hgt. */
    function set_ltwh( element, left, top, wid, hgt ) {
// alert( 'ltwh: ' + wid );
        element.style.left   = left + 'px';
        element.style.top    = top + 'px';
        element.style.width  = wid + 'px';
        element.style.height = hgt + 'px';
    } // end: set_ltwh()
    
    /** Set right, top, wid, hgt. */
    function set_rtwh( element, right, top, wid, hgt ) {
        element.style.right  = right + 'px';
        element.style.top    = top + 'px';
        element.style.width  = wid + 'px';
        element.style.height = hgt + 'px';
    } // end: set_rtwh()
    
    /** Set font size for elements. */
    function style_font_size( tag, size ) {
    
        var elements = document.getElementsByTagName( tag );
        for ( var i = 0; i < elements.length; i += 1 ) {
            elements[ i ].style.fontSize = size + 'pt';
        }
        
    } // end: style_font_size()
    
} // end: layout()    
    
/**I Controller */

/** Resize controller. 

This launches a resize to happen after a FEW millis delay. If another resize
is triggered during the delay, it clears the old one and repeats, launching
another after a FEW millis. When the FEW millis elapse without another 
resize, the event handler does its thing. */
MRframe323.launch_resize = function () {

    var FEW = 20; // a FEW millis

    if ( MRframe323.launch_resize.timeout !== undefined ) {
        clearTimeout( MRframe323.launch_resize.timeout ); 
        MRframe323.launch_resize.timeout = undefined;
    }
            
    MRframe323.launch_resize.timeout = setTimeout( MRframe323.layout, FEW );
    
} // end: launch_resize()

/** Future paints? On resize. */
window.onresize = MRframe323.launch_resize;

/**I On Load */    

MRframe323.build();

MRframe323.go = function () {

    // MSIE kludge - IE fails, occasionally
    var retry = MRframe323.layout();
    if ( retry && (retry > 0) ) { 
        setTimeout( MRframe323.go, retry ); 
        return; 
    } else { MRframe323.ready = true; }
    
} // end: go()

MRframe323.go();

// alert( 'support/js/mr-frame324.js loaded' );

/* end of support/js/mr-frame324.js */