//
// selma_ac.js
// Page setup, misc. local routines, etc.
// Andy Clifton
// Jan. 2007
//

// TODO: 
//   Fix or remove the animating gallery pictures code.
//   Set this up so that if a .sidebox is the first thing in #content after 
//   #contentTop, then add this style
//
//     #content {
//       background-image: url("pics/menuCornerUR.png");
//       background-position: top right;
//       background-repeat: no-repeat;
//     }
//   

// Set everything up
function init()
{  
  // Setup the rotating images, but only if #titleImage has more than one child.
  // Note that the cycle plugin must be loaded on a page for this to work.
  if($("#titleImage *").length > 1)  
    $("#titleImage").cycle();
  
  // ----------------------------------
  // Add a decorative corner background to #content, if there is an initial 
  // .sidebox.
  var s = $("#content > *:nth-child(2)");
  if(s.hasClass("sidebox"))
  {
    // Add a margin-top to the sidebox
    s.css("margin-top", "12pt");
    
    // Add a tiny corner background to #content
    var c = $("#content");
    c.css("background-image", 'url("pics/menuCornerUR.png")');
    c.css("background-position", "top right");
    c.css("background-repeat", "no-repeat");
  }    
  
  // ----------------------------------
  // Highlight the "current" menu item. 
  //   * Within div@menu, find the li that contains an a with href=current page
  //   * Rewrite this from
  //       <li><a href=...>Item</a></li>
  //     to
  //       <li class="selected">Item<span class="UR">&#xFEFF;</span></li>

  // Find the path to the current page, relative to the page root.
  var page = window.location.pathname;
  page = page.substr(page.lastIndexOf("/")+1);

  // If we're at http://selmaarts.com, then the pagename is actually index.html.
  if(page == "" || page == "preview")
    page = "index.html"; 
  
  // This gives us the li we want.
  var current = $("#menu li:has(a[href='" + page + "'])");
  var item_title = $("a", current).text();

  // ...and do the replacement.
  current.replaceWith('<li class="selected">' + item_title +
                      '<span class="UR">&#xFEFF;</span></li>');
  
  // Do the rest of the setup when the document (and all images) is fully
  // loaded. TODO: Does this really make a difference?
  $(window).load(pageLoad);
}


  

// We have to wait until _everything_ is loaded before messing with the images
function pageLoad()
{
  // Setup the photo gallery (this won't do anything if we're not
  // on the photo gallery page). This adds the "sepia" versions of the images
  // as overlays, with the appropriate hover-fadeout animation.
  // We basically wrap each image in a span, with the background set to
  // the sepia version of the img. We then set the opacity of the img to 0,
  // and add the appropriate hover effect(s).
    
  // Turn off the border on A's containing imgs
  $("#photos a:has(img)").css("border-bottom", "none");
  
  //---  Photo gallery fanciness commented out for now ---
  /*
  // Returns the style string for the span tag, given the size and filename
  function makeStyle(w,h,name)
  {
    return "style='" +
              "width: "  + w + "px; " +
              "height: " + h + "px; " +
              "background: url(" +
                "photos/thumbs/sepia" + name.substr(20) +
              ");'";
  }
  
  $("#photos img").each(function() 
  {
    var src = $(this).attr("src");
    var w = this.clientWidth;
    var h = this.clientHeight;
    
    $(this).
      fadeOut(1).
      wrap("<div class='photo' " + makeStyle(w,h,src) + "></div>");
    });
  
  // Unfortunately we can't do the hover event processing on the img,
  // because the event doesn't fire if the opacity is zero! So we have
  // to look for hovers on the surrounding div, and then refer to the 
  // inner img.
  $("#photos .photo").hover(
    function() { $(this).children().fadeIn("normal"); },
    function() { $(this).children().fadeOut("normal"); });
  */
}

// Set the page-load init function.
$(document).ready(init);