// Last edit: 2009 Nov 09, 23:41:56

// globals for mouse pos - set on mousemove event via setMouseXY(e)
var mouseX = 0;
var mouseY = 0;

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false;

// Mouse move updates the global vars mouseX, mouseY
// If NS -- that is, !IE -- then set up for mouse capture
// This is not required after NS4. Drop it.
// if (!IE) document.captureEvents(Event.MOUSEMOVE);

// Set-up to use setMouseXY function onMouseMove
document.onmousemove = setMouseXY;

////////////////////////
// function getMouseXY()
// Function to retrieve mouse x-y pos.
function getMouseXY()
{
    return [mouseX, mouseY];
}

/////////////////////////
// function setMouseXY(e)
// Event-triggered function sets global vars mouseX, mouseY
function setMouseXY(e)
{
    if (IE) { // grab the x-y pos.s if browser is IE
        mouseX = event.clientmouseX + document.body.scrollLeft;
        mouseY = event.clientmouseY + document.body.scrollTop;
    } else {  // grab the x-y pos.s if browser is NS
        mouseX = e.pagemouseX;
        mouseY = e.pagemouseY;
    }  
    // catch possible negative values in NS4
    if (mouseX < 0){mouseX = 0}
    if (mouseY < 0){mouseY = 0}  
    // Move the popup_div
    //popup_div.style.position = "absolute";
    // popup_div.style.left = (mouseX+15)+"px";
    // popup_div.style.top = (mouseY+5)+"px";
    return true;
} // END function setMouseXY(e)

function mouseWindowTop()
{
    var mouseXY = getMouseXY();
    var windowHeight = document.body.offsetHeight;
    if( mouseXY[1] > (windowHeight/2) )
    {
        return false;
    }
    return true;
}

////////////////////////
// function findPos(obj)
// returns array [x,y]
// This is from http://www.quirksmode.org/js/findpos.html
function findPosTopLeft(obj)
{
    return findPos( obj );
}
function findPosBotLeft(obj)
{
    var height = obj.offsetHeight;
    var a_xy = findPos( obj );
    return [a_xy[0],a_xy[1]+height];
}
function findPos(obj)
{
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while( obj = obj.offsetParent );
    }
    return [curleft,curtop];
} // END function findPos(obj)

/* ***************************************************************************
* Popup stuff below here
*************************************************************************** */

// 20090821 - Adding timers to popup behaviour.
// Thinking through the state transitions, I think I need to keep a record of
// the event type (mouseover,mo or mouseout,mu) and the entry_id.
// mo and mu are JS objects:
var mo = new Object;
var mu = new Object;
// 20091111: Store the category highlighted entry's reset code
var mo_resets = new Object;

function clear_timer( ou, entry_id )
{
    if( ou[entry_id] && ou[entry_id] != null )
    {
        clearTimeout( ou[entry_id] );
        delete ou[entry_id];
    }
} // END function clear_timer( ou, entry_id )
// A. mouseover.
function mo_timer( function_call, entry_id, timeout )
{
    // 1. delete any mu on this entry (so if it's about to be hidden, stop that).
    // Leave all other mu alone (let them hide as expected).
    clear_timer( mu, entry_id );
    // 2. delete all mo events (don't popup other things while over this thing).
    // NOTE this may include a mo on this entry. That's OK, I don't want old
    // mo's to fire, I want to set a new one.
    for( var eid in mo )
    {
        clear_timer( mo, eid );
    }
    // 3. set new mo event (show this entry after timeout delay).
    mo[entry_id] = setTimeout( function_call, timeout );
} // END function mo_timer( function_call, entry_id, timeout )
// B. mouseout
function mu_timer( function_call, entry_id, timeout )
{
    // 1. Leave all other mu alone (let them hide as expected).
    // I don't want an old hide event to fire while I'm waiting for the new one
    // to go.
    // NOTE that mo_timer( entry_id ) includes deletion of any mu on it.
    // So, there shouldn't be any pending mu's on this event.
    // However... belt and braces!
    clear_timer( mu, entry_id );
    // 2. delete all mo events. (cancel all pending popups).
    for( var eid in mo )
    {
        clear_timer( mo, eid );
    }
    // 3. set new mu event (hide this after timeout delay).
    mu[entry_id] = setTimeout( function_call, timeout );
} // END function mu_timer( function_call, entry_id, timeout )

/*
initialise popup_div for use in show_popup() and hide_popup()
TODO: pass popup name into show_popup and hide_popup to make this generic
*/
var  popup_div = document.getElementById('popup_div');
if( !popup_div ){ alert("!popup_div") }

function onmouseover_img_art( entry_id, b_color )
{
    var t_el       = document.getElementById("hn-art-title-" + entry_id);
    var i_el       = document.getElementById("hn-art-img-"   + entry_id);
    var s_id       = "hn-art-space-" + entry_id;
    var hn_border_color = "hn-border-" + b_color;
    var hn_background_color = "hn-background-" + b_color;
    t_el.className = "hn-art-title-mouseover " + hn_border_color;
    i_el.className = "hn-f-r hn-art-img-mouseover " + hn_border_color + " hn-pad-img";
    show_popup(s_id, hn_border_color, hn_background_color + " hn-1px-high-spacer",
                    entry_id, hn_border_color, hn_background_color );
} // END function onmouseover_img_art( entry_id )

function onmouseover_img_art_storybox( cat_name, entry_id, b_color )
{
    // 20091111: Un-highlight any highlighted cat entry
    if( mo_resets[cat_name] )
    {
        eval( mo_resets[cat_name] );
    }
    mo_resets[cat_name] = 'onmouseout_img_art( '+entry_id+', "'+b_color+'" )';
    // Now set this one
    var t_el       = document.getElementById("hn-art-title-" + entry_id);
    var i_el       = document.getElementById("hn-art-img-"   + entry_id);
    var hn_border_color = "hn-border-" + b_color;
    t_el.className = "hn-art-title-mouseover " + hn_border_color;
    i_el.className = "hn-f-r hn-art-img-mouseover " + hn_border_color + " hn-pad-img";
    // alert( "onmouseover_img_art_storybox:\n" +
    // "cat_name == " + cat_name + "\n" +
    // "b_color == " + b_color + "\n" +
    // "entry_id == " + entry_id + "\n" );
    show_storybox_story(cat_name, hn_border_color, entry_id);
} // END function onmouseover_img_art_storybox( cat_name, entry_id, b_color )

function onmouseover_sub_art_storybox( cat_name, entry_id, b_color )
{
    // 20091111: Un-highlight any highlighted cat entry
    if( mo_resets[cat_name] )
    {
        eval( mo_resets[cat_name] );
    }
    mo_resets[cat_name] = 'onmouseout_sub_art( '+entry_id+' )';
    // Now set this one
    var hn_border_color = "hn-border-" + b_color;
    var a_el       = document.getElementById("hn-sub-art-" + entry_id);
    //a_el.className = "hn-sub-art hn-sub-headline-mouseover " + hn_border_color;
    a_el.className = "hn-sub-art hn-storybox-title-mo " + hn_border_color;
    // alert( "onmouseover_sub_art_storybox:\n" +
    // "cat_name == " + cat_name + "\n" +
    // "b_color == " + b_color + "\n" +
    // "entry_id == " + entry_id + "\n" );
    show_storybox_story(cat_name, hn_border_color, entry_id);
} // END function onmouseover_sub_art_storybox( cat_name, entry_id, b_color )

function onmouseout_img_art( entry_id, b_color )
{
    var t_el       = document.getElementById("hn-art-title-" + entry_id);
    var i_el       = document.getElementById("hn-art-img-" + entry_id);
    var hn_border_color = "hn-border-" + b_color;
    var s_id       = "hn-art-space-" + entry_id;
    t_el.className = "hn-art-title " + hn_border_color;
    i_el.className = "hn-f-r hn-art-title " + hn_border_color + " hn-pad-img";
    hide_popup(s_id, "hn-art-title-background hn-1px-high-spacer", entry_id);
} // END function onmouseout_img_art( entry_id )

function onmouseover_sub_art( entry_id, b_color )
{
    var a_el       = document.getElementById("hn-sub-art-" + entry_id);
    var hn_border_color = "hn-border-" + b_color;
    var hn_background_color = "hn-background-" + b_color;
    var s_id       = "hn-art-space-" + entry_id;
    a_el.className = "hn-sub-art hn-sub-headline-mouseover " + hn_border_color;
    show_popup(s_id, hn_border_color,
               hn_background_color + " hn-1px-high-spacer",
               entry_id,
               hn_border_color, hn_background_color + " hn-1px-high-spacer");
} // END function onmouseover_sub_art( entry_id )

function onmouseout_sub_art( entry_id )
{
    var a_el       = document.getElementById("hn-sub-art-" + entry_id);
    a_el.className = "hn-sub-art hn-sub-headline";
    hide_popup("hn-art-space-" + entry_id, "hn-1px-high-spacer", entry_id);
} // END function onmouseout_sub_art( entry_id )

//////////////////////
// function show_popup
//
function show_popup( align_id, popup_border_class,
                    align_over_class,
                    entry_id,
                    border_color_class, background_color_class )
{
    // First get the align_id position
    var align_div = document.getElementById( align_id );
    if( align_over_class )
    {
        align_div.className = align_over_class;
    }
    else
    {
        align_div.className = popup_border_class;
    }
    ///////////////////////////////////////////////////////////////////////////////
    // vert 'spacer' which will hide the top-left section of the img border.
    var vert_spacer_id = "vert-spacer-"  + entry_id;
    var img_div_id     = "hn-art-img-"   + entry_id;
    var title_div_id   = "hn-art-title-" + entry_id;

    var vert_spacer = YAHOO.util.Dom.get( vert_spacer_id );
    if( vert_spacer )
    {
        var img_div   = YAHOO.util.Dom.get( img_div_id );
        var title_div = YAHOO.util.Dom.get( title_div_id );
        if( img_div && title_div )
        {
            // Yahoo setStyle, getXY & setXY
            if( YAHOO.env.ua.ie )
            {
                // IE stops the horizontal spacer 4 pixels or so from the image
                // border. So, display top & bottom borders on vert spacer and make
                // it 4px wide, positioned at -3px.
                // 20090810: 1px bot border, 4px wide and a -ve offset: Room for error...
                YAHOO.util.Dom.setStyle(vert_spacer, "borderWidth", "1px 0 1px 0");
                YAHOO.util.Dom.setStyle(vert_spacer, "width", "4px");
                var vert_spacer_x_offset = -3; // Works for IE6 & FF3
            }
            else
            {
                // Presume FF code is OK for everything else!
                // FF does what I expect, but sometimes positions the vert
                // spacer out by -1px. So, display vert spacer with no bot
                // border, 2px wide and positioned at no offset.
                YAHOO.util.Dom.setStyle(vert_spacer, "borderWidth", "1px 0 0 0");
                YAHOO.util.Dom.setStyle(vert_spacer, "width", "2px");
                var vert_spacer_x_offset = 0; // Works for IE6 & FF3
            }
            vert_spacer.className = border_color_class+" "+background_color_class+" hn-1px-wide-spacer";
            // hard-coded backgroundColor is a hack, but seems necessary to
            // force the backgroundColor. TODO: Fix this.
            YAHOO.util.Dom.setStyle(vert_spacer_id, "backgroundColor", "#f0f7fe"); // HACK!!
            // Height
            if( YAHOO.env.ua.ie )
            {
                // Cannot use 'height': returns 'auto'
                var t_h = title_div.offsetHeight + 1;
                t_h = t_h + 'px';
            }
            else
            {
                var t_h = YAHOO.util.Dom.getStyle( title_div_id, "height" );
            }
            //YAHOO.util.Dom.setStyle(vert_spacer_id, "height", t_h);
            //alert( "t_h == " + t_h );
            vert_spacer.style.height = t_h; // getStyle returns e.g. "10px".
            // Position
            YAHOO.util.Dom.setStyle(vert_spacer_id, "position", "absolute");
            var xy = YAHOO.util.Dom.getXY(img_div_id);
            // 20090807 - must put setXY _after_ display:block
            YAHOO.util.Dom.setStyle(vert_spacer_id, "display", "block");
            if( YAHOO.env.ua.gecko )
            {
                xy[1] += 1; // TODO: 20090808 This is required for FF-only. Not understood.
            }
            // X-position fiddle see above
            xy[0] += vert_spacer_x_offset;
            // END DEBUG
            YAHOO.util.Dom.setXY(vert_spacer_id, xy);
            // END Yahoo getXY & setXY
        } // END if( img_div && title_div )
        else
        {
            alert( "img_div == " + img_div + "title_div == " + title_div );
        }
    } // END if( vert_spacer )
    // END vert spacer code
    ///////////////////////////////////////////////////////////////////////////////
    //align_div.innerHTML="spacer div"; // DEBUG only
    //align_div.style.backgroundColor="#ff0"; // DEBUG only
    // Align code below
    // DEBUG
    // if( YAHOO.env.ua.ie )
    // {
    //     var title_w = title_div.offsetWidth;
    //     var align_w = align_div.offsetWidth;
    //     align_w += 1;
    //     YAHOO.util.Dom.setStyle(align_div, "width", align_w + "px");
    // }
    // END DEBUG
    //#############################################################################
    var a_x_y = findPosBotLeft( align_div );
    var className = popup_border_class + " popup_div";
    popup_div.className      = className;
    popup_div.style.borderWidth = '1px 1px 1px 1px';
    popup_div.style.borderTopStyle = 'dashed';
    popup_div.style.borderTopColor = '#AAA'; // grey
    popup_div.innerHTML      = article_content[entry_id]; // Using global article_content
    popup_div.style.position = "absolute";
    popup_div.style.left     = (a_x_y[0]+20)+"px";
    popup_div.style.top      = (a_x_y[1]-1)+"px";
    popup_div.style.display  = "block";
} // END function show_popup

function show_storybox_story( category_name, popup_border_class, entry_id )
{
    // alert( "show_storybox_story:\n" +
    // "category_name == " + category_name + "\n" +
    // "popup_border_class == " + popup_border_class + "\n" +
    // "entry_id == " + entry_id + "\n" );
    populate_storybox_story( category_name, popup_border_class, entry_id );
} // END function show_storybox_story

function populate_storybox_story( category_name, popup_border_class, entry_id )
{
    var storybox_name = 'hn-storybox-' + category_name;
    // alert( "populate_storybox_story:\n" +
    // "storybox_name == " + storybox_name + "\n" +
    // "popup_border_class == " + popup_border_class + "\n" +
    // "entry_id == " + entry_id + "\n" +
    // "innerHTML == " + article_content[entry_id] + "\n" );
    var storybox = YAHOO.util.Dom.get( storybox_name );
    storybox.className      = 'yui-u hn-storybox ' + popup_border_class;
    storybox.innerHTML      = article_content[entry_id]; // Using global article_content
} // END function populate_storybox_story


function hide_popup( align_id, align_mouseout_class, entry_id )
{
    // 1px-high div under each headline. This to look like the bottom border of
    // the headline. With the popup_div positioned at the bottom-1px of that
    // div, the headline mouseout happens as now, but on popup_div being hidden
    // the mouse is now over the 1px-high div and no mouseover is triggered.
    // Phew.
    popup_div.style.display="none";
    // Here's the 'hide spacer' code.
    var align_div = document.getElementById( align_id );
    if( align_div )
    {
        align_div.className = align_mouseout_class;
    }
    var vert_spacer_id = "vert-spacer-"  + entry_id;
    var vert_spacer_div = document.getElementById( vert_spacer_id );
    if( vert_spacer_div )
    {
        // YAHOO.util.Dom.setStyle(vert_spacer_id, "display", "none");
        vert_spacer_div.style.display="none";
    } 
} // END function hide_popup( align_id, align_mouseout_class )