var MAX_IMG_PER_PRODUCT = 10;
var active_client_name;
var active_product_name;

function displayNextImage()
  {
    var active_product = getActiveProduct();
    var current_id = active_product.active_image;
    var product_images;

    if (active_product.images)
      {
        product_images = active_product.images.length;
      }
    else
      {
        product_images = 0;
      }

    if (current_id < product_images-1)
      {
        setActiveImage(current_id+1);
      }
    else
      {
        setActiveProduct
          (active_product.next_client,active_product.next_product);
      }
  }

function displayImage()
  {
    var id = this.TPDimg_id;

    setActiveImage(id);
  }

function displayProduct()
  {
    var client = this.TPDclient;
    var product = this.TPDproduct;

    setActiveProduct(client,product);
  }

function getActiveProduct()
  { 
    return TPDportfolio[active_client_name].products[active_product_name];
  }

function init()
  {
    // build gallery navigation
    var client_url;
    var clientname_elem;
    var first_client = true;
    var last_client;
    var last_product;
    var product;
    var productlink_elem;
    var nav_container = document.getElementById("nav_portfolio");
    for (var client in TPDportfolio)
      {
        // logic changed on spec change...
        // easy hack to fix navigation spacing
        if (!first_client)
          {
            nav_container.appendChild(document.createElement("BR"));
          }
        else
          {
            first_client = false;
          }

        // set default client
        if (!active_client_name)
          {
            active_client_name = client;
          }
        // draw client-name headers in left-side navigation area
        clientname_elem = document.createElement("A");
        clientname_elem.className = "client_name";
        if (TPDportfolio[client].url)
          {
            clientname_elem.onclick = openClient;
            clientname_elem.TPDurl = TPDportfolio[client].url;
          }
        else
          {
            clientname_elem.style.cursor = "default";
          }
        clientname_elem.innerHTML = client;
        nav_container.appendChild(clientname_elem);
        // draw product links under each client name
        for (product in TPDportfolio[client].products)
          {
            // set default product
            if (!active_product_name)
              {
                active_product_name = product;
              }
            productlink_elem = document.createElement("A");
            productlink_elem.className = LINK_OFF_CLASSNAME;
            productlink_elem.innerHTML = product;
            productlink_elem.onclick = displayProduct;
            productlink_elem.TPDclient = client;
            productlink_elem.TPDproduct = product;
            nav_container.appendChild(productlink_elem);
            TPDportfolio[client].products[product].link_elem = 
              productlink_elem;

            // store reference to next product in series so we can hook
            // up the next button
            if (last_product)
              {
                if (TPDportfolio[client].products[last_product])
                  {
                    TPDportfolio[client].products[last_product].next_product =
                      product;
                    TPDportfolio[client].products[last_product].next_client
                      = client;
                  }
                else if (last_client)
                  {
                    TPDportfolio[last_client].products[last_product].next_product = product;
                    TPDportfolio[last_client].products[last_product].next_client = client;
                  }
              }
            last_product = product;
          }

        last_client = client;
      }

    // store next product reference in last product
    TPDportfolio[client].products[product].next_client = active_client_name;    
    TPDportfolio[client].products[product].next_product = active_product_name;

    // draw image gallery links
    var link_elem;
    var link_container = document.getElementById("nav_link_container");
    for (var i=0;i<MAX_IMG_PER_PRODUCT-1;i++)
      {
        link_elem = document.createElement("A");
        link_elem.className = LINK_OFF_CLASSNAME;
        link_elem.id = IMG_LINK_PREFIX + i;
        link_elem.innerHTML = i + 1;
        link_elem.TPDimg_id = i;
        link_container.appendChild(link_elem);
      }
    var next_elem = document.createElement("A");
    next_elem.className = LINK_OFF_CLASSNAME;
    next_elem.id = IMG_LINK_PREFIX + "next";
    next_elem.innerHTML = LINK_TEXT_NEXT;
    next_elem.onclick = displayNextImage;
    next_elem.style.display = "inline";
    link_container.appendChild(next_elem);
    
    // set default lit link, pic, and description
    setActiveProduct(active_client_name,active_product_name);
  }

function openClient()
  {
    openWindow(this.TPDurl);
  }

function setActiveImage(id)
  {
    var active_product = getActiveProduct();
    var gallery_elem = document.getElementById("gallery_img");

    if (active_product.images)
      {
        gallery_elem.src = DIR_IMG + active_product.images[id];

        for (var i=0;i<active_product.images.length;i++)
          {
            img_link = document.getElementById(IMG_LINK_PREFIX + i);
            img_link.className = LINK_OFF_CLASSNAME;
            img_link.onclick = displayImage;
            img_link.style.display = "inline";
          }
        var active_img_link = document.getElementById(IMG_LINK_PREFIX + id);
        active_img_link.className = LINK_ON_CLASSNAME;
        active_img_link.onclick = null;
      }
    else
      {
        // catch error on image not available
        gallery_elem.src = NA_IMG;
      }

    var next_link = document.getElementById(IMG_LINK_PREFIX + "next");
    next_link.TPDactive_product = active_product;

    // store ref to active image
    active_product.active_image = id;
  }

function setActiveProduct(new_client,new_product)
  {
    // make currently-active product/client inactive
    var active_product = getActiveProduct();
    var old_link = active_product.link_elem;
    old_link.className = LINK_OFF_CLASSNAME;
    old_link.onclick = displayProduct;

    // hide all image gallery navigation links
    var img_link;
    if (active_product.images)
      {
        for (var i=0;i<active_product.images.length;i++)
          {
            img_link = document.getElementById(IMG_LINK_PREFIX + i);
            img_link.onclick = null;
            img_link.style.display = "none";
          }
      }

    // activate new left-hand link
    active_product = TPDportfolio[new_client].products[new_product];
    var new_link = active_product.link_elem;
    new_link.className = LINK_ON_CLASSNAME;
    new_link.onclick = null;
    active_client_name = new_client;
    active_product_name = new_product;

    // display first product image in set
    setActiveImage(0);

    // fill in title and description text
    document.getElementById("project_description").innerHTML =
      active_product.description || "";
    document.getElementById("project_name").innerHTML = 
      active_product.name_long || active_product_name;
    document.getElementById("project_other").innerHTML = 
      active_product.other || "";
  }