var imageNavIcon = '○';
var imageNavIconSelected = '●';

var sections = {
  print: {
    position: 0,
    items: [
      { name: 'shedd aquarium',
        description: [
          'Shedd Aquarium Member Guide'
        , 'Photographs by <a href="http://www.brennawelsh.com/" target="_blank">Brenna Hernandez</a>'
        ],
        images: [
          { src: 'SheddMemberGuide_cvr.jpg', width: 282, height: 366 }
        , { src: 'SheddMemberGuide1.jpg', width: 565, height: 366 }
        , { src: 'SheddMemberGuide2.jpg', width: 565, height: 366 }
        , { src: 'SheddMemberGuide3.jpg', width: 565, height: 366 }
        ]
      },
      { name: 'tdi',
        description: [
          'TDI Annual Report'
        ],
        images: [
          { src: 'TDI_cvr.jpg', width: 300, height: 378 }
        , { src: 'TDI_int2.jpg', width: 600, height: 380 }
        ]
      }
    , { name: 'united airlines',
        description: [
          'United Airlines Destination Posters'
        ],
        images: [
          { src: 'Beijing.jpg', width: 226, height: 288 }
        , { src: 'Delhi.jpg', width: 226, height: 288 }
        , { src: 'San Francisco.jpg', width: 226, height: 288 }
        , { src: 'Seoul.jpg', width: 226, height: 288 }
        , { src: 'Sydney.jpg', width: 226, height: 288 }
        ]
      }
    , { name: 'wedding',
        images: [
          {src: 'weddinginvite.jpg', width: 300, height: 420, description: ['Wedding Invitation System', 'Invitation Card']}
        , {src: 'weddingRSVP.jpg', width: 300, height: 212, description: ['Wedding Invitation System', 'RSVP Postcard']}
        , {src: 'weddingthankyou.png', width: 300, height: 219, description: ['Wedding Invitation System', 'Thank You Card']}
        , {src: 'weddinglogo.jpg', width: 200, height: 210, border: 0, description: ['Wedding Invitation System', 'Wedding Icon']}
        ]
      }
    , { name: 'baby shower',
        description: [
          'Baby Shower Invitation'
        ],
        images: [
          { src: 'shower.jpg', width: 300, height: 420, border: 0 }
        , { src: 'ShowerTwinsIcon.jpg', width: 175, height: 155, border: 0, description: ['Baby Shower Illustration']}
        ]
      }
    ]
  },
  books: {
    position: 1,
    items: [
      { name: 'ellis island',
        description: [
          'The Illustrated Encyclopedia of Ellis Island'
        , 'jacket and interior design'
        , 'Fall River Press'
        ],
        images: [
          { src: 'EllisJKT.jpg', width: 300, height: 281}
        , { src: 'EllisInt1.jpg', width: 600, height: 280}
        , { src: 'EllisInt2.jpg', width: 600, height: 280}
        , { src: 'EllisInt3.jpg', width: 600, height: 280}
        , { src: 'EllisInt4.jpg', width: 600, height: 280}
        ]
      }
    , { name: 'library of wonder',
        description: [
          'Library of Wonder Series'
        , 'jacket design'
        , 'illustration by Thomas Yeates, Nate Pride'
        , 'Fall River Press'
        ],
        images: [
          { src: 'Burroughs_JKT.jpg', width: 300, height: 430 }
        , { src: 'Verne_JKT.jpg', width: 300, height: 429 }
        ]
      }
    , { name: '101 things',
        description: [
          '101 Things Every Kid Should Do'
        , 'jacket design'
        , 'Source Books, Inc.'
        ],
        images: [
          { src: 'ThingsEveryKid_JKT.jpg', width: 300, height: 346}
        ]
      }
    , { name: 'stolen village',
        description: [
          'The Stolen Village'
        , 'jacket design'
        , 'Fall River Press'
        ],
        images: [
          { src: '_stolen_village_JKT.jpg', width: 300, height: 450}
        ]
      }
    , { name: 'the 60s',
        description: [
          'Book of Days: \'60s'
        , 'interior design'
        , 'Metro Books'
        ],
        images: [
          { src: 'BOD_int1.jpg', width: 600, height: 297 }
        , { src: 'BOD_int2.jpg', width: 600, height: 297 }
        , { src: 'BOD_int3.jpg', width: 600, height: 297 }
        , { src: 'BOD_int4.jpg', width: 600, height: 297 }
        ]
      }
    , { name: 'voodoo',
        description: [
          'Voodoo: Strange and Fascinating Tales and Lore'
        , 'jacket and interior design'
        , 'Fall River Press'
        ],
        images: [
          { src: 'VoodooJKT.jpg', width: 300, height: 457 }
        ]
      }
    , { name: 'wild wild west',
        description: [
          'The Wild Wild West: Thrilling Tales by Great Authors'
        , 'jacket and interior design'
        , 'Fall River Press'
        ],
        images: [
          { src: 'WildWest_jkt.jpg', width: 300, height: 389 }
        , { src: 'WW_int1.jpg', width: 600, height: 386 }
        , { src: 'WW_int2.jpg', width: 600, height: 386 }
        , { src: 'WW_int3.jpg', width: 600, height: 386 }
        ]
      }
    , { name: 'will rogers',
        description: [
          'The Wit & Wisdom of Will Rogers'
        , 'jacket and interior design'
        , 'Metro Books'
        ],
        images: [
          { src: 'WWWR_JKT.jpg', width: 300, height: 360 }
        , { src: 'WillRogers_int1.jpg', width: 600, height: 356 }
        , { src: 'WillRogers_int2.jpg', width: 600, height: 356 }
        ]
      } 
    , { name: 'zen dog',
        description: [
          'Zen Dog: Music & Massage for a Stress-Free Pet'
        , 'kit design, including cover and interior design of instructional book, CD cover and packaging'
        , 'illustrations by William Cypser'
        , 'Metro Books'
        ],
        images: [
          { src: 'ZenDogJKT.jpg', width: 300, height: 450 }
        , { src: 'ZenDog_int1.jpg', width: 600, height: 450 }
        , { src: 'ZenDog_int2.jpg', width: 600, height: 450 }
        , { src: 'ZenDog_int3.jpg', width: 600, height: 450 }
        , { src: 'ZenDog_int5.jpg', width: 600, height: 450 }
        ]
      }
    ]
  },
  projects: {
    position: 2,
  },
  about: {
    position: 3,
  }
}

var currentNav = null;
var currentSubNav = null;

function normalize(name) {
  return name.replace(/\s/g, '_');
}

function denormalize(name) {
  return name.replace(/_/g, ' ');
}

function preloadImages(items){
  var cache = [];
  $.each(items, function(i, items) {
    var images = items.images;
    if (images) {
      $.each(images, function(j, image) {
        var cacheImage = document.createElement('img');
        cacheImage.src = 'images/' + image.src;
        cache.push(cacheImage);
      });
    }
  });
}

function getItem(hash) {
  var section = sections[hash[0]];
  if (!section.items || !hash[1]) {
    return null;
  }
  var items = section.items;
  var retItem = null;
  $.each(items, function(i, item) {
    if (item.name == denormalize(hash[1])) {
      retItem = item;
      return false;
    }
  });
  return retItem;
}

function getSection(hash) {
  var thisSection = [];
  hash[0] = hash[0] || 'about';
  hash[1] = hash[1] || (sections[hash[0]].items ? sections[hash[0]].items[0].name : null);
  thisSection[0] = hash[0];
  thisSection[1] = getItem(hash);
  return thisSection;
}

function updateDescription(lines) {
  if (lines && lines.length > 0) {
    var html = '';
    for (var i = 0; i < lines.length; i++) {
      if (i == 0) {
        html += '<span class="portfolio_title">';
      }
      html += lines[i];
      if (i == 0) {
        html += '</span>';
      }
      html += '<br>';
    }
    $('#portfolio_description').empty().html(html);
  }
}

function fadeImage(image, defaultDescription) {
  $('#portfolio_image').fadeOut('fast', function() {
    var img = $('#portfolio_image');
    if (image.width) {
      img.attr('width', image.width)
    } else {
      img.removeAttr('width');
    }
    if (image.height) {
      img.attr('height', image.height);
    } else {
      img.removeAttr('height');
    }
    if (image.alt) {
      img.attr('alt', image.alt);
      img.attr('title', image.alt);
    } else {
      img.removeAttr('alt');
      img.removeAttr('title');
    }
    if (image.border === 0) {
      img.removeClass('portfolio_image').addClass('portfolio_image_none');
    } else {
      img.removeClass('portfolio_image_none').addClass('portfolio_image');
    }
    img.attr('src', 'images/' + image.src);
    updateDescription(image.description || defaultDescription);
    img.fadeIn('fast');
  });
}

function loadportfolio(thisNav, thisSubNav) {
  var images = thisSubNav.images;
  $('#portfolio_description').empty();
  $('#portfolio_navigation').empty();
  for (var i = 0; i < images.length; i++) {
    var image = images[i];
    var html = (i + 1) + '&nbsp;&nbsp;&nbsp;';
    var a = $('<a>');
    if (i == 0) {
      fadeImage(image, thisSubNav.description);
      if (images.length == 1) {
        // If there is only one image, hide the button.
        // But hide it by making it white, so that you can't see it, but its
        // still there for dimensions.
        // Note we'll have to update this if the page background changes.
        a.css('color', '#fff');
      } else {
        // Otherwise, there are other images, so mark this nav icon as selected.
        a.addClass('selected');
      }
    }
    a.html(html).attr('href', image.src).click((function(image) {
      return function(){
        fadeImage(image, thisSubNav.description);
        $('#portfolio_navigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
      }
    })(image));
    $('#portfolio_navigation').append(a);
  }
}

function loadbooks(thisNav, thisSubNav) {
  loadportfolio(thisNav, thisSubNav);
}

function loadprint(thisNav, thisSubNav) {
  loadportfolio(thisNav, thisSubNav);
}

function showNav(navToShow, navToHide) {
  if (navToHide == null) {
     $('#' + getSubNavId(navToShow)).show();
     return;
  }
  if (navToShow != navToHide) {
    var subNavToHide = $('#' + getSubNavId(navToHide));
    if (subNavToHide.length == 0) {
     $('#' + getSubNavId(navToShow)).slideDown('fast');
     return;
    }
    var subNavToShow = $('#' + getSubNavId(navToShow));
    if (sections[navToShow].position > sections[navToHide].position) {
      subNavToHide.slideUp('fast', function() {
        subNavToShow.show();
      });
    } else {
      subNavToShow.slideDown('fast', function() {
        subNavToHide.hide();
      });
    }
  }
}

function loadSection(section) {
  var thisNav = section[0];
  var thisSubNav = section[1];
  if (currentNav) {
    $('#link_' + currentNav).removeClass('selected');
  }
  $('#link_' + thisNav).addClass('selected');

  showNav(thisNav, currentNav);

  if (currentSubNav) {
    $('#' + getSubNavItemId(currentNav, currentSubNav.name) + '_link').removeClass('selected');
  }
  if (thisSubNav) {
    $('#' + getSubNavItemId(thisNav, thisSubNav.name) + '_link').addClass('selected');
  }

  if (window['load' + thisNav]) {
    window['load' + thisNav].call(null, thisNav, thisSubNav);
  }

  $('#' + getContentId(currentNav)).hide();
  $('#' + getContentId(thisNav)).show();

  // Update the Nav link with the new location so that we remember it across
  // clicks.
  var linkHref = getLink(thisNav, thisSubNav);
  $('#' + getLinkId(thisNav)).attr('href', linkHref).attr('rel', 'address:' + linkHref);

  currentNav = thisNav;
  currentSubNav = thisSubNav;
}

$.address.change(function(event) {
  var section = getSection(event.pathNames);
  loadSection(section);
});

function getContentId(name) {
  name = name == 'print' ? 'books' : name;
  return 'content_' + name;
}

function getLinkId(name) {
  return 'link_' + name;
}

function getSubNavId(name) {
  return 'subnav_' + name;
}

function getSubNavItemId(name, subname) {
  return getSubNavId(name) + '_item_' + normalize(subname);
}

function getLink(name, item) {
  var link = '#/' + name;
  if (item) {
    link += '/' + normalize(item.name);
  }
  return link;
}

function getSubNav(name, items) {
  if (!items) {
    return null;
  }

  var subNavId = getSubNavId(name);
  var ul = $('<ul>').attr('id', subNavId).addClass('subnav');
  $.each(items, function(i, item) {
    var itemName = item.name;
    var normalizedItemName = normalize(itemName);
    var linkHref = getLink(name, item);
    var subNavItemId = subNavId + '_item_' + normalizedItemName;
    var li = $('<li>').attr('id', subNavItemId);
    var a = $('<a>').attr('id', subNavItemId + '_link').text(itemName);
    a.attr('href', linkHref).attr('rel', 'address:' + linkHref);
    ul.append(li.append(a));
  });
  return ul
}

function initializeNav(name, value) {
  
  var navLi = $('<li>').attr('id', name);

  var navLink = $('<a>').attr('id', getLinkId(name)).attr('href', '#' + name);
  navLink.attr('rel', 'address:/' + name).text(name);
  
  navLi.append(navLink);

  var subnav = getSubNav(name, value.items); 
  if (subnav) {
    navLi.append(subnav);
  }

  $('#navlist').append(navLi);
}

function goHome() {
 $.address.value('about');
}

$(document).ready(function() {
  $.each(sections, function(name, value) {
      initializeNav(name, value);
      setTimeout(function() {
        preloadImages(sections.books.items);
        preloadImages(sections.print.items);
      }, 1);
  });
});