/********************************************************************
 * Code for feature.html page.
 * Manages rollovers, left menu, center work image, and right
 * project text (with links to different work images).
 * [tbrown 31-Dec-2004]
 * ******************************************************************/
if( document.images ) {

    siteRoot = "http://fancypantsdesign.com/"

    // precache banner images for quicker switching
    var bannerImages = new Object();
    bannerImages['logo'] = new Image( 143,  32 ); bannerImages['logo'].src = siteRoot + "images/fpd_header_logo.jpg";
    bannerImages['tag'] = new Image( 576,  32 ); bannerImages['tag'].src = siteRoot + "images/fpd_header_tag_line.jpg";
 
    
    // rollover images (except left menu; that's handled seperately)
    var rollovers = new Object();
    rollovers['titlecontact_off'] = new Image( 452,  134); rollovers['titlecontact_off'].src = siteRoot + "images/titlecontact_off.jpg";
    rollovers['titlecontact_on'] = new Image( 452,  134 ); rollovers['titlecontact_on'].src = siteRoot + "images/titlecontact_on.jpg";
    rollovers['about_off'] = new Image( 44,  32 ); rollovers['about_off'].src = siteRoot + "images/about_off.jpg";
    rollovers['about_on'] = new Image( 44,  32 ); rollovers['about_on'].src = siteRoot + "images/about_on.jpg";
    rollovers['work_off'] = new Image( 41,  32 ); rollovers['work_off'].src = siteRoot + "images/work_off.jpg";
    rollovers['work_on'] = new Image( 41,  32 ); rollovers['work_on'].src = siteRoot + "images/work_on.jpg";
    rollovers['contact_off'] = new Image( 65,  32 ); rollovers['contact_off'].src = siteRoot + "images/contact_off.jpg";
    rollovers['contact_on'] = new Image( 65,  32 ); rollovers['contact_on'].src = siteRoot + "images/contact_on.jpg";
    
    // display status bar message (currently unused)
    function dm( msgStr ) {
        document.returnValue = false;
        if( document.images ) { 
            window.status = msgStr;
            document.returnValue = true;
        }
    }
    
    // swap rollover images
    function di( id, name ) {
        if( document.images ) {
            document.images[id].src = rollovers[name].src;
        }
    }
    
    /**********************************
     * MENU CODE [tbrown 28-Dec-2004] *
     **********************************/

    var openSection = null;     // which section (print,identity,illustration, or interactive) is currently open (if any)
    var selectedProj = null;    // which project (in a section) is currently selected (if any)
    var selectedWork = null;    // which work (in a project) is currently selected (if any)
    
    // precache section images
    var sectionImages = new Object();
    sectionImages['print'] = new Object();
    sectionImages['print']['open'] = new Image(); sectionImages['print']['open'].src = siteRoot + 'images/print_open.gif';
    sectionImages['print']['closed'] = new Image(); sectionImages['print']['closed'].src = siteRoot + 'images/print_closed.gif';
    sectionImages['print']['rollover'] = new Image(); sectionImages['print']['rollover'].src = siteRoot + 'images/print_rollover.gif';
    sectionImages['ident'] = new Object();
    sectionImages['ident']['open'] = new Image(); sectionImages['ident']['open'].src = siteRoot + 'images/ident_open.gif';
    sectionImages['ident']['closed'] = new Image(); sectionImages['ident']['closed'].src = siteRoot + 'images/ident_closed.gif';
    sectionImages['ident']['rollover'] = new Image(); sectionImages['ident']['rollover'].src = siteRoot + 'images/ident_rollover.gif';
    sectionImages['ill'] = new Object();
    sectionImages['ill']['open'] = new Image(); sectionImages['ill']['open'].src = siteRoot + 'images/ill_open.gif';
    sectionImages['ill']['closed'] = new Image(); sectionImages['ill']['closed'].src = siteRoot + 'images/ill_closed.gif';
    sectionImages['ill']['rollover'] = new Image(); sectionImages['ill']['rollover'].src = siteRoot + 'images/ill_rollover.gif';
    sectionImages['int'] = new Object();
    sectionImages['int']['open'] = new Image(); sectionImages['int']['open'].src = siteRoot + 'images/int_open.gif';
    sectionImages['int']['closed'] = new Image(); sectionImages['int']['closed'].src = siteRoot + 'images/int_closed.gif';
    sectionImages['int']['rollover'] = new Image(); sectionImages['int']['rollover'].src = siteRoot + 'images/int_rollover.gif';

    // section rollover handler
    function sectionMouseOver( section ) {
        if( section != openSection )
            document.images[section].src = sectionImages[section]['rollover'].src;
    }
    
    // section un-rollover (rollout?) handler
    function sectionMouseOut( section ) {
        if( section != openSection )
            document.images[section].src = sectionImages[section]['closed'].src;
    }
    
    // section has been clicked, so open it if it's not already
    function sectionClicked( section ) {
        if( section == openSection ) return false;  // nothing to do
        if( openSection ) { // if there's a section already open, close it
            document.getElementById( openSection + '-topBorder' ).style.display = "none";
            document.getElementById( openSection + '-projects' ).style.display = "none";
			document.getElementById( openSection + '-centerText' ).style.display = "none";
            document.images[openSection].src = sectionImages[openSection]['closed'].src;
        }
        document.getElementById( section + '-topBorder' ).style.display = "block";
        document.getElementById( section + '-projects' ).style.display = "block";
		document.getElementById( section + '-centerText' ).style.display = "block";
        var sectionImage = new Image(); sectionImage.src = siteRoot + 'projects/' + section + '.jpg';
        document.images['projImage'].src = sectionImage.src;   // display the section image for this section
        document.images[section].src = sectionImages[section]['open'].src;
        openSection = section;  // set the new open section
        clearSelectedProj();    // now no project is selected
        return false;
    
   }
   
   // the mouse has been moved onto a project
    function projMouseOver( proj ) {
        document.getElementById( proj + '-div' ).style.fontWeight = "bold";
    }
    
    // the mouse has been moved off of a project
    function projMouseOut( proj ) {
        // the selected project (if any) stays bold, so if we mouse over that, we don't want to un-bold it
        if( proj != selectedProj ) document.getElementById( proj + '-div' ).style.fontWeight = "normal";
    }
    
    
    // the selected project has a charm image (images/charm_on.gif) next to it; all the others
    // have a blank charm image (images/charm_off.gif) next to them
    var charmImages = new Object();
    charmImages['off'] = new Image; charmImages['off'].src = siteRoot + 'images/charm_off.gif';
    charmImages['on'] = new Image; charmImages['on'].src = siteRoot + 'images/charm_on.gif';
    
    // clears the selected project; this hides the project text in the right pane and clears the project image
    function clearSelectedProj() {
        if( selectedProj  ) {
            if( document.images[selectedProj] ) document.images[selectedProj].src = charmImages['off'].src;
            if( selectedProj != 'top' ) { // the 'top' project doesn't have a vsible text label
                document.getElementById( selectedProj + '-div' ).style.fontWeight = "normal";
            }
            document.getElementById( selectedProj + '-text' ).style.display = "none";
            // TBD: clear project image
        }
        selectedProj = null;
    }
    
    function clearSelectedWork() {
        // de-highlight the old selected work
        if( selectedWork ) {
            var oldSelectedElt = document.getElementById( selectedProj + '-' + selectedWork );
            if( oldSelectedElt ) oldSelectedElt.style.color = '572700';
        }
        // currently, we don't do anything with the work image; just leave it there
    }
    
    // a specific work has been loaded (either the user clicked on a work, or the first work was automatically
    // loaded when a project was selected
    function setWork( work ) {
        // clear anything currently selected
        var elt = document.getElementById( openSection + '-centerText' );
        if( elt != null ) elt.style.display = "none";
        clearSelectedWork();
        // highlight the new selected work
        var selectedElt = document.getElementById( selectedProj + '-' + work );
        if( selectedElt ) selectedElt.style.color = 'F37754';
        // display the work image
        var workImage = new Image(); workImage.src = siteRoot + 'projects/' + selectedProj + '-' + work + '.jpg';
        document.images['projImage'].src = workImage.src;
        selectedWork = work;
    }
    
    // a project has been clicked on; load the project description image and display the project text in the right pane
    function projClicked( proj ) {
        clearSelectedWork();    // de-select any existing work
        clearSelectedProj();    // hide any existing selected project
        document.images[proj].src = charmImages['on'].src;
        document.getElementById( proj + '-text' ).style.display = "block";  // show project text
        document.getElementById( proj + '-div' ).style.fontWeight = "bold"; // bold project name
        selectedProj = proj;    // set new selected project
        setWork( '1' );
        return false;
    }
    
    // a specific work within a project has been clicked; load the work image in the center pane
    function workClicked( work ) {
        setWork( work );
        return false;
    }
}