///////////////////////////////////////////////////////////////////////////////
// thumb_selector.js
//
// This file contains convenience functions for generating the common
// thumbnail selector box on all pages that need it, from a configured
// set of thumb selector specifications.
//
// Call generate_thumb_selector() from the HTML page to generate the HTML
// code for the thumbnail selector into the page.
//
// The configuration of the set of thumbnail selectors to generate can
// be configured in the "Configuration" section below.
///////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////
// Configuration
///////////////////////////////////////////////////////////////////////////////

// The CSS class of the thumb selector DIVs
var selector_class    = 'thumbSelector';

// The additive CSS class of the thumb selector DIVs when they are in the
// 'on' state.
var selector_class_on = 'thumbSelectorOn';

// The id of the thumb selector text label DIV that is used to display
// the text of a thumb selector when it's moused-over.
var thumb_text_label = 'thumbLabel';

// Configure the set of thumb selectors to render. Each thumb selector
// is specified in the list below between the { and } with the properties
// of the thumb selector. Properties include:
//
//   image:'xxx'  - the URL to the jpeg thumbnail image to display for
//                  this thumb selector
//
//   link:'xxx' - the URL to link to when the thumb selector is clicked
//
//   text:'xxx' - the text to display in the thumb selector label
//                when this thumb selector is moused-over
//
var thumb_spec = new Array(
    {
      image:'images/thumbnail-images/thumb-umu001.png',
      link:'project-umu001.html',
      text:'<b>The Arts Brewery</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-umu002.png',
      link:'project-umu002.html',
      text:'<b>Armory Retail Center</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-umu003.png',
      link:'project-umu003.html',
      text:'<b>4th Ave Pacific Industrial</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-umu004.png',
      link:'project-umu004.html',
      text:'<b>1st & Lander Development</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-hr001.png',
      link:'project-hr001.html',
      text:'<b>Marriott Alaska</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-hr002.png',
      link:'project-hr002.html',
      text:'<b>Silver Cloud Stadium</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-hr003.png',
      link:'project-hr003.html',
      text:'<b>Silver Cloud Broadway</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-hr004.png',
      link:'project-hr004.html',
      text:'<b>Hyatt Hotel & Towers Denny Way</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-hr005.png',
      link:'project-hr005.html',
      text:'<b>Northgate Marriott</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-hr006.png',
      link:'project-hr006.html',
      text:'<b>Angle Lake Development</b><br/>Seatac, WA '
    },
    {
      image:'images/thumbnail-images/thumb-c001.png',
      link:'project-c001.html',
      text:'<b>Ohio Ave Development</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-c002.png',
      link:'project-c002.html',
      text:'<b>The Olympic Reprographics Building</b><br/>Seattle, WA'
    },
    {
      image:'images/thumbnail-images/thumb-c003.png',
      link:'project-c003.html',
      text:'<b>Woodinville Warehouse</b><br/>Woodinville, WA'
    }

);


///////////////////////////////////////////////////////////////////////////////
// Generator Functions
///////////////////////////////////////////////////////////////////////////////

// Function to generate the HTML for the thumb selector based on the
// configuration above.
//
// Parameters:
//
//   parent_id - the id of the DIV that the HTML for the thumb selector
//               is to be written to.
//
//   selected_index - the zero-based index of the thumb selector that
//                    is to be rendered as the currently-selected
//                    thumb selector. If 'null' is passed for this
//                    parameter, no thumb selector is selected.
//
function generate_thumb_selector(parent_id, selected_index) {
    var parent = $(parent_id);
    var i=0;
    for (i=0; i<thumb_spec.length; i++) {
        var div_class   = selector_class;
        var is_selected = false;
        if (i == selected_index) {
            div_class += " " + selector_class_on;
            is_selected = true;
        }
        var div_code =
            "<div id=\"thumb_" + i + "\" "       +
            "class=\"" + div_class + "\" ";

        if (!is_selected) {
            div_code += 
                "onmouseover=\"mouseover_thumb_selector(this);\" " +
                "onmouseout=\"mouseout_thumb_selector(this);\" "   +
                "onclick=\"click_thumb_selector(this);\"";
        }

        div_code += 
            ">"                                                               +
            "<img class=\"thumbImage\" src=\"" + thumb_spec[i].image + "\"/>" +
            "</div>";
        parent.innerHTML += div_code;
    }
}


///////////////////////////////////////////////////////////////////////////////
// Mouse Event Callbacks
///////////////////////////////////////////////////////////////////////////////

// Callback function for the 'onmouseover' callback of a thumb selector DIV
// when the mouse enters the DIV.
//
// Parameters:
//
//   elem - the DIV element of the thumb selector that this event is for
//
function mouseover_thumb_selector(elem) {
    Element.addClassName(elem, selector_class_on);
    $(thumb_text_label).innerHTML = thumb_spec[elem.id.substring(6)].text;
}

// Callback function for the 'onmouseout' callback of a thumb selector DIV
// when the mouse leaves the DIV.
//
// Parameters:
//
//   elem - the DIV element of the thumb selector that this event is for
//
function mouseout_thumb_selector(elem) {
    Element.removeClassName(elem, selector_class_on);
    $(thumb_text_label).innerHTML = '';
}

// Callback function for the 'onclick' callback of a thumb selector DIV
// when the mouse is clicked in the DIV.
//
// Parameters:
//
//   elem - the DIV element of the thumb selector that this event is for
//
function click_thumb_selector(elem) {
    window.location.href = thumb_spec[elem.id.substring(6)].link;
}